ghostfox/MaszToZadanieDomowe.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Koniec... na teraz

Browse Source
This commit is contained in:
Dark Steveneq
2025-09-22 20:37:28 +02:00
parent cccbf5ed3d
commit fed06b2f13
4 changed files with 317 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
assets/css/liczby.css
View File

@@ -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;
}

352
assets/js/liczby.js
View File

@@ -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();
});

BIN
assets/sound/gambling.wav
View File

Binary file not shown.

231
liczby.html
View File

@@ -17,124 +17,124 @@
<table>
<tbody>
<tr>
<td><button id="1">1</button></td>
<td><button id="2">2</button></td>
<td><button id="3">3</button></td>
<td><button id="4">4</button></td>
<td><button id="5">5</button></td>
<td><button id="6">6</button></td>
<td><button id="7">7</button></td>
<td><button id="8">8</button></td>
<td><button id="9">9</button></td>
<td><button id="10">10</button></td>
<td id="1"><button id="1">1</button></td>
<td id="2"><button id="2">2</button></td>
<td id="3"><button id="3">3</button></td>
<td id="4"><button id="4">4</button></td>
<td id="5"><button id="5">5</button></td>
<td id="6"><button id="6">6</button></td>
<td id="7"><button id="7">7</button></td>
<td id="8"><button id="8">8</button></td>
<td id="9"><button id="9">9</button></td>
<td id="10"><button id="10">10</button></td>
</tr>
<tr>
<td><button id="11">11</button></td>
<td><button id="12">12</button></td>
<td><button id="13">13</button></td>
<td><button id="14">14</button></td>
<td><button id="15">15</button></td>
<td><button id="16">16</button></td>
<td><button id="17">17</button></td>
<td><button id="18">18</button></td>
<td><button id="19">19</button></td>
<td><button id="20">20</button></td>
<td id="11"><button id="11">11</button></td>
<td id="12"><button id="12">12</button></td>
<td id="13"><button id="13">13</button></td>
<td id="14"><button id="14">14</button></td>
<td id="15"><button id="15">15</button></td>
<td id="16"><button id="16">16</button></td>
<td id="17"><button id="17">17</button></td>
<td id="18"><button id="18">18</button></td>
<td id="19"><button id="19">19</button></td>
<td id="20"><button id="20">20</button></td>
</tr>
<tr>
<td><button id="21">21</button></td>
<td><button id="22">22</button></td>
<td><button id="23">23</button></td>
<td><button id="24">24</button></td>
<td><button id="25">25</button></td>
<td><button id="26">26</button></td>
<td><button id="27">27</button></td>
<td><button id="28">28</button></td>
<td><button id="29">29</button></td>
<td><button id="30">30</button></td>
<td id="21"><button id="21">21</button></td>
<td id="22"><button id="22">22</button></td>
<td id="23"><button id="23">23</button></td>
<td id="24"><button id="24">24</button></td>
<td id="25"><button id="25">25</button></td>
<td id="26"><button id="26">26</button></td>
<td id="27"><button id="27">27</button></td>
<td id="28"><button id="28">28</button></td>
<td id="29"><button id="29">29</button></td>
<td id="30"><button id="30">30</button></td>
</tr>
<tr>
<td><button id="31">31</button></td>
<td><button id="32">32</button></td>
<td><button id="33">33</button></td>
<td><button id="34">34</button></td>
<td><button id="35">35</button></td>
<td><button id="36">36</button></td>
<td><button id="37">37</button></td>
<td><button id="38">38</button></td>
<td><button id="39">39</button></td>
<td><button id="40">40</button></td>
<td id="31"><button id="31">31</button></td>
<td id="32"><button id="32">32</button></td>
<td id="33"><button id="33">33</button></td>
<td id="34"><button id="34">34</button></td>
<td id="35"><button id="35">35</button></td>
<td id="36"><button id="36">36</button></td>
<td id="37"><button id="37">37</button></td>
<td id="38"><button id="38">38</button></td>
<td id="39"><button id="39">39</button></td>
<td id="40"><button id="40">40</button></td>
</tr>
<tr>
<td><button id="41">41</button></td>
<td><button id="42">42</button></td>
<td><button id="43">43</button></td>
<td><button id="44">44</button></td>
<td><button id="45">45</button></td>
<td><button id="46">46</button></td>
<td><button id="47">47</button></td>
<td><button id="48">48</button></td>
<td><button id="49">49</button></td>
<td><button id="50">50</button></td>
<td id="41"><button id="41">41</button></td>
<td id="42"><button id="42">42</button></td>
<td id="43"><button id="43">43</button></td>
<td id="44"><button id="44">44</button></td>
<td id="45"><button id="45">45</button></td>
<td id="46"><button id="46">46</button></td>
<td id="47"><button id="47">47</button></td>
<td id="48"><button id="48">48</button></td>
<td id="49"><button id="49">49</button></td>
<td id="50"><button id="50">50</button></td>
</tr>
<tr>
<td><button id="51">51</button></td>
<td><button id="52">52</button></td>
<td><button id="53">53</button></td>
<td><button id="54">54</button></td>
<td><button id="55">55</button></td>
<td><button id="56">56</button></td>
<td><button id="57">57</button></td>
<td><button id="58">58</button></td>
<td><button id="59">59</button></td>
<td><button id="60">60</button></td>
<td id="51"><button id="51">51</button></td>
<td id="52"><button id="52">52</button></td>
<td id="53"><button id="53">53</button></td>
<td id="54"><button id="54">54</button></td>
<td id="55"><button id="55">55</button></td>
<td id="56"><button id="56">56</button></td>
<td id="57"><button id="57">57</button></td>
<td id="58"><button id="58">58</button></td>
<td id="59"><button id="59">59</button></td>
<td id="60"><button id="60">60</button></td>
</tr>
<tr>
<td><button id="61">61</button></td>
<td><button id="62">62</button></td>
<td><button id="63">63</button></td>
<td><button id="64">64</button></td>
<td><button id="65">65</button></td>
<td><button id="66">66</button></td>
<td><button id="67">67</button></td>
<td><button id="68">68</button></td>
<td><button id="69">69</button></td>
<td><button id="70">70</button></td>
<td id="61"><button id="61">61</button></td>
<td id="62"><button id="62">62</button></td>
<td id="63"><button id="63">63</button></td>
<td id="64"><button id="64">64</button></td>
<td id="65"><button id="65">65</button></td>
<td id="66"><button id="66">66</button></td>
<td id="67"><button id="67">67</button></td>
<td id="68"><button id="68">68</button></td>
<td id="69"><button id="69">69</button></td>
<td id="70"><button id="70">70</button></td>
</tr>
<tr>
<td><button id="71">71</button></td>
<td><button id="72">72</button></td>
<td><button id="73">73</button></td>
<td><button id="74">74</button></td>
<td><button id="75">75</button></td>
<td><button id="76">76</button></td>
<td><button id="77">77</button></td>
<td><button id="78">78</button></td>
<td><button id="79">79</button></td>
<td><button id="80">80</button></td>
<td id="71"><button id="71">71</button></td>
<td id="72"><button id="72">72</button></td>
<td id="73"><button id="73">73</button></td>
<td id="74"><button id="74">74</button></td>
<td id="75"><button id="75">75</button></td>
<td id="76"><button id="76">76</button></td>
<td id="77"><button id="77">77</button></td>
<td id="78"><button id="78">78</button></td>
<td id="79"><button id="79">79</button></td>
<td id="80"><button id="80">80</button></td>
</tr>
<tr>
<td><button id="81">81</button></td>
<td><button id="82">82</button></td>
<td><button id="83">83</button></td>
<td><button id="84">84</button></td>
<td><button id="85">85</button></td>
<td><button id="86">86</button></td>
<td><button id="87">87</button></td>
<td><button id="88">88</button></td>
<td><button id="89">89</button></td>
<td><button id="90">90</button></td>
<td id="81"><button id="81">81</button></td>
<td id="82"><button id="82">82</button></td>
<td id="83"><button id="83">83</button></td>
<td id="84"><button id="84">84</button></td>
<td id="85"><button id="85">85</button></td>
<td id="86"><button id="86">86</button></td>
<td id="87"><button id="87">87</button></td>
<td id="88"><button id="88">88</button></td>
<td id="89"><button id="89">89</button></td>
<td id="90"><button id="90">90</button></td>
</tr>
<tr>
<td><button id="91">91</button></td>
<td><button id="92">92</button></td>
<td><button id="93">93</button></td>
<td><button id="94">94</button></td>
<td><button id="95">95</button></td>
<td><button id="96">96</button></td>
<td><button id="97">97</button></td>
<td><button id="98">98</button></td>
<td><button id="99">99</button></td>
<td><button id="100">100</button></td>
<td id="91"><button id="91">91</button></td>
<td id="92"><button id="92">92</button></td>
<td id="93"><button id="93">93</button></td>
<td id="94"><button id="94">94</button></td>
<td id="95"><button id="95">95</button></td>
<td id="96"><button id="96">96</button></td>
<td id="97"><button id="97">97</button></td>
<td id="98"><button id="98">98</button></td>
<td id="99"><button id="99">99</button></td>
<td id="100"><button id="100">100</button></td>
</tr>
</tbody>
</table>
@@ -157,23 +157,23 @@
</aside>
</div>
<div id="tytul" class="pokaz">
<div id="ekrantytulowy" class="pokaz">
<div>
<h1>Liczby</h1>
<h5>Prawie jak w kasynie!</h5>
</div>
<div>
<button onclick="pokazKonfiguracje()">Wygrywać teraz</button>
<div id="odTBF">
<button>Wygrywać teraz</button>
</div>
</div>
<div id="konfiguracja" class="dialog ukryte">
<div id="dialog-nowagra" class="dialog ukryte">
<form class="okno">
<h2>Nowa gra</h2>
<hr>
<h4>Źródło liczby</h4>
<fieldset>
<fieldset id="nowagraFieldset1">
<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>
@@ -181,8 +181,9 @@
<br>
<h4>Zasady zakładu</h4>
<fieldset>
<label for="kwota">Kwota zakładu:</label><input type="range" id="kwota" name="zaklad" min="500" step="500" max="50000">
<fieldset id="nowagraFieldset2">
<label for="kwota">Kwota zakładu: <span id="kwota"></span></label>
<input type="range" id="kwota" name="zaklad" min="500" step="500" max="50000">
</fieldset>
<br>
@@ -191,9 +192,9 @@
</form>
</div>
<div id="liczba" class="dialog ukryte">
<div id="dialog-ustawliczbe" class="dialog ukryte">
<form class="okno">
<h2>Liczba</h2>
<h2>Ustaw Liczbe</h2>
<hr>
Upewnij się, że osoba grająca nie widzi ekranu i wprowadź liczbę z zakresu 1-100:
<br>
@@ -201,7 +202,7 @@
<fieldset>
<legend>Liczba:</legend>
<input type="number" id="numer" name="liczba" min="1" max="100" placeholder="Przykładowa liczba: 64" required>
<input type="number" id="liczba" name="liczba" min="1" max="100" placeholder="Przykładowa liczba: 64" required>
</fieldset>
<br>
@@ -210,11 +211,17 @@
</form>
</div>
<div id="koniec" class="dialog ukryte">
<div id="dialog-wygrana" class="dialog ukryte">
<div class="okno">
<h2>Koniec gry</h2>
<hr>
Udało Ci się wygrać <span id="final">000zł</span>!
Udało Ci się wygrać... nic!
<br>
<br>
Jeszcze nie wszystko zaimplementowane
<br>
<br>
<button>Zagraj jeszcze raz!</button>
</div>
</div>
</body>