Hugging Face's logo

Spaces:
Mistral-AI-Game-Jam
/
team_16trial
Sleeping

App Files Community
1
dcrey7 commited on
Commit
c5f9032
·
verified ·
1 Parent(s): 43608e9

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +136 -135
templates/index.html CHANGED
@@ -1,136 +1,137 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <meta name="description" content="NOT ME - A voice deduction game powered by AI">
7
-
8
- <title>NOT ME - Voice Deduction Game</title>
9
-
10
- <!-- Import the Pixelify Sans font for our game's unique style -->
11
- <link href="https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
12
-
13
- <!-- Main stylesheet -->
14
- <link rel="stylesheet" href="static/css/styles.css">
15
-
16
- <!-- Socket.IO client for real-time communication -->
17
- <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
18
-
19
- <!-- Three.js for background animations -->
20
- <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
21
- </head>
22
- <body>
23
- <!-- WebGL background container for particle effects -->
24
- <canvas id="webgl-background"></canvas>
25
-
26
- <!-- Settings button that appears after game starts -->
27
- <button id="settings-button" class="settings-button hidden">
28
- <span class="settings-icon">⚙️</span>
29
- </button>
30
-
31
- <!-- Main game container -->
32
- <div id="game-container">
33
- <!-- Landing Page -->
34
- <div id="landing-page" class="game-page active">
35
- <h1 class="game-title">
36
- NOT <span class="title-emphasis">ME</span>
37
- </h1>
38
- <button id="play-button" class="button primary-button">PLAY</button>
39
- </div>
40
-
41
- <!-- Player Setup Page -->
42
- <div id="setup-page" class="game-page">
43
- <h2 class="page-title">Player Setup</h2>
44
- <div id="player-list" class="player-grid"></div>
45
- <div class="setup-controls">
46
- <button id="add-player-button" class="button secondary-button">Add Player</button>
47
- <button id="start-button" class="button primary-button" disabled>Start Game</button>
48
- </div>
49
- </div>
50
-
51
- <!-- Game Page (Recording Phase) -->
52
- <div id="recording-page" class="game-page">
53
- <div id="timer-display" class="timer"></div>
54
- <div id="question-display" class="question-box"></div>
55
-
56
- <!-- Recording interface -->
57
- <div class="recording-controls">
58
- <canvas id="recording-visualizer" class="visualizer"></canvas>
59
- <button id="record-button" class="button record-button">Start Recording</button>
60
- <div class="recording-time"></div>
61
- </div>
62
- </div>
63
-
64
- <!-- Listening Phase -->
65
- <div id="listening-page" class="game-page">
66
- <div id="timer-display" class="timer"></div>
67
- <h2 class="page-title">Listen to Responses</h2>
68
- <div id="recordings-list" class="recordings-grid">
69
- <!-- Recording playback buttons will be dynamically added here -->
70
- </div>
71
- </div>
72
-
73
- <!-- Voting Phase -->
74
- <div id="voting-page" class="game-page">
75
- <div id="timer-display" class="timer"></div>
76
- <h2 class="page-title">Vote for the Impostor</h2>
77
- <div id="voting-options" class="voting-grid">
78
- <!-- Voting buttons will be dynamically added here -->
79
- </div>
80
- </div>
81
-
82
- <!-- Results Page -->
83
- <div id="results-page" class="game-page">
84
- <h2 class="page-title">Round Results</h2>
85
- <div id="results-content" class="results-container">
86
- <!-- Results will be dynamically added here -->
87
- </div>
88
- <button id="next-round-button" class="button primary-button">Next Round</button>
89
- </div>
90
- </div>
91
-
92
- <!-- Overlay containers -->
93
- <div id="loading-overlay" class="overlay">
94
- <div class="loading-spinner"></div>
95
- <div class="loading-message">Loading...</div>
96
- </div>
97
-
98
- <div id="error-overlay" class="overlay">
99
- <div class="error-message"></div>
100
- </div>
101
-
102
- <div id="settings-overlay" class="overlay">
103
- <div class="settings-panel">
104
- <h3>Game Settings</h3>
105
- <div class="settings-options">
106
- <div class="setting-item">
107
- <label for="dark-mode">Dark Mode</label>
108
- <input type="checkbox" id="dark-mode" checked>
109
- </div>
110
- <div class="setting-item">
111
- <label for="sound-effects">Sound Effects</label>
112
- <input type="checkbox" id="sound-effects" checked>
113
- </div>
114
- </div>
115
- <button id="exit-game" class="button secondary-button">Exit Game</button>
116
- </div>
117
- </div>
118
-
119
- <!-- Game scripts -->
120
- <script type="module" src="static/js/background.js"></script>
121
- <script type="module" src="static/js/audio.js"></script>
122
- <script type="module" src="static/js/ui.js"></script>
123
- <script type="module" src="static/js/game.js"></script>
124
-
125
- <!-- Audio context initialization script -->
126
- <script>
127
- // Initialize audio context on user interaction
128
- document.addEventListener('click', function initAudioContext() {
129
- if (!window.audioContext) {
130
- window.audioContext = new (window.AudioContext || window.webkitAudioContext)();
131
- }
132
- document.removeEventListener('click', initAudioContext);
133
- }, { once: true });
134
- </script>
135
- </body>
 
136
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <meta name="description" content="NOT ME - A voice deduction game powered by AI">
7
+
8
+ <title>NOT ME - Voice Deduction Game</title>
9
+
10
+ <!-- Import the Pixelify Sans font for our game's unique style -->
11
+ <link href="https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
12
+
13
+ <!-- Main stylesheet -->
14
+ <link rel="stylesheet" href="static/css/styles.css">
15
+
16
+ <!-- Socket.IO client for real-time communication -->
17
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
18
+
19
+ <!-- Three.js for background animations -->
20
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
21
+ </head>
22
+ <body>
23
+ <!-- WebGL background container for particle effects -->
24
+ <canvas id="webgl-background"></canvas>
25
+
26
+ <!-- Settings button that appears after game starts -->
27
+ <button id="settings-button" class="settings-button hidden">
28
+ <span class="settings-icon">⚙️</span>
29
+ </button>
30
+
31
+ <!-- Main game container -->
32
+ <div id="game-container">
33
+ <!-- Landing Page -->
34
+ <div id="landing-page" class="game-page active">
35
+ <h1 class="game-title">
36
+ <span class="title-not">NOT</span>
37
+ <span class="title-emphasis">ME</span>
38
+ </h1>
39
+ <button id="play-button" class="button primary-button">PLAY</button>
40
+ </div>
41
+
42
+ <!-- Player Setup Page -->
43
+ <div id="setup-page" class="game-page">
44
+ <h2 class="page-title">Player Setup</h2>
45
+ <div id="player-list" class="player-grid"></div>
46
+ <div class="setup-controls">
47
+ <button id="add-player-button" class="button secondary-button">Add Player</button>
48
+ <button id="start-button" class="button primary-button" disabled>Start Game</button>
49
+ </div>
50
+ </div>
51
+
52
+ <!-- Game Page (Recording Phase) -->
53
+ <div id="recording-page" class="game-page">
54
+ <div id="timer-display" class="timer"></div>
55
+ <div id="question-display" class="question-box"></div>
56
+
57
+ <!-- Recording interface -->
58
+ <div class="recording-controls">
59
+ <canvas id="recording-visualizer" class="visualizer"></canvas>
60
+ <button id="record-button" class="button record-button">Start Recording</button>
61
+ <div class="recording-time"></div>
62
+ </div>
63
+ </div>
64
+
65
+ <!-- Listening Phase -->
66
+ <div id="listening-page" class="game-page">
67
+ <div id="timer-display" class="timer"></div>
68
+ <h2 class="page-title">Listen to Responses</h2>
69
+ <div id="recordings-list" class="recordings-grid">
70
+ <!-- Recording playback buttons will be dynamically added here -->
71
+ </div>
72
+ </div>
73
+
74
+ <!-- Voting Phase -->
75
+ <div id="voting-page" class="game-page">
76
+ <div id="timer-display" class="timer"></div>
77
+ <h2 class="page-title">Vote for the Impostor</h2>
78
+ <div id="voting-options" class="voting-grid">
79
+ <!-- Voting buttons will be dynamically added here -->
80
+ </div>
81
+ </div>
82
+
83
+ <!-- Results Page -->
84
+ <div id="results-page" class="game-page">
85
+ <h2 class="page-title">Round Results</h2>
86
+ <div id="results-content" class="results-container">
87
+ <!-- Results will be dynamically added here -->
88
+ </div>
89
+ <button id="next-round-button" class="button primary-button">Next Round</button>
90
+ </div>
91
+ </div>
92
+
93
+ <!-- Overlay containers -->
94
+ <div id="loading-overlay" class="overlay">
95
+ <div class="loading-spinner"></div>
96
+ <div class="loading-message">Loading...</div>
97
+ </div>
98
+
99
+ <div id="error-overlay" class="overlay">
100
+ <div class="error-message"></div>
101
+ </div>
102
+
103
+ <div id="settings-overlay" class="overlay">
104
+ <div class="settings-panel">
105
+ <h3>Game Settings</h3>
106
+ <div class="settings-options">
107
+ <div class="setting-item">
108
+ <label for="dark-mode">Dark Mode</label>
109
+ <input type="checkbox" id="dark-mode" checked>
110
+ </div>
111
+ <div class="setting-item">
112
+ <label for="sound-effects">Sound Effects</label>
113
+ <input type="checkbox" id="sound-effects" checked>
114
+ </div>
115
+ </div>
116
+ <button id="exit-game" class="button secondary-button">Exit Game</button>
117
+ </div>
118
+ </div>
119
+
120
+ <!-- Game scripts -->
121
+ <script type="module" src="static/js/background.js"></script>
122
+ <script type="module" src="static/js/audio.js"></script>
123
+ <script type="module" src="static/js/ui.js"></script>
124
+ <script type="module" src="static/js/game.js"></script>
125
+
126
+ <!-- Audio context initialization script -->
127
+ <script>
128
+ // Initialize audio context on user interaction
129
+ document.addEventListener('click', function initAudioContext() {
130
+ if (!window.audioContext) {
131
+ window.audioContext = new (window.AudioContext || window.webkitAudioContext)();
132
+ }
133
+ document.removeEventListener('click', initAudioContext);
134
+ }, { once: true });
135
+ </script>
136
+ </body>
137
  </html>