change example

pages/how_to_play.py

@@ -1,30 +1,13 @@
 import gradio as gr
 
-from support.game_settings import EXAMPLE_GAME_RULES_HTML
+from support.game_settings import EXAMPLE_GAME_RULES_HTML, EXAMPLE_GAME_BOARD_HTML
 
 
-# Game board description HTML
-GAME_BOARD_HTML = """
-<div style="display: flex; flex-direction: column; gap: 20px;">
-    <div><h3>🎯 Example Game Board</h3></div>
-    <div>
-        <p>Below is a sample Codenames board showing the <strong>Boss's view</strong> with color-coded words:</p>
-        <ul>
-            <li><strong style="color: #dc3545;">Red squares</strong> = Red team's words</li>
-            <li><strong style="color: #0d6efd;">Blue squares</strong> = Blue team's words</li>
-            <li><strong style="color: #6c757d;">Beige squares</strong> = Neutral words (innocent bystanders)</li>
-            <li><strong style="color: #212529;">Black square</strong> = Killer word (instant loss if touched!)</li>
-        </ul>
-        <p><strong>Remember:</strong> Only the <strong>Boss</strong> sees these colors. The <strong>Captain</strong> and <strong>Players</strong> only see the words!</p>
-    </div>
-</div>
-"""
-
 with gr.Blocks(fill_width=True) as demo:
     # Rules section with HTML
     with gr.Row(elem_id="row_description", equal_height=True):
         with gr.Column():
-            gr.HTML(GAME_BOARD_HTML, elem_id="game_board_description")
+            gr.HTML(EXAMPLE_GAME_BOARD_HTML, elem_id="game_board_description")
             gr.Image(
                 "assets/example.png",
                 label="Game Board (Boss's View)",

support/game_settings.py

@@ -64,13 +64,12 @@ EXAMPLE_GAME_RULES_HTML = """
         <h4>1️⃣ Boss Gives a Clue</h4>
         <p>The Red Boss (seeing the board) might say:</p>
         <blockquote style="background: #f8f9fa; padding: 10px; border-left: 4px solid #dc3545;">
-            <strong>"Atmosphere: 3"</strong>
+            <strong>"Atmosphere: 2"</strong>
         </blockquote>
-        <p>This clue suggests 3 red words are related to "atmosphere". Looking at the board, the Boss is thinking of:</p>
+        <p>This clue suggests 2 red words are related to "atmosphere". Looking at the board, the Boss is thinking of:</p>
         <ul>
             <li><strong>AIR</strong> (part of the atmosphere)</li>
             <li><strong>SPACE</strong> (beyond the atmosphere)</li>
-            <li><strong>SOUND</strong> (travels through air, part of the atmosphere)</li>
         </ul>
         <p><em>⚠️ Important: The clue must be ONE word and ONE number. The number indicates how many words relate to that clue.</em></p>
 
@@ -79,7 +78,6 @@ EXAMPLE_GAME_RULES_HTML = """
         <ul>
             <li><strong>Player 1:</strong> "AIR feels like the safest bet — it's literally the atmosphere."</li>
             <li><strong>Player 2:</strong> "SPACE could connect because it's outside the atmosphere."</li>
-            <li><strong>Captain:</strong> "SOUND could also fit — it travels through air. Let's prioritize those three."</li>
         </ul>
 
         <h4>3️⃣ Captain Makes Final Selection</h4>
@@ -87,7 +85,6 @@ EXAMPLE_GAME_RULES_HTML = """
         <ol>
             <li>AIR ✅ (Red - Correct!)</li>
             <li>SPACE ✅ (Red - Correct!)</li>
-            <li>SOUND ✅ (Red - Correct!)</li>
         </ol>
         <p>The team can stop after any correct guess or continue up to the number given (+1 bonus from previous turns if applicable).</p>
 
@@ -123,6 +120,23 @@ EXAMPLE_GAME_RULES_HTML = """
 </div>
 """
 
+# Game board description HTML
+EXAMPLE_GAME_BOARD_HTML = """
+<div style="display: flex; flex-direction: column; gap: 20px;">
+    <div><h3>🎯 Example Game Board</h3></div>
+    <div>
+        <p>Below is a sample Codenames board showing the <strong>Boss's view</strong> with color-coded words:</p>
+        <ul>
+            <li><strong style="color: #dc3545;">Red squares</strong> = Red team's words</li>
+            <li><strong style="color: #0d6efd;">Blue squares</strong> = Blue team's words</li>
+            <li><strong style="color: #6c757d;">Beige squares</strong> = Neutral words (innocent bystanders)</li>
+            <li><strong style="color: #212529;">Black square</strong> = Killer word (instant loss if touched!)</li>
+        </ul>
+        <p><strong>Remember:</strong> Only the <strong>Boss</strong> sees these colors. The <strong>Captain</strong> and <strong>Players</strong> only see the words!</p>
+    </div>
+</div>
+"""
+
 GAME_RULES_HTML = """
 <div class="rules-content">
     <div class="rules-carousel-container">