Message on reload to hopefully stop the user.

assets/game1.js

@@ -60,6 +60,15 @@ document.addEventListener('DOMContentLoaded', async () => {
 
   // Look for config injected by Twig in the page
   const cfgEl = document.getElementById('mercure-config');
+
+  // Prevent/warn on page reload
+  window.addEventListener('beforeunload', (event) => {
+    // Standard way to trigger the browser's confirmation dialog
+    event.preventDefault();
+    // Included for compatibility with older browsers
+    event.returnValue = '';
+  });
+
   if (!cfgEl) {
     console.warn('[Mercure][game1] #mercure-config element not found on page');
     return;
@@ -69,7 +78,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 +97,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 +106,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;
 }

docker/compose.yaml

@@ -5,7 +5,7 @@ services:
   php:
     build:
       context: ..
-      dockerfile: php/Dockerfile
+      dockerfile: docker/php/Dockerfile
     container_name: escapepage-php
     volumes:
       - ../:/var/www/html:delegated
@@ -18,6 +18,23 @@ services:
       - backend
     restart: unless-stopped
 
+  php-worker:
+    build:
+      context: ..
+      dockerfile: docker/php/Dockerfile
+    container_name: escapepage-php-worker
+    volumes:
+      - ../:/var/www/html:delegated
+    environment:
+      APP_ENV: dev
+    depends_on:
+      - database
+      - mercure
+    command: ["php", "bin/console", "messenger:consume", "async", "-vv"]
+    networks:
+      - backend
+    restart: unless-stopped
+
   nginx:
     image: nginx:1.29.4-alpine
     container_name: escapepage-nginx

docker/php/Dockerfile

@@ -1,11 +1,20 @@
-FROM php:8.5.1-fpm-alpine3.23
+FROM php:8.3-fpm-alpine
 
 # Install system deps
-RUN apk add --no-cache bash git icu-dev libzip-dev oniguruma-dev
+RUN apk add --no-cache \
+    bash \
+    git \
+    icu-dev \
+    libzip-dev \
+    oniguruma-dev \
+    g++ \
+    make \
+    nodejs \
+    npm
 
 # Install PHP extensions
 RUN docker-php-ext-configure intl \
-    && docker-php-ext-install -j$(nproc) intl pdo pdo_mysql opcache
+    && docker-php-ext-install -j$(nproc) intl pdo pdo_mysql opcache zip
 
 # Install composer
 ENV COMPOSER_ALLOW_SUPERUSER=1 \
@@ -13,7 +22,7 @@ ENV COMPOSER_ALLOW_SUPERUSER=1 \
 COPY --from=composer:2 /usr/bin/composer /usr/bin/composer
 
 # Configure PHP
-COPY php.ini $PHP_INI_DIR/conf.d/zz-custom.ini
+COPY docker/php/php.ini $PHP_INI_DIR/conf.d/zz-custom.ini
 
 WORKDIR /var/www/html
 

docker/setup.sh

@@ -66,12 +66,15 @@ dc up "${BUILD_ARGS[@]}"
 # Helper to run commands in php container
 pexec() { dc exec -T php "$@"; }
 
-# Wait for database to be healthy (mariadb)
+# Wait for database to be healthy (mariadb/mysql)
 printf "Waiting for database to be healthy..."
 # Use docker inspect health status
 DB_HEALTH=""
 for i in {1..60}; do
-  DB_HEALTH=$(docker inspect -f '{{.State.Health.Status}}' "$(docker ps --filter name=_database_ --format '{{.ID}}' | head -n1)" 2>/dev/null || true)
+  DB_ID=$(dc ps -q database 2>/dev/null || true)
+  if [ -n "$DB_ID" ]; then
+    DB_HEALTH=$(docker inspect -f '{{.State.Health.Status}}' "$DB_ID" 2>/dev/null || true)
+  fi
   if [ "$DB_HEALTH" = "healthy" ]; then
     echo " OK"
     break
@@ -79,7 +82,7 @@ for i in {1..60}; do
   printf "."
   sleep 2
   if [ "$i" -eq 60 ]; then
-    echo "\nWarning: database health check not healthy yet, continuing anyway."
+    echo -e "\nWarning: database health check not healthy yet, continuing anyway."
   fi
 done
 
@@ -100,11 +103,23 @@ if grep -q '^APP_SECRET=$' "$ROOT_DIR/.env" 2>/dev/null; then
 fi
 
 # Prepare DB
-pexec php bin/console doctrine:database:create --if-not-exists || true
-pexec php bin/console doctrine:migrations:migrate -n || true
+echo "Creating database if it doesn't exist..."
+pexec php bin/console doctrine:database:create --if-not-exists
+echo "Running migrations..."
+pexec php bin/console doctrine:migrations:migrate -n
 
 # Import JS deps (Importmap/Asset Mapper)
-pexec php bin/console importmap:install || true
+if [ -f "$ROOT_DIR/importmap.php" ]; then
+  pexec php bin/console importmap:install || true
+fi
+
+# Build assets if using Webpack Encore
+if [ -f "$ROOT_DIR/package.json" ]; then
+  echo "Installing npm dependencies..."
+  pexec npm install
+  echo "Building assets..."
+  pexec npm run build
+fi
 
 APP_URL=http://localhost:8080
 MAILPIT_URL=http://localhost:8025
@@ -117,10 +132,12 @@ Open the app:      $APP_URL
 Mailpit (dev):     $MAILPIT_URL
 
 Common commands:
-  (cd docker && $DOCKER_COMPOSE logs -f nginx)
-  (cd docker && $DOCKER_COMPOSE logs -f php)
-  (cd docker && $DOCKER_COMPOSE exec php bash)
-  (cd docker && $DOCKER_COMPOSE down)
+  (cd "$DOCKER_DIR" && $DOCKER_COMPOSE logs -f nginx)
+  (cd "$DOCKER_DIR" && $DOCKER_COMPOSE logs -f php)
+  (cd "$DOCKER_DIR" && $DOCKER_COMPOSE logs -f php-worker)
+  (cd "$DOCKER_DIR" && $DOCKER_COMPOSE exec php bash)
+  (cd "$DOCKER_DIR" && $DOCKER_COMPOSE exec php npm run watch)
+  (cd "$DOCKER_DIR" && $DOCKER_COMPOSE down)
 
 You can re-run this script any time. Use --no-build to skip rebuilding images.
 EOT

templates/game/index.html.twig

@@ -1,33 +1,41 @@
-{% extends 'base.html.twig' %}
-
-{% block title %}{{ 'game.title'|trans({'%site%': ('site.name'|trans)}) }}{% endblock %}
+<!DOCTYPE html>
+<html lang="{{ app.request.locale|default(app.request.defaultLocale|default('en')) }}">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ 'game.title'|trans({'%site%': ('site.name'|trans)}) }}</title>
 
 {# Include Game1-specific CSS in addition to the base app assets #}
-{% block stylesheets %}
-    {{ parent() }}
+    {% block stylesheets %}
+        {{ encore_entry_link_tags('app') }}
         {{ encore_entry_link_tags('game1') }}
-{% endblock %}
-
-{% block body %}
-<h1>{{ 'game.h1'|trans }}</h1>
-<p>{{ 'game.description'|trans }}</p>
-<div class="game1-banner">Game 1 assets are active. Enjoy the challenge!</div>
-
-{# Hidden config element read by assets/game1.js #}
-<div id="mercure-config"
+    {% endblock %}
+</head>
+<body>
+    <div id="game-container">
+        <div id="mercure-config"
              data-mercure-public-url="{{ mercure_public_url|e('html_attr') }}"
              data-topic="{{ (mercure_topic_base ~ '/game/hub')|e('html_attr') }}"
              data-api-ping-url="{{ path('game_api_ping')|e('html_attr') }}"
              data-api-echo-url="{{ path('game_api_message')|e('html_attr') }}"
              data-user-id="{{ user_id|e('html_attr') }}"
              style="display:none">
-</div>
+        </div>
 
-<p><a href="{{ path('website_home') }}">{{ 'link.back_to_website'|trans }}</a></p>
-{% endblock %}
+        <div id="game-timer">
+            00:30:00
+        </div>
+        <div id="message-container">
+
+        </div>
+        <div id="input">
+            <input type="text" disabled id="input-message">
+        </div>
+    </div>
+</body>
 
 {# Include Game1-specific JS in addition to the base app assets #}
 {% block javascripts %}
-    {{ parent() }}
+    {{ encore_entry_script_tags('app') }}
     {{ encore_entry_script_tags('game1') }}
 {% endblock %}