Update app.py

app.py

@@ -1,4 +1,4 @@
-# app.py - Enhanced Version with Playable Online Game
+# app.py - Ultimate Enhanced Version
 import streamlit as st
 import random
 import re
@@ -9,7 +9,13 @@ import requests
 from PIL import Image
 import io
 import matplotlib.pyplot as plt
+import numpy as np
 from groq import Groq
+import pygame
+import sys
+from io import StringIO
+import contextlib
+import traceback
 
 # Configure Streamlit page
 st.set_page_config(
@@ -19,7 +25,7 @@ st.set_page_config(
     initial_sidebar_state="expanded"
 )
 
-# Custom CSS with modern gradient background
+# Modern gradient background with animation
 st.markdown("""
 <style>
     @import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Comic+Neue:wght@700&display=swap');
@@ -32,13 +38,19 @@ st.markdown("""
         --light: #F0F0F0;
         --game-blue: #1A8CD8;
         --game-purple: #9B5DE5;
+        --gradient-start: #1a2a6c;
+        --gradient-mid: #b21f1f;
+        --gradient-end: #1a2a6c;
     }
     
     body {
-        background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
+        background: linear-gradient(135deg, var(--gradient-start), var(--gradient-mid), var(--gradient-end));
         background-size: 400% 400%;
         animation: gradientBG 15s ease infinite;
         font-family: 'Comic Neue', cursive;
+        margin: 0;
+        padding: 0;
+        min-height: 100vh;
     }
     
     @keyframes gradientBG {
@@ -48,13 +60,13 @@ st.markdown("""
     }
     
     .stApp {
-        background: rgba(255, 255, 255, 0.1);
-        backdrop-filter: blur(10px);
-        -webkit-backdrop-filter: blur(10px);
+        background: rgba(255, 255, 255, 0.05);
+        backdrop-filter: blur(12px);
+        -webkit-backdrop-filter: blur(12px);
     }
     
     .game-card {
-        background: rgba(255, 255, 255, 0.85);
+        background: rgba(255, 255, 255, 0.9);
         border-radius: 20px;
         padding: 25px;
         box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
@@ -75,7 +87,7 @@ st.markdown("""
     }
     
     .concept-card {
-        background: rgba(255, 255, 255, 0.9);
+        background: rgba(255, 255, 255, 0.95);
         border-radius: 15px;
         padding: 15px;
         margin: 10px 0;
@@ -93,11 +105,12 @@ st.markdown("""
         border: none;
         transition: all 0.3s;
         font-family: 'Fredoka One', cursive;
+        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
     }
     
     .stButton>button:hover {
         transform: scale(1.05);
-        box-shadow: 0 8px 16px rgba(106, 103, 206, 0.3);
+        box-shadow: 0 8px 16px rgba(106, 103, 206, 0.4);
     }
     
     .stTextInput>div>div>input {
@@ -113,7 +126,7 @@ st.markdown("""
         gap: 10px;
         margin-bottom: 20px;
         overflow-x: auto;
-        background: rgba(255, 255, 255, 0.2);
+        background: rgba(255, 255, 255, 0.15);
         padding: 10px;
         border-radius: 20px;
         backdrop-filter: blur(5px);
@@ -121,7 +134,7 @@ st.markdown("""
     
     .tab {
         padding: 12px 24px;
-        background: rgba(255, 255, 255, 0.3);
+        background: rgba(255, 255, 255, 0.25);
         border-radius: 15px;
         cursor: pointer;
         font-weight: bold;
@@ -134,56 +147,7 @@ st.markdown("""
     
     .tab.active {
         background: linear-gradient(45deg, var(--primary), var(--game-blue));
-        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-    }
-    
-    .game-preview {
-        border: 4px solid var(--primary);
-        border-radius: 20px;
-        overflow: hidden;
-        background: linear-gradient(135deg, #d0e5ff, #e0d1ff);
-        padding: 20px;
-        margin: 20px 0;
-    }
-    
-    .character {
-        font-size: 64px;
-        text-align: center;
-        margin: 20px 0;
-        text-shadow: 4px 4px 8px rgba(0,0,0,0.2);
-    }
-    
-    .game-container {
-        background: rgba(255, 255, 255, 0.9);
-        border-radius: 20px;
-        padding: 30px;
-        box-shadow: 0 8px 32px rgba(0,0,0,0.1);
-        margin: 20px 0;
-    }
-    
-    .code-block {
-        background: #2b2d42;
-        color: #f8f9fa;
-        border-radius: 15px;
-        padding: 20px;
-        font-family: 'Courier New', monospace;
-        overflow-x: auto;
-        margin: 20px 0;
-    }
-    
-    .concept-emoji {
-        font-size: 36px;
-        margin-right: 15px;
-        vertical-align: middle;
-    }
-    
-    .game-title {
-        font-family: 'Fredoka One', cursive;
-        color: white;
-        text-align: center;
-        font-size: 32px;
-        margin-bottom: 20px;
-        text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
     }
     
     .game-board {
@@ -205,9 +169,10 @@ st.markdown("""
         align-items: center;
         border-radius: 8px;
         font-size: 30px;
-        background: rgba(255, 255, 255, 0.8);
+        background: rgba(255, 255, 255, 0.85);
         transition: all 0.2s;
         cursor: pointer;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
     }
     
     .cell:hover {
@@ -218,18 +183,27 @@ st.markdown("""
     .player {
         background: linear-gradient(45deg, #6A67CE, #1A8CD8);
         color: white;
+        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
     }
     
     .goal {
         background: linear-gradient(45deg, #FDD85D, #FFB347);
+        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
     }
     
     .obstacle {
         background: linear-gradient(45deg, #FF7C7C, #FF5252);
+        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
     }
     
-    .empty {
-        background: rgba(255, 255, 255, 0.9);
+    .star {
+        background: linear-gradient(45deg, #FFD700, #FFA500);
+        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+    }
+    
+    .portal {
+        background: linear-gradient(45deg, #9B5DE5, #6A0DAD);
+        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
     }
     
     .game-controls {
@@ -261,7 +235,7 @@ st.markdown("""
     }
     
     .score-board {
-        background: rgba(255, 255, 255, 0.85);
+        background: rgba(255, 255, 255, 0.9);
         border-radius: 15px;
         padding: 15px;
         text-align: center;
@@ -269,16 +243,71 @@ st.markdown("""
         font-size: 24px;
         margin: 20px auto;
         width: 300px;
+        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+    }
+    
+    .level-indicator {
+        background: rgba(255, 255, 255, 0.9);
+        border-radius: 15px;
+        padding: 10px 20px;
+        text-align: center;
+        font-family: 'Fredoka One', cursive;
+        font-size: 20px;
+        margin: 10px auto;
+        width: 200px;
         box-shadow: 0 4px 8px rgba(0,0,0,0.1);
     }
     
+    .concept-highlight {
+        background: rgba(253, 216, 93, 0.2);
+        border-radius: 10px;
+        padding: 15px;
+        margin: 10px 0;
+        border-left: 4px solid var(--accent);
+    }
+    
+    .code-block {
+        background: #2b2d42;
+        color: #f8f9fa;
+        border-radius: 15px;
+        padding: 20px;
+        font-family: 'Courier New', monospace;
+        overflow-x: auto;
+        margin: 20px 0;
+        box-shadow: 0 8px 16px rgba(0,0,0,0.2);
+    }
+    
+    .code-explanation {
+        background: rgba(255, 255, 255, 0.9);
+        border-radius: 15px;
+        padding: 15px;
+        margin: 15px 0;
+    }
+    
+    .game-animation {
+        text-align: center;
+        margin: 20px 0;
+    }
+    
+    .animated-char {
+        font-size: 80px;
+        display: inline-block;
+        animation: bounce 2s infinite;
+    }
+    
+    @keyframes bounce {
+        0%, 100% {transform: translateY(0);}
+        50% {transform: translateY(-20px);}
+    }
+    
     @media (max-width: 768px) {
         .tabs {
             flex-wrap: wrap;
         }
         
-        .character {
-            font-size: 48px;
+        .game-board {
+            width: 90vw;
+            height: 90vw;
         }
         
         .control-btn {
@@ -286,11 +315,25 @@ st.markdown("""
             height: 60px;
             font-size: 24px;
         }
-        
-        .game-board {
-            width: 90vw;
-            height: 90vw;
-        }
+    }
+    
+    .typewriter h2 {
+        overflow: hidden;
+        border-right: .15em solid var(--accent);
+        white-space: nowrap;
+        margin: 0 auto;
+        letter-spacing: .15em;
+        animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
+    }
+    
+    @keyframes typing {
+        from { width: 0 }
+        to { width: 100% }
+    }
+    
+    @keyframes blink-caret {
+        from, to { border-color: transparent }
+        50% { border-color: var(--accent); }
     }
 </style>
 """, unsafe_allow_html=True)
@@ -320,19 +363,21 @@ def init_session_state():
     if 'player_char' not in st.session_state:
         st.session_state.player_char = "🦸"
     if 'goal_char' not in st.session_state:
-        st.session_state.goal_char = "⭐"
+        st.session_state.goal_char = "🏁"
     if 'obstacle_char' not in st.session_state:
         st.session_state.obstacle_char = "🪨"
-
-def reset_game_state():
-    st.session_state.game_state = {
-        "player_pos": [0, 0],
-        "goal_pos": [7, 7],
-        "obstacles": [[2, 2], [3, 4], [5, 3], [4, 6], [6, 5]],
-        "score": 0,
-        "moves": 0,
-        "game_over": False
-    }
+    if 'current_level' not in st.session_state:
+        st.session_state.current_level = 1
+    if 'total_levels' not in st.session_state:
+        st.session_state.total_levels = 3
+    if 'show_concept_animation' not in st.session_state:
+        st.session_state.show_concept_animation = False
+    if 'concept_animation' not in st.session_state:
+        st.session_state.concept_animation = None
+    if 'pygame_running' not in st.session_state:
+        st.session_state.pygame_running = False
+    if 'pygame_output' not in st.session_state:
+        st.session_state.pygame_output = ""
 
 # Concept database
 CONCEPTS = {
@@ -340,41 +385,46 @@ CONCEPTS = {
         "name": "Loop",
         "emoji": "🔄",
         "description": "Loops repeat actions multiple times",
-        "example": "for i in range(5):\n    print('Jump!')",
+        "example": "for i in range(5):\n    print('Hello!')",
         "color": "#6A67CE",
-        "game_example": "Repeating jumps to cross a river"
+        "game_example": "Repeating jumps to cross a river",
+        "animation": "🔄➰➿"
     },
     "conditional": {
         "name": "Conditional",
         "emoji": "❓",
         "description": "Conditionals make decisions in code",
-        "example": "if key_found:\n    open_door()\nelse:\n    keep_searching()",
+        "example": "if sunny:\n    go_outside()\nelse:\n    stay_inside()",
         "color": "#FF7C7C",
-        "game_example": "Choosing paths based on obstacles"
+        "game_example": "Choosing paths based on obstacles",
+        "animation": "❓👉👈"
     },
     "function": {
         "name": "Function",
         "emoji": "✨",
         "description": "Functions are reusable blocks of code",
-        "example": "def collect_star():\n    score += 1\n    play_sound()",
+        "example": "def greet(name):\n    print(f'Hello {name}!')",
         "color": "#FDD85D",
-        "game_example": "Creating a jump function used multiple times"
+        "game_example": "Creating a jump function used multiple times",
+        "animation": "✨🌟💫"
     },
     "variable": {
         "name": "Variable",
         "emoji": "📦",
         "description": "Variables store information",
-        "example": "score = 0\nplayer_health = 100",
+        "example": "score = 10\nplayer = 'Alex'",
         "color": "#1A8CD8",
-        "game_example": "Tracking collected stars"
+        "game_example": "Keeping track of collected stars",
+        "animation": "📊📈📉"
     },
     "list": {
         "name": "List",
         "emoji": "📝",
         "description": "Lists store collections of items",
-        "example": "inventory = ['sword', 'shield', 'potion']",
+        "example": "fruits = ['apple', 'banana', 'orange']",
         "color": "#4CAF50",
-        "game_example": "Storing collected treasures"
+        "game_example": "Storing collected treasures in a backpack",
+        "animation": "📋📑📄"
     }
 }
 
@@ -580,6 +630,13 @@ def generate_game_preview(story):
             ax.plot(x, y, 's', markersize=15, color=obstacle_color)
             ax.text(x, y+0.4, 'Obstacle', ha='center', color='white', fontsize=8)
         
+        # Stars
+        for i in range(3):
+            x = random.uniform(2.5, 7.5)
+            y = random.uniform(1.2, 2.8)
+            ax.plot(x, y, '*', markersize=15, color='yellow')
+            ax.text(x, y+0.4, 'Star', ha='center', color='white', fontsize=8)
+        
         # Path
         ax.plot([2, 8], [2, 2], 'y--', linewidth=1, alpha=0.5)
         
@@ -595,6 +652,21 @@ def generate_game_preview(story):
         st.error(f"Preview generation error: {str(e)}")
         return None
 
+def reset_game_state():
+    st.session_state.game_state = {
+        "player_pos": [0, 0],
+        "goal_pos": [7, 7],
+        "obstacles": [[2, 2], [3, 4], [5, 3], [4, 6], [6, 5]],
+        "stars": [[1, 1], [3, 3], [5, 5], [7, 1]],
+        "score": 0,
+        "moves": 0,
+        "game_over": False,
+        "portals": {
+            "A": {"in": [6, 6], "out": [1, 7]},
+            "B": {"in": [0, 3], "out": [7, 3]}
+        }
+    }
+
 # Handle player movement
 def move_player(direction):
     """Update player position based on movement direction"""
@@ -602,6 +674,8 @@ def move_player(direction):
     player_pos = state["player_pos"]
     goal_pos = state["goal_pos"]
     obstacles = state["obstacles"]
+    stars = state["stars"]
+    portals = state["portals"]
     
     new_pos = player_pos.copy()
     
@@ -621,13 +695,21 @@ def move_player(direction):
             state["player_pos"] = new_pos
             state["moves"] += 1
             
+            # Check for portal
+            for portal, positions in portals.items():
+                if new_pos == positions["in"]:
+                    state["player_pos"] = positions["out"].copy()
+                    state["moves"] += 1  # Count portal as a move
+                    break
+            
             # Check for goal collision
             if new_pos == goal_pos:
-                state["score"] += 10
+                state["score"] += 20
                 state["game_over"] = True
             # Check for star collection
-            elif new_pos in [[3, 3], [4, 4], [5, 5]]:
+            elif new_pos in stars:
                 state["score"] += 5
+                state["stars"].remove(new_pos)
                 
     st.session_state.game_state = state
 
@@ -640,6 +722,15 @@ def create_playable_game():
     player_pos = state["player_pos"]
     goal_pos = state["goal_pos"]
     obstacles = state["obstacles"]
+    stars = state["stars"]
+    portals = state["portals"]
+    
+    # Level indicator
+    st.markdown(f"""
+    <div class="level-indicator">
+        Level: {st.session_state.current_level}/{st.session_state.total_levels}
+    </div>
+    """, unsafe_allow_html=True)
     
     # Score board
     st.markdown(f"""
@@ -657,22 +748,27 @@ def create_playable_game():
         for col in range(8):
             pos = [row, col]
             cell_class = "cell"
+            cell_content = ""
             
             if pos == player_pos:
                 cell_class += " player"
                 cell_content = st.session_state.player_char
             elif pos == goal_pos:
                 cell_class += " goal"
-                cell_content = "🏁"
+                cell_content = st.session_state.goal_char
             elif pos in obstacles:
                 cell_class += " obstacle"
                 cell_content = st.session_state.obstacle_char
-            elif pos in [[3, 3], [4, 4], [5, 5]]:
-                cell_class += " goal"
+            elif pos in stars:
+                cell_class += " star"
                 cell_content = "⭐"
             else:
-                cell_class += " empty"
-                cell_content = ""
+                # Check for portals
+                for portal, positions in portals.items():
+                    if pos == positions["in"] or pos == positions["out"]:
+                        cell_class += " portal"
+                        cell_content = "🌀"
+                        break
             
             with cols[col]:
                 st.markdown(f"<div class='{cell_class}'>{cell_content}</div>", unsafe_allow_html=True)
@@ -695,16 +791,77 @@ def create_playable_game():
     # Reset button
     st.button("🔄 Reset Game", on_click=reset_game_state, use_container_width=True)
     
-    # Game over message
+    # Next level button
     if state["game_over"]:
         st.balloons()
         st.success(f"🎉 You won! Final Score: {state['score']} in {state['moves']} moves!")
+        if st.session_state.current_level < st.session_state.total_levels:
+            if st.button("Next Level →", use_container_width=True):
+                st.session_state.current_level += 1
+                reset_game_state()
+                st.rerun()
+
+# Run PyGame code in the browser
+def run_pygame_in_browser(code):
+    """Simulate running PyGame code with output capture"""
+    st.subheader("🎮 Play the Full Game in Your Browser")
+    
+    # Create a code runner
+    output = StringIO()
+    with contextlib.redirect_stdout(output), contextlib.redirect_stderr(output):
+        try:
+            # Create a fake pygame module for simulation
+            class FakePygame:
+                def __init__(self):
+                    self.quit = lambda: None
+                    self.init = lambda: None
+                    self.display = type('', (), {'set_mode': lambda *a, **kw: None, 'set_caption': lambda *a: None, 'flip': lambda: None})()
+                    self.event = type('', (), {'get': lambda: []})()
+                    self.key = type('', (), {'get_pressed': lambda: [0]*300})()
+                    self.Rect = lambda *a: None
+                    self.draw = type('', (), {'rect': lambda *a, **kw: None, 'circle': lambda *a, **kw: None})()
+                    self.font = type('', (), {'SysFont': lambda *a, **kw: type('', (), {'render': lambda *a, **kw: None})})()
+                    self.time = type('', (), {'Clock': lambda: type('', (), {'tick': lambda *a: None})()})()
+                    self.Surface = lambda *a: type('', (), {'blit': lambda *a, **kw: None})()
+            
+            sys.modules['pygame'] = FakePygame()
+            
+            # Execute the code
+            exec(code, {'__name__': '__main__'})
+            st.session_state.pygame_output = "Game executed successfully!"
+        except Exception as e:
+            st.session_state.pygame_output = f"Error: {str(e)}\n{traceback.format_exc()}"
+    
+    # Show output
+    st.code(st.session_state.pygame_output, language='python')
+    st.info("This is a simulation. To play the full game, download the code and run it on your computer!")
+
+# Display concept animation
+def show_concept_animation(concept):
+    """Display animated concept visualization"""
+    if concept in CONCEPTS:
+        st.subheader(f"{CONCEPTS[concept]['emoji']} {CONCEPTS[concept]['name']} Concept")
+        
+        # Animation
+        st.markdown(f"<div class='game-animation'><span class='animated-char'>{CONCEPTS[concept]['animation']}</span></div>", 
+                    unsafe_allow_html=True)
+        
+        # Explanation
+        st.markdown(f"""
+        <div class='concept-highlight'>
+            <p><strong>How it works:</strong> {CONCEPTS[concept]['description']}</p>
+            <p><strong>In your game:</strong> {CONCEPTS[concept]['game_example']}</p>
+        </div>
+        """, unsafe_allow_html=True)
+        
+        # Code example
+        st.code(CONCEPTS[concept]['example'], language='python')
 
 # Main application function
 def main():
     init_session_state()
     
-    # Sidebar for API key
+    # Sidebar for API key and settings
     with st.sidebar:
         st.header("⚙️ Settings")
         st.session_state.groq_api_key = st.text_input(
@@ -737,12 +894,21 @@ def main():
                 index=0
             )
         
+        st.divider()
+        
+        st.header("📚 Learning Level")
+        st.session_state.current_level = st.slider(
+            "Select Difficulty Level",
+            1, 5, st.session_state.current_level
+        )
+        
         st.divider()
         st.caption("Made with ❤️ for kids learning to code")
-        st.caption("v3.0 | StoryCoder")
+        st.caption("v4.0 | StoryCoder")
     
     st.title("🎮 StoryCoder - Play & Learn Coding!")
-    st.subheader("Create your story, play the game, and learn programming concepts!")
+    st.markdown("<div class='typewriter'><h2>Turn stories into games, and games into coding skills!</h2></div>", 
+                unsafe_allow_html=True)
     
     # Create tabs
     st.markdown('<div class="tabs">', unsafe_allow_html=True)
@@ -760,15 +926,8 @@ def main():
         if st.button("💻 Game Code", use_container_width=True):
             st.session_state.active_tab = "code"
     with col5:
-        if st.button("🔄 New Story", use_container_width=True):
-            st.session_state.story = ""
-            st.session_state.concepts = []
-            st.session_state.game_scenario = ""
-            st.session_state.game_code = ""
-            st.session_state.game_explanation = ""
-            st.session_state.game_preview = None
-            st.session_state.active_tab = "story"
-            reset_game_state()
+        if st.button("🚀 PyGame", use_container_width=True):
+            st.session_state.active_tab = "pygame"
     st.markdown('</div>', unsafe_allow_html=True)
     
     # Story creation tab
@@ -785,7 +944,7 @@ def main():
                 key="story_input"
             )
             
-            if st.button("Create Game!", use_container_width=True):
+            if st.button("✨ Create Game!", use_container_width=True):
                 if len(story) < 10:
                     st.error("Your story needs to be at least 10 characters long!")
                 else:
@@ -881,20 +1040,16 @@ def main():
         if not st.session_state.concepts:
             st.warning("No concepts detected in your story! Try adding words like '3 times', 'if', or 'collect'.")
         else:
-            for concept in st.session_state.concepts:
-                if concept in CONCEPTS:
-                    details = CONCEPTS[concept]
-                    st.markdown(f"""
-                    <div class="concept-card" style="border-left: 5px solid {details['color']};">
-                        <div style="display:flex; align-items:center; gap:15px;">
-                            <span style="font-size:36px;">{details['emoji']}</span>
-                            <h3 style="color:{details['color']};">{details['name']}</h3>
-                        </div>
-                        <p>{details['description']}</p>
-                        <p><b>In your game:</b> {details['game_example']}</p>
-                        <pre style="background:#f0f0f0; padding:10px; border-radius:8px;">{details['example']}</pre>
-                    </div>
-                    """, unsafe_allow_html=True)
+            # Concept selector
+            selected_concept = st.selectbox(
+                "Select a concept to explore:",
+                st.session_state.concepts,
+                format_func=lambda x: CONCEPTS[x]["name"]
+            )
+            
+            # Show animation and explanation for selected concept
+            if selected_concept:
+                show_concept_animation(selected_concept)
         
         if st.button("See the Game Code", use_container_width=True):
             st.session_state.active_tab = "code"
@@ -939,6 +1094,7 @@ PLAYER_COLOR = (106, 103, 206) # Purple
 GOAL_COLOR = (253, 216, 93)   # Yellow
 OBSTACLE_COLOR = (255, 124, 124) # Coral
 TEXT_COLOR = (45, 50, 80)     # Dark blue
+STAR_COLOR = (255, 215, 0)    # Gold
 
 # Player setup
 player_size = 40
@@ -965,6 +1121,15 @@ for i in range(5):
         random.randint(20, 50)
     ])
 
+# List concept: Creating stars
+stars = []
+for i in range(5):
+    stars.append([
+        random.randint(100, WIDTH - 100),
+        random.randint(50, HEIGHT - 100),
+        20
+    ])
+
 # Game loop
 running = True
 while running:
@@ -995,11 +1160,18 @@ while running:
     # Conditional concept: Check for collision
     if player_rect.colliderect(goal_rect):
         # Function concept: Increase score
-        score += 1
+        score += 10
         # Move goal to new position
         goal_x = random.randint(100, WIDTH - 100)
         goal_y = random.randint(50, HEIGHT - 100)
     
+    # Collision detection with stars
+    for star in stars[:]:
+        star_rect = pygame.Rect(star[0], star[1], star[2], star[2])
+        if player_rect.colliderect(star_rect):
+            score += 5
+            stars.remove(star)
+    
     # Drawing
     screen.fill(BACKGROUND)
     
@@ -1008,6 +1180,11 @@ while running:
         pygame.draw.rect(screen, OBSTACLE_COLOR, 
                          (obstacle[0], obstacle[1], obstacle[2], obstacle[3]))
     
+    # Draw stars
+    for star in stars:
+        pygame.draw.circle(screen, STAR_COLOR, 
+                          (star[0] + star[2]//2, star[1] + star[2]//2), star[2]//2)
+    
     # Draw player and goal
     pygame.draw.rect(screen, PLAYER_COLOR, 
                     (player_x, player_y, player_size, player_size))
@@ -1027,7 +1204,7 @@ while running:
     screen.blit(concepts_text, (20, HEIGHT - 40))
     
     # Display instructions
-    help_text = font.render("Arrow keys to move - Collect the yellow circles!", True, TEXT_COLOR)
+    help_text = font.render("Arrow keys to move - Collect stars and reach the goal!", True, TEXT_COLOR)
     screen.blit(help_text, (WIDTH // 2 - 200, HEIGHT - 80))
     
     # Update display
@@ -1050,26 +1227,47 @@ sys.exit()
                 mime="text/python",
                 use_container_width=True
             )
+            
+            # Code explanation
+            st.subheader("🧠 Code Explanation")
+            st.markdown("""
+            <div class="code-explanation">
+            <p>This code creates a game based on your story:</p>
+            <ul>
+                <li><strong>Variables:</strong> Used to track score and positions</li>
+                <li><strong>Conditionals:</strong> Check collisions and game rules</li>
+                <li><strong>Functions:</strong> pygame functions create the game mechanics</li>
+                <li><strong>Loops:</strong> The game loop runs continuously</li>
+                <li><strong>Lists:</strong> Store obstacles and collectible stars</li>
+            </ul>
+            </div>
+            """, unsafe_allow_html=True)
         else:
             st.warning("No game code generated yet!")
         
-        # Game running instructions
-        st.subheader("🖥️ How to Run Your Game")
-        st.markdown("""
-        <div class="game-card">
-        <ol>
-            <li>Install Python from <a href="https://python.org" target="_blank">python.org</a></li>
-            <li>Install PyGame: Open command prompt and type <code>pip install pygame</code></li>
-            <li>Save the game code to a file named <code>my_game.py</code></li>
-            <li>Run the game: <code>python my_game.py</code></li>
-            <li>Use arrow keys or WASD to play!</li>
-        </ol>
-        </div>
-        """, unsafe_allow_html=True)
+        # Try PyGame button
+        if st.session_state.story and st.session_state.concepts:
+            if st.button("▶️ Try PyGame in Browser", use_container_width=True):
+                st.session_state.active_tab = "pygame"
+                st.session_state.pygame_running = True
+                st.rerun()
         
         if st.button("Create Another Story!", use_container_width=True):
             st.session_state.active_tab = "story"
             st.rerun()
+    
+    # PyGame tab
+    elif st.session_state.active_tab == "pygame":
+        st.header("🎮 Play PyGame in Browser")
+        
+        if st.session_state.story and st.session_state.concepts:
+            run_pygame_in_browser(st.session_state.game_code)
+        else:
+            st.warning("No game code generated yet!")
+        
+        if st.button("Back to Game Code", use_container_width=True):
+            st.session_state.active_tab = "code"
+            st.rerun()
 
 if __name__ == "__main__":
     main()