MaszToZadanieDomowe.com/assets/js/liczby.js

class Liczby {
    /**
     * Czy gra jest w toku?
     */
    wToku = false;

    /**
     * Cały stan gry
     */
    #stan = {
        szukana: 0,
        bledneWskazania: 0,
        czas: 0,
        podstawowaWygrana: 0,
    }

    /**
     * Przechowuje odniesienia do wszystkich "stałych" elementów (dialogów, formularzy, elementów tekstowych)
     */
    #elementy;

    constructor() {
        this.#elementy = {
            /** @type {HTMLDivElement} */
            ekranTytulowy: document.getElementById('ekrantytulowy'),
            /** @type {HTMLButtonElement} */
            ekranTytulowySploczSie: document.querySelector('#ekrantytulowy #odTBF button'),

            /** @type {HTMLDivElement} */
            nowaGra: document.getElementById('dialog-nowagra'),
            /** @type {HTMLFormElement} */
            nowaGraForm: document.querySelector('#dialog-nowagra form'),
            /** @type {HTMLInputElement} */
            nowaGraRadioManual: document.querySelector('#dialog-nowagra form fieldset#nowagraFieldset1 input#l-manual'),
            /** @type {HTMLSpanElement} */
            nowaGraSpanKwota: document.querySelector('#dialog-nowagra form fieldset#nowagraFieldset2 span#kwota'),
            /** @type {HTMLInputElement} */
            nowaGraInputKwota: document.querySelector('#dialog-nowagra form fieldset#nowagraFieldset2 input#kwota'),

            /** @type {HTMLDivElement} */
            ustawLiczbe: document.getElementById('dialog-ustawliczbe'),
            /** @type {HTMLFormElement} */
            ustawLiczbeForm: document.querySelector('#dialog-ustawliczbe form'),
            /** @type {HTMLInputElement} */
            ustawLiczbeLiczba: document.querySelector('#dialog-ustawliczbe form fieldset input#liczba'),

            /** @type {HTMLDivElement} */
            wygrana: document.getElementById('dialog-wygrana'),
            /** @type {HTMLButtonElement} */
            wygranaRatsMadeMeCrazy: document.querySelector('#dialog-wygrana .okno button'),
        };

        this.#elementy.ekranTytulowySploczSie.onclick = () => { this.nowaGra(); };

        this.#elementy.nowaGraRadioManual.onclick = () => { this.#ustawianieLiczby(); };
        this.#elementy.nowaGraForm.onsubmit = ev => { this.#formOnSubmit(ev); };
        this.#elementy.nowaGraForm.onformdata = ev => { this.#startGry(ev); };
        this.#elementy.nowaGraInputKwota.oninput = ev => {
            this.#elementy.nowaGraSpanKwota.innerText = ev.target.value + "zł";
        };
        this.#elementy.nowaGraSpanKwota.innerText = this.#elementy.nowaGraInputKwota.value + "zł";

        this.#elementy.ustawLiczbeForm.onsubmit = ev => { this.#formOnSubmit(ev); };
        this.#elementy.ustawLiczbeForm.onformdata = ev => { this.#ustawLiczbe(ev); };

        this.#elementy.wygranaRatsMadeMeCrazy.onclick = () => { this.pokazTytul(); };

        for (let i = 1; i <= 100; i++) {
            /** @type {HTMLButtonElement} */
            const przycisk = document.getElementById(i);
            przycisk.onclick = ev => {
                this.#strzal(ev);
            }
        }
    }

    /**
     * Mała funkcja pomocnicza pzygotowywująca FormData dla formularza
     * @param {Event} event 
     */
    #formOnSubmit (event) {
        event.preventDefault();
        new FormData(event.target);
    }



    /**
     * Ukryj ekran wygranej i pokaż ekran tytułowy
     */
    pokazTytul() {
        if (this.wToku) {
            this.wToku = false;
        }
        for (let i = 1; i <= 100; i++) {
            /** @type {HTMLButtonElement} */
            const przycisk = document.getElementById(i);
            przycisk.className = "";
        }
        this.#elementy.wygrana.className = "dialog dialog-ukryj";
        this.#elementy.ekranTytulowy.className = "dialog dialog-pokaz";
    }



    /**
     * Otwiera dialog pod ustawienie właściwości gry
     */
    nowaGra() {
        if (this.wToku) {
            this.wToku = false;
        }
        this.#elementy.nowaGra.className = "dialog dialog-pokaz";
        for (const child of this.#elementy.nowaGraRadioManual.parentNode.children) {
            child.checked = false;
        }
    }

    /**
     * Przygotowywuje stan i ukrywa dialog nowej gry
     * @param {FormDataEvent} event 
     */
    #startGry(event) {
        this.#stan = {
            bledneWskazania: 0,
            czas: 0,
            szukana: event.formData.get("losowosc") == "komputer" ? (Math.floor(Math.random() * 99) + 1) : this.#stan.szukana,
            podstawowaWygrana: Number(event.formData.get("kwota"))
        };

        this.#elementy.nowaGra.className = "dialog dialog-ukryj";
        this.#elementy.ekranTytulowy.className = "dialog dialog-ukryj";

        for (let i = 1; i <= 100; i++) {
            /** @type {HTMLButtonElement} */
            const przycisk = document.getElementById(i);
            przycisk.className = "";
        }

        this.wToku = true;
    }



    /**
     * Pokazuje dialog pod manualne ustawianie liczby
     */
    #ustawianieLiczby() {
        this.#elementy.ustawLiczbe.className = "dialog dialog-pokaz";
        this.#elementy.ustawLiczbeLiczba.value = "";
    }

    /**
     * Zastosowywuje liczbę i zamyka dialog
     * @param {FormDataEvent} event 
     */
    #ustawLiczbe(event) {
        this.#elementy.ustawLiczbe.className = "dialog dialog-ukryj";
        this.#elementy.ustawLiczbeLiczba.value = "";
        this.#stan.szukana = Number(event.formData.get("liczba"));
    }



    /**
     * Gracz strzela
     * @param {FormDataEvent} event 
     */
    #strzal(event) {
        if (!this.wToku) { return; }
        const przycisk = document.querySelector("button[id=\"" + event.target.id + "\"");
        if (Number(event.target.id) == this.#stan.szukana) {
            przycisk.className = 'poprawna';
            this.#wygrana();
        } else if (przycisk.className != "bledna") {
            this.#stan.pudla++;
            przycisk.className = 'bledna';
        }
        this.#aktualizujStatystyki();
    }

    /**
     * Aktualizuje wyświetlane statystyki z wyjątkiem czasy i m.in. zastosowywuje modyfikatory
     */
    #aktualizujStatystyki() {}



    /**
     * Wyświetla dialog wygranej
     */
    #wygrana() {
        this.wToku = false;
        this.#elementy.wygrana.className = "dialog dialog-pokaz";
    }
}

document.addEventListener("DOMContentLoaded", () => {
    new Liczby();
});