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
@@ -28,7 +28,8 @@
 - [✅] **Sistema Ostacoli:** Inserimento di modelli 3D di alberi e oggetti ambientali decorativi.
 - [✅] **Meccaniche di Raccolta:** Gestione delle collisioni e incremento del punteggio ecologico.
 - [✅] **Interfaccia (HUD):** Overlay con Timer (60s), contatore rifiuti e disattivazione della pausa.
- [❌] **Oggetti umani:** Inserimento di case o di elementi che fanno pensare all'attivita' umana sull'isola
+- [⚠️] **Schermata di caricamento:** Schermata di caricamento iniziale
 - [⚠️] **Schermata iniziale:** Schermata iniziale
 - [❌] **Rifinitura (Polish):** Animazioni di raccolta e ottimizzazione delle mesh 3D.
 - [❌] **Timer:** Meccanica del timer per il tempo di raccolta dei rifiuti
 - [❌] **Personaggio:** Cilindro che rappresenta il personaggio (fatto per collisioni piu' precise)
@@ -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">
        {
@@ -2,7 +2,31 @@ import * as THREE from 'three';
 import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js';
 import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
-// 1. SCENA E CAMERA
+// 1a. INIZIALIZZAZIONE CARICAMENTO ASSETS
 const manager = new THREE.LoadingManager();
 manager.onStart = function (url, itemsLoaded, itemsTotal) {
    document.getElementById("loading-text").innerHTML = `Inizio caricamento: ${url}`;
    console.log(`Inizio caricamento: ${url}`);
 };
 manager.onLoad = function () {
    document.getElementById('loading-screen').style.display = 'none';
    animate(); // avvia il rendering
 };
 manager.onProgress = function (url, itemsLoaded, itemsTotal) {
    // Calcola la percentuale
    const percent = (itemsLoaded / itemsTotal) * 100;
    document.getElementById('loading-bar').style.width = percent + '%';
    // Aggiorna il testo
    document.getElementById("loading-text").innerHTML = `Caricamento: ${itemsLoaded} di ${itemsTotal} - ${url}`;
    console.log(`Caricamento: ${itemsLoaded} di ${itemsTotal} - ${url}`);
 };
 manager.onError = function (url) {
    document.getElementById("loading-text").innerHTML = `Errore nel caricamento: ${url}`;
    console.log(`Errore nel caricamento: ${url}`);
 };
 // 1b. SCENA E CAMERA
 const scene = new THREE.Scene();
 scene.background = new THREE.Color(0x33ccff); // Cielo più azzurro
 const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
@@ -69,6 +93,58 @@ scene.add(islandGroup);
 scene.fog = new THREE.Fog(0x33ccff, 20, 100);
 // 3. CONTROLLI
 window.totalTime;
 class PausableTimer {
    constructor(callback, delay) {
        this.callback = callback;
        this.delay = delay; // salvi il delay originale
        this.remaining = delay;
        this.timerId = null;
        this.start = null;
        this.loop = null;
        this.cont = 0;
        window.totalTime = delay / 1000;
    }
    pause() {
        if (this.timerId) {
            clearTimeout(this.timerId);
            this.timerId = null;
            // Calcola il tempo passato
            this.remaining -= Date.now() - this.start;
        }
        if (this.loop) {
            clearInterval(this.loop);
            this.loop = null;
        }
        console.log("pausa");
    }
    resume() {
        console.log("resume");
        if (this.timerId) return; // già in esecuzione
        if (this.remaining > 0) {
            this.start = Date.now();
            this.timerId = setTimeout(() => {
                this.pause();
                this.callback();
            }, this.remaining);
            // Se il ciclo di aggiornamento non è già attivo, avvialo
            if (!this.loop) {
                this.loop = setInterval(() => {
                    this.cont++;
                    // Aggiorna il timer visualizzato
                    document.getElementById("minuti").innerHTML = String(Math.floor((window.totalTime - this.cont) / 60)).padStart(2, '0');
                    document.getElementById("secondi").innerHTML = String((window.totalTime - this.cont) % 60).padStart(2, '0');
                    console.log(`${document.getElementById("minuti").innerHTML}:${document.getElementById("secondi").innerHTML}`);
                }, 1000);
            }
        }
    }
 }
 const timer = new PausableTimer(() => {
    localStorage.setItem("punteggio", document.getElementById("score").innerHTML.trim());
    window.location = "test.html";
 }, 60000)
 function lock() {
    document.getElementById('start').style.display = 'none';
    document.getElementById('punti').style.display = 'block';
@@ -76,22 +152,27 @@ function lock() {
    document.getElementById('crosshair').style.display = 'block';
 }
 function unlock() {
-    const startDiv = document.getElementById('start');
+    timer.pause();
-    startDiv.style.display = 'flex'; // Forza il layout Flexbox
+    document.getElementById('start').style.display = 'flex';
    // Nascondi l'HUD
    document.getElementById('punti').style.display = 'none';
    document.getElementById('tempo').style.display = 'none';
    document.getElementById('crosshair').style.display = 'none';
 }
 const controls = new PointerLockControls(camera, document.body);
-document.getElementById('start').addEventListener('click', () => controls.lock());
+document.getElementById('start').addEventListener('click', () => {
-controls.addEventListener('lock', lock);
+    controls.lock();
-controls.addEventListener('unlock', unlock);
+    lock();
 });
 controls.addEventListener('lock', () => {
    lock();
    timer.resume();
 });
 controls.addEventListener('unlock', () => { unlock(); });
 // 4. GESTIONE OGGETTI DI SCENA (20 rifiuti + 6 alberi)
 const trashArray = [];
 let score = 0;
-const loader = new GLTFLoader();
+const loader = new GLTFLoader(manager);
 loader.load('models/rifiuto.glb', (gltf) => {
    const mesh = gltf.scene.getObjectByName("Trash_Pile_03_GEO");
@@ -238,5 +319,5 @@ function animate() {
    renderer.render(scene, camera);
 }
-
+document.getElementById("minuti").innerHTML = String(Math.floor(window.totalTime / 60)).padStart(2, '0');
-animate();
+document.getElementById("secondi").innerHTML = String(window.totalTime % 60).padStart(2, '0');
@@ -0,0 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test Punti</title>
 </head>
 <body>
    <p>Punti: <span id="punti">0</span></p>
    <script>
        document.getElementById("punti").innerHTML = localStorage.getItem("punteggio");
    </script>
 </body>
 </html>