pages/how_to_play.py

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()