Change secret code to PIN system with explainer text

- Renamed 'secret code' to 'PIN' throughout UI
- Added PIN explainer text explaining how system identifies players
- New players get random 6-char PIN, must save it
- Players use name + PIN to update scores
- PIN ensures unique identification for each player
This commit is contained in:
Gemini AI
2025-12-27 03:06:55 +04:00
Unverified
parent 230178cd7f
commit 744e9c9714
3 changed files with 217 additions and 36 deletions

View File

@@ -164,10 +164,11 @@
<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 secret code (optional)" maxlength="6" style="width: 120px; text-transform: uppercase;">
<input type="text" id="playerSecretCode" placeholder="Your PIN (optional)" maxlength="6" style="width: 120px; text-transform: uppercase;">
<button id="submitScoreBtn" class="btn-primary">Save Score</button>
</div>
<p class="code-hint" id="codeHint">New players get a secret code automatically</p>
<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>
</div>
<button id="startGameBtn" class="btn-primary">Start Mission</button>
</div>
@@ -216,10 +217,11 @@
<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="Secret code (optional)" maxlength="6" style="width: 120px; text-transform: uppercase;">
<input type="text" id="traoomSecretCode" placeholder="Your PIN (optional)" maxlength="6" style="width: 120px; text-transform: uppercase;">
<button id="submitTraoomBtn" class="btn-primary">Save Score</button>
</div>
<p class="code-hint" id="traoomCodeHint">New players get a secret code</p>
<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>
</div>
<button id="startTraoomBtn" class="btn-primary">Start Bug Hunt</button>
@@ -248,10 +250,11 @@
<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="Secret code (optional)" maxlength="6" style="width: 120px; text-transform: uppercase;">
<input type="text" id="puzzleSecretCode" placeholder="Your PIN (optional)" maxlength="6" style="width: 120px; text-transform: uppercase;">
<button id="submitPuzzleBtn" class="btn-primary">Save Score</button>
</div>
<p class="code-hint" id="puzzleCodeHint">New players get a secret code</p>
<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>
</div>
<button id="startPuzzleBtn" class="btn-primary">Start Puzzle</button>
@@ -281,10 +284,11 @@
<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="Secret code (optional)" maxlength="6" style="width: 120px; text-transform: uppercase;">
<input type="text" id="rhythmSecretCode" placeholder="Your PIN (optional)" maxlength="6" style="width: 120px; text-transform: uppercase;">
<button id="submitRhythmBtn" class="btn-primary">Save Score</button>
</div>
<p class="code-hint" id="rhythmCodeHint">New players get a secret code</p>
<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>
</div>
<button id="startRhythmBtn" class="btn-primary">Start Rhythm</button>
@@ -314,10 +318,11 @@
<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="Secret code (optional)" maxlength="6" style="width: 120px; text-transform: uppercase;">
<input type="text" id="arenaSecretCode" placeholder="Your PIN (optional)" maxlength="6" style="width: 120px; text-transform: uppercase;">
<button id="submitArenaBtn" class="btn-primary">Save Score</button>
</div>
<p class="code-hint" id="arenaCodeHint">New players get a secret code</p>
<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>
</div>
<button id="startArenaBtn" class="btn-primary">Enter Arena</button>
@@ -347,10 +352,11 @@
<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="Secret code (optional)" maxlength="6" style="width: 120px; text-transform: uppercase;">
<input type="text" id="tetrisSecretCode" placeholder="Your PIN (optional)" maxlength="6" style="width: 120px; text-transform: uppercase;">
<button id="submitTetrisBtn" class="btn-primary">Save Score</button>
</div>
<p class="code-hint" id="tetrisCodeHint">New players get a secret code</p>
<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>
</div>
<button id="startTetrisBtn" class="btn-primary">Start Game</button>
@@ -380,10 +386,11 @@
<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="Secret code (optional)" maxlength="6" style="width: 120px; text-transform: uppercase;">
<input type="text" id="platformerSecretCode" placeholder="Your PIN (optional)" maxlength="6" style="width: 120px; text-transform: uppercase;">
<button id="submitPlatformerBtn" class="btn-primary">Save Score</button>
</div>
<p class="code-hint" id="platformerCodeHint">New players get a secret code</p>
<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>
</div>
<button id="startPlatformerBtn" class="btn-primary">Start Game</button>