204 lines
7.2 KiB
HTML
204 lines
7.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
|
<meta name="description" content="Logopedická hra pre najmenších">
|
|
<meta name="author" content="Adam Reňak">
|
|
<meta name="keywords" content="Adam Reňak, Joj_Dobre, Diplomová práca, Logopedická hra, TUKE">
|
|
<title>Baník Jožino: Logopedická hra - Diplomová práca</title>
|
|
<link rel="stylesheet" type="text/css" href="css/miner.css" />
|
|
|
|
<!-- Načítanie fontu Luckiest Guy z Google Fonts -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap" rel="stylesheet">
|
|
|
|
<link rel="icon" type="image/png" href="images/banik.ico">
|
|
<link rel="shortcut icon" href="images/icons/banik.ico">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.3/howler.min.js"></script>
|
|
|
|
<script src="config/worlds.js"></script>
|
|
<script src="config/levels.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- LOADING -->
|
|
<div id="loading-screen" class="loading-screen">
|
|
<div class="loading-content">
|
|
<!-- Logo -->
|
|
<div class="loading-logo">
|
|
<div class="loading-text-jozino">JOŽINO</div>
|
|
<div class="loading-text-banik">BANÍK</div>
|
|
</div>
|
|
|
|
<!-- Spinner -->
|
|
<div class="loading-spinner"></div>
|
|
|
|
<!-- NOVÉ: Progress Bar -->
|
|
<div class="loading-progress-container">
|
|
<div class="loading-progress-bar">
|
|
<div class="loading-progress-fill" id="loading-progress-fill"></div>
|
|
</div>
|
|
|
|
<div class="loading-progress-text">
|
|
<span id="loading-progress-percentage">0%</span>
|
|
<span id="loading-progress-details">Pripravujem hru...</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Loading Message -->
|
|
<div class="loading-message" id="loading-message">Načítavam zdroje...</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="menu-hra">
|
|
<button onclick="openDialog1()" class="kruhove-tlacidlo" id="menuButton"></button>
|
|
</div>
|
|
|
|
<!-- GAME -->
|
|
<div class="hra">
|
|
<div class="game-window">
|
|
<canvas id="gameCanvas" width="800" height="800"></canvas>
|
|
</div>
|
|
|
|
<div class="stats-menu">
|
|
<div class="window">
|
|
<div class="logo-container">
|
|
<div class="logo-text">
|
|
<div class="text-jozino">JOŽINO</div>
|
|
<div class="text-banik">BANÍK</div>
|
|
</div>
|
|
</div>
|
|
<div class="stats">
|
|
<div>
|
|
<a>Čas: </a>
|
|
<span id="game-timer">00:00</span>
|
|
</div>
|
|
<div>
|
|
<a>Slová: </a>
|
|
<span id="correct-words">0 <img src="images/spravne.png"></span>
|
|
<span> / </span>
|
|
<span id="incorrect-words">0 <img src="images/nespravne.png"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-golds">
|
|
<h1>Zlato</h1>
|
|
<div class="golds-container"></div>
|
|
</div>
|
|
<div class="menu-diamonds">
|
|
<h1>Diamanty</h1>
|
|
<div class="diamonds-container"></div>
|
|
</div>
|
|
<div class="menu-kov">
|
|
<h1>Kryštály</h1>
|
|
<div class="kov-container"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Akčné tlačidlo vľavo -->
|
|
<div class="controls-section">
|
|
<div class="action-controls">
|
|
<button class="action-button" data-action="dig">⛏</button>
|
|
</div>
|
|
|
|
<!-- Virtual joystick vpravo -->
|
|
<div class="joystick-controls">
|
|
<div class="virtual-joystick" id="virtualJoystick">
|
|
<div class="joystick-base"></div>
|
|
<div class="joystick-knob" id="joystickKnob"></div>
|
|
<div class="joystick-debug" id="joystickDebug">0, 0</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div id="cvicenie" class="modal">
|
|
<div class="execise-window">
|
|
<div id="vysledok" class="vysledok"></div>
|
|
<div class="cvicenie-content">
|
|
<div class="cvicenie-text"><p id="word-display">TRAKTOR</p></div>
|
|
<div class="cvicenie-text"><img id="cvicenie-image" src="images/slova/traktor.png"></div>
|
|
<div class="tlacidlo"><button id="rozpoznanie"><a>HOVORIŤ</a></button></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="zvuky" class="cvicenie">
|
|
<div class="execise-window">
|
|
<div class="cvicenie-content-2">
|
|
<h1>ROZPOZNAJ SLOVÁ</h1>
|
|
<p>Sú slová rovnaké?</p>
|
|
<div id="buttonsContainer"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="endgame" class="cvicenie">
|
|
<div class="execise-window" style="max-height: 550px;">
|
|
<div class="cvicenie-content-2">
|
|
<h1>Prešiel si level!</h1>
|
|
<div class="stats">
|
|
<div>
|
|
<a>Čas: </a>
|
|
<span>02:43</span>
|
|
</div>
|
|
<div>
|
|
<a>Slová: </a>
|
|
<span>4</span> <img src="images/spravne.png">
|
|
<span> / </span>
|
|
<span>4 </span> <img src="images/nespravne.png">
|
|
</div>
|
|
</div>
|
|
<div id="modal-stars" class="modal-stars"></div>
|
|
<div class="gameend">
|
|
<nav class="main-menu">
|
|
<ul>
|
|
<li><button onclick="restartCurrentLevel()" class="menu-button">Hrať znova</button></li>
|
|
<li><button onclick="goToNextLevel()" class="menu-button">Ďalší level</button></li>
|
|
<li><button onclick="returnToMenu()" class="menu-button">Späť do menu</button></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="dialogove-okno" class="dialogove-okno">
|
|
<div class="execise-window">
|
|
<span class="close" onclick="closeDialog1()">×</span>
|
|
<nav class="main-menu">
|
|
<ul>
|
|
<li><a href="game.html" alt="Reštart" class="menu-button">Reštart</a></li>
|
|
<li><a href="worldsmenu.html" alt="Koniec" class="menu-button">Koniec</a></li>
|
|
<li><a href="menu.html" alt="Menu" class="menu-button">Menu</a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="blur-background"></div>
|
|
<script src="js/managers/progressManager.js"></script>
|
|
|
|
<script src="js/game.js"></script>
|
|
<script>
|
|
function openDialog1() {
|
|
document.getElementById("dialogove-okno").style.display = "block";
|
|
document.getElementById("blur-background").style.display = "block";
|
|
document.body.classList.add("dialog-open");
|
|
document.body.style.overflow = "hidden"; // Zabrániť posúvaniu stránky
|
|
}
|
|
|
|
function closeDialog1() {
|
|
document.getElementById("dialogove-okno").style.display = "none";
|
|
document.getElementById("blur-background").style.display = "none";
|
|
document.body.classList.remove("dialog-open");
|
|
document.body.style.overflow = "auto"; // Povoliť posúvanie stránky
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |