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

Reviewed-on: #4

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 {
+/* Custom scrollbar for WebKit browsers */
-  /* subtle background tint so you can visually confirm on /game */
+html::-webkit-scrollbar,
-  background-color: #f9fbff;
+body::-webkit-scrollbar {
+    width: 1px;
 }
 
-/* example component style */
+html::-webkit-scrollbar-track,
-.game1-banner {
+body::-webkit-scrollbar-track {
-  padding: 1rem 1.25rem;
+    background: #000;
-  border: 1px solid #cfe2ff;
+}
-  background: #e9f2ff;
+
-  color: #0b5ed7;
+html::-webkit-scrollbar-thumb,
-  border-radius: 8px;
+body::-webkit-scrollbar-thumb {
-  margin: 1rem 0;
+    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;
 }

src/Game/Controller/GameController.php

@@ -3,17 +3,72 @@ declare(strict_types=1);
 
 namespace App\Game\Controller;
 
+use App\Game\Entity\Session;
+use App\Game\Repository\GameRepository;
+use App\Game\Repository\SessionRepository;
+use App\Game\Service\GameDashboardService;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Bundle\SecurityBundle\Security;
+use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Annotation\Route;
+use Symfony\Component\Security\Http\Attribute\IsGranted;
+use Symfony\Component\ExpressionLanguage\Expression;
 
 final class GameController extends AbstractController
 {
-    #[Route(path: '', name: 'game')]
+    #[Route(path: '', name: 'game_dashboard', methods: ['GET', 'POST'])]
-    public function index(): Response
+    #[IsGranted(new Expression("is_granted('ROLE_PLAYER') or is_granted('ROLE_ADMIN')"))]
-    {
+    public function dashboard(
-        return $this->render('game/index.html.twig', [
+        Request $request,
-            'user_id' => $this->getUser()?->getId(),
+        GameRepository $gameRepository,
+        SessionRepository $sessionRepository,
+        GameDashboardService $dashboardService,
+        Security $security
+    ): Response {
+        $user = $security->getUser();
+        $isAdmin = $this->isGranted('ROLE_ADMIN');
+
+        if ($request->isMethod('POST')) {
+            if ($request->request->has('create_session')) {
+                $gameId = $request->request->get('game_id');
+                $game = $gameRepository->find($gameId);
+
+                if ($game) {
+                    if ($dashboardService->createSession($game, $user, $isAdmin)) {
+                        $this->addFlash('success', 'New session created!');
+                    }
+                }
+            } elseif ($request->request->has('create_invite')) {
+                $sessionId = $request->request->get('session_id');
+                $session = $sessionRepository->find($sessionId);
+
+                if (!$session) {
+                    $this->addFlash('error', 'Session not found.');
+                    return $this->redirectToRoute('game_dashboard');
+                }
+
+                $inviteCode = $dashboardService->generateInviteCode($session, $user, $isAdmin);
+                if ($inviteCode) {
+                    $this->addFlash('success', 'Invite link created: ' . $inviteCode);
+                }
+            }
+
+            return $this->redirectToRoute('game_dashboard');
+        }
+
+        return $this->render('game/dashboard.html.twig', [
+            'sessions' => $dashboardService->getSessionsForUser($user),
+            'availableGames' => $dashboardService->getAvailableGames($isAdmin),
         ]);
     }
+
+    #[Route(path: '/{session}', name: 'game')]
+    #[IsGranted(new Expression("is_granted('ROLE_PLAYER') or is_granted('ROLE_ADMIN')"))]
+    #[IsGranted('SESSION_VIEW', subject: 'session')]
+    public function index(
+        Session $session): Response
+    {
+        return $this->render('game/index.html.twig', ['session' => $session]);
+    }
 }

src/Game/Enum/SessionSettingType.php

@@ -10,4 +10,5 @@ enum SessionSettingType: string
     case RIGHTS_FOR_PLAYER1 = 'RightsForPlayer1';
     case RIGHTS_FOR_PLAYER2 = 'RightsForPlayer2';
     case RIGHTS_FOR_PLAYER3 = 'RightsForPlayer3';
+    case INVITE_CODE = 'InviteCode';
 }

src/Game/Security/Voter/SessionVoter.php

@@ -0,0 +1,48 @@
+<?php
+
+namespace App\Game\Security\Voter;
+
+use App\Game\Entity\Session;
+use App\Tech\Entity\User;
+use Symfony\Bundle\SecurityBundle\Security;
+use Symfony\Component\Security\Core\Authentication\Token\TokenInterface;
+use Symfony\Component\Security\Core\Authorization\Voter\Voter;
+
+class SessionVoter extends Voter
+{
+    public const VIEW = 'SESSION_VIEW';
+
+    public function __construct(
+        private readonly Security $security,
+    ) {
+    }
+
+    protected function supports(string $attribute, mixed $subject): bool
+    {
+        return $attribute === self::VIEW && $subject instanceof Session;
+    }
+
+    protected function voteOnAttribute(string $attribute, mixed $subject, TokenInterface $token): bool
+    {
+        $user = $token->getUser();
+
+        if (!$user instanceof User) {
+            return false;
+        }
+
+        if ($this->security->isGranted('ROLE_ADMIN')) {
+            return true;
+        }
+
+        /** @var Session $session */
+        $session = $subject;
+
+        foreach ($session->getPlayers() as $player) {
+            if ($player->getUser() === $user) {
+                return true;
+            }
+        }
+
+        return false;
+    }
+}

src/Game/Service/GameDashboardService.php

@@ -0,0 +1,116 @@
+<?php
+declare(strict_types=1);
+
+namespace App\Game\Service;
+
+use App\Game\Entity\Game;
+use App\Game\Entity\Player;
+use App\Game\Entity\Session;
+use App\Game\Entity\SessionSetting;
+use App\Game\Enum\GameStatus;
+use App\Game\Enum\SessionSettingType;
+use App\Game\Enum\SessionStatus;
+use App\Game\Repository\GameRepository;
+use App\Game\Repository\SessionRepository;
+use App\Tech\Entity\User;
+use Doctrine\ORM\EntityManagerInterface;
+use Symfony\Component\Security\Core\User\UserInterface;
+
+final class GameDashboardService
+{
+    public function __construct(
+        private readonly GameRepository $gameRepository,
+        private readonly SessionRepository $sessionRepository,
+        private readonly EntityManagerInterface $entityManager,
+    ) {
+    }
+
+    /**
+     * @return Session[]
+     */
+    public function getSessionsForUser(UserInterface $user): array
+    {
+        return $this->sessionRepository->createQueryBuilder('s')
+            ->innerJoin('s.players', 'p')
+            ->where('p.user = :user')
+            ->setParameter('user', $user)
+            ->getQuery()
+            ->getResult();
+    }
+
+    /**
+     * @return Game[]
+     */
+    public function getAvailableGames(bool $isAdmin): array
+    {
+        if ($isAdmin) {
+            return $this->gameRepository->findAll();
+        }
+
+        return $this->gameRepository->findBy(['status' => GameStatus::OPEN]);
+    }
+
+    public function createSession(Game $game, UserInterface $user, bool $isAdmin): ?Session
+    {
+        if ($game->getStatus() !== GameStatus::OPEN && !$isAdmin) {
+            return null;
+        }
+
+        if(!$user instanceof User)
+            return null;
+
+        $session = new Session();
+        $session->setGame($game);
+        $session->setStatus(SessionStatus::CREATED);
+        $session->setTimer(0);
+
+        $player = new Player();
+        $player->setUser($user);
+        $player->setSession($session);
+        $player->setScreen(1);
+
+        $this->entityManager->persist($session);
+        $this->entityManager->persist($player);
+        $this->entityManager->flush();
+
+        return $session;
+    }
+
+    public function generateInviteCode(Session $session, UserInterface $user, bool $isAdmin): ?string
+    {
+        // Security check: is user part of this session?
+        $isPlayer = false;
+        foreach ($session->getPlayers() as $player) {
+            if ($player->getUser() === $user) {
+                $isPlayer = true;
+                break;
+            }
+        }
+
+        if (!$isPlayer && !$isAdmin) {
+            return null;
+        }
+
+        $inviteCode = bin2hex(random_bytes(4));
+
+        $setting = null;
+        foreach ($session->getSettings() as $s) {
+            if ($s->getName() === SessionSettingType::INVITE_CODE) {
+                $setting = $s;
+                break;
+            }
+        }
+
+        if (!$setting) {
+            $setting = new SessionSetting();
+            $setting->setSession($session);
+            $setting->setName(SessionSettingType::INVITE_CODE);
+        }
+
+        $setting->setValue($inviteCode);
+        $this->entityManager->persist($setting);
+        $this->entityManager->flush();
+
+        return $inviteCode;
+    }
+}

src/Tech/Controller/RegistrationController.php

@@ -31,6 +31,8 @@ class RegistrationController extends AbstractController
                 )
             );
 
+            $user->setRoles(['ROLE_USER', 'ROLE_PLAYER']);
+
             $entityManager->persist($user);
             $entityManager->flush();
 

templates/base.html.twig

@@ -14,7 +14,7 @@
     <nav>
         {% set pathinfo = app.request.pathinfo %}
         <a href="/">{{ 'nav.home'|trans }}</a> |
-        <a href="/game">{{ 'nav.game'|trans }}</a> |
+        <a href="{{ path('game_dashboard') }}">{{ 'nav.game'|trans }}</a> |
         {% if app.user %}
             <a href="{{ path('app_logout') }}">Logout</a>
         {% else %}

templates/game/dashboard.html.twig

@@ -0,0 +1,74 @@
+{% extends 'base.html.twig' %}
+
+{% block title %}Game Dashboard{% endblock %}
+
+{% block body %}
+    <h1>Game Dashboard</h1>
+
+    <h2>Create New Session</h2>
+    {% if availableGames is not empty %}
+        <form method="post">
+            <select name="game_id">
+                {% for game in availableGames %}
+                    <option value="{{ game.id }}">
+                        {{ game.name }} ({{ game.numberOfPlayers }} players)
+                        {% if is_granted('ROLE_ADMIN') %}
+                            [{{ game.status.value }}]
+                        {% endif %}
+                    </option>
+                {% endfor %}
+            </select>
+            <button type="submit" name="create_session">Create Session</button>
+        </form>
+    {% else %}
+        <p>No games available to start.</p>
+    {% endif %}
+
+    <h2>Your Sessions</h2>
+    {% if sessions is not empty %}
+        <table>
+            <thead>
+                <tr>
+                    <th>ID</th>
+                    <th>Game</th>
+                    <th>Status</th>
+                    <th>Created At</th>
+                    <th>Invite Code</th>
+                    <th>Actions</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for session in sessions %}
+                    <tr>
+                        <td>{{ session.id }}</td>
+                        <td>{{ session.game.name }}</td>
+                        <td>{{ session.status.value }}</td>
+                        <td>{{ session.created|date('Y-m-d H:i') }}</td>
+                        <td>
+                            {% set inviteCode = '' %}
+                            {% for setting in session.settings %}
+                                {% if setting.name.value == 'InviteCode' %}
+                                    {% set inviteCode = setting.value %}
+                                {% endif %}
+                            {% endfor %}
+
+                            {% if inviteCode %}
+                                <code>{{ inviteCode }}</code>
+                            {% else %}
+                                <form method="post" style="display:inline;">
+                                    <input type="hidden" name="session_id" value="{{ session.id }}">
+                                    <button type="submit" name="create_invite">Generate Invite</button>
+                                </form>
+                            {% endif %}
+                        </td>
+                        <td>
+                            <a href="{{ path('game', {session: session.id}) }}">Enter Game</a>
+                        </td>
+                    </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    {% else %}
+        <p>You are not part of any sessions.</p>
+    {% endif %}
+{% endblock %}

templates/game/index.html.twig

@@ -1,33 +1,41 @@
-{% extends 'base.html.twig' %}
+<!DOCTYPE html>
-
+<html lang="{{ app.request.locale|default(app.request.defaultLocale|default('en')) }}">
-{% block title %}{{ 'game.title'|trans({'%site%': ('site.name'|trans)}) }}{% endblock %}
+<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 %}
+    {% block stylesheets %}
-    {{ parent() }}
+        {{ encore_entry_link_tags('app') }}
-    {{ encore_entry_link_tags('game1') }}
+        {{ encore_entry_link_tags('game1') }}
-{% endblock %}
+    {% 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 body %}
+        <div id="game-timer">
-<h1>{{ 'game.h1'|trans }}</h1>
+            00:30:00
-<p>{{ 'game.description'|trans }}</p>
+        </div>
-<div class="game1-banner">Game 1 assets are active. Enjoy the challenge!</div>
+        <div id="message-container">
 
-{# Hidden config element read by assets/game1.js #}
+        </div>
-<div id="mercure-config"
+        <div id="input">
-     data-mercure-public-url="{{ mercure_public_url|e('html_attr') }}"
+            <input type="text" disabled id="input-message">
-     data-topic="{{ (mercure_topic_base ~ '/game/hub')|e('html_attr') }}"
+        </div>
-     data-api-ping-url="{{ path('game_api_ping')|e('html_attr') }}"
+    </div>
-     data-api-echo-url="{{ path('game_api_message')|e('html_attr') }}"
+</body>
-     data-user-id="{{ user_id|e('html_attr') }}"
-     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 %}
-    {{ parent() }}
+    {{ encore_entry_script_tags('app') }}
     {{ encore_entry_script_tags('game1') }}
 {% endblock %}

templates/website/home/index.html.twig

@@ -5,5 +5,5 @@
 {% block body %}
 <h1>{{ 'home.h1'|trans({'%site%': ('site.name'|trans)}) }}</h1>
 <p>{{ 'home.description'|trans }}</p>
-<p><a href="{{ path('game') }}">{{ 'link.enter_game'|trans }}</a></p>
+<p><a href="{{ path('game_dashboard') }}">{{ 'link.enter_game'|trans }}</a></p>
 {% endblock %}