index.html

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cub8 Dash</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="game-container">
        <canvas id="gameCanvas"></canvas>
        
        <!-- Menu Principale -->
        <div id="menu" class="screen">
            <h1>CUB8 DASH</h1>
            
            <!-- Selezione Giocatore -->
            <div class="player-selection">
                <label>Giocatore:</label>
                <select id="playerSelect" class="player-dropdown"></select>
                <button id="newPlayerBtn" class="btn-new-player">+ Nuovo</button>
            </div>
            
            <button id="playBtn" class="btn">PLAY</button>
            <button id="levelSelectBtn" class="btn">SELECT LEVEL</button>
            <button id="leaderboardBtn" class="btn">LEADERBOARD</button>
            <button id="muteBtn" class="btn-small">🔊</button>
            
            <!-- Credits -->
            <div class="credits">
                <p>Developed by</p>
                <h3>TA-DA GAMES</h3>
            </div>
        </div>

        <!-- Dialog Nuovo Giocatore -->
        <div id="newPlayerDialog" class="dialog hidden">
            <div class="dialog-content">
                <h3>Nuovo Giocatore</h3>
                <input type="text" id="newPlayerName" placeholder="Nome giocatore" maxlength="20">
                <div class="dialog-buttons">
                    <button id="createPlayerBtn" class="btn">Crea</button>
                    <button id="cancelPlayerBtn" class="btn">Annulla</button>
                </div>
            </div>
        </div>

        <!-- Selezione Livelli -->
        <div id="levelSelect" class="screen hidden">
            <h2>SELECT LEVEL</h2>
            <div id="levelGrid"></div>
            <button id="backBtn" class="btn">BACK</button>
        </div>

        <!-- HUD In-Game -->
        <div id="hud" class="hidden">
            <div id="levelInfo">LEVEL: <span id="currentLevel">1</span></div>
            <div id="progressBar">
                <div id="progressFill"></div>
            </div>
            <div id="bestScore">BEST: <span id="bestTime">0.00</span>s</div>
        </div>

        <!-- Game Over Screen -->
        <div id="gameOver" class="screen hidden">
            <h2>GAME OVER</h2>
            <p>Time: <span id="finalTime">0.00</span>s</p>
            <p>Best: <span id="finalBest">0.00</span>s</p>
            <button id="retryBtn" class="btn">RETRY</button>
            <button id="menuBtn" class="btn">MENU</button>
        </div>

        <!-- Level Complete Screen -->
        <div id="levelComplete" class="screen hidden">
            <h2>LEVEL COMPLETE!</h2>
            <p>Time: <span id="completeTime">0.00</span>s</p>
            <p>Best: <span id="completeBest">0.00</span>s</p>
            <button id="nextLevelBtn" class="btn">NEXT LEVEL</button>
            <button id="menuBtn2" class="btn">MENU</button>
        </div>

        <!-- Leaderboard Screen -->
        <div id="leaderboard" class="screen hidden">
            <h2>LEADERBOARD</h2>
            <div id="leaderboardContent" class="leaderboard-list"></div>
            <button id="backFromLeaderboardBtn" class="btn">BACK</button>
        </div>
    </div>

    <!-- Scripts -->
    <script src="js/AudioManager.js"></script>
    <script src="js/Physics.js"></script>
    <script src="js/FixedLevel.js"></script>
    <script src="js/Platform.js"></script>
    <script src="js/Portal.js"></script>
    <script src="js/Player.js"></script>
    <script src="js/Obstacle.js"></script>
    <script src="js/GravityZone.js"></script>
    <script src="js/Level.js"></script>
    <script src="js/GameManager.js"></script>
    <script src="js/main.js"></script>
</body>
</html>