From ac69e456d9e23b01f48501570660dd50e7e56b20 Mon Sep 17 00:00:00 2001
From: Joel Brock <joelbrock@gmail.com>
Date: Sat, 20 Jun 2026 11:44:47 -0700
Subject: [PATCH] Use the custom turtle name consistently across all screens

Capture the turtle's name on the start screen so it is set before the beach,
beaching, and migration screens. Populate the beaching notice and migration
bonus text from turtleName (previously hardcoded 'Shelly'), pre-fill the
rename modal, and send migration-continue straight to the ocean since the
turtle is already named.
---
 app.js     | 14 ++++++++++++--
 index.html |  7 +++++--
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/app.js b/app.js
index 9dbd6a5..03fbcfc 100644
--- a/app.js
+++ b/app.js
@@ -205,6 +205,11 @@ document.addEventListener('DOMContentLoaded', () => {
   const btnHeal = document.getElementById('btn-action-heal');
   const feedDrawer = document.getElementById('feed-options-drawer');
 
+  // Name inputs / dynamic name labels
+  const inputTurtleNameStart = document.getElementById('input-turtle-name-start');
+  const beachingTurtleName = document.getElementById('beaching-turtle-name');
+  const bonusTurtleName = document.getElementById('bonus-turtle-name');
+
   // HUD Outputs
   const displayTurtleName = document.getElementById('display-turtle-name');
   const displayTurtleSpecies = document.getElementById('display-turtle-species');
@@ -1248,6 +1253,7 @@ document.addEventListener('DOMContentLoaded', () => {
         bonusInfoCard.classList.add('hidden');
       }
 
+      bonusTurtleName.textContent = turtleName;
       modals.migrationSuccess.classList.remove('hidden');
     } else {
       // Fail! Game over
@@ -2185,6 +2191,7 @@ document.addEventListener('DOMContentLoaded', () => {
   // 9. BEACHING / TOURIST SHIELD EVENT
   // ==========================================
   function initBeachingPhase() {
+    beachingTurtleName.textContent = turtleName;
     beachingProgress = 0;
     beachingProgressFill.style.width = '0%';
     beachingProgressText.textContent = '0%';
@@ -2384,6 +2391,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
   // Start Conservation Game
   btnStartGame.addEventListener('click', () => {
+    turtleName = sanitizeName(inputTurtleNameStart.value);
     changeState(STATES.BEACH);
   });
 
@@ -2397,14 +2405,16 @@ document.addEventListener('DOMContentLoaded', () => {
     document.getElementById('beach-tutorial-overlay').classList.add('hidden');
   });
 
-  // Migration Success Continue Action
+  // Migration Success Continue Action — the turtle was already named at the
+  // start, so head straight into the ocean.
   btnMigrationContinue.addEventListener('click', () => {
     modals.migrationSuccess.classList.add('hidden');
-    modals.rename.classList.remove('hidden');
+    changeState(STATES.OCEAN);
   });
 
   // Rename Turtle Action
   btnRenameTurtle.addEventListener('click', () => {
+    document.getElementById('input-turtle-name').value = turtleName;
     modals.rename.classList.remove('hidden');
   });
 
diff --git a/index.html b/index.html
index e0f269b..558403e 100644
--- a/index.html
+++ b/index.html
@@ -108,6 +108,9 @@
           </label>
         </div>
 
+        <label for="input-turtle-name-start" class="intro-action"><strong>Name your turtle:</strong></label>
+        <input type="text" id="input-turtle-name-start" maxlength="12" placeholder="Shelly" class="text-input">
+
         <button id="btn-start-game" class="btn-primary btn-pulse">Start Conservation Game</button>
       </div>
 
@@ -530,7 +533,7 @@
 
         <!-- HUD Alerts -->
         <div class="beaching-instructions-card">
-          <p>💤 Shelly has beached to rest and digest. <strong>Ignorant tourists are trying to crowd closer for selfies!</strong></p>
+          <p>💤 <span id="beaching-turtle-name">Shelly</span> has beached to rest and digest. <strong>Ignorant tourists are trying to crowd closer for selfies!</strong></p>
           <p class="text-accent"><strong>Tap tourists to push them back outside the 10-foot boundary!</strong></p>
         </div>
       </div>
@@ -602,7 +605,7 @@
 
       <div id="bonus-info-card" class="bonus-box hidden">
         <h4>🎉 Conservation Goodies Awarded!</h4>
-        <p>Superb beach management! Since you beat the unmanaged average of 25% (> 5 hatchlings), Shelly starts the ocean journey with: <strong>+20 Joy</strong>, <strong>+20 Fullness</strong>, and a **+20 Health** head-start!</p>
+        <p>Superb beach management! Since you beat the unmanaged average of 25% (> 5 hatchlings), <span id="bonus-turtle-name">Shelly</span> starts the ocean journey with: <strong>+20 Joy</strong>, <strong>+20 Fullness</strong>, and a **+20 Health** head-start!</p>
       </div>
 
       <button id="btn-migration-continue" class="btn-primary">Continue to Ocean Journey</button>