Koniec... na teraz

assets/css/liczby.css

@@ -21,7 +21,7 @@ a:hover {
 
 
 /* Tytułowe */
-#tytul {
+#ekrantytulowy {
     display: inline-flex;
     flex-direction: column;
     justify-content: space-between;
@@ -40,12 +40,12 @@ a:hover {
     );
 }
 
-#tytul div h1 {
+#ekrantytulowy div h1 {
     font-size: 96pt !important;
     margin-top: 13rem;
 }
 
-#tytul div button {
+#ekrantytulowy div button {
     position: relative;
     color: var(--colorText);
     text-shadow: 1px 1px 2px var(--colorBase), 0 0 1px var(--colorBase), 0 0 0.2px var(--colorBase);
@@ -220,6 +220,7 @@ input[type="number"] {
 }
 
 #gra aside {
+    display: none;
     border-radius: .3rem;
     background: var(--colorBase);
     position: fixed;
@@ -244,8 +245,12 @@ input[type="number"] {
     margin: auto;
 }
 
+#gra td {
+    cursor: pointer;
+}
+
 #gra button {
-    width: 3rem;
+    width: 3.5rem;
     height: 5rem;
 }
 

assets/js/liczby.js

@@ -1,174 +1,200 @@
-let cel = 0;
-let czas = 0;
-let zaklad = 0;
-let wToku = false;
-
-document.addEventListener("DOMContentLoaded", () => {
+class Liczby {
     /**
-     * @type {HTMLFormElement}
+     * Czy gra jest w toku?
      */
-    const konfiguracja = document.querySelector('#konfiguracja form');
-    konfiguracja.onsubmit = ev => {
-        ev.preventDefault();
-        new FormData(konfiguracja);
-    }
-    konfiguracja.onformdata = zacznijGre;
-
-    /**
-     * @type {HTMLFormElement}
-     */
-    const liczba = document.querySelector('#liczba form');
-    liczba.onsubmit = ev => {
-        ev.preventDefault();
-        new FormData(liczba);
-    }
-    liczba.onformdata = zamknijNumer;
-
-    for (let i = 1; i <= 100; i++) {
-        /**
-         * @type {HTMLButtonElement}
-         */
-        const przycisk = document.getElementById(i);
-        przycisk.onclick = klikLiczby;
-    }
-});
-
-function pokazKonfiguracje() {
-    if (wToku) {
-        return;
-    }
-    /**
-     * @type {HTMLFormElement}
-     */
-    const konfiguracja = document.getElementById('konfiguracja');
-    konfiguracja.className = 'dialog dialog-pokaz';
-
-    /**
-     * @type {HTMLInputElement}
-     */
-    const lManual = document.getElementById('l-manual');
-    lManual.checked = false;
-
-    /**
-     * @type {HTMLInputElement}
-     */
-    const lAuto = document.getElementById('l-auto');
-    lAuto.checked = false;
-}
-
-/**
- * 
- * @param {FormDataEvent} event 
- */
-function zacznijGre(event) {
-    event.preventDefault();
-    if (wToku) {
-        return;
-    }
-    wToku = true;
-
-    if (event.formData.get("losowosc") == "komputer") {
-        cel = Math.floor(Math.random() * 99 + 1);
-    }
-
-    zaklad = Number(event.formData.get("zaklad"))
- 
-    /**
-     * @type {HTMLFormElement}
-     */
-    const konfiguracja = document.getElementById('konfiguracja');
-    konfiguracja.className = 'dialog dialog-ukryj';
-
-    /**
-     * @type {HTMLFormElement}
-     */
-    const tytul = document.getElementById('tytul');
-    tytul.className = 'ukryj';
-
-    /**
-     * @type {HTMLParagraphElement}
-     */
-    const pudla = document.getElementById('pudla');
-    pudla.innerText = '0';
-
-    /**
-     * @type {HTMLParagraphElement}
-     */
-    const kwota = document.getElementById('kwota');
-    kwota.innerText = zaklad + 'zł';
-}
-
-function koniecGry() {
-    if (!wToku) {
-        return;
-    }
     wToku = false;
 
     /**
-     * @type {HTMLFormElement}
+     * Cały stan gry
      */
-    const koniec = document.getElementById('koniec');
-    koniec.className = 'dialog dialog-pokaz';
-}
-
-/**
- * 
- * @param {Event} event 
- */
-function klikLiczby(event) {
-    if (!wToku) {
-        return;
+    #stan = {
+        szukana: 0,
+        bledneWskazania: 0,
+        czas: 0,
+        podstawowaWygrana: 0,
     }
-    if (Number(event.target.id) == cel) {
-        event.target.className = 'poprawna';
-        koniecGry();
-    } else if (event.target.className != "bledna") {
-        /**
-         * @type {HTMLParagraphElement}
-         */
-        const pudla = document.getElementById('pudla');
-        pudla.innerText = Number(pudla.innerText) + 1;
 
-        event.target.className = 'bledna';
+    /**
+     * 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";
     }
 }
 
-function pokazNumer() {
-    if (wToku) {
-        return;
-    }
-    /**
-     * @type {HTMLFormElement}
-     */
-    const liczba = document.getElementById('liczba');
-    liczba.className = 'dialog dialog-pokaz';
-
-    /**
-     * @type {HTMLInputElement}
-     */
-    const numer = document.getElementById('numer');
-    numer.value = "";
-}
-
-/**
- * 
- * @param {FormDataEvent} event 
- */
-function zamknijNumer(event) {   
-    if (wToku) {
-        return;
-    } 
-    /**
-     * @type {HTMLFormElement}
-     */
-    const liczba = document.getElementById('liczba');
-    liczba.className = 'dialog dialog-ukryj';
-
-    cel = Number(event.formData.get("liczba"));
-
-    /**
-     * @type {HTMLInputElement}
-     */
-    const numer = document.getElementById('numer');
-    numer.value = "";
-}
+document.addEventListener("DOMContentLoaded", () => {
+    new Liczby();
+});