Add a back button to the tutorial that docks into the input row on completion

Lets players leave the tutorial at any time via a top-left link back to the
game session. Once the tutorial finishes and the input field is disabled,
the button relocates into the input row so it's the obvious next action.
This commit is contained in:
Frank
2026-08-18 22:35:52 +02:00
parent 6a04a0274a
commit 7c14ab3331
4 changed files with 46 additions and 0 deletions
+13
View File
@@ -9,6 +9,18 @@ function appendMessage(container, text, extraClass = '') {
window.scrollTo(0, document.body.scrollHeight);
}
function dockBackButton(inputField) {
const backButton = document.getElementById('back-button');
const inputContainer = document.getElementById('input');
if (!backButton || !inputContainer) {
return;
}
inputField.style.display = 'none';
backButton.classList.add('docked');
inputContainer.appendChild(backButton);
}
document.addEventListener('DOMContentLoaded', () => {
console.log('Pregame bundle loaded');
@@ -336,6 +348,7 @@ document.addEventListener('DOMContentLoaded', () => {
playSequence(tutorialEndFollowUp, messageContainer, () => {
tutorialStage = 'complete';
inputField.disabled = true;
dockBackButton(inputField);
});
return;
}
+29
View File
@@ -69,3 +69,32 @@ input#input-message {
box-sizing: border-box;
font-family: monospace;
}
a#back-button {
position: fixed;
top: 16px;
left: 16px;
padding: 6px 14px;
background: #111;
border: 1px solid #A00000;
color: #C0C0C0;
font-size: 13px;
font-family: monospace;
text-decoration: none;
z-index: 200;
}
a#back-button:hover {
background: #1a1a1a;
color: #FFF;
}
a#back-button.docked {
position: static;
display: block;
width: 100%;
padding: 6px 10px;
font-size: 14px;
text-align: center;
box-sizing: border-box;
}