shuffle, start with pin

src/App.css

@@ -19,14 +19,14 @@
   color: var(--color-foreground);
   background-color: var(--color-background);
 
-  /* --group-blue: lch(78.8% 23.7 270.9);
-  --group-yellow: lch(74.83% 54.18 117.22);
-  --group-green: lch(89.36% 57.75 90.6);
+  /* --group-green: lch(74.83% 54.18 117.22);
+  --group-blue: lch(78.8% 23.7 270.9);
+  --group-yellow: lch(89.36% 57.75 90.6);
   --group-purple: lch(61.69% 41.01 319.57); */
-  --group-blue: lch(80% 23.7 270.9);
-  --group-yellow: lch(80% 54.18 117.22);
-  --group-green: lch(80% 57.75 90.6);
-  --group-purple: lch(80% 41.01 319.57);
+  --group-green: lch(74.83% 54.18 117.22);
+  --group-blue: lch(75% 23.7 270.9);
+  --group-yellow: lch(85% 57.75 90.6);
+  --group-purple: lch(65% 41.01 319.57);
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -45,8 +45,8 @@
     --foreground-hue: 0;
 
     --group-blue: lch(30% 23.7 270.9);
-    --group-yellow: lch(30% 54.18 117.22);
-    --group-green: lch(30% 57.75 90.6);
+    --group-green: lch(30% 54.18 117.22);
+    --group-yellow: lch(30% 57.75 90.6);
     --group-purple: lch(30% 41.01 319.57);
   }
 }
@@ -83,6 +83,7 @@
   gap: calc(1 * var(--unit));
 }
 .puzzle-item {
+  position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -93,6 +94,13 @@
   padding: 0;
   border-radius: calc(1 * var(--unit));
   background-color: var(--color-foreground-trace);
+  font-weight: 500;
+}
+.badge {
+  position: absolute;
+  top: 0;
+  left: 0;
+  filter: grayscale(100%);
 }
 .puzzle-item.is-selected {
   background-color: var(--color-foreground-faint);
@@ -112,11 +120,11 @@
   }
 
   &[data-level="1"] {
-    background-color: var(--group-blue);
+    background-color: var(--group-green);
   }
 
   &[data-level="2"] {
-    background-color: var(--group-green);
+    background-color: var(--group-blue);
   }
 
   &[data-level="3"] {
@@ -134,6 +142,12 @@
   margin-top: calc(1 * var(--unit));
   gap: calc(1 * var(--unit));
 }
+.puzzle-actions-secondary {
+  display: flex;
+  flex-direction: column;
+  gap: calc(1 * var(--unit));
+  min-width: calc(20 * var(--unit));
+}
 
 a {
   font-weight: 500;
@@ -156,7 +170,7 @@ button {
   color: var(--color-foreground);
   font-size: inherit;
   border: none;
-  padding: 0.5em 1.5em;
+  padding: 0.5em;
   border-radius: calc(1 * var(--unit, 0.5em));
 }
 button:disabled {

src/App.tsx

@@ -1,4 +1,4 @@
-import { For, createMemo, createSignal } from "solid-js";
+import { For } from "solid-js";
 import connections from "./assets/connections.json";
 import "./App.css";
 import { shuffleArray } from "./utils";
@@ -16,6 +16,7 @@ function fromIndex(index: number): [number, number] {
 function App() {
   const [store, setStore] = createStore({
     puzzleIndex: 0,
+    pinnedCount: 3,
     selected: [] as number[],
     solvedGroups: [] as Answer[],
     puzzle: shuffleArray(Array.from({ length: 16 }, (_, i) => i)),
@@ -34,6 +35,7 @@ function App() {
       answer: store.answers[groupIndex].members[memberIndex],
     };
   };
+
   const handleGuess = () => {
     const selectedAnswers = store.selected.map((x) => getFromPuzzle(x));
     const { level } = selectedAnswers[0];
@@ -43,25 +45,47 @@ function App() {
       alert("wrong");
       return;
     }
+    const selectedPinnedCount = store.selected.reduce(
+      (acc, cur) => acc + (cur < store.pinnedCount ? 1 : 0),
+      0
+    );
     setStore({
-      puzzle: store.puzzle.filter((x) => store.selected.every((s) => store.puzzle[s] !== x)),
+      pinnedCount: store.pinnedCount - selectedPinnedCount,
+      puzzle: store.puzzle.filter((x) =>
+        store.selected.every((s) => store.puzzle[s] !== x)
+      ),
       selected: [],
-    })
+    });
     const newSolvedGroup = store.answers.find((x) => x.level === level);
     if (newSolvedGroup != null) {
       setStore({
-        solvedGroups: [...store.solvedGroups, newSolvedGroup]
-      })
+        solvedGroups: [...store.solvedGroups, newSolvedGroup],
+      });
+    }
+    if (store.puzzle.length === 0) {
+      // completely solved!
     }
   };
-  // const handlePinUnpin = () => {
-  //   const sel = store.selected
-  //   if (sel.every(x => x <= pinnedCount())) {
-  //     // we are unpinning
-  //     return
-  //   }
-  //   // we are pinning
-  // }
+
+  const handleShuffle = () => {
+    const pinned = store.puzzle.slice(0, store.pinnedCount);
+    const toShuffle = store.puzzle.slice(store.pinnedCount);
+    setStore({
+      puzzle: [...pinned, ...shuffleArray(toShuffle)],
+    });
+  };
+
+  const handlePinUnpin = () => {
+    if (store.selected.every((x) => x <= store.pinnedCount)) {
+      // we are unpinning
+      setStore({
+        pinnedCount: store.pinnedCount - store.selected.length,
+        selected: [],
+      })
+      return;
+    }
+    // we are pinning
+  };
 
   return (
     <main class="container">
@@ -98,6 +122,7 @@ function App() {
                     }}
                   >
                     {getFromPuzzle(index).answer}
+                    {store.pinnedCount > index && <div class="badge">🔒</div>}
                   </button>
                 );
               })}
@@ -105,9 +130,16 @@ function App() {
           )}
         </For>
         <div class="puzzle-actions">
-          <button type="button" disabled={store.selected.length === 0}>
-            Pin
-          </button>
+          <div class="puzzle-actions-secondary">
+            <button type="button" disabled={store.selected.length === 0}>
+              {store.selected.length > 0 && store.selected.every((x) => x <= store.pinnedCount)
+                ? "Unpin"
+                : "Pin"}
+            </button>
+            <button type="button" on:click={handleShuffle}>
+              Shuffle
+            </button>
+          </div>
           <button
             id="submitButton"
             type="button"