WIP share solution feature

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);
     }
   };