From d3f2b6a2633bda6c848826a3783c74407c31508d Mon Sep 17 00:00:00 2001
From: Gemini AI <gemini@google.com>
Date: Sat, 27 Dec 2025 03:22:50 +0400
Subject: [PATCH] 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
---
 app.js     | 42 ++++++++++++++++++++++++++++++++++++++++++
 index.html |  7 +++++++
 2 files changed, 49 insertions(+)

diff --git a/app.js b/app.js
index d8eff1c..920b5ff 100644
--- a/app.js
+++ b/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');
diff --git a/index.html b/index.html
index cad8424..b9dc83c 100644
--- a/index.html
+++ b/index.html
@@ -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>