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

218
app.js
View File

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

106
index.html
View File

@@ -19,6 +19,7 @@
<div class="logo">TRAE <span>AURORA</span></div>
<ul class="nav-links">
<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="#traoom">Traoom</a></li>
<li><a href="#neonpuzzle">Puzzle</a></li>
@@ -146,6 +147,25 @@
</div>
</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 -->
<section id="game" class="game-section">
<div class="section-card glass">
@@ -162,14 +182,14 @@
</div>
<div id="gameOverlay" class="game-overlay hidden">
<h3 id="overlayTitle">GAME OVER</h3>
<div class="input-group">
<input type="text" id="playerName" placeholder="Enter your name" maxlength="15">
<input type="text" id="playerSecretCode" placeholder="Your PIN (optional)" maxlength="6" style="width: 120px; text-transform: uppercase;">
<button id="generatePinBtn" class="btn-secondary" style="background: var(--trae-purple);">Generate PIN</button>
<button id="submitScoreBtn" class="btn-primary">Save Score</button>
<p id="finalScore">Final Score: <span id="gameFinalScore">0</span></p>
<div id="saveScoreButtons" class="input-group">
<button id="saveScoreBtn" class="btn-primary">Save Score</button>
<button id="playAgainBtn" class="btn-secondary" style="background: var(--trae-green);">Play Again</button>
</div>
<p class="code-hint" id="codeHint">New players get a PIN automatically</p>
<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>
<p id="loginPrompt" style="display: none; text-align: center; color: #ff6b6b;">
<a href="#registration" style="color: var(--trae-cyan);">Register first</a> to save scores
</p>
</div>
<button id="startGameBtn" class="btn-primary">Start Mission</button>
</div>
@@ -217,14 +237,12 @@
<p id="traoomOverlayScore">Bugs Fixed: <span id="finalKills">0</span></p>
<p id="traoomOverlayTime">Time Survived: <span id="finalTime">0:00</span></p>
<div class="input-group">
<input type="text" id="traoomPlayerName" placeholder="Enter your name" maxlength="15">
<input type="text" id="traoomSecretCode" placeholder="Your PIN (optional)" maxlength="6" style="width: 120px; text-transform: uppercase;">
<button id="generateTraoomPinBtn" class="btn-secondary" style="background: var(--trae-purple);">Generate PIN</button>
<button id="submitTraoomBtn" class="btn-primary">Save Score</button>
<button id="saveTraoomScoreBtn" class="btn-primary">Save Score</button>
<button id="playTraoomAgainBtn" class="btn-secondary" style="background: var(--trae-green);">Play Again</button>
</div>
<p class="code-hint" id="traoomCodeHint">New players get a PIN</p>
<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>
<button id="restartTraoomBtn" class="btn-primary">Play Again</button>
<p id="traoomLoginPrompt" style="display: none; text-align: center; color: #ff6b6b;">
<a href="#registration" style="color: var(--trae-cyan);">Register first</a> to save scores
</p>
</div>
<button id="startTraoomBtn" class="btn-primary">Start Bug Hunt</button>
</div>
@@ -251,14 +269,12 @@
<h3 id="puzzleOverlayTitle">LEVEL COMPLETE</h3>
<p id="puzzleOverlayScore">Moves: <span id="finalMoves">0</span></p>
<div class="input-group">
<input type="text" id="puzzlePlayerName" placeholder="Enter your name" maxlength="15">
<input type="text" id="puzzleSecretCode" placeholder="Your PIN (optional)" maxlength="6" style="width: 120px; text-transform: uppercase;">
<button id="generatePuzzlePinBtn" class="btn-secondary" style="background: var(--trae-purple);">Generate PIN</button>
<button id="submitPuzzleBtn" class="btn-primary">Save Score</button>
<button id="savePuzzleScoreBtn" class="btn-primary">Save Score</button>
<button id="playPuzzleAgainBtn" class="btn-secondary" style="background: var(--trae-green);">Play Again</button>
</div>
<p class="code-hint" id="puzzleCodeHint">New players get a PIN</p>
<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>
<button id="restartPuzzleBtn" class="btn-primary">Play Again</button>
<p id="puzzleLoginPrompt" style="display: none; text-align: center; color: #ff6b6b;">
<a href="#registration" style="color: var(--trae-cyan);">Register first</a> to save scores
</p>
</div>
<button id="startPuzzleBtn" class="btn-primary">Start Puzzle</button>
</div>
@@ -286,14 +302,12 @@
<h3 id="rhythmOverlayTitle">BEAT OVER</h3>
<p id="rhythmOverlayScore">Final Score: <span id="finalRhythmScore">0</span></p>
<div class="input-group">
<input type="text" id="rhythmPlayerName" placeholder="Enter your name" maxlength="15">
<input type="text" id="rhythmSecretCode" placeholder="Your PIN (optional)" maxlength="6" style="width: 120px; text-transform: uppercase;">
<button id="generateRhythmPinBtn" class="btn-secondary" style="background: var(--trae-purple);">Generate PIN</button>
<button id="submitRhythmBtn" class="btn-primary">Save Score</button>
<button id="saveRhythmScoreBtn" class="btn-primary">Save Score</button>
<button id="playRhythmAgainBtn" class="btn-secondary" style="background: var(--trae-green);">Play Again</button>
</div>
<p class="code-hint" id="rhythmCodeHint">New players get a PIN</p>
<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>
<button id="restartRhythmBtn" class="btn-primary">Play Again</button>
<p id="rhythmLoginPrompt" style="display: none; text-align: center; color: #ff6b6b;">
<a href="#registration" style="color: var(--trae-cyan);">Register first</a> to save scores
</p>
</div>
<button id="startRhythmBtn" class="btn-primary">Start Rhythm</button>
</div>
@@ -321,14 +335,12 @@
<h3 id="arenaOverlayTitle">GAME OVER</h3>
<p id="arenaOverlayScore">Enemies Defeated: <span id="finalArenaKills">0</span></p>
<div class="input-group">
<input type="text" id="arenaPlayerName" placeholder="Enter your name" maxlength="15">
<input type="text" id="arenaSecretCode" placeholder="Your PIN (optional)" maxlength="6" style="width: 120px; text-transform: uppercase;">
<button id="generateArenaPinBtn" class="btn-secondary" style="background: var(--trae-purple);">Generate PIN</button>
<button id="submitArenaBtn" class="btn-primary">Save Score</button>
<button id="saveArenaScoreBtn" class="btn-primary">Save Score</button>
<button id="playArenaAgainBtn" class="btn-secondary" style="background: var(--trae-green);">Play Again</button>
</div>
<p class="code-hint" id="arenaCodeHint">New players get a PIN</p>
<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>
<button id="restartArenaBtn" class="btn-primary">Play Again</button>
<p id="arenaLoginPrompt" style="display: none; text-align: center; color: #ff6b6b;">
<a href="#registration" style="color: var(--trae-cyan);">Register first</a> to save scores
</p>
</div>
<button id="startArenaBtn" class="btn-primary">Enter Arena</button>
</div>
@@ -356,14 +368,12 @@
<h3 id="tetrisOverlayTitle">GAME OVER</h3>
<p id="tetrisOverlayScore">Final Score: <span id="finalTetrisScore">0</span></p>
<div class="input-group">
<input type="text" id="tetrisPlayerName" placeholder="Enter your name" maxlength="15">
<input type="text" id="tetrisSecretCode" placeholder="Your PIN (optional)" maxlength="6" style="width: 120px; text-transform: uppercase;">
<button id="generateTetrisPinBtn" class="btn-secondary" style="background: var(--trae-purple);">Generate PIN</button>
<button id="submitTetrisBtn" class="btn-primary">Save Score</button>
<button id="saveTetrisScoreBtn" class="btn-primary">Save Score</button>
<button id="playTetrisAgainBtn" class="btn-secondary" style="background: var(--trae-green);">Play Again</button>
</div>
<p class="code-hint" id="tetrisCodeHint">New players get a PIN</p>
<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>
<button id="restartTetrisBtn" class="btn-primary">Play Again</button>
<p id="tetrisLoginPrompt" style="display: none; text-align: center; color: #ff6b6b;">
<a href="#registration" style="color: var(--trae-cyan);">Register first</a> to save scores
</p>
</div>
<button id="startTetrisBtn" class="btn-primary">Start Game</button>
</div>
@@ -391,14 +401,12 @@
<p id="platformerOverlayScore">Coins: <span id="finalCoins">0</span></p>
<p id="platformerOverlayTime">Time: <span id="finalPlatformerTime">0:00</span></p>
<div class="input-group">
<input type="text" id="platformerPlayerName" placeholder="Enter your name" maxlength="15">
<input type="text" id="platformerSecretCode" placeholder="Your PIN (optional)" maxlength="6" style="width: 120px; text-transform: uppercase;">
<button id="generatePlatformerPinBtn" class="btn-secondary" style="background: var(--trae-purple);">Generate PIN</button>
<button id="submitPlatformerBtn" class="btn-primary">Save Score</button>
<button id="savePlatformerScoreBtn" class="btn-primary">Save Score</button>
<button id="playPlatformerAgainBtn" class="btn-secondary" style="background: var(--trae-green);">Play Again</button>
</div>
<p class="code-hint" id="platformerCodeHint">New players get a PIN</p>
<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>
<button id="restartPlatformerBtn" class="btn-primary">Play Again</button>
<p id="platformerLoginPrompt" style="display: none; text-align: center; color: #ff6b6b;">
<a href="#registration" style="color: var(--trae-cyan);">Register first</a> to save scores
</p>
</div>
<button id="startPlatformerBtn" class="btn-primary">Start Game</button>
</div>