From f67606b94421ac3d0250fa32056f099d90a843e8 Mon Sep 17 00:00:00 2001
From: Joshua Seigler <2583159+seigler@users.noreply.github.com>
Date: Mon, 7 Apr 2025 20:40:06 -0700
Subject: [PATCH] fix pinning after a group is solved and dont persist
 selection

---
 src/useAppModel.ts | 24 +++++++++++++++---------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/useAppModel.ts b/src/useAppModel.ts
index b1d3b3a..70bc249 100644
--- a/src/useAppModel.ts
+++ b/src/useAppModel.ts
@@ -19,7 +19,6 @@ type AppStore = {
   selected: number[];
   solvedGroups: Answer[];
   puzzle: number[];
-  get answers(): Answer[];
 };
 
 export default function useAppModel() {
@@ -32,16 +31,23 @@ export default function useAppModel() {
       selected: [],
       solvedGroups: [],
       puzzle: shuffleArray(Array.from({ length: 16 }, (_, i) => i)),
-      get answers(): Answer[] {
-        return connections.find((x) => x.id === store.puzzleId)!.answers;
-      },
     }),
     {
       name: "slick-connections",
       storage,
+      serialize(data) {
+        return JSON.stringify({
+          ...data,
+          selected: [],
+        });
+      },
     }
   );
 
+  const answers = (): Answer[] => {
+    return connections.find((x) => x.id === store.puzzleId)!.answers;
+  };
+
   const handleSelectGame = (newId: number) => {
     setStore({
       puzzleId: newId,
@@ -55,16 +61,16 @@ export default function useAppModel() {
   const getFromPuzzle = (index: number) => {
     const puzzleIndex = store.puzzle[index];
     const [groupIndex, memberIndex] = fromIndex(puzzleIndex);
-    const group = store.answers[groupIndex];
+    const group = answers()[groupIndex];
     return {
       group: group.group,
       level: group.level,
-      answer: store.answers[groupIndex].members[memberIndex],
+      answer: answers()[groupIndex].members[memberIndex],
     };
   };
 
   const handleGuess = () => {
-    const selected = store.puzzle.length === 4 ? [0, 1, 2, 3] : store.selected
+    const selected = store.puzzle.length === 4 ? [0, 1, 2, 3] : store.selected;
     const selectedAnswers = selected.map((x) => getFromPuzzle(x));
     const { level } = selectedAnswers[0];
     const isCorrect = selectedAnswers.every((x) => x.level === level);
@@ -84,7 +90,7 @@ export default function useAppModel() {
       ),
       selected: [],
     });
-    const newSolvedGroup = store.answers.find((x) => x.level === level);
+    const newSolvedGroup = answers().find((x) => x.level === level);
     if (newSolvedGroup != null) {
       setStore({
         solvedGroups: [...store.solvedGroups, newSolvedGroup],
@@ -131,7 +137,7 @@ export default function useAppModel() {
       .filter((x) => x >= store.pinnedCount)
       .map((x) => store.puzzle[x]);
     const puzzleEnd = Array.from(
-      { length: 16 - store.pinnedCount },
+      { length: store.puzzle.length - store.pinnedCount },
       (_, i) => i + store.pinnedCount
     )
       .filter((x) => !store.selected.includes(x))