use createStore

src/App.css

@@ -66,12 +66,12 @@
 }
 
 .puzzle {
-  --unit: 0.5rem;
+  --unit: min(0.5rem, 1.15vw);
   display: flex;
   flex-direction: column;
   gap: calc(1 * var(--unit));
   font-size: calc(3 * var(--unit));
-  font-weight: 600;
+  font-weight: 700;
   width: calc((20 * 4 + 3) * var(--unit));
   margin: 0 auto;
 }
@@ -105,13 +105,14 @@
   justify-content: center;
   align-items: center;
   border-radius: calc(1 * var(--unit));
+  font-weight: 500;
 
   &[data-level="0"] {
-    background-color: var(--group-blue);
+    background-color: var(--group-yellow);
   }
 
   &[data-level="1"] {
-    background-color: var(--group-yellow);
+    background-color: var(--group-blue);
   }
 
   &[data-level="2"] {
@@ -122,6 +123,12 @@
     background-color: var(--group-purple);
   }
 }
+.puzzle-group-name {
+  font-weight: 700;
+}
+.puzzle-group-members {
+  font-weight: 500;
+}
 .puzzle-actions {
   display: flex;
   margin-top: calc(1 * var(--unit));

src/App.tsx

@@ -2,9 +2,10 @@ import { For, createMemo, createSignal } from "solid-js";
 import connections from "./assets/connections.json";
 import "./App.css";
 import { shuffleArray } from "./utils";
+import { createStore } from "solid-js/store";
 
-type Connection = typeof connections[number]
-type Answer = Connection["answers"][number]
+type Connection = (typeof connections)[number];
+type Answer = Connection["answers"][number];
 
 function fromIndex(index: number): [number, number] {
   const col = index % 4;
@@ -13,49 +14,48 @@ function fromIndex(index: number): [number, number] {
 }
 
 function App() {
-  const [puzzleIndex, setPuzzleIndex] = createSignal(0);
-  // const [pinnedCount, setPinnedCount] = createSignal(0);
-  const [selected, setSelected] = createSignal<number[]>([]);
-  const [solvedGroups, setSolvedGroups] = createSignal<Answer[]>([])
-  const [puzzle, setPuzzle] = createSignal(
-    shuffleArray(
-      Array(16)
-        .fill(0)
-        .map((_, i) => i)
-    )
-  );
+  const [store, setStore] = createStore({
+    puzzleIndex: 0,
+    selected: [] as number[],
+    solvedGroups: [] as Answer[],
+    puzzle: shuffleArray(Array.from({ length: 16 }, (_, i) => i)),
+    get answers() {
+      return connections[store.puzzleIndex].answers;
+    },
+  });
 
-  const answers = () => connections[puzzleIndex()].answers;
   const getFromPuzzle = (index: number) => {
-    const puzzleIndex = puzzle()[index];
+    const puzzleIndex = store.puzzle[index];
     const [groupIndex, memberIndex] = fromIndex(puzzleIndex);
-    const group = answers()[groupIndex];
+    const group = store.answers[groupIndex];
     return {
       group: group.group,
       level: group.level,
-      answer: answers()[groupIndex].members[memberIndex],
+      answer: store.answers[groupIndex].members[memberIndex],
     };
   };
   const handleGuess = () => {
-    const selectedAnswers = selected().map((x) => getFromPuzzle(x));
+    const selectedAnswers = store.selected.map((x) => getFromPuzzle(x));
     const { level } = selectedAnswers[0];
-    const isCorrect = selectedAnswers.every(
-      x => x.level === level
-    );
+    const isCorrect = selectedAnswers.every((x) => x.level === level);
     if (!isCorrect) {
       // TODO you got it wrong
       alert("wrong");
       return;
     }
-    setPuzzle(puzzle().filter((x) => selected().every(s => puzzle()[s] !== x)));
-    setSelected([]);
-    const newSolvedGroup = answers().find((x) => x.level === level);
+    setStore({
+      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) {
-      setSolvedGroups([...solvedGroups(), newSolvedGroup])
+      setStore({
+        solvedGroups: [...store.solvedGroups, newSolvedGroup]
+      })
     }
   };
   // const handlePinUnpin = () => {
-  //   const sel = selected()
+  //   const sel = store.selected
   //   if (sel.every(x => x <= pinnedCount())) {
   //     // we are unpinning
   //     return
@@ -67,17 +67,17 @@ function App() {
     <main class="container">
       <h1>Slick Connections</h1>
       <div class="puzzle">
-        <For each={solvedGroups()}>
-          {({group, level, members}) => (
+        <For each={store.solvedGroups}>
+          {({ group, level, members }) => (
             <div class="puzzle-row">
               <div class="puzzle-group" data-level={level}>
-                <strong>{group}</strong>
-                <div>{members.join(', ')}</div>
+                <div class="puzzle-group-name">{group}</div>
+                <div class="puzzle-group-members">{members.join(", ")}</div>
               </div>
             </div>
           )}
         </For>
-        <For each={[0, 1, 2, 3].slice(0, puzzle().length / 4)}>
+        <For each={[0, 1, 2, 3].slice(0, store.puzzle.length / 4)}>
           {(row) => (
             <div class="puzzle-row">
               {[0, 1, 2, 3].map((col) => {
@@ -86,15 +86,15 @@ function App() {
                   <button
                     classList={{
                       "puzzle-item": true,
-                      "is-selected": selected().includes(index),
+                      "is-selected": store.selected.includes(index),
                     }}
                     type="button"
                     on:click={() => {
-                      setSelected(
-                        selected().includes(index)
-                          ? selected().filter((x) => x !== index)
-                          : [...selected(), index]
-                      );
+                      setStore({
+                        selected: store.selected.includes(index)
+                          ? store.selected.filter((x) => x !== index)
+                          : [...store.selected, index],
+                      });
                     }}
                   >
                     {getFromPuzzle(index).answer}
@@ -105,14 +105,14 @@ function App() {
           )}
         </For>
         <div class="puzzle-actions">
-          <button type="button" disabled={selected().length === 0}>
+          <button type="button" disabled={store.selected.length === 0}>
             Pin
           </button>
           <button
             id="submitButton"
             type="button"
             on:click={handleGuess}
-            disabled={selected().length !== 4}
+            disabled={store.selected.length !== 4}
           >
             Submit
           </button>