-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
225 lines (204 loc) · 12.2 KB
/
Copy pathindex.html
File metadata and controls
225 lines (204 loc) · 12.2 KB
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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ping Prompt - AI Air Hockey</title>
<link rel="icon" type="image/svg+xml" href="favicon.svg">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;500;700&family=Orbitron:wght@400;700;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<!-- Supabase JS -->
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
<!-- Cabin Analytics (Uniquement sur GitHub Pages) -->
<script>
if (window.location.hostname === "quentinmerle.github.io") {
var cabinScript = document.createElement('script');
cabinScript.async = true;
cabinScript.defer = true;
cabinScript.setAttribute('data-domain', 'vibrisse-studio.dev');
cabinScript.src = 'https://scripts.withcabin.com/hello.js';
document.head.appendChild(cabinScript);
}
</script>
</head>
<body>
<!-- Mobile Warning Overlay -->
<div id="mobile-warning">
<div class="mobile-warning-content">
<h2 class="neon-title" style="font-size: 2.5rem;">⚠️ ACCESS DENIED</h2>
<p style="font-family: monospace; color: #ff0055; font-size: 1.1rem; line-height: 1.5; background: rgba(255, 0, 85, 0.1); border-left: 4px solid #ff0055; padding: 15px;">
"Vous pensez vraiment que je vais vous laisser téléporter votre palet avec vos doigts sur un écran tactile ? Je refuse de jouer contre des tricheurs, humain."<br><br>
<span style="color: #fff;">— <strong>NEURAL_CORE</strong></span>
</p>
<p style="color: #4facfe; font-size: 1.2rem; margin-top: 20px;">
> Basculez sur un ordinateur (Desktop) avec une souris si vous voulez un combat à la loyale.
</p>
<p style="margin-top: 30px;">
<a href="https://dev.to/quentin_merle/i-coded-an-air-hockey-game-where-a-local-slm-hacks-the-dom-to-cheat-and-trash-talks-you-306h" target="_blank" class="cyber-btn" style="display: inline-block; text-decoration: none; margin-bottom: 15px;">Lire le Making-of (🇬🇧)</a>
<br>
<a href="https://vibrisse-studio.dev/" target="_blank" style="color: var(--text-secondary); text-decoration: underline;">Retourner au Studio</a>
</p>
</div>
</div>
<div id="download-bar-container">
<div id="download-progress" class="download-bar"></div>
</div>
<div id="game-wrapper">
<!-- TOP HUD (Score & Notifs) -->
<div id="top-hud-bar" class="hidden">
<div id="score-container">
<div id="score-board" aria-live="polite" aria-atomic="true">
<span id="player-score">0</span>
<span class="divider">-</span>
<span id="ai-score">0</span>
</div>
<div id="arcade-score-display" aria-label="Score Arcade">PTS: 000000</div>
</div>
<div id="dialogue-wrapper">
<div id="llm-indicator">
<span id="llm-status-icon" class="status-idle"></span>
<span id="llm-status-text">Neural Core - Connecting...</span>
<span class="model-badge">Model: Phi-3-mini</span>
</div>
<div class="logs-and-chat">
<div id="system-logs">
<div class="log-entry">[SYSTEM] Initializing arena...</div>
</div>
<div id="dialogue-container">
<div id="ai-avatar-name" class="ai-avatar">🤖 TRAINING_BOT_v1 :</div>
<p id="narrative-text" aria-live="assertive" aria-atomic="true">« Welcome. Initiating basic training protocols. »</p>
</div>
</div>
</div>
</div>
<!-- ARÈNE CENTRALE -->
<div id="game-container">
<!-- CRT Overlay -->
<div id="crt-overlay"></div>
<canvas id="game-canvas" width="800" height="400" role="application" aria-label="Zone de jeu Air Hockey" tabindex="0"></canvas>
<!-- Écrans d'Interface (State Machine) -->
<div id="ui-overlays">
<!-- Start Menu Overlay -->
<div id="start-screen" class="overlay active">
<div class="menu-content">
<h1 class="neon-title">PING PROMPT</h1>
<p class="subtitle">Man vs. Machine</p>
<div class="briefing-box">
<p>An experimental Air Hockey game powered by a Local LLM & Neural Networks.<br>
<strong>WARNING:</strong> The AI will learn your moves and cheat to win.</p>
</div>
<div class="customization-panel">
<h3>PLAYER IDENTIFICATION</h3>
<div class="arcade-input-container" style="margin-bottom: 15px;">
<input type="text" id="player-name-setup" maxlength="12" autocomplete="off" spellcheck="false" placeholder="ENTER NAME" style="text-align: center; width: 80%;">
</div>
<h3>SELECT ENERGY CORE</h3>
<div class="color-picker">
<button class="color-btn selected" data-color="#4facfe" style="background: #4facfe;"></button>
<button class="color-btn" data-color="#00ffcc" style="background: #00ffcc;"></button>
<button class="color-btn" data-color="#ff0055" style="background: #ff0055;"></button>
<button class="color-btn" data-color="#ffdd00" style="background: #ffdd00;"></button>
</div>
</div>
<button id="start-btn" class="cyber-btn huge-btn">INITIALIZE LINK</button>
<button id="show-leaderboard-btn" class="cyber-btn" style="margin-top: 15px; background: transparent; border: 1px solid #4facfe; opacity: 0.8; font-size: 0.9rem;">LEADERBOARD</button>
<div style="margin-top: 25px; font-size: 0.7rem; color: rgba(255, 255, 255, 0.4); font-family: monospace;">
Music by <a href="https://pixabay.com/users/mfcc-28627740/?utm_source=link-attribution&utm_medium=referral&utm_campaign=music&utm_content=297305" style="color: #4facfe; text-decoration: none;">Mykola Sosin</a> from <a href="https://pixabay.com/music//?utm_source=link-attribution&utm_medium=referral&utm_campaign=music&utm_content=297305" style="color: #4facfe; text-decoration: none;">Pixabay</a>
</div>
</div>
</div>
<!-- Game Over Screen -->
<div id="game-over-screen" class="overlay hidden">
<div class="menu-content">
<h1 id="game-over-title" class="neon-title">GAME OVER</h1>
<p id="game-over-subtitle" class="subtitle">System Offline</p>
<button id="rematch-btn" class="cyber-btn huge-btn" style="margin-top: 30px;">REMATCH</button>
</div>
</div>
<!-- Arcade High Score Screen -->
<div id="arcade-input-screen" class="overlay hidden">
<div class="menu-content">
<h1 class="neon-title" style="color: #ffdd00; text-shadow: 0 0 10px #ffdd00;">HIGH SCORE</h1>
<p class="subtitle" id="final-score-display">YOUR SCORE: 000000</p>
<div class="arcade-input-container">
<input type="text" id="arcade-name-input" maxlength="3" autocomplete="off" spellcheck="false" placeholder="AAA">
</div>
<button id="submit-score-btn" class="cyber-btn huge-btn" style="margin-top: 20px;">SUBMIT</button>
</div>
</div>
<!-- Leaderboard Screen -->
<div id="leaderboard-screen" class="overlay hidden">
<div class="menu-content" style="width: 500px;">
<h2 class="neon-title" style="font-size: 3rem;">TOP 10</h2>
<table class="retro-table">
<thead>
<tr><th>RANK</th><th>NAME</th><th>SCORE</th></tr>
</thead>
<tbody id="leaderboard-tbody">
<!-- Injected by JS -->
</tbody>
</table>
<button id="leaderboard-close-btn" class="cyber-btn" style="margin-top: 30px;">[ ESCAPE ]</button>
</div>
</div>
<!-- Out of Top 10 Screen (Gatekeeper) -->
<div id="out-of-top-10-screen" class="overlay hidden">
<div class="menu-content">
<h2 class="neon-title" style="font-size: 3rem; color: #ff0055; text-shadow: 0 0 10px #ff0055;">GAME OVER</h2>
<h3 id="out-score-display" style="color: #ffdd00; font-family: 'Orbitron', monospace; font-size: 2rem; margin: 20px 0;">YOUR SCORE: 000000</h3>
<div class="briefing-box" style="text-align: center;">
"Bien joué humain, mais pas suffisant pour entrer dans le Top 10. Neural Core est presque déçu."
</div>
<button id="retry-btn" class="cyber-btn huge-btn" style="margin-top: 20px;">RETRY</button>
</div>
</div>
<!-- Cheat Alert Overlay -->
<div id="cheat-alert-overlay" class="hidden" role="alert" aria-live="assertive">
<h2 id="cheat-alert-text">SYSTEM OVERRIDE</h2>
</div>
<!-- Bonus Alert Overlay -->
<div id="bonus-alert-overlay" class="hidden" role="status" aria-live="polite">
<h3 id="bonus-alert-text">SPEED UP!</h3>
</div>
<!-- Écran de Pause -->
<div id="pause-screen" class="overlay hidden">
<div class="pause-content">
<h2>PAUSED</h2>
<p>System on standby.</p>
<div style="display: flex; flex-direction: column; gap: 15px; align-items: center; margin-top: 20px;">
<button id="resume-btn" class="cyber-btn">RESUME</button>
<div style="display: flex; gap: 15px;">
<button id="mute-btn" class="cyber-btn" style="font-size: 0.9rem; padding: 10px 20px; opacity: 0.8;">🎵 AUDIO: ON</button>
<button id="voice-btn" class="cyber-btn" style="font-size: 0.9rem; padding: 10px 20px; opacity: 0.8;">🤖 VOICE: ON</button>
</div>
</div>
</div>
</div>
</div>
<!-- Fin de #ui-overlays -->
</div>
<!-- Fin de #game-container -->
<!-- BOTTOM HUD (Brain.js) -->
<div id="bottom-hud-bar" class="hidden">
<div id="brain-hud">
<div class="hud-header">BRAIN.JS // PATTERN REC</div>
<div id="brain-hud-content">Waiting for data...</div>
</div>
</div>
</div>
<!-- Scripts chargés séquentiellement pour préserver l'exécution locale (file://) sans serveur -->
<script src="https://unpkg.com/brain.js"></script>
<script src="js/systems/audioManager.js"></script>
<script src="js/ai/ai-profiler.js"></script>
<script src="js/systems/fx.js"></script>
<script src="js/core/physics.js"></script>
<script src="js/core/entities.js"></script>
<script src="js/systems/items.js"></script>
<script type="module" src="js/ai/ai-director.js"></script>
<script src="js/core/game.js"></script>
<script src="js/ui/leaderboard.js"></script>
<script src="js/ui/ui.js"></script>
</body>
</html>