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.

assets/pregame.js

@@ -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;
       }

assets/styles/pregame.css

@@ -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;
+}

templates/pregame/default.html.twig

@@ -10,6 +10,8 @@
 </head>
 <body>
     <div id="game-container">
+        <a href="{{ path('game', {session: session.id}) }}" id="back-button">&larr; Back</a>
+
         <div id="message-container">
             <div class="message">No tutorial is available for this game yet.</div>
         </div>

templates/pregame/game1.html.twig

@@ -17,6 +17,8 @@
              style="display:none">
         </div>
 
+        <a href="{{ path('game', {session: session.id}) }}" id="back-button">&larr; Back</a>
+
         <div id="message-container">
 
         </div>