Aggiunta schermata di caricamento e timer per la partita

2026-03-23 09:43:02 +01:00
parent 7ee94cb046
commit 4f2c2ffd19
4 changed files with 123 additions and 16 deletions
@@ -6,6 +6,15 @@
    <link rel="stylesheet" href="style.css">
 </head>
 <body>
+    <!-- SCHERMATA DI CARICAMENTO -->
+    <div id="loading-screen" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 9999;">
+        <div style="width: 80%; max-width: 600px; background: #222; height: 20px; border-radius: 10px; overflow: hidden; margin-bottom: 10px;">
+            <div id="loading-bar" style="width: 0%; height: 100%; background: #4CAF50; transition: width 0.3s;"></div>
+        </div>
+        <div id="loading-text" style="color: #fff; font-family: monospace; font-size: 14px;">Loading...</div>
+    </div>
+
+    <!-- SCHERMATA INIZIALE -->
    <div id="start">
        <video autoplay muted loop id="bg-video">
            <source src="./video/background.mp4" type="video/mp4">
@@ -30,8 +39,10 @@
            </div>
        </div>
    </div>
+
+    <!-- INTERFACCIA GRAFICA DEL GIOCO -->
    <div id="punti">Rifiuti: <span id="score">0</span></div>
-    <div id="tempo">Tempo: <span id="time">XX:XX</span></div>
+    <div id="tempo">Tempo: <span id="minuti">XX</span>:<span id="secondi">XX</span></div>
    <div id="crosshair">+</div>
    <script type="importmap">
        {