[twisty] Toggle 2D hint facelets based on the existing prop.

See: #349 (comment)

Author: lgarron

src/cubing/puzzles/implementations/dynamic/3x3x3/3x3x3.kpuzzle.svg.ts

@@ -15,18 +15,19 @@ export const cube3x3x3SVG = `<?xml version="1.0" encoding="UTF-8"?>
     </g>
   </defs>
   <g id="puzzle" transform="translate(5,40) scale(40)">
-    <!-- Hints -->
-    <use data-copy-id="CORNERS-l0-o1" href="#sticker-thin-v" transform="translate(6.5,2.1)" style="fill: red"/>
-    <use data-copy-id="EDGES-l1-o1"   href="#sticker-thin-v" transform="translate(6.5,1.1)" style="fill: red"/>
-    <use data-copy-id="CORNERS-l1-o2" href="#sticker-thin-v" transform="translate(6.5,0.1)" style="fill: red"/>
-
-    <use data-copy-id="CORNERS-l2-o2" href="#sticker-thin-h" transform="translate(3.3,-0.6)" style="fill: #26f"/>
-    <use data-copy-id="EDGES-l2-o1"   href="#sticker-thin-h" transform="translate(4.3,-0.6)" style="fill: #26f"/>
-    <use data-copy-id="CORNERS-l1-o1" href="#sticker-thin-h" transform="translate(5.3,-0.6)" style="fill: #26f"/>
-
-    <use data-copy-id="CORNERS-l3-o2" href="#sticker-thin-v" transform="translate(2.6,2.1)" style="fill: orange"/>
-    <use data-copy-id="EDGES-l3-o1"   href="#sticker-thin-v" transform="translate(2.6,1.1)" style="fill: orange"/>
-    <use data-copy-id="CORNERS-l2-o1" href="#sticker-thin-v" transform="translate(2.6,0.1)" style="fill: orange"/>
+    <g class="hint-facelet">
+      <use data-copy-id="CORNERS-l0-o1" href="#sticker-thin-v" transform="translate(6.5,2.1)" style="fill: red"/>
+      <use data-copy-id="EDGES-l1-o1"   href="#sticker-thin-v" transform="translate(6.5,1.1)" style="fill: red"/>
+      <use data-copy-id="CORNERS-l1-o2" href="#sticker-thin-v" transform="translate(6.5,0.1)" style="fill: red"/>
+
+      <use data-copy-id="CORNERS-l2-o2" href="#sticker-thin-h" transform="translate(3.3,-0.6)" style="fill: #26f"/>
+      <use data-copy-id="EDGES-l2-o1"   href="#sticker-thin-h" transform="translate(4.3,-0.6)" style="fill: #26f"/>
+      <use data-copy-id="CORNERS-l1-o1" href="#sticker-thin-h" transform="translate(5.3,-0.6)" style="fill: #26f"/>
+
+      <use data-copy-id="CORNERS-l3-o2" href="#sticker-thin-v" transform="translate(2.6,2.1)" style="fill: orange"/>
+      <use data-copy-id="EDGES-l3-o1"   href="#sticker-thin-v" transform="translate(2.6,1.1)" style="fill: orange"/>
+      <use data-copy-id="CORNERS-l2-o1" href="#sticker-thin-v" transform="translate(2.6,0.1)" style="fill: orange"/>
+    </g>
 
     <!-- CORNERS -->
     <use id="CORNERS-l0-o0" href="#sticker" transform="translate(5.3,2.1)" style="fill: white"/>

src/cubing/twisty/model/props/puzzle/display/HintFaceletProp.ts

@@ -1,6 +1,6 @@
 import { SimpleTwistyPropSource } from "../../TwistyProp";
 
-// TODO: turn these maps into lists?
+// TODO: turn these maps into `Set`s?
 export const hintFaceletStyles = {
   floating: true, // default
   none: true,

src/cubing/twisty/views/2D/Twisty2DPuzzle.css.ts

@@ -34,5 +34,9 @@ svg {
   from { opacity: 0; }
   to { opacity: 1; }
 }
+
+.hint-facelets-none .hint-facelet {
+  display: none;
+}
 `,
 );

src/cubing/twisty/views/2D/Twisty2DPuzzle.ts

@@ -2,6 +2,10 @@ import type { KPuzzle } from "../../../kpuzzle";
 import type { ExperimentalStickeringMask } from "../../../puzzles/cubing-private";
 import type { PuzzleLoader } from "../../../puzzles/PuzzleLoader";
 import type { StickeringMask } from "../../../puzzles/stickerings/mask";
+import {
+  type HintFaceletStyleWithAuto,
+  hintFaceletStyles,
+} from "../../../twisty/model/props/puzzle/display/HintFaceletProp";
 import type { PuzzleID } from "../..";
 import {
   Direction,
@@ -11,6 +15,7 @@ import {
 import { RenderScheduler } from "../../controllers/RenderScheduler";
 import { FreshListenerManager } from "../../model/props/TwistyProp";
 import type { TwistyPlayerModel } from "../../model/TwistyPlayerModel";
+import { ClassListManager } from "../ClassListManager";
 import { ManagedCustomElement } from "../ManagedCustomElement";
 import { customElementsShim } from "../node-custom-element-shims";
 import { twisty2DSVGCSS } from "./Twisty2DPuzzle.css";
@@ -49,6 +54,13 @@ export class Twisty2DPuzzle
       },
     );
 
+    this.#freshListenerManager.addListener(
+      this.model!.twistySceneModel.hintFacelet,
+      (hintFacelet) => {
+        this.setHintFacelet(hintFacelet);
+      },
+    );
+
     this.#freshListenerManager.addListener(
       this.model!.legacyPosition,
       this.onPositionChange.bind(this),
@@ -125,6 +137,17 @@ export class Twisty2DPuzzle
     }
   }
 
+  private hintFaceletsClassListManager = new ClassListManager(
+    this,
+    "hint-facelets-",
+    Object.keys(hintFaceletStyles),
+  );
+  setHintFacelet(hintFacelet: HintFaceletStyleWithAuto) {
+    this.hintFaceletsClassListManager.setValue(
+      hintFacelet === "auto" ? "floating" : hintFacelet,
+    );
+  }
+
   private render(): void {
     /*...*/
   }