REFAKTOR

assets/js/liczby.js

@@ -1,16 +1,48 @@
 let cel = 0;
+let czas = 0;
+let zaklad = 0;
+let wToku = false;
 
 document.addEventListener("DOMContentLoaded", () => {
+    /**
+     * @type {HTMLFormElement}
+     */
+    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}
      */
@@ -29,11 +61,82 @@ function pokazKonfiguracje() {
  * @param {FormDataEvent} event 
  */
 function zacznijGre(event) {
-    document.getElementById('tytul').className = 'ukryj';
     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}
+     */
+    const koniec = document.getElementById('koniec');
+    koniec.className = 'dialog dialog-pokaz';
+}
+
+/**
+ * 
+ * @param {Event} event 
+ */
+function klikLiczby(event) {
+    if (!wToku) {
+        return;
+    }
+    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';
+    }
 }
 
 function pokazNumer() {
+    if (wToku) {
+        return;
+    }
     /**
      * @type {HTMLFormElement}
      */
@@ -51,7 +154,10 @@ function pokazNumer() {
  * 
  * @param {FormDataEvent} event 
  */
-function zamknijNumer(event) {    
+function zamknijNumer(event) {   
+    if (wToku) {
+        return;
+    } 
     /**
      * @type {HTMLFormElement}
      */