admin/chrismas_trae_game
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Simplified registration flow: single username input with auto-generated PIN

Browse Source
This commit is contained in:
Gemini AI
2025-12-27 04:08:41 +04:00
Unverified
parent 2ee6a51d1e
commit afc24414a3
2 changed files with 196 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

250
app.js
View File

@@ -221,8 +221,7 @@ function initGame() {
const startBtn = document.getElementById('startGameBtn'); const startBtn = document.getElementById('startGameBtn');
const scoreEl = document.getElementById('scoreVal'); const scoreEl = document.getElementById('scoreVal');
const overlay = document.getElementById('gameOverlay'); const overlay = document.getElementById('gameOverlay');
const submitBtn = document.getElementById('submitScoreBtn'); const submitBtn = document.getElementById('saveScoreBtn');
const nameInput = document.getElementById('playerName');
const leaderboardList = document.getElementById('leaderboardList'); const leaderboardList = document.getElementById('leaderboardList');
const timerDisplay = document.getElementById('timerDisplay'); const timerDisplay = document.getElementById('timerDisplay');
const timeBtns = document.querySelectorAll('.time-btn'); const timeBtns = document.querySelectorAll('.time-btn');
@@ -254,7 +253,8 @@ function initGame() {
}); });
const playersData = JSON.parse(localStorage.getItem('trae_players') || '{}'); const playersData = JSON.parse(localStorage.getItem('trae_players') || '{}');
let currentUser = null;
const generateSecretCode = () => { const generateSecretCode = () => {
const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789'; const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789';
let code = ''; let code = '';
@@ -263,62 +263,82 @@ function initGame() {
} }
return code; return code;
}; };
window.generatePin = (codeInputId, hintId) => { window.registerPlayer = () => {
const codeInput = document.getElementById(codeInputId); const username = document.getElementById('regUsername').value.trim() || 'Anonymous';
const newPin = generateSecretCode(); const pin = generateSecretCode();
codeInput.value = newPin;
codeInput.style.background = 'rgba(0, 255, 100, 0.2)'; if (playersData[username]) {
setTimeout(() => { document.getElementById('regStatus').innerHTML = `<span style="color: #ff4444;">Username already exists! Your PIN: ${playersData[username].code}</span>`;
codeInput.style.background = ''; return;
}, 1000);
const hintEl = document.getElementById(hintId);
if (hintEl) {
hintEl.innerHTML = `<span style="color: var(--trae-green); font-weight: bold;">PIN Generated: ${newPin}</span>`;
} }
playersData[username] = {
name: username,
code: pin,
games: {},
lastPlayed: new Date().toISOString()
};
localStorage.setItem('trae_players', JSON.stringify(playersData));
currentUser = username;
document.getElementById('regUsername').value = '';
document.getElementById('regStatus').innerHTML = '';
document.getElementById('regStatus').parentElement.querySelector('.input-group').style.display = 'none';
document.getElementById('currentUserInfo').style.display = 'block';
document.getElementById('currentUserDisplay').innerText = username;
document.getElementById('currentUserPin').innerText = pin;
updateLeaderboardUI();
}; };
window.submitScore = (gameType, score, nameInputId, codeInputId, hintId) => { window.logoutUser = () => {
const nameInput = document.getElementById(nameInputId); currentUser = null;
const codeInput = document.getElementById(codeInputId); document.getElementById('currentUserInfo').style.display = 'none';
const name = nameInput.value.trim() || 'Anonymous'; document.getElementById('regUsername').value = '';
let secretCode = codeInput.value.trim().toUpperCase(); document.getElementById('regStatus').innerHTML = '';
document.getElementById('regStatus').parentElement.querySelector('.input-group').style.display = 'flex';
if (!playersData[name]) {
if (!secretCode) { updateAllLoginPrompts();
secretCode = generateSecretCode(); };
}
} else if (secretCode && playersData[name].code !== secretCode) { window.submitScore = (gameType, score) => {
alert('PIN not found for this name. Leave blank for new PIN.'); if (!currentUser) {
return false; alert('Please register first to save scores');
} else { return;
secretCode = playersData[name].code;
} }
if (!playersData[name]) { const player = playersData[currentUser];
playersData[name] = { if (!player.games[gameType] || player.games[gameType].score < score) {
name: name, player.games[gameType] = {
code: secretCode,
games: {},
lastPlayed: new Date().toISOString()
};
} else {
playersData[name].lastPlayed = new Date().toISOString();
}
if (!playersData[name].games[gameType] || playersData[name].games[gameType].score < score) {
playersData[name].games[gameType] = {
score: score, score: score,
date: new Date().toISOString() date: new Date().toISOString()
}; };
player.lastPlayed = new Date().toISOString();
localStorage.setItem('trae_players', JSON.stringify(playersData));
updateLeaderboardUI();
alert(`Score saved! ${currentUser}: ${score} in ${gameType}`);
} else {
alert(`Score not saved. Your best for ${gameType} is ${player.games[gameType].score}`);
} }
};
localStorage.setItem('trae_players', JSON.stringify(playersData));
document.getElementById(hintId).innerText = `Your PIN: ${secretCode}`; const updateAllLoginPrompts = () => {
nameInput.value = ''; const prompts = document.querySelectorAll('[id$="LoginPrompt"]');
codeInput.value = ''; prompts.forEach(p => {
updateLeaderboardUI(); p.style.display = currentUser ? 'none' : 'block';
return true; });
};
const updateAllOverlays = () => {
if (currentUser) {
document.getElementById('currentUserDisplay').innerText = currentUser;
document.getElementById('currentUserPin').innerText = playersData[currentUser].code;
document.getElementById('currentUserInfo').style.display = 'block';
document.getElementById('regStatus').parentElement.querySelector('.input-group').style.display = 'none';
}
updateAllLoginPrompts();
}; };
window.copySecretCode = (code) => { window.copySecretCode = (code) => {
@@ -336,11 +356,11 @@ function initGame() {
// Leaderboard logic // Leaderboard logic
let currentTab = 'total'; let currentTab = 'total';
const updateLeaderboardUI = () => { const updateLeaderboardUI = () => {
leaderboardList.innerHTML = ''; leaderboardList.innerHTML = '';
let displayData = []; let displayData = [];
if (currentTab === 'total') { if (currentTab === 'total') {
Object.values(playersData).forEach(player => { Object.values(playersData).forEach(player => {
const totalScore = Object.values(player.games).reduce((sum, val) => sum + val.score, 0); const totalScore = Object.values(player.games).reduce((sum, val) => sum + val.score, 0);
@@ -368,12 +388,12 @@ function initGame() {
}); });
displayData.sort((a, b) => b.score - a.score); displayData.sort((a, b) => b.score - a.score);
} }
displayData.slice(0, 50).forEach((entry, idx) => { displayData.slice(0, 50).forEach((entry, idx) => {
const dateStr = new Date(entry.date).toLocaleDateString(); const dateStr = new Date(entry.date).toLocaleDateString();
const div = document.createElement('div'); const div = document.createElement('div');
div.className = 'leader-item'; div.className = 'leader-item';
if (currentTab === 'total') { if (currentTab === 'total') {
div.innerHTML = ` div.innerHTML = `
<span class="leader-rank">#${idx + 1}</span> <span class="leader-rank">#${idx + 1}</span>
@@ -403,7 +423,7 @@ function initGame() {
} }
leaderboardList.appendChild(div); leaderboardList.appendChild(div);
}); });
if (displayData.length === 0) { if (displayData.length === 0) {
const emptyMsg = document.createElement('div'); const emptyMsg = document.createElement('div');
emptyMsg.className = 'leader-item'; emptyMsg.className = 'leader-item';
@@ -412,7 +432,7 @@ function initGame() {
leaderboardList.appendChild(emptyMsg); leaderboardList.appendChild(emptyMsg);
} }
}; };
const tabButtons = document.querySelectorAll('.tab-btn'); const tabButtons = document.querySelectorAll('.tab-btn');
tabButtons.forEach(btn => { tabButtons.forEach(btn => {
btn.addEventListener('click', () => { btn.addEventListener('click', () => {
@@ -423,6 +443,11 @@ function initGame() {
}); });
}); });
document.getElementById('registerBtn')?.addEventListener('click', registerPlayer);
updateAllOverlays();
updateLeaderboardUI();
const startTimer = () => { const startTimer = () => {
timeLeft = selectedDuration; timeLeft = selectedDuration;
timerDisplay.innerText = timeLeft + 's'; timerDisplay.innerText = timeLeft + 's';
@@ -450,20 +475,21 @@ function initGame() {
gameActive = false; gameActive = false;
if (timerInterval) clearInterval(timerInterval); if (timerInterval) clearInterval(timerInterval);
document.body.style.overflow = ''; document.body.style.overflow = '';
document.getElementById('overlayTitle').innerText = 'GAME OVER';
document.getElementById('gameFinalScore').innerText = score;
overlay.classList.remove('hidden'); overlay.classList.remove('hidden');
document.getElementById('overlayTitle').innerText = `GAME OVER - SCORE: ${score}`;
}; };
document.getElementById('generatePinBtn')?.addEventListener('click', () => { submitBtn.addEventListener('click', () => {
generatePin('playerSecretCode', 'codeHint'); submitScore('gift', score);
overlay.classList.add('hidden');
startBtn.style.display = 'block';
document.body.style.overflow = '';
}); });
submitBtn.addEventListener('click', () => { document.getElementById('playAgainBtn').addEventListener('click', () => {
if (submitScore('gift', score, 'playerName', 'playerSecretCode', 'codeHint')) { overlay.classList.add('hidden');
overlay.classList.add('hidden'); startBtn.click();
startBtn.style.display = 'block';
document.body.style.overflow = '';
}
}); });
const resize = () => { const resize = () => {
@@ -926,7 +952,6 @@ function initTraoom() {
const canvas = document.getElementById('traoomCanvas'); const canvas = document.getElementById('traoomCanvas');
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
const startBtn = document.getElementById('startTraoomBtn'); const startBtn = document.getElementById('startTraoomBtn');
const restartBtn = document.getElementById('restartTraoomBtn');
const killEl = document.getElementById('killVal'); const killEl = document.getElementById('killVal');
const timeEl = document.getElementById('traoomTime'); const timeEl = document.getElementById('traoomTime');
const waveEl = document.getElementById('waveVal'); const waveEl = document.getElementById('waveVal');
@@ -1343,23 +1368,29 @@ function initTraoom() {
mouse.y = touch.clientY - rect.top; mouse.y = touch.clientY - rect.top;
}, { passive: false }); }, { passive: false });
document.getElementById('generateTraoomPinBtn')?.addEventListener('click', () => { document.getElementById('saveTraoomScoreBtn').addEventListener('click', () => {
generatePin('traoomSecretCode', 'traoomCodeHint'); submitScore('traoom', kills);
overlay.classList.add('hidden');
startBtn.style.display = 'block';
}); });
document.getElementById('submitTraoomBtn').addEventListener('click', () => { document.getElementById('playTraoomAgainBtn').addEventListener('click', () => {
if (submitScore('traoom', kills, 'traoomPlayerName', 'traoomSecretCode', 'traoomCodeHint')) { overlay.classList.add('hidden');
overlay.classList.add('hidden'); startBtn.click();
startBtn.style.display = 'block';
}
}); });
document.getElementById('generatePuzzlePinBtn')?.addEventListener('click', () => { document.getElementById('savePuzzleScoreBtn').addEventListener('click', () => {
generatePin('puzzleSecretCode', 'puzzleCodeHint'); submitScore('neonpuzzle', moves);
overlay.classList.add('hidden');
startBtn.style.display = 'block';
});
document.getElementById('playPuzzleAgainBtn').addEventListener('click', () => {
overlay.classList.add('hidden');
startBtn.click();
}); });
startBtn.addEventListener('click', startGame); startBtn.addEventListener('click', startGame);
restartBtn.addEventListener('click', startGame);
window.addEventListener('resize', resize); window.addEventListener('resize', resize);
resize(); resize();
@@ -1370,7 +1401,6 @@ function initNeonPuzzle() {
const canvas = document.getElementById('neonpuzzleCanvas'); const canvas = document.getElementById('neonpuzzleCanvas');
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
const startBtn = document.getElementById('startPuzzleBtn'); const startBtn = document.getElementById('startPuzzleBtn');
const nextBtn = document.getElementById('nextPuzzleBtn');
const levelEl = document.getElementById('puzzleLevel'); const levelEl = document.getElementById('puzzleLevel');
const movesEl = document.getElementById('puzzleMoves'); const movesEl = document.getElementById('puzzleMoves');
const overlay = document.getElementById('neonpuzzleOverlay'); const overlay = document.getElementById('neonpuzzleOverlay');
@@ -1547,7 +1577,6 @@ function initNeonPuzzle() {
}); });
startBtn.addEventListener('click', startGame); startBtn.addEventListener('click', startGame);
nextBtn.addEventListener('click', nextLevel);
window.addEventListener('resize', resize); window.addEventListener('resize', resize);
resize(); resize();
@@ -1558,7 +1587,6 @@ function initRhythmBeat() {
const canvas = document.getElementById('rhythmCanvas'); const canvas = document.getElementById('rhythmCanvas');
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
const startBtn = document.getElementById('startRhythmBtn'); const startBtn = document.getElementById('startRhythmBtn');
const restartBtn = document.getElementById('restartRhythmBtn');
const scoreEl = document.getElementById('rhythmScore'); const scoreEl = document.getElementById('rhythmScore');
const comboEl = document.getElementById('rhythmCombo'); const comboEl = document.getElementById('rhythmCombo');
const streakEl = document.getElementById('rhythmStreak'); const streakEl = document.getElementById('rhythmStreak');
@@ -1743,19 +1771,18 @@ function initRhythmBeat() {
} }
}); });
document.getElementById('generateRhythmPinBtn')?.addEventListener('click', () => { document.getElementById('saveRhythmScoreBtn').addEventListener('click', () => {
generatePin('rhythmSecretCode', 'rhythmCodeHint'); submitScore('rhythm', score);
overlay.classList.add('hidden');
startBtn.style.display = 'block';
}); });
document.getElementById('submitRhythmBtn').addEventListener('click', () => { document.getElementById('playRhythmAgainBtn').addEventListener('click', () => {
if (submitScore('rhythm', score, 'rhythmPlayerName', 'rhythmSecretCode', 'rhythmCodeHint')) { overlay.classList.add('hidden');
overlay.classList.add('hidden'); startBtn.click();
startBtn.style.display = 'block';
}
}); });
startBtn.addEventListener('click', startGame); startBtn.addEventListener('click', startGame);
restartBtn.addEventListener('click', startGame);
window.addEventListener('resize', resize); window.addEventListener('resize', resize);
resize(); resize();
@@ -1766,7 +1793,6 @@ function initCosmicArena() {
const canvas = document.getElementById('arenaCanvas'); const canvas = document.getElementById('arenaCanvas');
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
const startBtn = document.getElementById('startArenaBtn'); const startBtn = document.getElementById('startArenaBtn');
const restartBtn = document.getElementById('restartArenaBtn');
const hpEl = document.getElementById('arenaHP'); const hpEl = document.getElementById('arenaHP');
const killsEl = document.getElementById('arenaKills'); const killsEl = document.getElementById('arenaKills');
const waveEl = document.getElementById('arenaWave'); const waveEl = document.getElementById('arenaWave');
@@ -2029,19 +2055,18 @@ function initCosmicArena() {
}); });
}); });
document.getElementById('generateArenaPinBtn')?.addEventListener('click', () => { document.getElementById('saveArenaScoreBtn').addEventListener('click', () => {
generatePin('arenaSecretCode', 'arenaCodeHint'); submitScore('arena', kills);
overlay.classList.add('hidden');
startBtn.style.display = 'block';
}); });
document.getElementById('submitArenaBtn').addEventListener('click', () => { document.getElementById('playArenaAgainBtn').addEventListener('click', () => {
if (submitScore('arena', kills, 'arenaPlayerName', 'arenaSecretCode', 'arenaCodeHint')) { overlay.classList.add('hidden');
overlay.classList.add('hidden'); startBtn.click();
startBtn.style.display = 'block';
}
}); });
startBtn.addEventListener('click', startGame); startBtn.addEventListener('click', startGame);
restartBtn.addEventListener('click', startGame);
window.addEventListener('resize', resize); window.addEventListener('resize', resize);
resize(); resize();
@@ -2052,7 +2077,6 @@ function initTetris() {
const canvas = document.getElementById('tetrisCanvas'); const canvas = document.getElementById('tetrisCanvas');
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
const startBtn = document.getElementById('startTetrisBtn'); const startBtn = document.getElementById('startTetrisBtn');
const restartBtn = document.getElementById('restartTetrisBtn');
const scoreEl = document.getElementById('tetrisScore'); const scoreEl = document.getElementById('tetrisScore');
const linesEl = document.getElementById('tetrisLines'); const linesEl = document.getElementById('tetrisLines');
const levelEl = document.getElementById('tetrisLevel'); const levelEl = document.getElementById('tetrisLevel');
@@ -2291,12 +2315,18 @@ function initTetris() {
draw(); draw();
}); });
document.getElementById('generateTetrisPinBtn')?.addEventListener('click', () => { document.getElementById('saveTetrisScoreBtn').addEventListener('click', () => {
generatePin('tetrisSecretCode', 'tetrisCodeHint'); submitScore('tetris', score);
overlay.classList.add('hidden');
startBtn.style.display = 'block';
});
document.getElementById('playTetrisAgainBtn').addEventListener('click', () => {
overlay.classList.add('hidden');
startBtn.click();
}); });
startBtn.addEventListener('click', startGame); startBtn.addEventListener('click', startGame);
restartBtn.addEventListener('click', startGame);
window.addEventListener('resize', resize); window.addEventListener('resize', resize);
resize(); resize();
@@ -2307,7 +2337,6 @@ function initPlatformer() {
const canvas = document.getElementById('platformerCanvas'); const canvas = document.getElementById('platformerCanvas');
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
const startBtn = document.getElementById('startPlatformerBtn'); const startBtn = document.getElementById('startPlatformerBtn');
const restartBtn = document.getElementById('restartPlatformerBtn');
const coinsEl = document.getElementById('coinsVal'); const coinsEl = document.getElementById('coinsVal');
const timeEl = document.getElementById('platformerTime'); const timeEl = document.getElementById('platformerTime');
const overlay = document.getElementById('platformerOverlay'); const overlay = document.getElementById('platformerOverlay');
@@ -2542,19 +2571,18 @@ function initPlatformer() {
window.addEventListener('keydown', (e) => keys[e.code] = true); window.addEventListener('keydown', (e) => keys[e.code] = true);
window.addEventListener('keyup', (e) => keys[e.code] = false); window.addEventListener('keyup', (e) => keys[e.code] = false);
document.getElementById('generatePlatformerPinBtn')?.addEventListener('click', () => { document.getElementById('savePlatformerScoreBtn').addEventListener('click', () => {
generatePin('platformerSecretCode', 'platformerCodeHint'); submitScore('platformer', collected * 10 + Math.max(0, 100 - parseInt(formatTime(gameTime).replace(':', ''))));
overlay.classList.add('hidden');
startBtn.style.display = 'block';
}); });
document.getElementById('submitPlatformerBtn').addEventListener('click', () => { document.getElementById('playPlatformerAgainBtn').addEventListener('click', () => {
if (submitScore('platformer', collected * 10 + Math.max(0, 100 - parseInt(formatTime(gameTime).replace(':', ''))), 'platformerPlayerName', 'platformerSecretCode', 'platformerCodeHint')) { overlay.classList.add('hidden');
overlay.classList.add('hidden'); startBtn.click();
startBtn.style.display = 'block';
}
}); });
startBtn.addEventListener('click', startGame); startBtn.addEventListener('click', startGame);
restartBtn.addEventListener('click', startGame);
window.addEventListener('resize', resize); window.addEventListener('resize', resize);
resize(); resize();

106
index.html
View File

@@ -19,6 +19,7 @@
<div class="logo">TRAE <span>AURORA</span></div> <div class="logo">TRAE <span>AURORA</span></div>
<ul class="nav-links"> <ul class="nav-links">
<li><a href="#hero">Home</a></li> <li><a href="#hero">Home</a></li>
<li><a href="#registration">Register</a></li>
<li><a href="#game">Gift Catcher</a></li> <li><a href="#game">Gift Catcher</a></li>
<li><a href="#traoom">Traoom</a></li> <li><a href="#traoom">Traoom</a></li>
<li><a href="#neonpuzzle">Puzzle</a></li> <li><a href="#neonpuzzle">Puzzle</a></li>
@@ -146,6 +147,25 @@
</div> </div>
</section> </section>
<!-- Registration Section -->
<section id="registration" class="glass-section">
<div class="section-card glass">
<h2>🎮 Player Registration</h2>
<p>Register once to save your scores across all games</p>
<div class="input-group" style="justify-content: center; max-width: 400px; margin: 0 auto;">
<input type="text" id="regUsername" placeholder="Username" maxlength="15" style="flex: 1;">
<button id="registerBtn" class="btn-primary">Register</button>
</div>
<p id="regStatus" style="text-align: center; margin-top: 15px; font-weight: bold;"></p>
<div id="currentUserInfo" class="user-info" style="display: none; text-align: center; margin-top: 15px;">
<p>🎉 Your Name: <strong id="currentUserDisplay"></strong></p>
<p style="font-size: 0.8rem; color: #888;">Your PIN: <strong id="currentUserPin"></strong></p>
<p style="font-size: 0.7rem; color: #666; margin-top: 5px;">Use this Name + PIN for all games</p>
<button onclick="logoutUser()" class="btn-secondary" style="margin-top: 10px; background: #ff4444;">Logout</button>
</div>
</div>
</section>
<!-- Game Section --> <!-- Game Section -->
<section id="game" class="game-section"> <section id="game" class="game-section">
<div class="section-card glass"> <div class="section-card glass">
@@ -162,14 +182,14 @@
</div> </div>
<div id="gameOverlay" class="game-overlay hidden"> <div id="gameOverlay" class="game-overlay hidden">
<h3 id="overlayTitle">GAME OVER</h3> <h3 id="overlayTitle">GAME OVER</h3>
<div class="input-group"> <p id="finalScore">Final Score: <span id="gameFinalScore">0</span></p>
<input type="text" id="playerName" placeholder="Enter your name" maxlength="15"> <div id="saveScoreButtons" class="input-group">
<input type="text" id="playerSecretCode" placeholder="Your PIN (optional)" maxlength="6" style="width: 120px; text-transform: uppercase;"> <button id="saveScoreBtn" class="btn-primary">Save Score</button>
<button id="generatePinBtn" class="btn-secondary" style="background: var(--trae-purple);">Generate PIN</button> <button id="playAgainBtn" class="btn-secondary" style="background: var(--trae-green);">Play Again</button>
<button id="submitScoreBtn" class="btn-primary">Save Score</button>
</div> </div>
<p class="code-hint" id="codeHint">New players get a PIN automatically</p> <p id="loginPrompt" style="display: none; text-align: center; color: #ff6b6b;">
<p class="pin-explainer">Enter your name + PIN to save scores. The system uses your PIN to identify you. Save your PIN - it's unique to you!</p> <a href="#registration" style="color: var(--trae-cyan);">Register first</a> to save scores
</p>
</div> </div>
<button id="startGameBtn" class="btn-primary">Start Mission</button> <button id="startGameBtn" class="btn-primary">Start Mission</button>
</div> </div>
@@ -217,14 +237,12 @@
<p id="traoomOverlayScore">Bugs Fixed: <span id="finalKills">0</span></p> <p id="traoomOverlayScore">Bugs Fixed: <span id="finalKills">0</span></p>
<p id="traoomOverlayTime">Time Survived: <span id="finalTime">0:00</span></p> <p id="traoomOverlayTime">Time Survived: <span id="finalTime">0:00</span></p>
<div class="input-group"> <div class="input-group">
<input type="text" id="traoomPlayerName" placeholder="Enter your name" maxlength="15"> <button id="saveTraoomScoreBtn" class="btn-primary">Save Score</button>
<input type="text" id="traoomSecretCode" placeholder="Your PIN (optional)" maxlength="6" style="width: 120px; text-transform: uppercase;"> <button id="playTraoomAgainBtn" class="btn-secondary" style="background: var(--trae-green);">Play Again</button>
<button id="generateTraoomPinBtn" class="btn-secondary" style="background: var(--trae-purple);">Generate PIN</button>
<button id="submitTraoomBtn" class="btn-primary">Save Score</button>
</div> </div>
<p class="code-hint" id="traoomCodeHint">New players get a PIN</p> <p id="traoomLoginPrompt" style="display: none; text-align: center; color: #ff6b6b;">
<p class="pin-explainer">Enter your name + PIN to save scores. The system uses your PIN to identify you. Save your PIN - it's unique to you!</p> <a href="#registration" style="color: var(--trae-cyan);">Register first</a> to save scores
<button id="restartTraoomBtn" class="btn-primary">Play Again</button> </p>
</div> </div>
<button id="startTraoomBtn" class="btn-primary">Start Bug Hunt</button> <button id="startTraoomBtn" class="btn-primary">Start Bug Hunt</button>
</div> </div>
@@ -251,14 +269,12 @@
<h3 id="puzzleOverlayTitle">LEVEL COMPLETE</h3> <h3 id="puzzleOverlayTitle">LEVEL COMPLETE</h3>
<p id="puzzleOverlayScore">Moves: <span id="finalMoves">0</span></p> <p id="puzzleOverlayScore">Moves: <span id="finalMoves">0</span></p>
<div class="input-group"> <div class="input-group">
<input type="text" id="puzzlePlayerName" placeholder="Enter your name" maxlength="15"> <button id="savePuzzleScoreBtn" class="btn-primary">Save Score</button>
<input type="text" id="puzzleSecretCode" placeholder="Your PIN (optional)" maxlength="6" style="width: 120px; text-transform: uppercase;"> <button id="playPuzzleAgainBtn" class="btn-secondary" style="background: var(--trae-green);">Play Again</button>
<button id="generatePuzzlePinBtn" class="btn-secondary" style="background: var(--trae-purple);">Generate PIN</button>
<button id="submitPuzzleBtn" class="btn-primary">Save Score</button>
</div> </div>
<p class="code-hint" id="puzzleCodeHint">New players get a PIN</p> <p id="puzzleLoginPrompt" style="display: none; text-align: center; color: #ff6b6b;">
<p class="pin-explainer">Enter your name + PIN to save scores. The system uses your PIN to identify you. Save your PIN - it's unique to you!</p> <a href="#registration" style="color: var(--trae-cyan);">Register first</a> to save scores
<button id="restartPuzzleBtn" class="btn-primary">Play Again</button> </p>
</div> </div>
<button id="startPuzzleBtn" class="btn-primary">Start Puzzle</button> <button id="startPuzzleBtn" class="btn-primary">Start Puzzle</button>
</div> </div>
@@ -286,14 +302,12 @@
<h3 id="rhythmOverlayTitle">BEAT OVER</h3> <h3 id="rhythmOverlayTitle">BEAT OVER</h3>
<p id="rhythmOverlayScore">Final Score: <span id="finalRhythmScore">0</span></p> <p id="rhythmOverlayScore">Final Score: <span id="finalRhythmScore">0</span></p>
<div class="input-group"> <div class="input-group">
<input type="text" id="rhythmPlayerName" placeholder="Enter your name" maxlength="15"> <button id="saveRhythmScoreBtn" class="btn-primary">Save Score</button>
<input type="text" id="rhythmSecretCode" placeholder="Your PIN (optional)" maxlength="6" style="width: 120px; text-transform: uppercase;"> <button id="playRhythmAgainBtn" class="btn-secondary" style="background: var(--trae-green);">Play Again</button>
<button id="generateRhythmPinBtn" class="btn-secondary" style="background: var(--trae-purple);">Generate PIN</button>
<button id="submitRhythmBtn" class="btn-primary">Save Score</button>
</div> </div>
<p class="code-hint" id="rhythmCodeHint">New players get a PIN</p> <p id="rhythmLoginPrompt" style="display: none; text-align: center; color: #ff6b6b;">
<p class="pin-explainer">Enter your name + PIN to save scores. The system uses your PIN to identify you. Save your PIN - it's unique to you!</p> <a href="#registration" style="color: var(--trae-cyan);">Register first</a> to save scores
<button id="restartRhythmBtn" class="btn-primary">Play Again</button> </p>
</div> </div>
<button id="startRhythmBtn" class="btn-primary">Start Rhythm</button> <button id="startRhythmBtn" class="btn-primary">Start Rhythm</button>
</div> </div>
@@ -321,14 +335,12 @@
<h3 id="arenaOverlayTitle">GAME OVER</h3> <h3 id="arenaOverlayTitle">GAME OVER</h3>
<p id="arenaOverlayScore">Enemies Defeated: <span id="finalArenaKills">0</span></p> <p id="arenaOverlayScore">Enemies Defeated: <span id="finalArenaKills">0</span></p>
<div class="input-group"> <div class="input-group">
<input type="text" id="arenaPlayerName" placeholder="Enter your name" maxlength="15"> <button id="saveArenaScoreBtn" class="btn-primary">Save Score</button>
<input type="text" id="arenaSecretCode" placeholder="Your PIN (optional)" maxlength="6" style="width: 120px; text-transform: uppercase;"> <button id="playArenaAgainBtn" class="btn-secondary" style="background: var(--trae-green);">Play Again</button>
<button id="generateArenaPinBtn" class="btn-secondary" style="background: var(--trae-purple);">Generate PIN</button>
<button id="submitArenaBtn" class="btn-primary">Save Score</button>
</div> </div>
<p class="code-hint" id="arenaCodeHint">New players get a PIN</p> <p id="arenaLoginPrompt" style="display: none; text-align: center; color: #ff6b6b;">
<p class="pin-explainer">Enter your name + PIN to save scores. The system uses your PIN to identify you. Save your PIN - it's unique to you!</p> <a href="#registration" style="color: var(--trae-cyan);">Register first</a> to save scores
<button id="restartArenaBtn" class="btn-primary">Play Again</button> </p>
</div> </div>
<button id="startArenaBtn" class="btn-primary">Enter Arena</button> <button id="startArenaBtn" class="btn-primary">Enter Arena</button>
</div> </div>
@@ -356,14 +368,12 @@
<h3 id="tetrisOverlayTitle">GAME OVER</h3> <h3 id="tetrisOverlayTitle">GAME OVER</h3>
<p id="tetrisOverlayScore">Final Score: <span id="finalTetrisScore">0</span></p> <p id="tetrisOverlayScore">Final Score: <span id="finalTetrisScore">0</span></p>
<div class="input-group"> <div class="input-group">
<input type="text" id="tetrisPlayerName" placeholder="Enter your name" maxlength="15"> <button id="saveTetrisScoreBtn" class="btn-primary">Save Score</button>
<input type="text" id="tetrisSecretCode" placeholder="Your PIN (optional)" maxlength="6" style="width: 120px; text-transform: uppercase;"> <button id="playTetrisAgainBtn" class="btn-secondary" style="background: var(--trae-green);">Play Again</button>
<button id="generateTetrisPinBtn" class="btn-secondary" style="background: var(--trae-purple);">Generate PIN</button>
<button id="submitTetrisBtn" class="btn-primary">Save Score</button>
</div> </div>
<p class="code-hint" id="tetrisCodeHint">New players get a PIN</p> <p id="tetrisLoginPrompt" style="display: none; text-align: center; color: #ff6b6b;">
<p class="pin-explainer">Enter your name + PIN to save scores. The system uses your PIN to identify you. Save your PIN - it's unique to you!</p> <a href="#registration" style="color: var(--trae-cyan);">Register first</a> to save scores
<button id="restartTetrisBtn" class="btn-primary">Play Again</button> </p>
</div> </div>
<button id="startTetrisBtn" class="btn-primary">Start Game</button> <button id="startTetrisBtn" class="btn-primary">Start Game</button>
</div> </div>
@@ -391,14 +401,12 @@
<p id="platformerOverlayScore">Coins: <span id="finalCoins">0</span></p> <p id="platformerOverlayScore">Coins: <span id="finalCoins">0</span></p>
<p id="platformerOverlayTime">Time: <span id="finalPlatformerTime">0:00</span></p> <p id="platformerOverlayTime">Time: <span id="finalPlatformerTime">0:00</span></p>
<div class="input-group"> <div class="input-group">
<input type="text" id="platformerPlayerName" placeholder="Enter your name" maxlength="15"> <button id="savePlatformerScoreBtn" class="btn-primary">Save Score</button>
<input type="text" id="platformerSecretCode" placeholder="Your PIN (optional)" maxlength="6" style="width: 120px; text-transform: uppercase;"> <button id="playPlatformerAgainBtn" class="btn-secondary" style="background: var(--trae-green);">Play Again</button>
<button id="generatePlatformerPinBtn" class="btn-secondary" style="background: var(--trae-purple);">Generate PIN</button>
<button id="submitPlatformerBtn" class="btn-primary">Save Score</button>
</div> </div>
<p class="code-hint" id="platformerCodeHint">New players get a PIN</p> <p id="platformerLoginPrompt" style="display: none; text-align: center; color: #ff6b6b;">
<p class="pin-explainer">Enter your name + PIN to save scores. The system uses your PIN to identify you. Save your PIN - it's unique to you!</p> <a href="#registration" style="color: var(--trae-cyan);">Register first</a> to save scores
<button id="restartPlatformerBtn" class="btn-primary">Play Again</button> </p>
</div> </div>
<button id="startPlatformerBtn" class="btn-primary">Start Game</button> <button id="startPlatformerBtn" class="btn-primary">Start Game</button>
</div> </div>