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.
This commit is contained in:
@@ -205,6 +205,11 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
const btnHeal = document.getElementById('btn-action-heal');
|
const btnHeal = document.getElementById('btn-action-heal');
|
||||||
const feedDrawer = document.getElementById('feed-options-drawer');
|
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
|
// HUD Outputs
|
||||||
const displayTurtleName = document.getElementById('display-turtle-name');
|
const displayTurtleName = document.getElementById('display-turtle-name');
|
||||||
const displayTurtleSpecies = document.getElementById('display-turtle-species');
|
const displayTurtleSpecies = document.getElementById('display-turtle-species');
|
||||||
@@ -1248,6 +1253,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
bonusInfoCard.classList.add('hidden');
|
bonusInfoCard.classList.add('hidden');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
bonusTurtleName.textContent = turtleName;
|
||||||
modals.migrationSuccess.classList.remove('hidden');
|
modals.migrationSuccess.classList.remove('hidden');
|
||||||
} else {
|
} else {
|
||||||
// Fail! Game over
|
// Fail! Game over
|
||||||
@@ -2185,6 +2191,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
// 9. BEACHING / TOURIST SHIELD EVENT
|
// 9. BEACHING / TOURIST SHIELD EVENT
|
||||||
// ==========================================
|
// ==========================================
|
||||||
function initBeachingPhase() {
|
function initBeachingPhase() {
|
||||||
|
beachingTurtleName.textContent = turtleName;
|
||||||
beachingProgress = 0;
|
beachingProgress = 0;
|
||||||
beachingProgressFill.style.width = '0%';
|
beachingProgressFill.style.width = '0%';
|
||||||
beachingProgressText.textContent = '0%';
|
beachingProgressText.textContent = '0%';
|
||||||
@@ -2384,6 +2391,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
|
|
||||||
// Start Conservation Game
|
// Start Conservation Game
|
||||||
btnStartGame.addEventListener('click', () => {
|
btnStartGame.addEventListener('click', () => {
|
||||||
|
turtleName = sanitizeName(inputTurtleNameStart.value);
|
||||||
changeState(STATES.BEACH);
|
changeState(STATES.BEACH);
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -2397,14 +2405,16 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
document.getElementById('beach-tutorial-overlay').classList.add('hidden');
|
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', () => {
|
btnMigrationContinue.addEventListener('click', () => {
|
||||||
modals.migrationSuccess.classList.add('hidden');
|
modals.migrationSuccess.classList.add('hidden');
|
||||||
modals.rename.classList.remove('hidden');
|
changeState(STATES.OCEAN);
|
||||||
});
|
});
|
||||||
|
|
||||||
// Rename Turtle Action
|
// Rename Turtle Action
|
||||||
btnRenameTurtle.addEventListener('click', () => {
|
btnRenameTurtle.addEventListener('click', () => {
|
||||||
|
document.getElementById('input-turtle-name').value = turtleName;
|
||||||
modals.rename.classList.remove('hidden');
|
modals.rename.classList.remove('hidden');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
+5
-2
@@ -108,6 +108,9 @@
|
|||||||
</label>
|
</label>
|
||||||
</div>
|
</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>
|
<button id="btn-start-game" class="btn-primary btn-pulse">Start Conservation Game</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -530,7 +533,7 @@
|
|||||||
|
|
||||||
<!-- HUD Alerts -->
|
<!-- HUD Alerts -->
|
||||||
<div class="beaching-instructions-card">
|
<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>
|
<p class="text-accent"><strong>Tap tourists to push them back outside the 10-foot boundary!</strong></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -602,7 +605,7 @@
|
|||||||
|
|
||||||
<div id="bonus-info-card" class="bonus-box hidden">
|
<div id="bonus-info-card" class="bonus-box hidden">
|
||||||
<h4>🎉 Conservation Goodies Awarded!</h4>
|
<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>
|
</div>
|
||||||
|
|
||||||
<button id="btn-migration-continue" class="btn-primary">Continue to Ocean Journey</button>
|
<button id="btn-migration-continue" class="btn-primary">Continue to Ocean Journey</button>
|
||||||
|
|||||||
Reference in New Issue
Block a user