Update app.py

app.py

@@ -236,31 +236,80 @@ class ScottPilgrimGame:
 # Create a single game instance to be managed by gr.State
 game_instance = ScottPilgrimGame()
 
+# New helper to format the message log into color-coded HTML
+def _format_log_html(game_state):
+    """Returns the message log as HTML with basic color-coding."""
+    # Early return for fresh page load
+    if not game_state.message_log:
+        return ""
+
+    player_name = game_state.player.name if game_state.player else ""
+    enemy_name = game_state.current_enemy.name if game_state.current_enemy else ""
+
+    html_lines = []
+    for msg in game_state.message_log:
+        color = "#000000"  # default black
+        if player_name and (msg.startswith(player_name) or msg.startswith("You")):
+            color = "#2ECC71"  # green for player actions
+        elif enemy_name and msg.startswith(enemy_name):
+            color = "#E74C3C"  # red for enemy actions
+        elif msg.startswith("---") or "Congratulations" in msg or "GAME OVER" in msg:
+            color = "#F1C40F"  # yellow/gold for system or banner messages
+        html_lines.append(f"<div style='margin-bottom:4px; color:{color}; white-space:pre-wrap;'>{msg}</div>")
+
+    return "".join(html_lines)
+
+# New helper to build a richer status block with progress bars for HP/XP
+def _format_status_html(game_state):
+    if not game_state.player:
+        return ""
+
+    player = game_state.player
+    status_html = [
+        f"<h4 style='margin:4px 0'>{player.name}  (Lvl {player.level})</h4>",
+        f"HP: <progress value='{player.current_hp}' max='{player.max_hp}' style='width:160px;height:14px;'></progress>  {player.current_hp}/{player.max_hp}<br>",
+        f"XP: <progress value='{player.xp}' max='{player.level * 50}' style='width:160px;height:14px;'></progress>  {player.xp}/{player.level * 50}<br><br>"
+    ]
+
+    if game_state.current_enemy:
+        enemy = game_state.current_enemy
+        status_html.extend([
+            f"<h4 style='margin:4px 0'>{enemy.name}</h4>",
+            f"HP: <progress value='{enemy.current_hp}' max='{enemy.max_hp}' style='width:160px;height:14px;'></progress>  {enemy.current_hp}/{enemy.max_hp}"
+        ])
+
+    return "".join(status_html)
+
+# Updated update_ui to output HTML instead of plain text
 def update_ui(game_state):
     """
     Updates all Gradio UI components based on the current game state.
-    This function acts as a central controller for the UI's appearance.
-    It now returns the game_state as well, to match the number of output components.
+    Returns log_html, status_html, and component visibility updates.
     """
     phase = game_state.current_game_phase
-    log = "\n".join(game_state.message_log)
-    status = game_state.get_status_text()
-    
+
+    # Special welcome / end-screen messages
+    if phase == "start" and not game_state.message_log:
+        game_state.message_log = [
+            "Welcome to Scott Pilgrim vs. The World: The RPG!",
+            "Choose your hero!"
+        ]
+    elif phase == "game_over":
+        game_state.message_log.append("\nGAME OVER! Better luck next time!")
+    elif phase == "win":
+        game_state.message_log.append("\nYOU WON! Thanks for playing!")
+
+    log_html = _format_log_html(game_state)
+    status_html = _format_status_html(game_state)
+
     # Configure visibility for each game phase
     char_buttons_visible = (phase == "start")
     action_buttons_visible = (phase == "combat")
     play_again_visible = (phase in ["game_over", "win"])
 
-    if phase == "start":
-        log = "Welcome to Scott Pilgrim vs. The World: The RPG!\nChoose your hero!"
-    elif phase == "game_over":
-        log += "\n\nGAME OVER! Better luck next time!"
-    elif phase == "win":
-        log += "\n\nYOU WON! Thanks for playing!"
-
     return (
-        log,
-        status,
+        log_html,
+        status_html,
         gr.update(visible=char_buttons_visible),
         gr.update(visible=action_buttons_visible),
         gr.update(visible=play_again_visible),
@@ -297,8 +346,8 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
     game_state = gr.State(game_instance)
 
     # UI Components
-    game_output = gr.Textbox(label="Game Log", lines=12, interactive=False)
-    status_output = gr.Textbox(label="Current Status", lines=2, interactive=False)
+    game_output = gr.HTML(label="Game Log")
+    status_output = gr.HTML(label="Current Status")
 
     with gr.Row(visible=True) as character_selection_buttons:
         scott_btn = gr.Button("Play as Scott Pilgrim")