REFAKTOR

assets/css/liczby.css

@@ -26,18 +26,17 @@ a:hover {
     flex-direction: column;
     justify-content: space-between;
     position: fixed;
-    top: 4rem;
+    top: 0rem;
     width: 100vw;
-    height: calc(100vh - 4rem);
+    height: 100vh;
     text-align: center;
 
     background: linear-gradient(180deg,
         transparent 0%,
-        transparent 10%,
         var(--colorSurface0) 20%,
         var(--colorSurface1) 30%,
-        var(--colorSurface0) 70%,
-        var(--colorSurface0) 100%
+        var(--colorSurface0) 90%,
+        transparent 100%
     );
 }
 
@@ -62,7 +61,7 @@ a:hover {
     padding: 1rem;
     border-width: .5rem;
     font-size: 56pt;
-    margin-bottom: 4rem;
+    margin-bottom: 10rem;
 
     animation: ZacznijTracic 5s ease-in-out infinite;
 }
@@ -118,7 +117,7 @@ input[type="number"] {
 
 .ukryj, .dialog-ukryj .okno {
     animation: Ukryj 0.35s ease-in-out forwards;
-    display: none;
+    display: none !important;
 }
 
 .dialog-pokaz {
@@ -127,13 +126,13 @@ input[type="number"] {
 
 .dialog-ukryj {
     animation: UkryjDialog 0.35s ease-in-out forwards;
-    display: none;
+    display: none !important;
     width: 0 !important;
     height: 0 !important;
 }
 
 .ukryte, .ukryte * {
-    display: none;
+    display: none !important;
     width: 0 !important;
     height: 0 !important;
 }
@@ -210,3 +209,65 @@ input[type="number"] {
     margin-top: .3rem;
     margin-left: .3rem;
 }
+
+
+
+/* Gra */
+#gra {
+    overflow-y: auto;
+    display: flex;
+    max-height: calc(100vh - 4rem);
+}
+
+#gra aside {
+    border-radius: .3rem;
+    background: var(--colorBase);
+    position: fixed;
+    right: 1rem;
+    margin: 1rem;
+    padding: 1rem;
+    width: 18rem;
+}
+
+#gra aside div {
+    font-size: 1.25rem;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+#gra h2 {
+    text-align: center;
+}
+
+#gra table {
+    margin: auto;
+}
+
+#gra button {
+    width: 3rem;
+    height: 5rem;
+}
+
+#gra button:hover {
+    scale: 1.1;
+    box-shadow: 0px 7px 10px var(--colorSubtext0);
+}
+
+.bledna {
+    background: var(--colorRed);
+    color: var(--colorSurface2);
+}
+
+.poprawna {
+    background: var(--colorGreen);
+    color: var(--colorSurface2);
+}
+
+.bledna:hover {
+    scale: 1 !important;
+    box-shadow: 0px 0px 0px #000 !important;
+    background: var(--colorRed) !important;
+    color: var(--colorSurface2) !important;
+    cursor: not-allowed;
+}

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}
      */