From 8fa487401681d0e931b9316e8968a88a88e92d5d Mon Sep 17 00:00:00 2001
From: Markus Reinhold <markusreinhold@icloud.com>
Date: Fri, 2 Jan 2026 17:24:14 +0100
Subject: [PATCH 1/7] Prepare nav for new games

Add an optional contextual navigation to the header.

Additionally, move some controllers to their respective context.
---
 assets/css/app.css                            |  12 +-
 assets/js/Common/VolumeControl.js             |   2 +-
 assets/js/ConnectFour/GameService.js          |   2 +-
 config/connect-four/routing.yml               |  23 ++-
 config/connect-four/services/controller.yml   |   6 +
 config/identity/services/controller.yml       |   5 +
 config/web-interface/routing.yml              |  14 +-
 config/web-interface/services/controller.yml  |   1 -
 .../Port/Adapter/Http/ChallengeController.php |   8 +-
 .../Port/Adapter/Http/FragmentController.php  |   6 +
 .../Port/Adapter/Http/PageController.php      |  67 ++++++++
 .../Port/Adapter/Http/View/base.html.twig     |  16 ++
 .../Adapter/Http/View/challenge.html.twig     |   2 +-
 .../Port/Adapter}/Http/View/game.html.twig    |   2 +-
 .../Port/Adapter/Http/View/history.html.twig} |  18 +-
 .../Adapter/Http/View/home-tile.html.twig     |  25 +++
 .../Port/Adapter}/Http/View/lobby.html.twig   |   2 +-
 .../Http/View/player-search-filter.html.twig  |   2 +-
 .../Port/Adapter/Http/FragmentController.php  |  16 ++
 .../Port/Adapter/Http/LoginController.php     |   4 +-
 .../Port/Adapter/Http/SignupController.php    |   8 +-
 .../Http/View/fragment/home-header.html.twig  |  25 +++
 .../Presentation/Http/PageController.php      |  55 +------
 .../Presentation/Http/View/home.html.twig     |  14 ++
 .../TwigBundle/Exception/error.html.twig      |   2 +-
 .../TwigBundle/Exception/error404.html.twig   |   2 +-
 templates/include/pagination.html.twig        |  58 ++++---
 templates/layout/center-tight.html.twig       |   2 +-
 templates/layout/condensed.html.twig          | 154 ++++++++----------
 .../layout/partial/footer-links.html.twig     |   6 +-
 30 files changed, 349 insertions(+), 210 deletions(-)
 create mode 100644 src/ConnectFour/Port/Adapter/Http/PageController.php
 create mode 100644 src/ConnectFour/Port/Adapter/Http/View/base.html.twig
 rename src/{WebInterface/Presentation => ConnectFour/Port/Adapter}/Http/View/game.html.twig (99%)
 rename src/{WebInterface/Presentation/Http/View/profile.html.twig => ConnectFour/Port/Adapter/Http/View/history.html.twig} (94%)
 create mode 100644 src/ConnectFour/Port/Adapter/Http/View/home-tile.html.twig
 rename src/{WebInterface/Presentation => ConnectFour/Port/Adapter}/Http/View/lobby.html.twig (94%)
 create mode 100644 src/Identity/Port/Adapter/Http/FragmentController.php
 create mode 100644 src/Identity/Port/Adapter/Http/View/fragment/home-header.html.twig
 create mode 100644 src/WebInterface/Presentation/Http/View/home.html.twig

diff --git a/assets/css/app.css b/assets/css/app.css
index 3a6a47a5f..7e24e1930 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -2,14 +2,22 @@ html {
     scroll-padding-top: 10px;
 }
 
-html:has(.navbar.sticky-top) {
+html:has(.sticky-top > .navbar) {
     scroll-padding-top: 66px;
 }
 
-html:has(.navbar.sticky-top) .page-body .sticky-md-top {
+html:has(.sticky-top > .navbar) .page-body .sticky-md-top {
     top: 66px;
 }
 
+html:has(.sticky-top > .navbar + .navbar) {
+    scroll-padding-top: 120px;
+}
+
+html:has(.sticky-top > .navbar + .navbar) .page-body .sticky-md-top {
+    top: 120px;
+}
+
 [data-title] {
     position: relative;
 }
diff --git a/assets/js/Common/VolumeControl.js b/assets/js/Common/VolumeControl.js
index 0495b5a1e..792758b15 100644
--- a/assets/js/Common/VolumeControl.js
+++ b/assets/js/Common/VolumeControl.js
@@ -5,7 +5,7 @@ customElements.define('volume-control', class extends HTMLElement {
     connectedCallback() {
         this.append(html`
             <input type="checkbox" class="gp-dropdown-toggle" id="volume-control-dropdown">
-            <label class="nav-link" for="volume-control-dropdown">
+            <label class="nav-link cursor-pointer" for="volume-control-dropdown">
                 ${this._iconHighVolume = html`
                     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
diff --git a/assets/js/ConnectFour/GameService.js b/assets/js/ConnectFour/GameService.js
index 6266e9c0e..919923279 100644
--- a/assets/js/ConnectFour/GameService.js
+++ b/assets/js/ConnectFour/GameService.js
@@ -13,7 +13,7 @@ class GameService {
      */
     redirectTo(gameId) {
         this.httpClient.redirectTo(
-            '/game/' + gameId
+            '/connect-four/game/' + gameId
         );
     }
 
diff --git a/config/connect-four/routing.yml b/config/connect-four/routing.yml
index 84c1c42ee..d0fba0e6c 100644
--- a/config/connect-four/routing.yml
+++ b/config/connect-four/routing.yml
@@ -1,20 +1,35 @@
+connect_four_lobby:
+    path: /connect-four/lobby
+    methods: [GET]
+    controller: connect-four.page-controller::lobbyAction
+
+connect_four_history:
+    path: /connect-four/history
+    methods: [GET]
+    controller: connect-four.page-controller::historyAction
+
+connect_four_game:
+    path: /connect-four/game/{id}
+    methods: [GET]
+    controller: connect-four.page-controller::gameAction
+
 connect_four_open:
-    path: /api/connect-four/games/open
+    path: /connect-four/games/open
     methods: [POST]
     controller: connect-four.challenge-controller::openAction
 
 connect_four_abort_challenge:
-    path: /challenge/{id}/abort
+    path: /connect-four/challenge/{id}/abort
     methods: [POST]
     controller: connect-four.challenge-controller::abortChallengeAction
 
 connect_four_accept_challenge:
-    path: /challenge/{id}/accept
+    path: /connect-four/challenge/{id}/accept
     methods: [POST]
     controller: connect-four.challenge-controller::acceptChallengeAction
 
 connect_four_challenge:
-    path: /challenge/{id}
+    path: /connect-four/challenge/{id}
     methods: [GET]
     controller: connect-four.challenge-controller::showAction
 
diff --git a/config/connect-four/services/controller.yml b/config/connect-four/services/controller.yml
index 9baf0e507..aa52ddb21 100644
--- a/config/connect-four/services/controller.yml
+++ b/config/connect-four/services/controller.yml
@@ -1,4 +1,10 @@
 services:
+    connect-four.page-controller:
+        class: Gaming\ConnectFour\Port\Adapter\Http\PageController
+        arguments: ['@connect-four.query-bus', '@gaming.usernames']
+        calls: [[setContainer, ['@Psr\Container\ContainerInterface']]]
+        tags: ['controller.service_arguments', 'container.service_subscriber']
+
     connect-four.fragment-controller:
         class: Gaming\ConnectFour\Port\Adapter\Http\FragmentController
         arguments: ['@connect-four.query-bus', '@gaming.usernames']
diff --git a/config/identity/services/controller.yml b/config/identity/services/controller.yml
index 4ef04cc76..0d62b4a3d 100644
--- a/config/identity/services/controller.yml
+++ b/config/identity/services/controller.yml
@@ -19,3 +19,8 @@ services:
             - '@gaming.form-violation-mapper'
         calls: [[setContainer, ['@Psr\Container\ContainerInterface']]]
         tags: ['controller.service_arguments', 'container.service_subscriber']
+
+    identity.fragment-controller:
+        class: Gaming\Identity\Port\Adapter\Http\FragmentController
+        calls: [[setContainer, ['@Psr\Container\ContainerInterface']]]
+        tags: ['controller.service_arguments', 'container.service_subscriber']
diff --git a/config/web-interface/routing.yml b/config/web-interface/routing.yml
index c4074bc91..89a3b5c39 100644
--- a/config/web-interface/routing.yml
+++ b/config/web-interface/routing.yml
@@ -1,23 +1,13 @@
-lobby:
+home:
     path: /
     methods: [GET]
-    controller: web-interface.page-controller::lobbyAction
+    controller: web-interface.page-controller::homeAction
 
 metrics:
     path: /metrics
     methods: [GET]
     controller: web-interface.metrics-controller::showAction
 
-profile:
-    path: /profile
-    methods: [GET]
-    controller: web-interface.page-controller::profileAction
-
-game:
-    path: /game/{id}
-    methods: [GET]
-    controller: web-interface.page-controller::gameAction
-
 server_time:
     path: /api/server-time
     methods: [GET]
diff --git a/config/web-interface/services/controller.yml b/config/web-interface/services/controller.yml
index 959aa7295..66d393955 100644
--- a/config/web-interface/services/controller.yml
+++ b/config/web-interface/services/controller.yml
@@ -1,7 +1,6 @@
 services:
     web-interface.page-controller:
         class: Gaming\WebInterface\Presentation\Http\PageController
-        arguments: ['@connect-four.query-bus', '@gaming.usernames']
         calls: [[setContainer, ['@Psr\Container\ContainerInterface']]]
         tags: ['controller.service_arguments', 'container.service_subscriber']
 
diff --git a/src/ConnectFour/Port/Adapter/Http/ChallengeController.php b/src/ConnectFour/Port/Adapter/Http/ChallengeController.php
index 54e5dcaad..e0c1a503a 100644
--- a/src/ConnectFour/Port/Adapter/Http/ChallengeController.php
+++ b/src/ConnectFour/Port/Adapter/Http/ChallengeController.php
@@ -47,7 +47,7 @@ public function openAction(Request $request): Response
             ]);
         }
 
-        return $this->redirectToRoute('lobby');
+        return $this->redirectToRoute('connect_four_lobby');
     }
 
     public function abortChallengeAction(string $id): Response
@@ -59,7 +59,7 @@ public function abortChallengeAction(string $id): Response
             )
         );
 
-        return $this->redirectToRoute('lobby');
+        return $this->redirectToRoute('connect_four_lobby');
     }
 
     public function acceptChallengeAction(string $id): Response
@@ -71,7 +71,7 @@ public function acceptChallengeAction(string $id): Response
             )
         );
 
-        return $this->redirectToRoute('game', ['id' => $id]);
+        return $this->redirectToRoute('connect_four_game', ['id' => $id]);
     }
 
     public function showAction(string $id): Response
@@ -79,7 +79,7 @@ public function showAction(string $id): Response
         $game = $this->queryBus->handle(new GameQuery($id));
 
         if ($game->state !== $game::STATE_OPEN) {
-            return $this->redirectToRoute('game', ['id' => $id], Response::HTTP_MOVED_PERMANENTLY);
+            return $this->redirectToRoute('connect_four_game', ['id' => $id], Response::HTTP_MOVED_PERMANENTLY);
         }
 
         return $this->render('@connect-four/challenge.html.twig', [
diff --git a/src/ConnectFour/Port/Adapter/Http/FragmentController.php b/src/ConnectFour/Port/Adapter/Http/FragmentController.php
index 053ec3111..74d9453c3 100644
--- a/src/ConnectFour/Port/Adapter/Http/FragmentController.php
+++ b/src/ConnectFour/Port/Adapter/Http/FragmentController.php
@@ -62,4 +62,10 @@ public function playerSearchFilterAction(#[CurrentUser] ?UserInterface $user): R
             )
         ]);
     }
+
+    #[Cache(public: true, maxage: 10)]
+    public function homeTileAction(): Response
+    {
+        return $this->render('@connect-four/home-tile.html.twig');
+    }
 }
diff --git a/src/ConnectFour/Port/Adapter/Http/PageController.php b/src/ConnectFour/Port/Adapter/Http/PageController.php
new file mode 100644
index 000000000..c58836706
--- /dev/null
+++ b/src/ConnectFour/Port/Adapter/Http/PageController.php
@@ -0,0 +1,67 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Gaming\ConnectFour\Port\Adapter\Http;
+
+use Gaming\Common\Bus\Bus;
+use Gaming\Common\Usernames\Usernames;
+use Gaming\ConnectFour\Application\Game\Query\GameQuery;
+use Gaming\ConnectFour\Application\Game\Query\GamesByPlayerQuery;
+use Gaming\ConnectFour\Application\Game\Query\Model\Game\Game;
+use Gaming\ConnectFour\Application\Game\Query\Model\GamesByPlayer\GamesByPlayer;
+use Gaming\ConnectFour\Application\Game\Query\Model\GamesByPlayer\State;
+use Gaming\WebInterface\Infrastructure\Security\User;
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Security\Http\Attribute\CurrentUser;
+
+final class PageController extends AbstractController
+{
+    public function __construct(
+        private readonly Bus $connectFourQueryBus,
+        private readonly Usernames $usernames
+    ) {
+    }
+
+    public function lobbyAction(): Response
+    {
+        return $this->render('@connect-four/lobby.html.twig');
+    }
+
+    public function gameAction(string $id): Response
+    {
+        return $this->render('@connect-four/game.html.twig', [
+            'game' => $game = $this->connectFourQueryBus->handle(new GameQuery($id)),
+            'usernames' => $game->state !== $game::STATE_OPEN ? $this->usernames->byIds($game->players()) : []
+        ]);
+    }
+
+    public function historyAction(#[CurrentUser] ?User $user, Request $request): Response
+    {
+        $stateQuery = $request->query->getString('state');
+        $state = State::tryFrom($stateQuery ?: State::All->value);
+        if (!in_array($state, State::visibleCases(), true) || $stateQuery === State::All->value) {
+            return $this->redirectToRoute('connect_four_history');
+        }
+
+        return $this->render('@connect-four/history.html.twig', [
+            'state' => $state,
+            'page' => $page = max(1, $request->query->getInt('page', 1)),
+            'gamesPerPage' => $gamesPerPage = 12,
+            'gamesByPlayer' => $gamesByPlayer = $user === null
+                ? new GamesByPlayer(0, [])
+                : $this->connectFourQueryBus->handle(
+                    new GamesByPlayerQuery($user->getUserIdentifier(), $state, $page, $gamesPerPage)
+                ),
+            'usernames' => $this->usernames->byIds(
+                array_unique(
+                    array_merge(
+                        ...array_map(static fn(Game $game): array => $game->players(), $gamesByPlayer->games)
+                    )
+                )
+            )
+        ]);
+    }
+}
diff --git a/src/ConnectFour/Port/Adapter/Http/View/base.html.twig b/src/ConnectFour/Port/Adapter/Http/View/base.html.twig
new file mode 100644
index 000000000..437a6679c
--- /dev/null
+++ b/src/ConnectFour/Port/Adapter/Http/View/base.html.twig
@@ -0,0 +1,16 @@
+{% extends 'layout/condensed.html.twig' %}
+
+{% block context_nav %}
+    <header class="navbar navbar-expand">
+        <div class="container-xxl">
+            <ul class="navbar-nav">
+                <li class="nav-item{{ app.request.attributes.get('_route') == 'connect_four_lobby' ? ' active' }}">
+                    <a class="nav-link" href="{{ path('connect_four_lobby') }}">Lobby</a>
+                </li>
+                <li class="nav-item{{ app.request.attributes.get('_route') == 'connect_four_history' ? ' active' }}">
+                    <a class="nav-link" href="{{ path('connect_four_history') }}">History</a>
+                </li>
+            </ul>
+        </div>
+    </header>
+{% endblock %}
diff --git a/src/ConnectFour/Port/Adapter/Http/View/challenge.html.twig b/src/ConnectFour/Port/Adapter/Http/View/challenge.html.twig
index 4c06acd25..0a181f945 100644
--- a/src/ConnectFour/Port/Adapter/Http/View/challenge.html.twig
+++ b/src/ConnectFour/Port/Adapter/Http/View/challenge.html.twig
@@ -1,4 +1,4 @@
-{% extends 'layout/condensed.html.twig' %}
+{% extends '@connect-four/base.html.twig' %}
 {% from "macro/username.html.twig" import render as renderUsername %}
 
 {% if app.user ? app.user.userIdentifier == game.openedBy %}
diff --git a/src/WebInterface/Presentation/Http/View/game.html.twig b/src/ConnectFour/Port/Adapter/Http/View/game.html.twig
similarity index 99%
rename from src/WebInterface/Presentation/Http/View/game.html.twig
rename to src/ConnectFour/Port/Adapter/Http/View/game.html.twig
index 3549a3c07..a640abe7b 100644
--- a/src/WebInterface/Presentation/Http/View/game.html.twig
+++ b/src/ConnectFour/Port/Adapter/Http/View/game.html.twig
@@ -1,4 +1,4 @@
-{% extends 'layout/condensed.html.twig' %}
+{% extends '@connect-four/base.html.twig' %}
 {% from "macro/username.html.twig" import render as renderUsername %}
 
 {% set page_title = game.redPlayerId and game.yellowPlayerId
diff --git a/src/WebInterface/Presentation/Http/View/profile.html.twig b/src/ConnectFour/Port/Adapter/Http/View/history.html.twig
similarity index 94%
rename from src/WebInterface/Presentation/Http/View/profile.html.twig
rename to src/ConnectFour/Port/Adapter/Http/View/history.html.twig
index 05209520b..ebbf98c65 100644
--- a/src/WebInterface/Presentation/Http/View/profile.html.twig
+++ b/src/ConnectFour/Port/Adapter/Http/View/history.html.twig
@@ -1,7 +1,7 @@
-{% extends 'layout/condensed.html.twig' %}
+{% extends '@connect-four/base.html.twig' %}
 {% from "macro/username.html.twig" import render as renderUsername %}
 
-{% set page_title = 'Profile' %}
+{% set page_title = 'History' %}
 
 {% block content %}
     <div class="row mb-3">
@@ -30,7 +30,7 @@
                 </span>
                 {% if app.request.query.get('state', 'all') != 'all' or page != 1 %}
                     <span class="text-secondary">•</span>
-                    <a href="{{ path('profile') }}">
+                    <a href="{{ path('connect_four_history') }}">
                         Clear all filters
                     </a>
                 {% endif %}
@@ -113,7 +113,7 @@
                                     <div style="aspect-ratio: {{ game.width }}/{{ game.height }};"></div>
                                 </connect-four-game>
                             </div>
-                            <a href="{{ path('game', {'id': game.gameId}) }}"
+                            <a href="{{ path('connect_four_game', {'id': game.gameId}) }}"
                                class="card-btn flex-grow-0">
                                 Show game
                             </a>
@@ -132,13 +132,11 @@
                     </div>
                 {% endfor %}
                 {% if gamesByPlayer.total > 0 %}
-                    <div class="col-12">
+                    <div class="col-12 justify-content-end">
                         {% include 'include/pagination.html.twig' with {
-                            'page': page,
-                            'total': gamesByPlayer.total,
-                            'limit': gamesPerPage,
-                            'previousTitle': 'Games',
-                            'nextTitle': 'Games'
+                            currentPage: page,
+                            totalItems: gamesByPlayer.total,
+                            itemsPerPage: gamesPerPage
                         } %}
                     </div>
                 {% endif %}
diff --git a/src/ConnectFour/Port/Adapter/Http/View/home-tile.html.twig b/src/ConnectFour/Port/Adapter/Http/View/home-tile.html.twig
new file mode 100644
index 000000000..1397203c6
--- /dev/null
+++ b/src/ConnectFour/Port/Adapter/Http/View/home-tile.html.twig
@@ -0,0 +1,25 @@
+<div class="card">
+    <div class="card-body d-flex flex-column">
+        <h3 class="card-title">Connect Four</h3>
+        <div class="gp-cf-game gp-cf-game--disabled mb-3">
+            <div class="gp-cf-game__field"></div>
+            <div class="gp-cf-game__field"></div>
+            <div class="gp-cf-game__field"><div class="gp-cf-token gp-cf-token--yellow"></div></div>
+            <div class="gp-cf-game__field"><div class="gp-cf-token gp-cf-token--yellow"></div></div>
+            <div class="gp-cf-game__field"></div>
+            <div class="gp-cf-game__field"></div>
+            <div class="gp-cf-game__field"></div>
+            <div class="gp-cf-game__field"></div>
+            <div class="gp-cf-game__field"><div class="gp-cf-token gp-cf-token--yellow"></div></div>
+            <div class="gp-cf-game__field gp-cf-game__field--highlight"><div class="gp-cf-token"></div></div>
+            <div class="gp-cf-game__field gp-cf-game__field--highlight"><div class="gp-cf-token"></div></div>
+            <div class="gp-cf-game__field gp-cf-game__field--highlight"><div class="gp-cf-token"></div></div>
+            <div class="gp-cf-game__field gp-cf-game__field--highlight"><div class="gp-cf-token"></div></div>
+            <div class="gp-cf-game__field"></div>
+        </div>
+        <p class="small">
+            Drop tokens, line them up, and outsmart your opponent.
+        </p>
+        <a href="{{ path('connect_four_lobby') }}" class="btn btn-outline-primary">Play</a>
+    </div>
+</div>
diff --git a/src/WebInterface/Presentation/Http/View/lobby.html.twig b/src/ConnectFour/Port/Adapter/Http/View/lobby.html.twig
similarity index 94%
rename from src/WebInterface/Presentation/Http/View/lobby.html.twig
rename to src/ConnectFour/Port/Adapter/Http/View/lobby.html.twig
index cf3e2c7f5..d428a80e8 100644
--- a/src/WebInterface/Presentation/Http/View/lobby.html.twig
+++ b/src/ConnectFour/Port/Adapter/Http/View/lobby.html.twig
@@ -1,4 +1,4 @@
-{% extends 'layout/condensed.html.twig' %}
+{% extends '@connect-four/base.html.twig' %}
 
 {% set page_title = 'Lobby' %}
 
diff --git a/src/ConnectFour/Port/Adapter/Http/View/player-search-filter.html.twig b/src/ConnectFour/Port/Adapter/Http/View/player-search-filter.html.twig
index 90f2724d6..cf43a1f8a 100644
--- a/src/ConnectFour/Port/Adapter/Http/View/player-search-filter.html.twig
+++ b/src/ConnectFour/Port/Adapter/Http/View/player-search-filter.html.twig
@@ -6,7 +6,7 @@
     <div class="subheader mb-2">State</div>
     <div class="list-group mb-3">
         {% for state, total in playerSearchStatistics.states %}
-            <a href="{{ path('profile', state == 'all' ? {} :{state: state}) }}"
+            <a href="{{ path('connect_four_history', state == 'all' ? {} : {state: state}) }}"
                class="list-group-item list-group-item-action d-flex align-items-center{{ app.request.query.get('state', 'all') == state ? ' active' }}">
                 {{ ('state_' ~ state)|trans }}
                 <small class="text-secondary ms-auto">{{ total }}</small>
diff --git a/src/Identity/Port/Adapter/Http/FragmentController.php b/src/Identity/Port/Adapter/Http/FragmentController.php
new file mode 100644
index 000000000..edfdb6347
--- /dev/null
+++ b/src/Identity/Port/Adapter/Http/FragmentController.php
@@ -0,0 +1,16 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Gaming\Identity\Port\Adapter\Http;
+
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Response;
+
+final class FragmentController extends AbstractController
+{
+    public function homeHeaderAction(): Response
+    {
+        return $this->render('@identity/fragment/home-header.html.twig');
+    }
+}
diff --git a/src/Identity/Port/Adapter/Http/LoginController.php b/src/Identity/Port/Adapter/Http/LoginController.php
index ae6154862..bd87e29b9 100644
--- a/src/Identity/Port/Adapter/Http/LoginController.php
+++ b/src/Identity/Port/Adapter/Http/LoginController.php
@@ -33,7 +33,7 @@ public function __construct(
     public function indexAction(#[CurrentUser] ?User $user, Request $request): Response
     {
         if ($user?->isSignedUp) {
-            return $this->redirectToRoute('lobby');
+            return $this->redirectToRoute('home');
         }
 
         $form = $this->createForm(LoginType::class)
@@ -70,7 +70,7 @@ public function indexAction(#[CurrentUser] ?User $user, Request $request): Respo
     public function checkInboxAction(#[CurrentUser] ?User $user): Response
     {
         if ($user?->isSignedUp) {
-            return $this->redirectToRoute('lobby');
+            return $this->redirectToRoute('home');
         }
 
         return $this->render('@identity/login/check-inbox.html.twig');
diff --git a/src/Identity/Port/Adapter/Http/SignupController.php b/src/Identity/Port/Adapter/Http/SignupController.php
index 3269db2d7..6714c67c5 100644
--- a/src/Identity/Port/Adapter/Http/SignupController.php
+++ b/src/Identity/Port/Adapter/Http/SignupController.php
@@ -31,7 +31,7 @@ public function __construct(
     public function indexAction(#[CurrentUser] ?User $user, Request $request): Response
     {
         if ($user?->isSignedUp) {
-            return $this->redirectToRoute('lobby');
+            return $this->redirectToRoute('home');
         }
 
         $form = $this->createForm(SignupType::class, $request->query->all())
@@ -69,7 +69,7 @@ public function indexAction(#[CurrentUser] ?User $user, Request $request): Respo
     public function verifyEmailAction(#[CurrentUser] ?User $user, Request $request): Response
     {
         if ($user?->isSignedUp) {
-            return $this->redirectToRoute('lobby');
+            return $this->redirectToRoute('home');
         }
 
         return $this->render('@identity/signup/verify-email.html.twig');
@@ -78,7 +78,7 @@ public function verifyEmailAction(#[CurrentUser] ?User $user, Request $request):
     public function confirmAction(#[CurrentUser] ?User $user, Request $request): Response
     {
         if ($user?->isSignedUp) {
-            return $this->redirectToRoute('lobby');
+            return $this->redirectToRoute('home');
         }
 
         if (!$this->uriSigner->checkRequest($request)) {
@@ -107,7 +107,7 @@ public function confirmAction(#[CurrentUser] ?User $user, Request $request): Res
 
                 $this->security->forceUser()->forceRefreshAtNextRequest();
 
-                return $this->redirectToRoute('lobby');
+                return $this->redirectToRoute('home');
             } catch (DomainException $e) {
                 $this->formViolationMapper->mapViolations($form, $e->violations);
             }
diff --git a/src/Identity/Port/Adapter/Http/View/fragment/home-header.html.twig b/src/Identity/Port/Adapter/Http/View/fragment/home-header.html.twig
new file mode 100644
index 000000000..ff3487a5f
--- /dev/null
+++ b/src/Identity/Port/Adapter/Http/View/fragment/home-header.html.twig
@@ -0,0 +1,25 @@
+{% from "macro/username.html.twig" import render as renderUsername %}
+
+<div class="card mb-3">
+    <div class="card-body">
+        <h1 class="card-title">
+            {% if app.user and app.user.isSignedUp %}
+                Happy to see you, {{ renderUsername(app.user.username) }}!
+            {% else %}
+                Welcome, {{ app.user ? renderUsername(app.user.username) : 'Guest' }}!
+            {% endif %}
+        </h1>
+        <p class="card-text">
+            Pick a game to start playing.
+        </p>
+        {% if not app.user or not app.user.isSignedUp %}
+            <p>
+                You’re currently playing as a guest.
+                <strong><a href="{{ path('identity_login') }}">Log in</a></strong>
+                or
+                <strong><a href="{{ path('identity_signup') }}">sign up for free</a></strong>
+                to keep your game history and statistics.
+            </p>
+        {% endif %}
+    </div>
+</div>
diff --git a/src/WebInterface/Presentation/Http/PageController.php b/src/WebInterface/Presentation/Http/PageController.php
index a74ad3249..f1833e8fe 100644
--- a/src/WebInterface/Presentation/Http/PageController.php
+++ b/src/WebInterface/Presentation/Http/PageController.php
@@ -4,64 +4,13 @@
 
 namespace Gaming\WebInterface\Presentation\Http;
 
-use Gaming\Common\Bus\Bus;
-use Gaming\Common\Usernames\Usernames;
-use Gaming\ConnectFour\Application\Game\Query\GameQuery;
-use Gaming\ConnectFour\Application\Game\Query\GamesByPlayerQuery;
-use Gaming\ConnectFour\Application\Game\Query\Model\Game\Game;
-use Gaming\ConnectFour\Application\Game\Query\Model\GamesByPlayer\GamesByPlayer;
-use Gaming\ConnectFour\Application\Game\Query\Model\GamesByPlayer\State;
-use Gaming\WebInterface\Infrastructure\Security\User;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
-use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
-use Symfony\Component\Security\Http\Attribute\CurrentUser;
 
 final class PageController extends AbstractController
 {
-    public function __construct(
-        private readonly Bus $connectFourQueryBus,
-        private readonly Usernames $usernames
-    ) {
-    }
-
-    public function lobbyAction(): Response
-    {
-        return $this->render('@web-interface/lobby.html.twig');
-    }
-
-    public function gameAction(string $id): Response
+    public function homeAction(): Response
     {
-        return $this->render('@web-interface/game.html.twig', [
-            'game' => $game = $this->connectFourQueryBus->handle(new GameQuery($id)),
-            'usernames' => $game->state !== $game::STATE_OPEN ? $this->usernames->byIds($game->players()) : []
-        ]);
-    }
-
-    public function profileAction(#[CurrentUser] ?User $user, Request $request): Response
-    {
-        $stateQuery = $request->query->getString('state');
-        $state = State::tryFrom($stateQuery ?: State::All->value);
-        if (!in_array($state, State::visibleCases(), true) || $stateQuery === State::All->value) {
-            return $this->redirectToRoute('profile');
-        }
-
-        return $this->render('@web-interface/profile.html.twig', [
-            'state' => $state,
-            'page' => $page = max(1, $request->query->getInt('page', 1)),
-            'gamesPerPage' => $gamesPerPage = 12,
-            'gamesByPlayer' => $gamesByPlayer = $user === null
-                ? new GamesByPlayer(0, [])
-                : $this->connectFourQueryBus->handle(
-                    new GamesByPlayerQuery($user->getUserIdentifier(), $state, $page, $gamesPerPage)
-                ),
-            'usernames' => $this->usernames->byIds(
-                array_unique(
-                    array_merge(
-                        ...array_map(static fn(Game $game): array => $game->players(), $gamesByPlayer->games)
-                    )
-                )
-            )
-        ]);
+        return $this->render('@web-interface/home.html.twig');
     }
 }
diff --git a/src/WebInterface/Presentation/Http/View/home.html.twig b/src/WebInterface/Presentation/Http/View/home.html.twig
new file mode 100644
index 000000000..5b72ebc74
--- /dev/null
+++ b/src/WebInterface/Presentation/Http/View/home.html.twig
@@ -0,0 +1,14 @@
+{% extends 'layout/condensed.html.twig' %}
+
+{% set page_title = 'Home' %}
+
+{% block content %}
+    <div class="container container-narrow">
+        {{ render_ssi(controller('identity.fragment-controller::homeHeaderAction')) }}
+        <div class="row row-cards">
+            <div class="col-md-4">
+                {{ render_ssi(controller('connect-four.fragment-controller::homeTileAction')) }}
+            </div>
+        </div>
+    </div>
+{% endblock %}
diff --git a/templates/bundles/TwigBundle/Exception/error.html.twig b/templates/bundles/TwigBundle/Exception/error.html.twig
index ed052a367..c70785590 100644
--- a/templates/bundles/TwigBundle/Exception/error.html.twig
+++ b/templates/bundles/TwigBundle/Exception/error.html.twig
@@ -21,7 +21,7 @@
                 We are sorry, but our server encountered an internal error.
             </p>
             <p class="text-center">
-                <a href="{{ path('lobby') }}" class="btn btn-primary">
+                <a href="{{ path('home') }}" class="btn btn-primary">
                     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                          class="icon">
diff --git a/templates/bundles/TwigBundle/Exception/error404.html.twig b/templates/bundles/TwigBundle/Exception/error404.html.twig
index 353b0254f..ebdf39647 100644
--- a/templates/bundles/TwigBundle/Exception/error404.html.twig
+++ b/templates/bundles/TwigBundle/Exception/error404.html.twig
@@ -21,7 +21,7 @@
                 We are sorry, but the page you are looking for was not found.
             </p>
             <p class="text-center">
-                <a href="{{ path('lobby') }}" class="btn btn-primary">
+                <a href="{{ path('home') }}" class="btn btn-primary">
                     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                          class="icon">
diff --git a/templates/include/pagination.html.twig b/templates/include/pagination.html.twig
index df4187061..84d856cf8 100644
--- a/templates/include/pagination.html.twig
+++ b/templates/include/pagination.html.twig
@@ -1,23 +1,43 @@
-{% set totalPages = (total / limit)|round(0, 'ceil') %}
-{% set previousPage = min(max(page - 1, 1), totalPages) %}
-{% set nextPage = max(min(page + 1, totalPages), 2) %}
-<div class="card">
-    <div class="card-body">
-        <ul class="pagination">
-            <li class="page-item page-prev{{ page <= 1 ? ' disabled' }}">
-                <a class="page-link"
-                   href="{{ path('profile', app.request.query.all|merge({'page': previousPage})) }}">
-                    <div class="page-item-subtitle">previous</div>
-                    <div class="page-item-title">{{ previousTitle }}</div>
+{# Shoutout to https://gist.github.com/maxpou/612359ed4af4cc5c4f06 for the original code. #}
+
+{% set totalPages = (totalItems / itemsPerPage)|round(0, 'ceil') %}
+{% set visiblePages = visiblePages|default(3) %}
+{% set queryParameter = queryParameter|default('page') %}
+
+<ul class="pagination pagination-outline">
+    {% for i in 1..totalPages %}
+        {% if 0 == (currentPage - visiblePages) - loop.index %}
+            <li class="page-item">
+                <a href="{{ (app.request.pathInfo ~ '?' ~ (app.request.query.all|merge({(queryParameter): 1})|url_encode))|e }}"
+                   class="page-link">
+                    1
                 </a>
             </li>
-            <li class="page-item page-next{{ page >= totalPages ? ' disabled' }}">
-                <a class="page-link"
-                   href="{{ path('profile', app.request.query.all|merge({'page': nextPage})) }}">
-                    <div class="page-item-subtitle">next</div>
-                    <div class="page-item-title">{{ nextTitle }}</div>
+            {% if 1 != loop.index %}
+                <li class="page-item">
+                    <span class="page-link disabled">&hellip;</span>
+                </li>
+            {% endif %}
+        {% elseif 0 == (currentPage + visiblePages) - loop.index  and (currentPage + visiblePages) < totalPages %}
+            <li class="page-item">
+                <span class="page-link disabled">&hellip;</span>
+            </li>
+        {% elseif 0 < (currentPage - visiblePages) - loop.index %}
+        {% elseif 0 > (currentPage + visiblePages) - loop.index %}
+        {% else %}
+            <li class="page-item{{ currentPage == loop.index ? ' active' }}">
+                <a href="{{ (app.request.pathInfo ~ '?' ~ (app.request.query.all|merge({(queryParameter): loop.index})|url_encode))|e }}"
+                   class="page-link">
+                    {{ loop.index }}
                 </a>
             </li>
-        </ul>
-    </div>
-</div>
+        {% endif %}
+    {% endfor %}
+    {% if currentPage != totalPages and (currentPage + visiblePages) < totalPages %}
+        <li class="page-item">
+            <a href="{{ (app.request.pathInfo ~ '?' ~ (app.request.query.all|merge({(queryParameter): totalPages})|url_encode))|e }}"
+               class="page-link">{{ totalPages }}
+            </a>
+        </li>
+    {% endif %}
+</ul>
diff --git a/templates/layout/center-tight.html.twig b/templates/layout/center-tight.html.twig
index afe3c7599..dde51c190 100644
--- a/templates/layout/center-tight.html.twig
+++ b/templates/layout/center-tight.html.twig
@@ -5,7 +5,7 @@
     <div class="page page-center" data-page-content>
         <div class="container container-tight">
             <p class="text-center fw-medium my-5">
-                <a href="{{ path('lobby') }}" class="link-secondary navbar-brand-autodark text-decoration-none">
+                <a href="{{ path('home') }}" class="link-secondary navbar-brand-autodark text-decoration-none">
                     <img src="{{ asset('img/logo.png') }}"
                          alt="Gaming Platform"
                          width="32"
diff --git a/templates/layout/condensed.html.twig b/templates/layout/condensed.html.twig
index 289e54f37..341aa3f71 100644
--- a/templates/layout/condensed.html.twig
+++ b/templates/layout/condensed.html.twig
@@ -2,99 +2,79 @@
 
 {% block body %}
     <div class="page" data-page-content>
-        <header class="navbar navbar-expand d-print-none sticky-top">
-            <div class="container-xxl">
-                <div class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-lg-1">
-                    <a href="{{ path('lobby') }}">
-                        <img src="{{ asset('img/logo.png') }}"
-                             alt="Gaming Platform"
-                             width="32"
-                             height="32"
-                             class="navbar-brand-image"/>
-                    </a>
-                </div>
-                <div class="navbar-nav flex-row order-last">
-                    <volume-control class="nav-item dropdown"></volume-control>
-                    <div class="nav-item">
-                        <event-source-status title-open="Ready to Play!"
-                                             title-closed="Connecting..."></event-source-status>
+        <div class="sticky-top">
+            <header class="navbar navbar-expand d-print-none">
+                <div class="container-xxl">
+                    <div class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-lg-1">
+                        <a href="{{ path('home') }}">
+                            <img src="{{ asset('img/logo.png') }}"
+                                 alt="Gaming Platform"
+                                 width="32"
+                                 height="32"
+                                 class="navbar-brand-image"/>
+                        </a>
                     </div>
-                    <div class="nav-item dropdown">
-                        <input type="checkbox" class="gp-dropdown-toggle" id="menu">
-                        {% if app.user ? app.user.isSignedUp %}
-                            <label for="menu" class="nav-link d-flex lh-1 p-0 px-2 cursor-pointer">
-                                <span class="avatar avatar-sm">{{ app.user.username|slice(0, 2) }}</span>
-                                <div class="d-none d-sm-block ps-2">
-                                    <div class="small text-secondary">Hi!</div>
-                                    <div class="mt-1">{{ app.user.username }}</div>
-                                </div>
+                    <div class="navbar-nav flex-row flex-grow-1">
+                        <div class="nav-item dropdown mx-2">
+                            <input type="checkbox" class="gp-dropdown-toggle" id="game-picker">
+                            <label for="game-picker" class="btn btn-outline-secondary dropdown-toggle">
+                                {% if app.request.attributes.get('_route') starts with 'connect_four_' %}
+                                    Connect Four
+                                {% else %}
+                                    Pick a Game
+                                {% endif %}
                             </label>
-                            <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow" data-bs-popper>
-                                <a href="{{ path('_logout_main') }}" class="dropdown-item">Logout</a>
+                            <div class="dropdown-menu dropdown-menu-start dropdown-menu-arrow" data-bs-popper>
+                                <a href="{{ path('connect_four_lobby') }}" class="dropdown-item">Connect Four</a>
                             </div>
-                        {% else %}
-                            <label for="menu" class="nav-link d-flex lh-1 p-0 px-2 cursor-pointer">
-                                <span class="avatar avatar-sm">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon avatar-icon" width="24"
-                                         height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
-                                         fill="none" stroke-linecap="round" stroke-linejoin="round">
-                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                                        <circle cx="12" cy="7" r="4"></circle>
-                                        <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></path>
-                                    </svg>
-                                </span>
-                                <div class="d-none d-sm-block ps-2">
-                                    <div class="small text-secondary">Hi!</div>
-                                    <div class="mt-1">Login</div>
+                        </div>
+                    </div>
+                    <div class="navbar-nav flex-row">
+                        <volume-control class="nav-item dropdown"></volume-control>
+                        <div class="nav-item">
+                            <event-source-status title-open="Ready to Play!"
+                                                 title-closed="Connecting..."></event-source-status>
+                        </div>
+                        <div class="nav-item dropdown">
+                            <input type="checkbox" class="gp-dropdown-toggle" id="menu">
+                            {% if app.user ? app.user.isSignedUp %}
+                                <label for="menu" class="nav-link d-flex lh-1 p-0 px-2 cursor-pointer">
+                                    <span class="avatar avatar-sm">{{ app.user.username|slice(0, 2) }}</span>
+                                    <div class="d-none d-sm-block ps-2">
+                                        <div class="small text-secondary">Hi!</div>
+                                        <div class="mt-1">{{ app.user.username }}</div>
+                                    </div>
+                                </label>
+                                <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow" data-bs-popper>
+                                    <a href="{{ path('_logout_main') }}" class="dropdown-item">Logout</a>
                                 </div>
-                            </label>
-                            <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow" data-bs-popper>
-                                <a href="{{ path('identity_signup') }}" class="dropdown-item">Sign up</a>
-                                <a href="{{ path('identity_login') }}" class="dropdown-item">Sign in</a>
-                            </div>
-                        {% endif %}
+                            {% else %}
+                                <label for="menu" class="nav-link d-flex lh-1 p-0 px-2 cursor-pointer">
+                                    <span class="avatar avatar-sm">
+                                        <svg xmlns="http://www.w3.org/2000/svg" class="icon avatar-icon" width="24"
+                                             height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
+                                             fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                                            <circle cx="12" cy="7" r="4"></circle>
+                                            <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></path>
+                                        </svg>
+                                    </span>
+                                    <div class="d-none d-sm-block ps-2">
+                                        <div class="small text-secondary">Hi!</div>
+                                        <div class="mt-1">Login</div>
+                                    </div>
+                                </label>
+                                <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow" data-bs-popper>
+                                    <a href="{{ path('identity_signup') }}" class="dropdown-item">Sign up</a>
+                                    <a href="{{ path('identity_login') }}" class="dropdown-item">Sign in</a>
+                                </div>
+                            {% endif %}
+                        </div>
                     </div>
                 </div>
-                <div class="d-flex flex-column flex-md-row flex-fill align-items-stretch align-items-md-center">
-                    <ul class="navbar-nav">
-                        <li class="nav-item{{ app.request.attributes.get('_route') == 'lobby' ? ' active' }}">
-                            <a class="nav-link" href="{{ path('lobby') }}">
-                                <span class="nav-link-icon d-none d-md-block">
-                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
-                                         stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
-                                         stroke-linejoin="round" class="icon">
-                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                                        <path d="M5 12l-2 0l9 -9l9 9l-2 0"></path>
-                                        <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"></path>
-                                        <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6"></path>
-                                    </svg>
-                                </span>
-                                <span class="nav-link-title">
-                                    Home
-                                </span>
-                            </a>
-                        </li>
-                        <li class="nav-item{{ app.request.attributes.get('_route') == 'profile' ? ' active' }}">
-                            <a class="nav-link" href="{{ path('profile') }}">
-                                <span class="nav-link-icon d-none d-md-block">
-                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
-                                         fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-                                         stroke-linejoin="round" class="icon">
-                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-                                        <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"/>
-                                        <path d="M12 10m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"/>
-                                        <path d="M6.168 18.849a4 4 0 0 1 3.832 -2.849h4a4 4 0 0 1 3.834 2.855"/>
-                                    </svg>
-                                </span>
-                                <span class="nav-link-title">
-                                    Profile
-                                </span>
-                            </a>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </header>
+            </header>
+            {% block context_nav %}{% endblock %}
+        </div>
         <div class="page-wrapper">
             <div class="page-body">
                 <div class="container-xxl">
diff --git a/templates/layout/partial/footer-links.html.twig b/templates/layout/partial/footer-links.html.twig
index bb8533cea..2e89fe38a 100644
--- a/templates/layout/partial/footer-links.html.twig
+++ b/templates/layout/partial/footer-links.html.twig
@@ -1,5 +1,5 @@
 <li class="list-inline-item">
-    <a href="{{ path('lobby') }}"
+    <a href="{{ path('home') }}"
        target="_blank"
        class="link-secondary"
        rel="noopener">
@@ -7,7 +7,7 @@
     </a>
 </li>
 <li class="list-inline-item">
-    <a href="{{ path('lobby') }}"
+    <a href="{{ path('home') }}"
        target="_blank"
        class="link-secondary"
        rel="noopener">
@@ -15,7 +15,7 @@
     </a>
 </li>
 <li class="list-inline-item">
-    <a href="{{ path('lobby') }}"
+    <a href="{{ path('home') }}"
        target="_blank"
        class="link-secondary"
        rel="noopener">

From c57db8f4607bf5112a70d2685e8680353fc375fd Mon Sep 17 00:00:00 2001
From: Markus Reinhold <markusreinhold@icloud.com>
Date: Fri, 2 Jan 2026 18:00:48 +0100
Subject: [PATCH 2/7] Align home cards

---
 .../Port/Adapter/Http/View/home-tile.html.twig           | 9 ++++++++-
 src/WebInterface/Presentation/Http/View/home.html.twig   | 4 ++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/ConnectFour/Port/Adapter/Http/View/home-tile.html.twig b/src/ConnectFour/Port/Adapter/Http/View/home-tile.html.twig
index 1397203c6..76af72a41 100644
--- a/src/ConnectFour/Port/Adapter/Http/View/home-tile.html.twig
+++ b/src/ConnectFour/Port/Adapter/Http/View/home-tile.html.twig
@@ -2,6 +2,13 @@
     <div class="card-body d-flex flex-column">
         <h3 class="card-title">Connect Four</h3>
         <div class="gp-cf-game gp-cf-game--disabled mb-3">
+            <div class="gp-cf-game__field"></div>
+            <div class="gp-cf-game__field"></div>
+            <div class="gp-cf-game__field"></div>
+            <div class="gp-cf-game__field"></div>
+            <div class="gp-cf-game__field"></div>
+            <div class="gp-cf-game__field"></div>
+            <div class="gp-cf-game__field"></div>
             <div class="gp-cf-game__field"></div>
             <div class="gp-cf-game__field"></div>
             <div class="gp-cf-game__field"><div class="gp-cf-token gp-cf-token--yellow"></div></div>
@@ -17,7 +24,7 @@
             <div class="gp-cf-game__field gp-cf-game__field--highlight"><div class="gp-cf-token"></div></div>
             <div class="gp-cf-game__field"></div>
         </div>
-        <p class="small">
+        <p class="flex-fill align-content-end small">
             Drop tokens, line them up, and outsmart your opponent.
         </p>
         <a href="{{ path('connect_four_lobby') }}" class="btn btn-outline-primary">Play</a>
diff --git a/src/WebInterface/Presentation/Http/View/home.html.twig b/src/WebInterface/Presentation/Http/View/home.html.twig
index 5b72ebc74..5acb1a236 100644
--- a/src/WebInterface/Presentation/Http/View/home.html.twig
+++ b/src/WebInterface/Presentation/Http/View/home.html.twig
@@ -5,8 +5,8 @@
 {% block content %}
     <div class="container container-narrow">
         {{ render_ssi(controller('identity.fragment-controller::homeHeaderAction')) }}
-        <div class="row row-cards">
-            <div class="col-md-4">
+        <div class="row row-deck row-cards">
+            <div class="col-md-4 col-sm-6">
                 {{ render_ssi(controller('connect-four.fragment-controller::homeTileAction')) }}
             </div>
         </div>

From 9284596959fafc3f47fa52cbe9b6ac79bb28b29d Mon Sep 17 00:00:00 2001
From: Markus Reinhold <markusreinhold@icloud.com>
Date: Fri, 2 Jan 2026 18:09:30 +0100
Subject: [PATCH 3/7] Fix paths for acceptance tests

---
 config/connect-four/routing.yml |  2 +-
 tests/acceptance/GameCest.php   | 14 +++++++-------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/config/connect-four/routing.yml b/config/connect-four/routing.yml
index d0fba0e6c..1a334f6d2 100644
--- a/config/connect-four/routing.yml
+++ b/config/connect-four/routing.yml
@@ -1,5 +1,5 @@
 connect_four_lobby:
-    path: /connect-four/lobby
+    path: /connect-four
     methods: [GET]
     controller: connect-four.page-controller::lobbyAction
 
diff --git a/tests/acceptance/GameCest.php b/tests/acceptance/GameCest.php
index 099942b73..b32caa679 100644
--- a/tests/acceptance/GameCest.php
+++ b/tests/acceptance/GameCest.php
@@ -12,7 +12,7 @@ public function iCanOpenAGameAndAbortIt(AcceptanceTester $I): void
         $this->prepareOpenGameScenario($I);
 
         $I->submitForm('[data-abort-form]', []);
-        $I->retrySeeInCurrentUrl('/');
+        $I->retrySeeInCurrentUrl('/connect-four');
     }
 
     public function iCanAbortAGameWithAJoinedFriend(AcceptanceTester $I): void
@@ -47,13 +47,13 @@ static function (AcceptanceTester $I): void {
 
     private function prepareOpenGameScenario(AcceptanceTester $I): string
     {
-        $I->amOnPage('/');
+        $I->amOnPage('/connect-four');
         $I->click('label[for="open-game-dropdown"]');
         $I->waitForElementVisible('[data-open-game-button]');
         $I->click('[data-open-game-button]');
 
-        $I->retrySeeCurrentUrlMatches('#^/challenge/(.*)$#');
-        preg_match('#^/challenge/(.*)$#', $I->grabFromCurrentUrl(), $matches);
+        $I->retrySeeCurrentUrlMatches('#^/connect-four/challenge/(.*)$#');
+        preg_match('#^/connect-four/challenge/(.*)$#', $I->grabFromCurrentUrl(), $matches);
 
         return $matches[1];
     }
@@ -64,16 +64,16 @@ private function prepareRunningGameScenario(AcceptanceTester $I, Friend $friend)
 
         $friend->does(
             static function (AcceptanceTester $I) use ($gameId): void {
-                $I->amOnPage('/');
+                $I->amOnPage('/connect-four');
                 $I->waitForElement('[data-game-id="' . $gameId . '"]');
                 $I->click('[data-game-id="' . $gameId . '"]');
                 $I->retry(10);
-                $I->retrySeeCurrentUrlEquals('/game/' . $gameId);
+                $I->retrySeeCurrentUrlEquals('/connect-four/game/' . $gameId);
             }
         );
 
         $I->retry(10);
-        $I->retrySeeCurrentUrlEquals('/game/' . $gameId);
+        $I->retrySeeCurrentUrlEquals('/connect-four/game/' . $gameId);
 
         return $gameId;
     }

From afef24f6c19c376e356dd8892f185d7445e4ed70 Mon Sep 17 00:00:00 2001
From: Markus Reinhold <markusreinhold@icloud.com>
Date: Fri, 2 Jan 2026 18:15:23 +0100
Subject: [PATCH 4/7] Hide pagination if there's nothing to paginate

---
 templates/include/pagination.html.twig | 60 +++++++++++++-------------
 1 file changed, 31 insertions(+), 29 deletions(-)

diff --git a/templates/include/pagination.html.twig b/templates/include/pagination.html.twig
index 84d856cf8..7a0e964b9 100644
--- a/templates/include/pagination.html.twig
+++ b/templates/include/pagination.html.twig
@@ -4,40 +4,42 @@
 {% set visiblePages = visiblePages|default(3) %}
 {% set queryParameter = queryParameter|default('page') %}
 
-<ul class="pagination pagination-outline">
-    {% for i in 1..totalPages %}
-        {% if 0 == (currentPage - visiblePages) - loop.index %}
-            <li class="page-item">
-                <a href="{{ (app.request.pathInfo ~ '?' ~ (app.request.query.all|merge({(queryParameter): 1})|url_encode))|e }}"
-                   class="page-link">
-                    1
-                </a>
-            </li>
-            {% if 1 != loop.index %}
+{% if totalPages > 1 %}
+    <ul class="pagination pagination-outline">
+        {% for i in 1..totalPages %}
+            {% if 0 == (currentPage - visiblePages) - loop.index %}
+                <li class="page-item">
+                    <a href="{{ (app.request.pathInfo ~ '?' ~ (app.request.query.all|merge({(queryParameter): 1})|url_encode))|e }}"
+                       class="page-link">
+                        1
+                    </a>
+                </li>
+                {% if 1 != loop.index %}
+                    <li class="page-item">
+                        <span class="page-link disabled">&hellip;</span>
+                    </li>
+                {% endif %}
+            {% elseif 0 == (currentPage + visiblePages) - loop.index  and (currentPage + visiblePages) < totalPages %}
                 <li class="page-item">
                     <span class="page-link disabled">&hellip;</span>
                 </li>
+            {% elseif 0 < (currentPage - visiblePages) - loop.index %}
+            {% elseif 0 > (currentPage + visiblePages) - loop.index %}
+            {% else %}
+                <li class="page-item{{ currentPage == loop.index ? ' active' }}">
+                    <a href="{{ (app.request.pathInfo ~ '?' ~ (app.request.query.all|merge({(queryParameter): loop.index})|url_encode))|e }}"
+                       class="page-link">
+                        {{ loop.index }}
+                    </a>
+                </li>
             {% endif %}
-        {% elseif 0 == (currentPage + visiblePages) - loop.index  and (currentPage + visiblePages) < totalPages %}
+        {% endfor %}
+        {% if currentPage != totalPages and (currentPage + visiblePages) < totalPages %}
             <li class="page-item">
-                <span class="page-link disabled">&hellip;</span>
-            </li>
-        {% elseif 0 < (currentPage - visiblePages) - loop.index %}
-        {% elseif 0 > (currentPage + visiblePages) - loop.index %}
-        {% else %}
-            <li class="page-item{{ currentPage == loop.index ? ' active' }}">
-                <a href="{{ (app.request.pathInfo ~ '?' ~ (app.request.query.all|merge({(queryParameter): loop.index})|url_encode))|e }}"
-                   class="page-link">
-                    {{ loop.index }}
+                <a href="{{ (app.request.pathInfo ~ '?' ~ (app.request.query.all|merge({(queryParameter): totalPages})|url_encode))|e }}"
+                   class="page-link">{{ totalPages }}
                 </a>
             </li>
         {% endif %}
-    {% endfor %}
-    {% if currentPage != totalPages and (currentPage + visiblePages) < totalPages %}
-        <li class="page-item">
-            <a href="{{ (app.request.pathInfo ~ '?' ~ (app.request.query.all|merge({(queryParameter): totalPages})|url_encode))|e }}"
-               class="page-link">{{ totalPages }}
-            </a>
-        </li>
-    {% endif %}
-</ul>
+    </ul>
+{% endif %}

From 611d125f3157afd9fb43eb476c15b32dfdc72f54 Mon Sep 17 00:00:00 2001
From: Markus Reinhold <markusreinhold@icloud.com>
Date: Fri, 2 Jan 2026 18:47:09 +0100
Subject: [PATCH 5/7] Fix paths for load test scenarios

---
 deploy/load-test/scenario/play-connect-four.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/deploy/load-test/scenario/play-connect-four.js b/deploy/load-test/scenario/play-connect-four.js
index 3c11caad8..d841efb7d 100644
--- a/deploy/load-test/scenario/play-connect-four.js
+++ b/deploy/load-test/scenario/play-connect-four.js
@@ -37,13 +37,13 @@ export default function () {
 }
 
 function open(jar) {
-    let url = `${baseUrl}/api/connect-four/games/open`;
+    let url = `${baseUrl}/connect-four/games/open`;
     let response = http.post(
         url,
         {'open[size]': '7x6', 'open[variant]': 'standard', 'open[timer]': 'game:60000:0', 'open[color]': '1'},
         {jar, headers, redirects: 0}
     );
-    return response.headers['Location'].match(/\/challenge\/(.*)$/)[1];
+    return response.headers['Location'].match(/\/connect-four\/challenge\/(.*)$/)[1];
 }
 
 function join(jar, gameId) {

From 136d81d7e3714dfe84ab7210f064e7c12b323d4e Mon Sep 17 00:00:00 2001
From: Markus Reinhold <markusreinhold@icloud.com>
Date: Fri, 2 Jan 2026 23:11:11 +0100
Subject: [PATCH 6/7] Preview full board

---
 .../Port/Adapter/Http/View/home-tile.html.twig     | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/ConnectFour/Port/Adapter/Http/View/home-tile.html.twig b/src/ConnectFour/Port/Adapter/Http/View/home-tile.html.twig
index 76af72a41..5c0273223 100644
--- a/src/ConnectFour/Port/Adapter/Http/View/home-tile.html.twig
+++ b/src/ConnectFour/Port/Adapter/Http/View/home-tile.html.twig
@@ -1,14 +1,10 @@
-<div class="card">
+<div class="card gp-cf-game-list">
     <div class="card-body d-flex flex-column">
         <h3 class="card-title">Connect Four</h3>
-        <div class="gp-cf-game gp-cf-game--disabled mb-3">
-            <div class="gp-cf-game__field"></div>
-            <div class="gp-cf-game__field"></div>
-            <div class="gp-cf-game__field"></div>
-            <div class="gp-cf-game__field"></div>
-            <div class="gp-cf-game__field"></div>
-            <div class="gp-cf-game__field"></div>
-            <div class="gp-cf-game__field"></div>
+        <div class="gp-cf-game gp-cf-game--disabled mb-3 w-66 align-self-center">
+            {% for i in 1..(7 * 4) %}
+                <div class="gp-cf-game__field"></div>
+            {% endfor %}
             <div class="gp-cf-game__field"></div>
             <div class="gp-cf-game__field"></div>
             <div class="gp-cf-game__field"><div class="gp-cf-token gp-cf-token--yellow"></div></div>

From f5a06072d9152655a37a43efdf26dc2b25d1c7b2 Mon Sep 17 00:00:00 2001
From: Markus Reinhold <markusreinhold@icloud.com>
Date: Wed, 7 Jan 2026 21:59:37 +0100
Subject: [PATCH 7/7] Run animation when hovering on home tile

---
 assets/js/ConnectFour/AnimatedGame.js         | 79 +++++++++++++++++++
 config/connect-four/importmap.php             |  1 +
 .../Adapter/Http/View/home-tile.html.twig     | 40 +++++-----
 3 files changed, 100 insertions(+), 20 deletions(-)
 create mode 100644 assets/js/ConnectFour/AnimatedGame.js

diff --git a/assets/js/ConnectFour/AnimatedGame.js b/assets/js/ConnectFour/AnimatedGame.js
new file mode 100644
index 000000000..65b34695c
--- /dev/null
+++ b/assets/js/ConnectFour/AnimatedGame.js
@@ -0,0 +1,79 @@
+import {html} from 'uhtml/node.js'
+
+customElements.define('connect-four-animated-game', class extends HTMLElement {
+    #plainElement; #moveElements; #abortController;
+
+    connectedCallback() {
+        this.#plainElement = html`<div class="gp-cf-game__field"></div>`;
+        this.#moveElements = Array.from(this.querySelectorAll('[data-move]')).sort((a, b) => {
+            return parseInt(a.dataset.move) - parseInt(b.dataset.move);
+        });
+        this.#abortController = new AbortController();
+
+        if (typeof AbortSignal?.timeout !== 'function' || typeof AbortSignal?.any !== 'function') {
+            return;
+        }
+
+        this.addEventListener('mouseenter', this.#onMouseEnter);
+        this.addEventListener('mouseleave', this.#onMouseLeave);
+    }
+
+    disconnectedCallback() {
+        this.#abortController.abort();
+    }
+
+    #onMouseEnter = () => {
+        this.#abortController = new AbortController();
+        this.#runAnimation();
+    }
+
+    #onMouseLeave = () => {
+        this.#abortController.abort();
+        this.#showFinalState();
+    }
+
+    #runAnimation = async () => {
+        this.#clear();
+
+        for (const [i, moveElement] of this.#moveElements.entries()) {
+            this.#moveElements.forEach(e => {
+                e.classList.remove('gp-cf-game__field--highlight', 'gp-cf-game__field--current')
+            });
+            moveElement.classList.add('gp-cf-game__field--highlight', 'gp-cf-game__field--current');
+            this.querySelector('[data-move="' + moveElement.dataset.move + '"]').replaceWith(moveElement);
+
+            const isLastMove = i === this.#moveElements.length - 1;
+            isLastMove && this.#showFinalState();
+
+            try {
+                await new Promise((resolve, reject) => {
+                    AbortSignal.any([this.#abortController.signal, AbortSignal.timeout(isLastMove ? 1500 : 350)])
+                        .addEventListener('abort', reject);
+                });
+            } catch {
+                if (this.#abortController.signal.aborted) return;
+            }
+        }
+
+        this.#runAnimation();
+    }
+
+    #clear() {
+        this.#moveElements.forEach(e => {
+            e.classList.remove('gp-cf-game__field--highlight', 'gp-cf-game__field--current');
+            const clone = this.#plainElement.cloneNode();
+            clone.dataset.move = e.dataset.move;
+            clone.dataset.win = e.dataset.win;
+            this.querySelector('[data-move="' + e.dataset.move + '"]').replaceWith(clone);
+        });
+    }
+
+    #showFinalState() {
+        this.#moveElements.forEach((e, k) => {
+            e.classList.remove('gp-cf-game__field--highlight', 'gp-cf-game__field--current');
+            k === this.#moveElements.length - 1 && e.classList.add('gp-cf-game__field--current');
+            e.hasAttribute('data-win') && e.classList.add('gp-cf-game__field--highlight');
+            this.querySelector('[data-move="' + e.dataset.move + '"]').replaceWith(e);
+        });
+    }
+});
diff --git a/config/connect-four/importmap.php b/config/connect-four/importmap.php
index d10eb0573..eddaac68d 100644
--- a/config/connect-four/importmap.php
+++ b/config/connect-four/importmap.php
@@ -8,6 +8,7 @@
     'connect-four-running-games' => ['path' => 'js/ConnectFour/RunningGames.js'],
     'connect-four-game-list' => ['path' => 'js/ConnectFour/GameList.js'],
     'connect-four-game' => ['path' => 'js/ConnectFour/Game.js'],
+    'connect-four-animated-game' => ['path' => 'js/ConnectFour/AnimatedGame.js'],
     'connect-four-player-status' => ['path' => 'js/ConnectFour/PlayerStatus.js'],
     'connect-four-player-username' => ['path' => 'js/ConnectFour/PlayerUsername.js'],
     'connect-four-timer' => ['path' => 'js/ConnectFour/Timer.js'],
diff --git a/src/ConnectFour/Port/Adapter/Http/View/home-tile.html.twig b/src/ConnectFour/Port/Adapter/Http/View/home-tile.html.twig
index 5c0273223..50d218033 100644
--- a/src/ConnectFour/Port/Adapter/Http/View/home-tile.html.twig
+++ b/src/ConnectFour/Port/Adapter/Http/View/home-tile.html.twig
@@ -1,28 +1,28 @@
-<div class="card gp-cf-game-list">
+<connect-four-animated-game class="card gp-cf-game-list">
     <div class="card-body d-flex flex-column">
         <h3 class="card-title">Connect Four</h3>
-        <div class="gp-cf-game gp-cf-game--disabled mb-3 w-66 align-self-center">
-            {% for i in 1..(7 * 4) %}
+            <div class="gp-cf-game gp-cf-game--disabled align-self-center w-66 mb-3">
+                {% for i in 1..(7 * 4) %}
+                    <div class="gp-cf-game__field"></div>
+                {% endfor %}
                 <div class="gp-cf-game__field"></div>
-            {% endfor %}
-            <div class="gp-cf-game__field"></div>
-            <div class="gp-cf-game__field"></div>
-            <div class="gp-cf-game__field"><div class="gp-cf-token gp-cf-token--yellow"></div></div>
-            <div class="gp-cf-game__field"><div class="gp-cf-token gp-cf-token--yellow"></div></div>
-            <div class="gp-cf-game__field"></div>
-            <div class="gp-cf-game__field"></div>
-            <div class="gp-cf-game__field"></div>
-            <div class="gp-cf-game__field"></div>
-            <div class="gp-cf-game__field"><div class="gp-cf-token gp-cf-token--yellow"></div></div>
-            <div class="gp-cf-game__field gp-cf-game__field--highlight"><div class="gp-cf-token"></div></div>
-            <div class="gp-cf-game__field gp-cf-game__field--highlight"><div class="gp-cf-token"></div></div>
-            <div class="gp-cf-game__field gp-cf-game__field--highlight"><div class="gp-cf-token"></div></div>
-            <div class="gp-cf-game__field gp-cf-game__field--highlight"><div class="gp-cf-token"></div></div>
-            <div class="gp-cf-game__field"></div>
-        </div>
+                <div class="gp-cf-game__field"></div>
+                <div class="gp-cf-game__field" data-move="2"><div class="gp-cf-token gp-cf-token--yellow"></div></div>
+                <div class="gp-cf-game__field" data-move="4"><div class="gp-cf-token gp-cf-token--yellow"></div></div>
+                <div class="gp-cf-game__field"></div>
+                <div class="gp-cf-game__field"></div>
+                <div class="gp-cf-game__field"></div>
+                <div class="gp-cf-game__field"></div>
+                <div class="gp-cf-game__field" data-move="6"><div class="gp-cf-token gp-cf-token--yellow"></div></div>
+                <div class="gp-cf-game__field gp-cf-game__field--highlight" data-move="1" data-win><div class="gp-cf-token"></div></div>
+                <div class="gp-cf-game__field gp-cf-game__field--highlight" data-move="3" data-win><div class="gp-cf-token"></div></div>
+                <div class="gp-cf-game__field gp-cf-game__field--highlight" data-move="5" data-win><div class="gp-cf-token"></div></div>
+                <div class="gp-cf-game__field gp-cf-game__field--highlight  gp-cf-game__field--current" data-move="7" data-win><div class="gp-cf-token"></div></div>
+                <div class="gp-cf-game__field"></div>
+            </div>
         <p class="flex-fill align-content-end small">
             Drop tokens, line them up, and outsmart your opponent.
         </p>
         <a href="{{ path('connect_four_lobby') }}" class="btn btn-outline-primary">Play</a>
     </div>
-</div>
+</connect-four-animated-game>