chars

app.py

@@ -142,10 +142,12 @@ class ScottPilgrimGame:
             self.player = ScottPilgrim()
             self.current_ex_list = list(self.scott_exes) # Use a copy of the list
             self.add_message("You chose to play as Scott Pilgrim! Get ready to face Ramona's Evil Exes!")
+            self.player_image_path = "characters/Scott_idle.webp"
         elif character_choice == "Play as Ramona Flowers":
             self.player = RamonaFlowers()
             self.current_ex_list = list(self.ramona_exes) # Use a copy of the list
             self.add_message("You chose to play as Ramona Flowers! It's time to deal with Scott's complicated past!")
+            self.player_image_path = "characters/Ramona_Angry.webp"
         else:
             self.add_message("Invalid character choice. Please select Scott or Ramona.")
             return
@@ -304,6 +306,10 @@ class ScottPilgrimGame:
         # Confirm purchase
         self.add_message(f"You bought {item_name} for ${cost}. Remaining money: ${self.player.money}.")
 
+    def get_player_image(self):
+        """Returns current player image path if set."""
+        return getattr(self, "player_image_path", None)
+
 # --- Gradio Interface Logic ---
 
 # Create a single game instance to be managed by gr.State
@@ -378,6 +384,8 @@ def update_ui(game_state):
 
     log_html = _format_log_html(game_state)
     status_html = _format_status_html(game_state)
+    hero_img_path = game_state.get_player_image()
+    hero_visible = hero_img_path is not None
 
     # Configure visibility for each game phase
     char_buttons_visible = (phase == "start")
@@ -385,9 +393,14 @@ def update_ui(game_state):
     play_again_visible = (phase in ["game_over", "win"])
     shop_visible = (phase == "combat")
 
+    preview_visible = (phase == "start")
+
     return (
         log_html,
         status_html,
+        gr.update(value=hero_img_path, visible=hero_visible),
+        gr.update(visible=preview_visible),  # Scott preview
+        gr.update(visible=preview_visible),  # Ramona preview
         gr.update(visible=char_buttons_visible),
         gr.update(visible=action_buttons_visible),
         gr.update(visible=play_again_visible),
@@ -434,9 +447,15 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
     game_state = gr.State(game_instance)
 
     # UI Components
+    hero_img = gr.Image(label="Hero", width=200, height=200, visible=False)
     game_output = gr.HTML(label="Game Log")
     status_output = gr.HTML(label="Current Status")
 
+    # Preview images shown before character selection
+    with gr.Row(visible=True) as preview_row:
+        scott_preview_img = gr.Image(value="characters/Scott_idle.webp", label="Scott", width=140, height=140, visible=True)
+        ramona_preview_img = gr.Image(value="characters/Ramona_Angry.webp", label="Ramona", width=140, height=140, visible=True)
+
     with gr.Row(visible=True) as character_selection_buttons:
         scott_btn = gr.Button("Play as Scott Pilgrim")
         ramona_btn = gr.Button("Play as Ramona Flowers")
@@ -455,7 +474,7 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
 
     # --- Event Handlers ---
     # Define a list of all UI components that need to be updated, including the state
-    outputs = [game_output, status_output, character_selection_buttons, game_action_buttons, play_again_btn, shop_row, game_state]
+    outputs = [game_output, status_output, hero_img, scott_preview_img, ramona_preview_img, character_selection_buttons, game_action_buttons, play_again_btn, shop_row, game_state]
 
     # Connect buttons to their callback functions
     scott_btn.click(choose_character, inputs=[scott_btn, game_state], outputs=outputs)