WIP share solution feature

package-lock.json

@@ -1542,6 +1542,20 @@
         "node": ">=6"
       }
     },
+    "node_modules/fdir": {
+      "version": "6.4.5",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.5.tgz",
+      "integrity": "sha512-4BG7puHpVsIYxZUbiUE3RqGloLaSSwzYie5jvasC4LWuBWzZawynvYouhjbQKw2JuIGYdm0DzIxl8iVidKlUEw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -1706,6 +1720,18 @@
       "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
       "license": "ISC"
     },
+    "node_modules/picomatch": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.5.3",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
@@ -1848,6 +1874,22 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/tinyglobby": {
+      "version": "0.2.14",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",
+      "integrity": "sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.4.4",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
     "node_modules/typescript": {
       "version": "5.6.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
@@ -1901,14 +1943,17 @@
       "license": "ISC"
     },
     "node_modules/vite": {
-      "version": "6.2.6",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-6.2.6.tgz",
-      "integrity": "sha512-9xpjNl3kR4rVDZgPNdTL0/c6ao4km69a/2ihNQbcANz8RuCOK3hQBmLSJf3bRKVQjVMda+YvizNE8AwvogcPbw==",
+      "version": "6.3.5",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz",
+      "integrity": "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==",
       "license": "MIT",
       "dependencies": {
         "esbuild": "^0.25.0",
+        "fdir": "^6.4.4",
+        "picomatch": "^4.0.2",
         "postcss": "^8.5.3",
-        "rollup": "^4.30.1"
+        "rollup": "^4.34.9",
+        "tinyglobby": "^0.2.13"
       },
       "bin": {
         "vite": "bin/vite.js"

src/Puzzle.tsx

@@ -1,4 +1,4 @@
-import { For } from "solid-js";
+import { For, Show } from "solid-js";
 import "./App.css";
 import usePuzzleModel from "./usePuzzleModel";
 import FitText from "./FitText";
@@ -134,6 +134,11 @@ function Puzzle() {
             Submit
           </button>
         </div>
+        <Show when={store.solvedGroups.length === 4}>
+          <pre on:click={() => navigator.clipboard.writeText(store.guessHistory)}>
+            {store.guessHistory}
+          </pre>
+        </Show>
       </div>
       {store.solvedGroups.length === 4 && <div class="celebration" />}
     </main>

src/usePuzzleModel.ts

@@ -19,8 +19,11 @@ type PuzzleStore = {
   selected: number[];
   solvedGroups: Answer[];
   puzzle: number[];
+  guessHistory: string;
 };
 
+const emoji = ["🟨", "🟩", "🟦", "🟪"];
+
 export default function usePuzzleModel(id: Accessor<number>) {
   const [store, setStore] = createStore<PuzzleStore>({
     guesses: 0,
@@ -28,22 +31,22 @@ export default function usePuzzleModel(id: Accessor<number>) {
     selected: [],
     solvedGroups: [],
     puzzle: [],
+    guessHistory: "",
   });
 
-  const {
-    setSolution
-  } = useAppModel()
+  const { setSolution } = useAppModel();
 
   createEffect(() => {
-    id()
     setStore({
       guesses: 0,
       pinnedCount: 0,
       selected: [],
       solvedGroups: [],
       puzzle: shuffleArray(Array.from({ length: 16 }, (_, i) => i)),
+      guessHistory: `Connections
+Puzzle #${id()}`,
     });
-  })
+  });
 
   const answers = (): Answer[] => {
     return connections.find((x) => x.id === id())!.answers;
@@ -61,11 +64,18 @@ export default function usePuzzleModel(id: Accessor<number>) {
   };
 
   const handleGuess = () => {
-    setStore('guesses', x => x+1)
+    setStore("guesses", (x) => x + 1);
     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);
+    const guessHistoryLine = selectedAnswers
+      .map((x) => emoji[x.level])
+      .join("");
+    setStore({
+      guessHistory: `${store.guessHistory}
+${guessHistoryLine}`,
+    });
     if (!isCorrect) {
       // TODO you got it wrong
       alert("wrong");
@@ -84,11 +94,11 @@ export default function usePuzzleModel(id: Accessor<number>) {
     });
     const newSolvedGroup = answers().find((x) => x.level === level);
     if (newSolvedGroup != null) {
-      setStore('solvedGroups', x => x.concat(newSolvedGroup))
+      setStore("solvedGroups", (x) => x.concat(newSolvedGroup));
     }
     if (store.puzzle.length === 0) {
       // completely solved!
-      setSolution(id(), store.guesses)
+      setSolution(id(), store.guesses);
     }
   };