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

REFAKTOR

Browse Source
This commit is contained in:
Dark Steveneq
2025-09-22 18:58:40 +02:00
parent 9999e4bf25
commit cccbf5ed3d
3 changed files with 335 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
assets/css/liczby.css
View File

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

112
assets/js/liczby.js
View File

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

160
liczby.html
View File

@@ -13,6 +13,150 @@
<a href="/index.html">Wróć na stronę główną</a>
</header>
<div id="gra">
<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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</tr>
</tbody>
</table>
<aside>
<h2>Statystyki</h2>
<hr>
<div>
<h4>Czas:</h4>
<p id="czas"></p>
</div>
<div>
<h4>Pudła:</h4>
<p id="pudla"></p>
</div>
<br>
<div>
<h4>Wygrana:</h4>
<p id="kwota"></p>
</div>
</aside>
</div>
<div id="tytul" class="pokaz">
<div>
<h1>Liczby</h1>
@@ -24,7 +168,7 @@
</div>
<div id="konfiguracja" class="dialog ukryte">
<form onsubmit="zacznijGre()" class="okno">
<form class="okno">
<h2>Nowa gra</h2>
<hr>
@@ -38,7 +182,7 @@
<h4>Zasady zakładu</h4>
<fieldset>
<label for="kwota">Kwota zakładu:</label><input type="range" id="kwota" min="500" step="500" max="100000">
<label for="kwota">Kwota zakładu:</label><input type="range" id="kwota" name="zaklad" min="500" step="500" max="50000">
</fieldset>
<br>
@@ -51,13 +195,13 @@
<form class="okno">
<h2>Liczba</h2>
<hr>
Upewnij się, że osoba grająca nie widzi ekranu i wprowadź liczbę z zakresu 1-1000:
Upewnij się, że osoba grająca nie widzi ekranu i wprowadź liczbę z zakresu 1-100:
<br>
<br>
<fieldset>
<legend>Liczba:</legend>
<input type="number" name="liczba" min="1" max="1000" placeholder="Przykładowa liczba: 684" required>
<input type="number" id="numer" name="liczba" min="1" max="100" placeholder="Przykładowa liczba: 64" required>
</fieldset>
<br>
@@ -65,5 +209,13 @@
<input type="submit" value="Zapisz liczbę">
</form>
</div>
<div id="koniec" class="dialog ukryte">
<div class="okno">
<h2>Koniec gry</h2>
<hr>
Udało Ci się wygrać <span id="final">000zł</span>!
</div>
</div>
</body>
</html>