Layout done, probably need rework later on

assets/game1.js

@@ -69,7 +69,6 @@ document.addEventListener('DOMContentLoaded', async () => {
   const topic = cfgEl.dataset.topic;
   const apiPingUrl = cfgEl.dataset.apiPingUrl;
   const apiEchoUrl = cfgEl.dataset.apiEchoUrl;
-  const userId = cfgEl.dataset.userId;
 
   if (mercurePublicUrl && topic) {
     subscribeToMercure(mercurePublicUrl, topic);
@@ -89,7 +88,7 @@ document.addEventListener('DOMContentLoaded', async () => {
     if (apiEchoUrl) {
       const echo = await fetchJson(apiEchoUrl, {
         method: 'POST',
-        body: { message: 'from game1.js', ts: new Date().toISOString(), user: userId },
+        body: { message: 'from game1.js', ts: new Date().toISOString() },
       });
       console.log('[API][game1] echo →', echo);
     } else {
@@ -98,4 +97,67 @@ document.addEventListener('DOMContentLoaded', async () => {
   } catch (e) {
     console.error('[API][game1] Request failed:', e);
   }
+
+  // Add messages to message-container
+  const messageContainer = document.getElementById('message-container');
+  if (messageContainer) {
+    let messages = [
+        ['System initializing...', 500],
+        ['Connection established.', 200],
+        ['Welcome agent to the mainframe.', 1000],
+        ['Scanning...', 3000],
+        ['Virus detected.', 500],
+        ['Starting Mainframe help modus...', 2000],
+        ['Help modus activated.', 500],
+        ['Blocking virus activated', 0]
+    ];
+
+    let currentMessageIndex = 0;
+
+    const printNextMessage = () => {
+      if (currentMessageIndex < messages.length) {
+        const msg = messages[currentMessageIndex];
+        const msgEl = document.createElement('div');
+        msgEl.className = 'message';
+        msgEl.textContent = msg[0];
+        msgEl.style.color = '#F00';
+        msgEl.style.marginBottom = '10px';
+        messageContainer.appendChild(msgEl);
+
+        currentMessageIndex++;
+        setTimeout(printNextMessage, msg[1]);
+      } else {
+        // After it has printed a set of messages, it has to start a timer of 2 seconds
+        console.log('[Game1] All messages printed. Starting 2s timer to expand message-container height...');
+        setTimeout(() => {
+          messageContainer.style.height = '400vh';
+          const inputField = document.getElementById('input-message');
+          inputField.disabled = false;
+
+          // Add event listener for Enter key
+          inputField.addEventListener('keypress', async (e) => {
+            if (e.key === 'Enter') {
+              const message = inputField.value.trim();
+              if (message && apiEchoUrl) {
+                inputField.value = '';
+                try {
+                  const response = await fetchJson(apiEchoUrl, {
+                    method: 'POST',
+                    body: { message, ts: new Date().toISOString() },
+                  });
+                  console.log('[API][game1] message sent →', response);
+                } catch (err) {
+                  console.error('[API][game1] Failed to send message:', err);
+                }
+              }
+            }
+          });
+
+          console.log('[Game1] message-container height changed to 400vh and input enabled');
+        }, 2000);
+      }
+    };
+
+    printNextMessage();
+  }
 });

assets/styles/game1.css

@@ -1,17 +1,63 @@
 /* Styles specific to Game1 */
 
 /* page-level indicator to confirm CSS is loaded */
-body.game1-page {
-  /* subtle background tint so you can visually confirm on /game */
-  background-color: #f9fbff;
+/* Custom scrollbar for WebKit browsers */
+html::-webkit-scrollbar,
+body::-webkit-scrollbar {
+    width: 1px;
 }
 
-/* example component style */
-.game1-banner {
-  padding: 1rem 1.25rem;
-  border: 1px solid #cfe2ff;
-  background: #e9f2ff;
-  color: #0b5ed7;
-  border-radius: 8px;
-  margin: 1rem 0;
+html::-webkit-scrollbar-track,
+body::-webkit-scrollbar-track {
+    background: #000;
+}
+
+html::-webkit-scrollbar-thumb,
+body::-webkit-scrollbar-thumb {
+    background: #F00;
+}
+
+/* Standard properties for Firefox */
+body {
+    background-color: #000;
+    min-height: 100vh;
+    font-family: monospace;
+    margin: 0;
+    scrollbar-width: thin;
+    scrollbar-color: #F00 #000;
+}
+
+div#game-timer {
+    position: fixed;
+    top: 20px;
+    left: 20px;
+    color: #F00;
+    font-size: 28px;
+    z-index: 100;
+}
+
+div#message-container {
+    padding: 20px;
+    padding-top: 60px; /* Space for fixed timer */
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    min-height: calc(100vh - 100px); /* Fill most of the viewport initially */
+    box-sizing: border-box;
+    font-size: 20px;
+}
+
+div#input {
+    padding: 20px;
+}
+
+input#input-message {
+    width: 100%;
+    padding: 10px;
+    background: #000;
+    border: 1px solid #F00;
+    color: #F00;
+    font-size: 18px;
+    box-sizing: border-box;
+    font-family: monospace;
 }