iswhoa/public/scripts/controllers/picker.js

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", "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.cId);
            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, e.value === this.answerValue);

        this.element.classList.add("reveal");
        window.setTimeout(() => { this._revealAnswer(); });
    }

    _revealAnswer() {
        this.element.classList.add("reveal");

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