diff --git a/assets/css/liczby.css b/assets/css/liczby.css index a55d706..cc38125 100644 --- a/assets/css/liczby.css +++ b/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; } diff --git a/assets/js/liczby.js b/assets/js/liczby.js index afdf9f1..ac699e1 100644 --- a/assets/js/liczby.js +++ b/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 = ""; -} \ No newline at end of file +document.addEventListener("DOMContentLoaded", () => { + new Liczby(); +}); \ No newline at end of file diff --git a/assets/sound/gambling.wav b/assets/sound/gambling.wav deleted file mode 100644 index 54495ef..0000000 Binary files a/assets/sound/gambling.wav and /dev/null differ diff --git a/liczby.html b/liczby.html index 6234dcb..726126c 100644 --- a/liczby.html +++ b/liczby.html @@ -17,124 +17,124 @@ - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - + + + + + + + + + +
@@ -157,23 +157,23 @@ -
+

Liczby

Prawie jak w kasynie!
-
- +
+
-
+

Nowa gra

Źródło liczby

-
+
@@ -181,8 +181,9 @@

Zasady zakładu

-
- +
+ +

@@ -191,9 +192,9 @@
-
+
-

Liczba

+

Ustaw Liczbe

Upewnij się, że osoba grająca nie widzi ekranu i wprowadź liczbę z zakresu 1-100:
@@ -201,7 +202,7 @@
Liczba: - +

@@ -210,11 +211,17 @@
-
+

Koniec gry

- Udało Ci się wygrać 000zł! + Udało Ci się wygrać... nic! +
+
+ Jeszcze nie wszystko zaimplementowane +
+
+