Deploy Myco from CI

ui/gradio_app.py

@@ -11,98 +11,333 @@ from game.engine import (
 from game.state import welcome_history
 from models.mushroom import Mushroom
 from ui.renderers import (
-    dex_markdown,
+    dex_markdown, forest_scene, game_intro_markdown,
     game_status_markdown, hero_markdown, home_forest_markdown,
     mushroom_card, play_hook_markdown, progress_markdown,
     world_map_markdown,
 )
 
 EMPTY_COLLECTION = None
-START_POSITION   = (1, 1)
+START_POSITION = (1, 1)
 
 HOME_MARKDOWN = """
 ## Welcome to the Myco forest
+
 Myco is a tiny AI-powered forest game. Open **🎮 Play** to search for mushrooms,
 visit **📖 MycoDex** to review your collection, and use **🧭 Guide** for help.
+
+**Goal:** solve one mystery — why does Myco remember a forest that vanished before it was born?
+Follow clues until the Impossible Mushroom blooms inside the MycoDex.
 """
 
 GUIDE_MARKDOWN = """
 ## How to play
-1. Use **WASD** or Arrows to move.
-2. **Q**=Study, **E**=Pick, **C**=Collect.
+
+1. Go to **🎮 Play** and click **🎮 Search Clearing** to discover a mushroom.
+2. **Myco (the AI) reacts** — read what it senses about the mushroom.
+3. Choose your action:
+   - **🔍 Study** — Myco examines the mushroom and updates its magic field.
+   - **🍄 Pick** — grab it as a game item. Poisonous picks = Game Over!
+   - **📖 Collect** — add it to the MycoDex for safe keeping and score.
+   - **🌌 Follow Whisper** — reveal mystery fragments. Risky on unstudied mushrooms!
+   - **🍽️ Eat?** — Myco will stop you every time (for good reason).
+4. **Ask Myco** anything in the chat — it knows the forest, the mystery, and the mushrooms.
+5. Use **⬆️⬇️⬅️➡️** to move through the 3×3 forest grid.
+
+**Scoring:** Common = 10 spores · Rare = 35 · Legendary = 100 · Poison = −25 + Game Over
+
+**Poisonous mushrooms:** Ghost Gill · Pepper Pixie · Ruby Knuckle · Clockwork Chanterelle
 """
 
+
 def mushroom_card_from_state(current):
-    if current is None: return mushroom_card(None)
-    return mushroom_card(Mushroom.from_dict(current), current.get("clue"), current.get("secret"), current)
-
-def forest_scene(current, collection, position):
-    px, py = _safe_pos(position)
-    html = f"""
-    <div style="background: #111122; padding: 20px; border-radius: 12px; border: 2px solid #2e2e4f; text-align: center;">
-        <div style="color: #8a8aaf; font-weight: bold; margin-bottom: 12px; font-family: monospace;">🌲 MYCO FOREST VIEWPORT 🌲</div>
-        <div style="display: grid; grid-template-columns: repeat(3, 85px); gap: 10px; justify-content: center;">
-            {''.join([f'<div style="width: 85px; height: 85px; background: #1b263b; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 32px; {"border: 3px solid #00b4d8;" if (i%3 == px and i//3 == py) else ""}">{ "🧙‍♂️" if (i%3 == px and i//3 == py) else "🌲" }</div>' for i in range(9)])}
-        </div>
-    </div>
-    """
-    return html
+    if current is None:
+        return mushroom_card(None)
+    return mushroom_card(
+        Mushroom.from_dict(current),
+        current.get("clue"),
+        current.get("secret"),
+        current,
+    )
+
+
+def search_forest(collection, position):
+    mushroom, current, history = discover_mushroom(collection)
+    pos = _safe_pos(position)
+    return (
+        forest_scene(current, collection, pos),
+        game_status_markdown(current, collection, pos),
+        mushroom_card_from_state(current),
+        current,
+        history,
+        dex_markdown(collection),
+        progress_markdown(collection),
+    )
+
+
+def ask_companion(message, history, current, collection, position):
+    return myco_reply(message, history, current, collection, position)
+
+
+def collect_discovery(current, collection, history, position):
+    updated_coll, updated_hist = collect_current(current, collection, history)
+    pos = _safe_pos(position)
+    return (
+        updated_coll,
+        forest_scene(current, updated_coll, pos),
+        game_status_markdown(current, updated_coll, pos),
+        dex_markdown(updated_coll),
+        world_map_markdown(updated_coll),
+        updated_hist,
+        progress_markdown(updated_coll),
+    )
+
+
+def pick_discovery(current, collection, history, position):
+    updated_coll, updated_current, updated_hist = pick_current(current, collection, history)
+    pos = _safe_pos(position)
+    return (
+        updated_coll,
+        updated_current,
+        forest_scene(updated_current, updated_coll, pos),
+        game_status_markdown(updated_current, updated_coll, pos),
+        mushroom_card_from_state(updated_current),
+        dex_markdown(updated_coll),
+        world_map_markdown(updated_coll),
+        updated_hist,
+        progress_markdown(updated_coll),
+    )
+
+
+def follow_story_whisper(current, collection, history, position):
+    updated_current, updated_hist = follow_whisper(current, collection, history)
+    pos = _safe_pos(position)
+    return (
+        updated_current,
+        forest_scene(updated_current, collection, pos),
+        game_status_markdown(updated_current, collection, pos),
+        mushroom_card_from_state(updated_current),
+        updated_hist,
+    )
+
+
+def study_discovery(current, history, collection, position):
+    updated_current, updated_hist = study_current(current, history)
+    pos = _safe_pos(position)
+    return (
+        updated_current,
+        forest_scene(updated_current, collection, pos),
+        game_status_markdown(updated_current, collection, pos),
+        mushroom_card_from_state(updated_current),
+        updated_hist,
+    )
+
+
+def move_player(position, direction, current, collection):
+    x, y = _safe_pos(position)
+    if direction == "north": y -= 1
+    elif direction == "south": y += 1
+    elif direction == "west":  x -= 1
+    elif direction == "east":  x += 1
+    pos = _safe_pos((x, y))
+    return pos, forest_scene(current, collection, pos), game_status_markdown(current, collection, pos)
+
+
+def block_unsafe_eating(current, history):
+    return eat_current(current, history)
+
+
+def open_play_tab():
+    return gr.update(selected="play")
+
 
 def _safe_pos(position):
-    if position is None: return START_POSITION
+    if position is None:
+        return START_POSITION
     x, y = position
     return (max(0, min(2, int(x))), max(0, min(2, int(y))))
 
+
 def build_app():
     with gr.Blocks(title="Myco — AI Forest Game", theme=gr.themes.Soft()) as demo:
         gr.HTML("""
         <style>
         .gradio-container { background: #1a1a2e !important; }
-        * { transition: none !important; }
-        @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
-        .emoji-float { display: inline-block; animation: float 2s infinite ease-in-out; font-size: 3rem; margin: 0 10px; }
+        .gr-html, iframe, .html-container { 
+            transition: none !important; 
+            animation: none !important;
+        }
+        /* Prevent white flash on component updates */
+        * { 
+            transition: opacity 0.15s ease !important;
+        }
+        .pending, .generating {
+            opacity: 0.85 !important;
+            background: transparent !important;
+        }
+        /* Hide the white overlay Gradio adds during updates */
+        .progress-level, .progress-level-inner {
+            display: none !important;
+        }
         </style>
         """)
 
+        # ── State ──────────────────────────────────────────────────────────
         current_mushroom = gr.State(None)
-        collection       = gr.State([])
-        player_position  = gr.State(START_POSITION)
+        collection = gr.State([])
+        player_position = gr.State(START_POSITION)
 
+        # ── Hero ───────────────────────────────────────────────────────────
         gr.HTML(hero_markdown())
 
         with gr.Tabs(selected="home") as tabs:
+
+            # ── HOME ───────────────────────────────────────────────────────
             with gr.Tab("🏠 Home", id="home"):
                 gr.Markdown(HOME_MARKDOWN)
-                start_play_button = gr.Button("🍄 Enter the Forest", variant="primary")
-            
+                gr.HTML(home_forest_markdown())
+                start_play_button = gr.Button(
+                    "🍄 Enter the Forest", variant="primary", size="lg"
+                )
+                gr.Markdown(f"*{hf_companion_status()}*")
+
+            # ── PLAY ───────────────────────────────────────────────────────
             with gr.Tab("🎮 Play", id="play"):
-                # ANIMATED EMOJIS AT THE TOP
-                gr.HTML("""
-                <div style="text-align: center; padding: 20px;">
-                    <span class="emoji-float">🍄</span>
-                    <span class="emoji-float">✨</span>
-                    <span class="emoji-float">🌲</span>
-                </div>
-                """)
-                
+                gr.HTML(game_intro_markdown())
+
+                # Forest scene + controls
+                scene = gr.HTML(
+                    forest_scene(None, EMPTY_COLLECTION, START_POSITION),
+                    elem_id="forest-scene",
+                )
+
                 with gr.Row():
+                    with gr.Column(scale=1):
+                        search_button = gr.Button("🎮 Search Clearing", variant="primary", size="lg")
+                    with gr.Column(scale=1):
+                        gr.Markdown("**Move Myco**")
+                        with gr.Row():
+                            gr.HTML("<div></div>")
+                            north_button = gr.Button("⬆️", size="sm")
+                            gr.HTML("<div></div>")
+                        with gr.Row():
+                            west_button = gr.Button("⬅️", size="sm")
+                            pick_button = gr.Button("🍄 Pick", variant="primary", size="sm")
+                            east_button = gr.Button("➡️", size="sm")
+                        with gr.Row():
+                            gr.HTML("<div></div>")
+                            south_button = gr.Button("⬇️", size="sm")
+                            gr.HTML("<div></div>")
+
+                # Quest log
+                status = gr.Markdown(
+                    game_status_markdown(None, EMPTY_COLLECTION, START_POSITION)
+                )
+
+                # Discovery card + action buttons + chat
+                with gr.Row(equal_height=True):
                     with gr.Column(scale=2):
                         gr.Markdown("### 🍄 Current Discovery")
                         discovery = gr.Markdown(mushroom_card(None))
                         with gr.Row():
-                            study_btn = gr.Button("🔍 Study")
-                            collect_btn = gr.Button("📖 Collect")
+                            study_button = gr.Button("🔍 Study", variant="secondary")
+                            collect_button = gr.Button("📖 Collect", variant="secondary")
+                        with gr.Row():
+                            whisper_button = gr.Button("🌌 Follow Whisper", variant="secondary")
+                            eat_button = gr.Button("🍽️ Eat?", variant="stop")
+
                     with gr.Column(scale=3):
-                        chat = gr.Chatbot(label="Myco", height=300)
-                        prompt = gr.Textbox(placeholder="Ask Myco...")
+                        gr.Markdown("### 💬 Myco Chat")
+                        chat = gr.Chatbot(
+                            value=cast(Any, welcome_history()),
+                            label="Myco",
+                            height=400,
+                            show_label=False,
+                        )
+                        with gr.Row():
+                            prompt = gr.Textbox(
+                                placeholder="Ask Myco anything about the forest...",
+                                show_label=False,
+                                scale=4,
+                                lines=1,
+                            )
+                            ask_button = gr.Button("Ask 🍄", variant="primary", scale=1)
 
+            # ── MYCODEX ────────────────────────────────────────────────────
             with gr.Tab("📖 MycoDex"):
-                gr.Markdown("Your collected spores and mushrooms.")
+                with gr.Row():
+                    progress = gr.Markdown(progress_markdown(EMPTY_COLLECTION))
+                    dex = gr.Markdown(dex_markdown(EMPTY_COLLECTION))
+
+            # ── WORLD MAP ──────────────────────────────────────────────────
+            with gr.Tab("🗺️ World Map"):
+                world_map = gr.HTML(world_map_markdown(EMPTY_COLLECTION))
+
+            # ── GUIDE ──────────────────────────────────────────────────────
+            with gr.Tab("🧭 Guide"):
+                gr.Markdown(GUIDE_MARKDOWN)
+
+        # ── Event wiring ───────────────────────────────────────────────────
+        start_play_button.click(open_play_tab, outputs=[tabs])
+
+        search_button.click(
+            search_forest,
+            inputs=[collection, player_position],
+            outputs=[scene, status, discovery, current_mushroom, chat, dex, progress],
+            show_progress="hidden",
+        )
+
+        ask_button.click(
+            ask_companion,
+            inputs=[prompt, chat, current_mushroom, collection, player_position],
+            outputs=[prompt, chat],
+            show_progress="hidden",
+        )
+        prompt.submit(
+            ask_companion,
+            inputs=[prompt, chat, current_mushroom, collection, player_position],
+            outputs=[prompt, chat],
+            show_progress="hidden",
+        )
+
+        for direction, button in [
+            ("north", north_button), ("south", south_button),
+            ("west", west_button), ("east", east_button),
+        ]:
+            button.click(
+                move_player,
+                inputs=[player_position, gr.State(direction), current_mushroom, collection],
+                outputs=[player_position, scene, status],
+                show_progress="hidden",
+            )
+
+        study_button.click(
+            study_discovery,
+            inputs=[current_mushroom, chat, collection, player_position],
+            outputs=[current_mushroom, scene, status, discovery, chat],
+        )
+        collect_button.click(
+            collect_discovery,
+            inputs=[current_mushroom, collection, chat, player_position],
+            outputs=[collection, scene, status, dex, world_map, chat, progress],
+        )
+        pick_button.click(
+            pick_discovery,
+            inputs=[current_mushroom, collection, chat, player_position],
+            outputs=[collection, current_mushroom, scene, status, discovery, dex, world_map, chat, progress],
+            show_progress="hidden",
+        )
+        whisper_button.click(
+            follow_story_whisper,
+            inputs=[current_mushroom, collection, chat, player_position],
+            outputs=[current_mushroom, scene, status, discovery, chat],
+        )
+        eat_button.click(
+            block_unsafe_eating,
+            inputs=[current_mushroom, chat],
+            outputs=[chat],
+        )
 
-        start_play_button.click(lambda: gr.update(selected="play"), outputs=[tabs])
         demo.queue()
     return demo
-
-if __name__ == "__main__":
-    build_app().launch()