dejquery

assets/css/liczby.css

@@ -111,68 +111,76 @@ input[type="number"] {
 
 
 /* Animacje */
-.wsun, .dwsun .okno {
+/* AI WYGENEROWAŁO TE KLASY I KEYFRAMEY */
-    animation: Wsun 0.6s ease-in;
+.pokaz, .dialog-pokaz .okno {
+    animation: Pokaz 0.35s ease-in-out forwards;
 }
 
-@keyframes Wsun {
+.ukryj, .dialog-ukryj .okno {
-    0% {
+    animation: Ukryj 0.35s ease-in-out forwards;
-        bottom: -40%;
-        opacity: 0;
-    }
-    100% {
-        bottom: 0;
-        opacity: 1;
-    }
-}
-
-.wysun, .dwysun .okno {
-    animation: Wysun 1.5s ease-in;
     display: none;
 }
 
-@keyframes Wysun {
+.dialog-pokaz {
-    0% {
+    animation: PokazDialog 0.35s ease-in-out forwards;
-        display: initial;
-        bottom: 0;
-        opacity: 1;
-    }
-    100% {
-        display: initial;
-        bottom: -40%;
-        opacity: 0;
-    }
 }
 
-.dwsun {
+.dialog-ukryj {
-    animation: DWsun 0.6s ease-in;
+    animation: UkryjDialog 0.35s ease-in-out forwards;
-}
-
-@keyframes DWsun {
-    0% {
-        opacity: 0;
-    }
-    100% {
-        opacity: 1;
-    }
-}
-
-.dwysun {
-    animation: DWysun 0.6s ease-in;
     display: none;
+    width: 0 !important;
+    height: 0 !important;
 }
 
-@keyframes DWysun {
+.ukryte, .ukryte * {
+    display: none;
+    width: 0 !important;
+    height: 0 !important;
+}
+
+@keyframes Pokaz {
     0% {
-        display: initial;
+        opacity: 0;
-        opacity: 1;
+        transform: translateY(2rem);
     }
     100% {
-        display: initial;
+        opacity: 1;
-        opacity: 0;
+        transform: translateY(0);
     }
 }
 
+@keyframes Ukryj {
+    0% {
+        opacity: 1;
+        transform: translateY(0);
+        display: initial;
+    }
+    100% {
+        opacity: 0;
+        transform: translateY(2rem);
+        display: initial;
+    }
+}
+
+@keyframes PokazDialog {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes UkryjDialog {
+    0% {
+        opacity: 1;
+        display: initial;
+    }
+    100% {
+        opacity: 0;
+        display: initial;
+    }
+}
 
 
 /* Dialog */

assets/js/liczby.js

@@ -0,0 +1,68 @@
+let cel = 0;
+
+document.addEventListener("DOMContentLoaded", () => {
+});
+
+function pokazKonfiguracje() {
+    /**
+     * @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) {
+    document.getElementById('tytul').className = 'ukryj';
+    event.preventDefault();
+}
+
+function pokazNumer() {
+    /**
+     * @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) {    
+    /**
+     * @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 = "";
+}

liczby.html

@@ -12,23 +12,25 @@
     <header>
         <a href="/index.html">Wróć na stronę główną</a>
     </header>
-    <div id="tytul" class="wsun">
+
+    <div id="tytul" class="pokaz">
         <div>
             <h1>Liczby</h1>
             <h5>Prawie jak w kasynie!</h5>
         </div>
         <div>
-            <button>Wygrywać teraz</button>
+            <button onclick="pokazKonfiguracje()">Wygrywać teraz</button>
         </div>
     </div>
-    <div id="ile" class="dialog dwsun">
+
-        <form class="okno">
+    <div id="konfiguracja" class="dialog ukryte">
+        <form onsubmit="zacznijGre()" class="okno">
             <h2>Nowa gra</h2>
             <hr>
 
             <h4>Źródło liczby</h4>
             <fieldset>
-                <input type="radio" id="l-manual" name="losowosc" value="czlowiek"><label for="l-manual">Asystent (wprowadzone manualnie)</label>
+                <input type="radio" id="l-manual" name="losowosc" value="czlowiek" onclick="pokazNumer()"><label for="l-manual">Asystent (wprowadzone manualnie)</label>
                 <input type="radio" id="l-auto" name="losowosc" value="komputer"><label for="l-auto">Komputer (generowane automatycznie)</label>
             </fieldset>
             <br>
@@ -45,7 +47,7 @@
         </form>
     </div>
 
-    <div id="liczba" class="dialog dukryj">
+    <div id="liczba" class="dialog ukryte">
         <form class="okno">
             <h2>Liczba</h2>
             <hr>
@@ -55,7 +57,7 @@
 
             <fieldset>
                 <legend>Liczba:</legend>
-                <input type="number" id="liczba" min="1" max="1000" placeholder="Przykładowa liczba: 684" required>
+                <input type="number" name="liczba" min="1" max="1000" placeholder="Przykładowa liczba: 684" required>
             </fieldset>
 
             <br>