SpaceTetris/index.html at main · adrev/SpaceTetris · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SpaceTris</title>
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/styles.css">
    <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-database.js"></script>
</head>
<body>
    <div class="main-layout">
        <div id="gameSection">
            <div id="gameContainer">
                <canvas id="gameCanvas" width="600" height="800"></canvas>
                <div class="game-hud">
                    <div class="hud-score" id="hudScore">SCORE: 0</div>
                    <div class="hud-level" id="hudLevel">LEVEL: 1</div>
                </div>
                <button id="settingsBtn">⚙️</button>
            </div>
            <div id="gameInstructions">
                <p>🎮 Click on game to focus • ← → ↑ ↓ Arrow Keys: Move • Spacebar: Shoot</p>
            </div>
        </div>

        <div id="sidebarSection">
            <div id="publicHighscoreDisplay">
                <h3>TOP SCORES</h3>
                <div id="publicHighscoresList">
                    <div>
                        <span>RANK</span>
                        <span>NAME</span>
                        <span>SCORE</span>
                    </div>
                    <div id="loadingScores">Loading highscores...</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Full-screen modals -->
    <div id="gameOverOverlay">
        <div class="overlay-content">
            <h2 style="color: #ff5555; margin-bottom: 20px;">GAME OVER</h2>
            <p id="finalScore" style="color: #ffff00; font-size: 16px; margin-bottom: 30px;">SCORE: 0</p>
            <div id="userProfile">
                <p style="margin-bottom: 15px;">ENTER YOUR NAME:</p>
                <input type="text" id="nicknameInput" maxlength="30" placeholder="Enter your name...">
                <div style="margin-top: 20px;">
                    <button id="submitScoreBtn">SUBMIT SCORE</button>
                    <button onclick="resetGame()" style="margin-top: 10px; border-color: #00ff00; color: #00ff00;">PLAY AGAIN</button>
                </div>
            </div>
        </div>
    </div>

    <div id="settingsOverlay">
        <div class="overlay-content">
            <h2 style="color: #ffff00; margin-bottom: 30px;">⚙️ SETTINGS</h2>
            <div class="settings-section">
                <p id="playerNameDisplay" style="color: #00ffff; margin-bottom: 20px;">PLAYER: ANONYMOUS</p>

                <div class="setting-item">
                    <label>🔊 SOUND: <input type="checkbox" id="soundToggle" checked></label>
                </div>

                <div class="setting-item">
                    <label>🎵 MUSIC: <input type="checkbox" id="musicToggle" checked></label>
                </div>

                <div id="musicControls" style="margin: 20px 0;">
                    <button id="prevSong">◀ PREV</button>
                    <button id="nextSong">NEXT ▶</button>
                </div>

                <button id="closeSettings" style="margin-top: 20px;">✕ CLOSE</button>
            </div>
        </div>
    </div>

    <!-- Firebase configuration placeholder - populated by config.js -->
    <div id="firebase-config" style="display: none;"></div>

    <script src="js/constants.js"></script>
    <script src="js/firebase.js"></script>
    <script src="js/game.js"></script>
</body>
</html>