Created a dashboard and created an invite code for game sessions.

2026-01-06 17:42:06 +01:00
6 changed files with 52 additions and 220 deletions
--- a/assets/game1.js
+++ b/assets/game1.js
@@ -60,15 +60,6 @@ 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;
@@ -78,6 +69,7 @@ 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);
@@ -97,7 +89,7 @@ document.addEventListener('DOMContentLoaded', async () => {
    if (apiEchoUrl) {
      const echo = await fetchJson(apiEchoUrl, {
        method: 'POST',
-        body: { message: 'from game1.js', ts: new Date().toISOString() },
+        body: { message: 'from game1.js', ts: new Date().toISOString(), user: userId },
      });
      console.log('[API][game1] echo →', echo);
    } else {
@@ -106,67 +98,4 @@ 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();
-  }
 });
--- a/assets/styles/game1.css
+++ b/assets/styles/game1.css
@@ -1,63 +1,17 @@
 /* Styles specific to Game1 */

 /* page-level indicator to confirm CSS is loaded */
-/* Custom scrollbar for WebKit browsers */
-html::-webkit-scrollbar,
-body::-webkit-scrollbar {
-    width: 1px;
+body.game1-page {
+  /* subtle background tint so you can visually confirm on /game */
+  background-color: #f9fbff;
 }

-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;
+/* example component style */
+.game1-banner {
+  padding: 1rem 1.25rem;
+  border: 1px solid #cfe2ff;
+  background: #e9f2ff;
+  color: #0b5ed7;
+  border-radius: 8px;
+  margin: 1rem 0;
 }
--- a/docker/compose.yaml
+++ b/docker/compose.yaml
@@ -5,7 +5,7 @@ services:
  php:
    build:
      context: ..
-      dockerfile: docker/php/Dockerfile
+      dockerfile: php/Dockerfile
    container_name: escapepage-php
    volumes:
      - ../:/var/www/html:delegated
@@ -18,23 +18,6 @@ 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
--- a/docker/php/Dockerfile
+++ b/docker/php/Dockerfile
@@ -1,20 +1,11 @@
-FROM php:8.3-fpm-alpine
+FROM php:8.5.1-fpm-alpine3.23

 # Install system deps
-RUN apk add --no-cache \
-    bash \
-    git \
-    icu-dev \
-    libzip-dev \
-    oniguruma-dev \
-    g++ \
-    make \
-    nodejs \
-    npm
+RUN apk add --no-cache bash git icu-dev libzip-dev oniguruma-dev

 # Install PHP extensions
 RUN docker-php-ext-configure intl \
-    && docker-php-ext-install -j$(nproc) intl pdo pdo_mysql opcache zip
+    && docker-php-ext-install -j$(nproc) intl pdo pdo_mysql opcache

 # Install composer
 ENV COMPOSER_ALLOW_SUPERUSER=1 \
@@ -22,7 +13,7 @@ ENV COMPOSER_ALLOW_SUPERUSER=1 \
 COPY --from=composer:2 /usr/bin/composer /usr/bin/composer

 # Configure PHP
-COPY docker/php/php.ini $PHP_INI_DIR/conf.d/zz-custom.ini
+COPY php.ini $PHP_INI_DIR/conf.d/zz-custom.ini

 WORKDIR /var/www/html

--- a/docker/setup.sh
+++ b/docker/setup.sh
@@ -66,15 +66,12 @@ dc up "${BUILD_ARGS[@]}"
 # Helper to run commands in php container
 pexec() { dc exec -T php "$@"; }

-# Wait for database to be healthy (mariadb/mysql)
+# Wait for database to be healthy (mariadb)
 printf "Waiting for database to be healthy..."
 # Use docker inspect health status
 DB_HEALTH=""
 for i in {1..60}; do
-  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
+  DB_HEALTH=$(docker inspect -f '{{.State.Health.Status}}' "$(docker ps --filter name=_database_ --format '{{.ID}}' | head -n1)" 2>/dev/null || true)
  if [ "$DB_HEALTH" = "healthy" ]; then
    echo " OK"
    break
@@ -82,7 +79,7 @@ for i in {1..60}; do
  printf "."
  sleep 2
  if [ "$i" -eq 60 ]; then
-    echo -e "\nWarning: database health check not healthy yet, continuing anyway."
+    echo "\nWarning: database health check not healthy yet, continuing anyway."
  fi
 done

@@ -103,23 +100,11 @@ if grep -q '^APP_SECRET=$' "$ROOT_DIR/.env" 2>/dev/null; then
 fi

 # Prepare DB
-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
+pexec php bin/console doctrine:database:create --if-not-exists || true
+pexec php bin/console doctrine:migrations:migrate -n || true

 # Import JS deps (Importmap/Asset Mapper)
-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
+pexec php bin/console importmap:install || true

 APP_URL=http://localhost:8080
 MAILPIT_URL=http://localhost:8025
@@ -132,12 +117,10 @@ Open the app:      $APP_URL
 Mailpit (dev):     $MAILPIT_URL

 Common commands:
-  (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)
+  (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)

 You can re-run this script any time. Use --no-build to skip rebuilding images.
 EOT
--- a/templates/game/index.html.twig
+++ b/templates/game/index.html.twig
@@ -1,41 +1,33 @@
-<!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>
+{% extends 'base.html.twig' %}
+
+{% block title %}{{ 'game.title'|trans({'%site%': ('site.name'|trans)}) }}{% endblock %}

 {# Include Game1-specific CSS in addition to the base app assets #}
-    {% block stylesheets %}
-        {{ encore_entry_link_tags('app') }}
-        {{ encore_entry_link_tags('game1') }}
-    {% 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>
+{% block stylesheets %}
+    {{ parent() }}
+    {{ encore_entry_link_tags('game1') }}
+{% endblock %}

-        <div id="game-timer">
-            00:30:00
-        </div>
-        <div id="message-container">
+{% 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>

-        </div>
-        <div id="input">
-            <input type="text" disabled id="input-message">
-        </div>
-    </div>
-</body>
+{# Hidden config element read by assets/game1.js #}
+<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-session-id="{{ session.id }}"
+     style="display:none">
+</div>
+
+<p><a href="{{ path('website_home') }}">{{ 'link.back_to_website'|trans }}</a></p>
+{% endblock %}

 {# Include Game1-specific JS in addition to the base app assets #}
 {% block javascripts %}
-    {{ encore_entry_script_tags('app') }}
+    {{ parent() }}
    {{ encore_entry_script_tags('game1') }}
 {% endblock %}