Added tracking of a player's state

public/scripts/controllers/clearstate.js

@@ -0,0 +1,9 @@
+import { Controller } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js";
+import { gameState } from "./gamestate.js";
+
+export default class extends Controller {
+    startGame(ev) {
+        console.log("Start game");
+        gameState.clearChoices();
+    }
+}

public/scripts/controllers/gamestate.js

@@ -0,0 +1,32 @@
+const GAME_STATE_KEY = "gameState";
+
+class GameState {
+    getQuestionChoice(qId) {
+        let savedItem = this._readGameState();
+        if (qId in savedItem) {
+            return savedItem[qId];
+        }
+        return null;
+    }
+
+    setQuestionChoice(qId, cId) {
+        let savedItem = this._readGameState();
+        savedItem[qId] = cId;
+        localStorage.setItem(GAME_STATE_KEY, JSON.stringify(savedItem));
+    }
+
+    clearChoices() {
+        localStorage.removeItem(GAME_STATE_KEY);
+    }
+
+    _readGameState() {
+        let savedItem = localStorage.getItem(GAME_STATE_KEY);
+        if (savedItem === null) {
+            return {};
+        } else {
+            return JSON.parse(savedItem);
+        }
+    }
+}
+
+export let gameState = new GameState();

public/scripts/controllers/picker.js

@@ -1,30 +1,57 @@
 import { Controller } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js";
+import { gameState } from "./gamestate.js";
 
 export default class extends Controller {
-    static targets = ["radio", "answerDetails"];
+    static targets = ["radio", "answerDetails", "submit"];
 
     static values = {
+        qid: String,
         answer: String
     };
 
     connect() {
+        let hasAnswer = gameState.getQuestionChoice(this.qidValue);
+        if (hasAnswer) {
+            this._revealAnswer();
+
+            let e = this.radioTargets.find((e) => e.value == hasAnswer);
+            if (e) {
+                e.checked = true;
+            }
+        }
+    }
+
+    checkRadio(ev) {
+        this.submitTarget.disabled = false;
     }
 
     submitAnswer(ev) {
         ev.preventDefault();
 
+        this.submitTarget.disabled = false;
+        let e = this.radioTargets.find((e) => e.checked);
+        if (!e) {
+            alert("Please select an item");
+            return;
+        }
+
+        gameState.setQuestionChoice(this.qidValue, e.value);
+
+        this.element.classList.add("reveal");
+        window.setTimeout(() => { this._revealAnswer(); });
+    }
+
+    _revealAnswer() {
         this.element.classList.add("reveal");
 
-        window.setTimeout(() => {
-            this.radioTargets.forEach(e => { 
-                e.disabled = true;
-                if (e.value === this.answerValue) {
-                    e.classList.add("answer");
-                } else {
-                    e.classList.add("wrong");
-                }
-            });
-        }, 1);
+        this.radioTargets.forEach(e => { 
+            e.disabled = true;
+            if (e.value === this.answerValue) {
+                e.classList.add("answer");
+            } else {
+                e.classList.add("wrong");
+            }
+        });
 
         this.answerDetailsTarget.classList.remove("hidden");
     }

public/scripts/main.js

@@ -1,7 +1,9 @@
 import { Application } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js";
 
+import ClearStateController from "./controllers/clearstate.js";
 import PickerController from "./controllers/picker.js";
 
 window.Stimulus = Application.start();
 
-Stimulus.register("picker", PickerController);
+Stimulus.register("picker", PickerController);
+Stimulus.register("clearstate", ClearStateController);

public/style.css

@@ -24,6 +24,7 @@ label:has(input[type=radio]) {
     font-size: 0.9em;
     font-weight: bold;
     box-sizing: border-box;
+    cursor: pointer;
 }
 
 label:has(input[type=radio]):hover {