Add Generate PIN button option for all games
- Added 'Generate PIN' button to all game overlays - Users can now choose to enter existing PIN or generate new unique PIN - Generated PIN appears instantly in input field with green highlight - Shows 'PIN Generated: XXXXXX' confirmation message - Supports all 7 games: Gift Catcher, Traoom, Neon Puzzle, Rhythm Beat, Cosmic Arena, Crystal Tetris, Aurora Jumper
This commit is contained in:
Gemini AI
42
app.js
42
app.js
@@ -264,6 +264,20 @@ 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.submitScore = (gameType, score, nameInputId, codeInputId, hintId) => {
|
||||
const nameInput = document.getElementById(nameInputId);
|
||||
const codeInput = document.getElementById(codeInputId);
|
||||
@@ -439,6 +453,10 @@ function initGame() {
|
||||
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')) {
|
||||
overlay.classList.add('hidden');
|
||||
@@ -1324,6 +1342,10 @@ 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')) {
|
||||
overlay.classList.add('hidden');
|
||||
@@ -1331,6 +1353,10 @@ function initTraoom() {
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('generatePuzzlePinBtn')?.addEventListener('click', () => {
|
||||
generatePin('puzzleSecretCode', 'puzzleCodeHint');
|
||||
});
|
||||
|
||||
startBtn.addEventListener('click', startGame);
|
||||
restartBtn.addEventListener('click', startGame);
|
||||
|
||||
@@ -1716,6 +1742,10 @@ function initRhythmBeat() {
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('generateRhythmPinBtn')?.addEventListener('click', () => {
|
||||
generatePin('rhythmSecretCode', 'rhythmCodeHint');
|
||||
});
|
||||
|
||||
document.getElementById('submitRhythmBtn').addEventListener('click', () => {
|
||||
if (submitScore('rhythm', score, 'rhythmPlayerName', 'rhythmSecretCode', 'rhythmCodeHint')) {
|
||||
overlay.classList.add('hidden');
|
||||
@@ -1998,6 +2028,10 @@ function initCosmicArena() {
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById('generateArenaPinBtn')?.addEventListener('click', () => {
|
||||
generatePin('arenaSecretCode', 'arenaCodeHint');
|
||||
});
|
||||
|
||||
document.getElementById('submitArenaBtn').addEventListener('click', () => {
|
||||
if (submitScore('arena', kills, 'arenaPlayerName', 'arenaSecretCode', 'arenaCodeHint')) {
|
||||
overlay.classList.add('hidden');
|
||||
@@ -2256,6 +2290,10 @@ function initTetris() {
|
||||
draw();
|
||||
});
|
||||
|
||||
document.getElementById('generateTetrisPinBtn')?.addEventListener('click', () => {
|
||||
generatePin('tetrisSecretCode', 'tetrisCodeHint');
|
||||
});
|
||||
|
||||
startBtn.addEventListener('click', startGame);
|
||||
restartBtn.addEventListener('click', startGame);
|
||||
|
||||
@@ -2503,6 +2541,10 @@ 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')) {
|
||||
overlay.classList.add('hidden');
|
||||
|
||||
@@ -165,6 +165,7 @@
|
||||
<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>
|
||||
</div>
|
||||
<p class="code-hint" id="codeHint">New players get a PIN automatically</p>
|
||||
@@ -218,6 +219,7 @@
|
||||
<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>
|
||||
</div>
|
||||
<p class="code-hint" id="traoomCodeHint">New players get a PIN</p>
|
||||
@@ -251,6 +253,7 @@
|
||||
<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>
|
||||
</div>
|
||||
<p class="code-hint" id="puzzleCodeHint">New players get a PIN</p>
|
||||
@@ -285,6 +288,7 @@
|
||||
<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>
|
||||
</div>
|
||||
<p class="code-hint" id="rhythmCodeHint">New players get a PIN</p>
|
||||
@@ -319,6 +323,7 @@
|
||||
<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>
|
||||
</div>
|
||||
<p class="code-hint" id="arenaCodeHint">New players get a PIN</p>
|
||||
@@ -353,6 +358,7 @@
|
||||
<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>
|
||||
</div>
|
||||
<p class="code-hint" id="tetrisCodeHint">New players get a PIN</p>
|
||||
@@ -387,6 +393,7 @@
|
||||
<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>
|
||||
</div>
|
||||
<p class="code-hint" id="platformerCodeHint">New players get a PIN</p>
|
||||
|
||||
Reference in New Issue
Block a user