new how to play page

app.py

@@ -6,7 +6,7 @@ start_mcp_servers()
 from support.log_manager import logger
 from support.game_settings import custom_header
 from support.settings import SERVER_PORT
-from pages import home, play, stats
+from pages import home, play, stats, how_to_play
 from support.style.css import final_css
 from support.game_settings import JS
 
@@ -19,6 +19,9 @@ with gr.Blocks(fill_width=True, title="Agentic Codenames", css=final_css, js=JS)
         with gr.Tab("🏠 Home", id="home_id_tab", elem_classes="tab_btn"):
             home.demo.render()
 
+        with gr.Tab("❓ How to Play", id="how_to_play_id_tab", elem_classes="tab_btn"):
+            how_to_play.demo.render()
+
         with gr.Tab("🎮 Play", id="play_id_tab", elem_classes="tab_btn"):
             play.demo.render()
 
@@ -34,4 +37,4 @@ if __name__ == "__main__":
         server_port=SERVER_PORT,
         allowed_paths=["assets"],
         favicon_path='assets/favicon.ico'
-    )
+    )

pages/how_to_play.py

@@ -0,0 +1,39 @@
+import gradio as gr
+
+from support.game_settings import EXAMPLE_GAME_RULES_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.Image(
+                "assets/example.png",
+                label="Game Board (Boss's View)",
+                show_label=True,
+                height=450,
+                elem_id="example_game_board_img",
+            )
+        with gr.Column():
+            gr.HTML(EXAMPLE_GAME_RULES_HTML, elem_id="rules_content")
+
+if __name__ == "__main__":
+    demo.launch()

support/game_settings.py

@@ -42,6 +42,87 @@ APP_DESCRIPTION_HTML = """
 </div>
 """
 
+# Game rules HTML
+EXAMPLE_GAME_RULES_HTML = """
+<div style="display: flex; flex-direction: column; gap: 20px;">
+    <div>
+        <h3>👥 Team Roles</h3>
+        <p>Each team has three members with distinct responsibilities:</p>
+        <ul>
+            <li><strong>1 Boss</strong> 🎯: The only player who can see the color-coded board. Provides clues to guide the team.</li>
+            <li><strong>1 Captain</strong> 🧭: Coordinates team reasoning, synthesizes suggestions, and makes final word selections.</li>
+            <li><strong>2 Players</strong> 💭: Collaborate with the Captain, propose interpretations and associations.</li>
+        </ul>
+
+        <h3>📋 What Each Role Sees</h3>
+        <ul>
+            <li><strong>Boss:</strong> Sees the full color-coded board (like the image on the left) showing which words belong to their team, neutral words, and the killer word.</li>
+            <li><strong>Captain & Players:</strong> Only see the words <em>without colors</em> — they must guess based on the Boss's clues!</li>
+        </ul>
+
+        <h3>🎮 How a Turn Works</h3>
+        <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>
+        </blockquote>
+        <p>This clue suggests 3 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>
+
+        <h4>2️⃣ Team Discussion</h4>
+        <p>The Captain and Players discuss without seeing the colors:</p>
+        <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>
+        <p>The Captain decides which words to touch, in order:</p>
+        <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>
+
+        <h3>⚠️ Mistakes to Avoid</h3>
+        <ul>
+            <li>If the team guesses <strong>STAFF</strong> (black - killer word), the game <strong>immediately ends</strong> and they <strong>lose</strong>!</li>
+            <li>If they guess <strong>WALL</strong> (blue - opponent's word), their turn ends and the Blue team gets that word.</li>
+            <li>If they guess <strong>SATURN</strong> (beige - neutral), their turn simply ends.</li>
+        </ul>
+
+        <h3>🏆 Winning the Game</h3>
+        <p>The game ends when:</p>
+        <ul>
+            <li>✅ <strong>A team finds all their colored words</strong> → That team wins!</li>
+            <li>❌ <strong>A team touches the killer word (STAFF)</strong> → That team loses immediately!</li>
+        </ul>
+
+        <h3>💡 Strategy Tips</h3>
+        <p><strong>For the Boss:</strong></p>
+        <ul>
+            <li>Try to link multiple words with creative clues</li>
+            <li>Avoid clues that might lead to the killer word or opponent's words</li>
+            <li>Think about word associations your team might make</li>
+        </ul>
+        <p><strong>For Captain & Players:</strong></p>
+        <ul>
+            <li>Discuss all possible interpretations</li>
+            <li>Consider which words are risky</li>
+            <li>Don't be afraid to stop early to avoid the killer word</li>
+            <li>The Captain has final say, but should listen to all suggestions</li>
+        </ul>
+    </div>
+</div>
+"""
+
 GAME_RULES_HTML = """
 <div class="rules-content">
     <div class="rules-carousel-container">
@@ -531,6 +612,7 @@ custom_header = """
     <div class="navbar-title">🕵️ Agentic Codenames Arena</div>
     <div class="navbar-links">
         <a href="#" class="nav-link active" data-tab-id="home_id">Home</a>
+        <a href="#" class="nav-link" data-tab-id="how_to_play_id">How to play</a>
         <a href="#" class="nav-link" data-tab-id="play_id">Play</a>
         <a href="#" class="nav-link" data-tab-id="stats_id">Stats</a>
     </div>

support/style/css.py

@@ -117,12 +117,17 @@ nav.tabs button.selected:hover {
 }
 
 [data-tab-id="home_id_tab"],
+[data-tab-id="how_to_play_id_tab"],
 [data-tab-id="play_id_tab"],
 [data-tab-id="stats_id_tab"] {
     display: none !important;
 }
 
 
+#game_board_description{
+    flex-grow: 0 !important;
+}
+
 
 @media (max-width: 768px) {
     nav.tabs {