Trying to add waiting pages

templates/game/waiting.html.twig

@@ -0,0 +1,96 @@
+{% extends 'base.html.twig' %}
+
+{% block title %}Waiting for players - {{ session.game.name }}{% endblock %}
+
+{% block body %}
+<div class="container mt-5">
+    <div class="row justify-content-center">
+        <div class="col-md-8">
+            <div class="card shadow-sm">
+                <div class="card-header bg-primary text-white">
+                    <h3 class="card-title mb-0">Waiting for all players to be ready</h3>
+                </div>
+                <div class="card-body">
+                    <h4>{{ session.game.name }}</h4>
+                    <p>Welcome to the game! Please wait for all players to join and signal they are ready to start.</p>
+
+                    <div class="alert alert-info">
+                        <strong>Game Information:</strong>
+                        <ul class="mb-0">
+                            <li>Number of players: {{ session.game.numberOfPlayers }}</li>
+                            <li>Current players: {{ session.players|length }} / {{ session.game.numberOfPlayers }}</li>
+                        </ul>
+                    </div>
+
+                    <div class="mt-4">
+                        <h5>Players status:</h5>
+                        <ul class="list-group">
+                            {% for player in session.players %}
+                                <li class="list-group-item d-flex justify-content-between align-items-center">
+                                    {{ player.user.username }}
+                                    {% set playerReady = false %}
+                                    {% set settingName = 'ReadyAtForPlayer' ~ player.screen %}
+                                    {% for setting in session.settings %}
+                                        {% if setting.name.value == settingName and setting.player == player %}
+                                            {% set playerReady = true %}
+                                        {% endif %}
+                                    {% endfor %}
+
+                                    {% if playerReady %}
+                                        <span class="badge bg-success">Ready</span>
+                                    {% else %}
+                                        <span class="badge bg-secondary">Not ready</span>
+                                    {% endif %}
+                                </li>
+                            {% endfor %}
+                        </ul>
+                    </div>
+
+                    <hr>
+
+                    <form method="post" class="mt-4">
+                        <div class="form-check form-switch mb-3">
+                            <input class="form-check-input" type="checkbox" id="toggle_ready" name="toggle_ready" onchange="this.form.submit()" {{ isReady ? 'checked' : '' }}>
+                            <label class="form-check-label" for="toggle_ready">
+                                <strong>I am ready to start!</strong>
+                            </label>
+                        </div>
+                        <p class="text-muted small">
+                            Note: If all players are not ready within 1 minute of you checking this, your status will be reset automatically.
+                        </p>
+                    </form>
+
+                    <div class="mt-3">
+                        <a href="{{ path('game_dashboard') }}" class="btn btn-outline-secondary">Back to Dashboard</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div id="mercure-config"
+     data-mercure-public-url="{{ mercure_public_url|e('html_attr') }}"
+     data-topic="{{ (mercure_topic_base ~ '/game/hub-' ~ session.id)|e('html_attr') }}"
+     style="display:none">
+</div>
+
+<script>
+    const config = document.getElementById('mercure-config');
+    const publicUrl = config.dataset.mercurePublicUrl;
+    const topic = config.dataset.topic;
+
+    if (publicUrl && topic) {
+        const url = new URL(publicUrl);
+        url.searchParams.append('topic', topic);
+
+        const eventSource = new EventSource(url);
+        eventSource.onmessage = event => {
+            const data = JSON.parse(event.data);
+            if (data.type === 'all_ready' || data.type === 'player_ready') {
+                window.location.reload();
+            }
+        };
+    }
+</script>
+{% endblock %}