Added mercure to update when everyone is ready

templates/game/waiting.html.twig

@@ -14,6 +14,15 @@
                     <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="game-info">
+                        Please keep the following things in mind:
+                        <ul>
+                            <li>This game is best played in full screen mode. For windows, press F11. For Mac, press Cmd+Ctrl+F.</li>
+                            <li>There is no need to reload the page. There is even a chance this could break the game.</li>
+                            <li>If your internet connection is lost, you can get back in the game after internet has been fixed.</li>
+                        </ul>
+                    </div>
+
                     <div class="alert alert-info">
                         <strong>Game Information:</strong>
                         <ul class="mb-0">
@@ -72,6 +81,7 @@
 <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') }}"
+     data-ready-at="{{ readyAt|e('html_attr') }}"
      style="display:none">
 </div>
 
@@ -79,6 +89,7 @@
     const config = document.getElementById('mercure-config');
     const publicUrl = config.dataset.mercurePublicUrl;
     const topic = config.dataset.topic;
+    const readyAt = config.dataset.readyAt;
 
     if (publicUrl && topic) {
         const url = new URL(publicUrl);
@@ -92,5 +103,23 @@
             }
         };
     }
+
+    // Client-side timeout for ready status
+    if (readyAt) {
+        const timeoutMs = 61000; // 61 seconds (slightly more than server-side 60s)
+        const now = Date.now();
+        const readyAtMs = readyAt * 1000;
+        const timeElapsed = now - readyAtMs;
+        const timeLeft = timeoutMs - timeElapsed;
+
+        if (timeLeft > 0) {
+            setTimeout(() => {
+                window.location.reload();
+            }, timeLeft);
+        } else {
+            // Already timed out, reload to sync with server
+            window.location.reload();
+        }
+    }
 </script>
 {% endblock %}