finalizzazione del progetto

js/fase1.js

@@ -2,29 +2,79 @@ import * as THREE from 'three';
 import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js';
 import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
+// 0. IMPOSTAZIONE FPS
+let lastTime = performance.now();
+let frameCount = 0;
+let fps = 0;
+const fpsDisplay = document.getElementById('fps-counter');
+
 // 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}`);
+    // Testo iniziale
+    document.getElementById("loading-text").innerHTML = "IDENTIFICAZIONE RISORSE...";
 };
 manager.onLoad = function () {
-    document.getElementById('loading-screen').style.display = 'none';
-    animate(); // avvia il rendering
+    const loadingText = document.getElementById("loading-text");
+    // Testo in italiano, tecnico e pulito
+    loadingText.innerHTML = "CARICAMENTO COMPLETATO CON SUCCESSO";
+    // Estetica finale: testo fisso e brillante
+    loadingText.style.animation = "none";
+    loadingText.style.color = "#ffffff";
+    loadingText.style.textShadow = "0 0 15px var(--green-bright)";
+    loadingText.style.opacity = "1";
+    // Timeout per lasciare all'utente il tempo di leggere il successo
+    setTimeout(() => {
+        const loadingScreen = document.getElementById('loading-screen');
+        loadingScreen.style.opacity = '0';
+        loadingScreen.style.transition = 'opacity 0.8s ease';
+        setTimeout(() => {
+            loadingScreen.style.display = 'none';
+            // MOSTRA IL POPUP DEL NOME
+            document.getElementById('name-popup-overlay').style.display = 'flex';
+        }, 800);
+    }, 500);
+    animate(); // Parte il loop di Three.js
 };
 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}`);
+    const percent = Math.round((itemsLoaded / itemsTotal) * 100);
+    // Estraiamo solo il nome del file dall'URL per pulizia
+    // Esempio: "assets/models/bottiglia.glb" diventa "bottiglia.glb"
+    const fileName = url.split('/').pop().toUpperCase();
+    // Aggiorniamo la barra
+    const bar = document.getElementById('loading-bar');
+    if (bar) bar.style.width = percent + '%';
+    // Nuovo formato del testo: NOME_FILE [XX%]
+    document.getElementById("loading-text").innerHTML = `${fileName} [${percent}%]`;
 };
 manager.onError = function (url) {
-    document.getElementById("loading-text").innerHTML = `Errore nel caricamento: ${url}`;
-    console.log(`Errore nel caricamento: ${url}`);
+    document.getElementById("loading-text").innerHTML = `ERRORE CARICAMENTO: ${url.split('/').pop()}`;
+    document.getElementById("loading-text").style.color = "#ff4d4d";
 };
+// GESTIONE CONFERMA NOME
+document.getElementById('confirm-name-btn').addEventListener('click', function() {
+    const input = document.getElementById('username-input');
+    const name = input.value.trim();
+    localStorage.setItem("username", name);
+    // 1. Nascondi il Popup
+    const popup = document.getElementById('name-popup-overlay');
+    popup.style.opacity = '0';
+    popup.style.transition = 'opacity 0.5s ease';
+
+    setTimeout(() => {
+        popup.style.display = 'none';
+
+        // 2. MOSTRA LA SCHERMATA INIZIALE (Controlli e Titolo)
+        const mainContent = document.getElementById('main-start-content');
+        mainContent.style.display = 'flex';
+        // Piccolo trucco per l'animazione di entrata (fade in)
+        setTimeout(() => {
+            mainContent.style.opacity = '1';
+            mainContent.style.transition = 'opacity 1s ease';
+        }, 50);
+
+    }, 500);
+});
 
 // 1b. SCENA E CAMERA
 const scene = new THREE.Scene();
@@ -150,6 +200,7 @@ function lock() {
     document.getElementById('punti').style.display = 'block';
     document.getElementById('tempo').style.display = 'block';
     document.getElementById('crosshair').style.display = 'block';
+    document.getElementById('fps-counter').style.display = 'block';
 }
 function unlock() {
     timer.pause();
@@ -157,6 +208,7 @@ function unlock() {
     document.getElementById('punti').style.display = 'none';
     document.getElementById('tempo').style.display = 'none';
     document.getElementById('crosshair').style.display = 'none';
+    document.getElementById('fps-counter').style.display = 'none';
 }
 const controls = new PointerLockControls(camera, document.body);
 document.getElementById('start').addEventListener('click', () => {
@@ -255,6 +307,21 @@ let lastSafePosition = camera.position.clone();
 
 function animate() {
     requestAnimationFrame(animate);
+    // --- Calcolo FPS ---
+    frameCount++;
+    const currentTime = performance.now();
+    // Ogni secondo (1000ms) aggiorniamo il contatore visivo
+    if (currentTime >= lastTime + 1000) {
+        fps = frameCount;
+        fpsDisplay.innerText = `FPS: ${fps}`;
+        // Colore dinamico: verde se fluido, giallo/rosso se lagga
+        if (fps < 30) fpsDisplay.style.color = "#ff4d4d";
+        else if (fps < 55) fpsDisplay.style.color = "#f1c40f";
+        else fpsDisplay.style.color = "var(--green-bright)";
+
+        frameCount = 0;
+        lastTime = currentTime;
+    }
 
     if (controls.isLocked) {
         // 1. Salva la posizione attuale prima del movimento