Update app.py

app.py

@@ -1,28 +1,25 @@
-# app.py - Enhanced Version with Groq API & Playable Games
+# app.py - Enhanced Version with Playable Online Game
 import streamlit as st
-import os
-import time
 import random
-import json
 import re
+import time
 import base64
+import json
 import requests
 from PIL import Image
 import io
 import matplotlib.pyplot as plt
-import numpy as np
 from groq import Groq
-from streamlit_js_eval import streamlit_js_eval
 
 # Configure Streamlit page
 st.set_page_config(
-    page_title="StoryCoder - Learn Coding Through Games",
+    page_title="StoryCoder - Play & Learn Coding",
     page_icon="🎮",
     layout="wide",
     initial_sidebar_state="expanded"
 )
 
-# Custom CSS for game-themed UI with new color scheme
+# Custom CSS with modern gradient background
 st.markdown("""
 <style>
     @import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Comic+Neue:wght@700&display=swap');
@@ -38,42 +35,52 @@ st.markdown("""
     }
     
     body {
-        background: linear-gradient(135deg, #E6F7FF 0%, #FFEEF6 100%);
+        background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
+        background-size: 400% 400%;
+        animation: gradientBG 15s ease infinite;
         font-family: 'Comic Neue', cursive;
     }
     
+    @keyframes gradientBG {
+        0% {background-position: 0% 50%;}
+        50% {background-position: 100% 50%;}
+        100% {background-position: 0% 50%;}
+    }
+    
     .stApp {
-        background: url('https://www.transparenttextures.com/patterns/cartographer.png');
+        background: rgba(255, 255, 255, 0.1);
+        backdrop-filter: blur(10px);
+        -webkit-backdrop-filter: blur(10px);
     }
     
     .game-card {
-        background-color: white;
+        background: rgba(255, 255, 255, 0.85);
         border-radius: 20px;
         padding: 25px;
-        box-shadow: 0 8px 32px rgba(45, 50, 80, 0.15);
-        border: 4px solid var(--primary);
+        box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
+        border: 2px solid rgba(255, 255, 255, 0.18);
         margin-bottom: 25px;
         transition: all 0.3s;
     }
     
     .game-card:hover {
         transform: translateY(-5px);
-        box-shadow: 0 12px 24px rgba(45, 50, 80, 0.2);
+        box-shadow: 0 12px 24px rgba(31, 38, 135, 0.5);
     }
     
     .header {
-        color: var(--dark);
+        color: white;
         font-family: 'Fredoka One', cursive;
-        text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
+        text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
     }
     
     .concept-card {
-        background: linear-gradient(145deg, #ffffff, #f5f5ff);
+        background: rgba(255, 255, 255, 0.9);
         border-radius: 15px;
         padding: 15px;
         margin: 10px 0;
         border-left: 5px solid var(--accent);
-        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
     }
     
     .stButton>button {
@@ -98,6 +105,7 @@ st.markdown("""
         padding: 14px;
         border: 3px solid var(--accent);
         font-size: 18px;
+        background: rgba(255, 255, 255, 0.9);
     }
     
     .tabs {
@@ -105,14 +113,15 @@ st.markdown("""
         gap: 10px;
         margin-bottom: 20px;
         overflow-x: auto;
-        background: rgba(255,255,255,0.7);
+        background: rgba(255, 255, 255, 0.2);
         padding: 10px;
         border-radius: 20px;
+        backdrop-filter: blur(5px);
     }
     
     .tab {
         padding: 12px 24px;
-        background-color: var(--light);
+        background: rgba(255, 255, 255, 0.3);
         border-radius: 15px;
         cursor: pointer;
         font-weight: bold;
@@ -120,12 +129,11 @@ st.markdown("""
         font-family: 'Fredoka One', cursive;
         font-size: 16px;
         transition: all 0.3s;
-        color: var(--dark);
+        color: white;
     }
     
     .tab.active {
         background: linear-gradient(45deg, var(--primary), var(--game-blue));
-        color: white;
         box-shadow: 0 4px 8px rgba(0,0,0,0.1);
     }
     
@@ -146,7 +154,7 @@ st.markdown("""
     }
     
     .game-container {
-        background: rgba(255,255,255,0.9);
+        background: rgba(255, 255, 255, 0.9);
         border-radius: 20px;
         padding: 30px;
         box-shadow: 0 8px 32px rgba(0,0,0,0.1);
@@ -171,67 +179,97 @@ st.markdown("""
     
     .game-title {
         font-family: 'Fredoka One', cursive;
-        color: var(--primary);
+        color: white;
         text-align: center;
         font-size: 32px;
         margin-bottom: 20px;
-        text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
+        text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
     }
     
-    .game-canvas {
-        width: 100%;
-        height: 400px;
-        background: #d0e5ff;
+    .game-board {
+        display: grid;
+        grid-template-columns: repeat(8, 1fr);
+        grid-template-rows: repeat(8, 1fr);
+        gap: 4px;
+        width: 500px;
+        height: 500px;
+        margin: 0 auto;
+        background: rgba(106, 103, 206, 0.2);
+        padding: 10px;
         border-radius: 15px;
-        margin: 20px 0;
-        position: relative;
-        overflow: hidden;
+    }
+    
+    .cell {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 8px;
+        font-size: 30px;
+        background: rgba(255, 255, 255, 0.8);
+        transition: all 0.2s;
+        cursor: pointer;
+    }
+    
+    .cell:hover {
+        transform: scale(1.05);
+        background: rgba(255, 255, 255, 1);
     }
     
     .player {
-        position: absolute;
-        width: 40px;
-        height: 40px;
-        background: var(--primary);
-        border-radius: 50%;
-        transition: all 0.1s;
+        background: linear-gradient(45deg, #6A67CE, #1A8CD8);
+        color: white;
     }
     
     .goal {
-        position: absolute;
-        width: 30px;
-        height: 30px;
-        background: var(--accent);
-        border-radius: 50%;
-        box-shadow: 0 0 10px var(--accent);
+        background: linear-gradient(45deg, #FDD85D, #FFB347);
     }
     
     .obstacle {
-        position: absolute;
-        background: var(--secondary);
-        border-radius: 5px;
+        background: linear-gradient(45deg, #FF7C7C, #FF5252);
+    }
+    
+    .empty {
+        background: rgba(255, 255, 255, 0.9);
     }
     
     .game-controls {
         display: flex;
         justify-content: center;
-        gap: 10px;
-        margin: 20px 0;
+        gap: 15px;
+        margin: 25px 0;
     }
     
     .control-btn {
-        width: 60px;
-        height: 60px;
+        width: 70px;
+        height: 70px;
         border-radius: 50%;
-        background: var(--primary);
+        background: linear-gradient(45deg, var(--primary), var(--game-blue));
         color: white;
         display: flex;
         align-items: center;
         justify-content: center;
-        font-size: 24px;
+        font-size: 30px;
         cursor: pointer;
         border: none;
-        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+        box-shadow: 0 6px 12px rgba(0,0,0,0.2);
+        transition: all 0.2s;
+    }
+    
+    .control-btn:hover {
+        transform: scale(1.1);
+        box-shadow: 0 8px 16px rgba(0,0,0,0.3);
+    }
+    
+    .score-board {
+        background: rgba(255, 255, 255, 0.85);
+        border-radius: 15px;
+        padding: 15px;
+        text-align: center;
+        font-family: 'Fredoka One', cursive;
+        font-size: 24px;
+        margin: 20px auto;
+        width: 300px;
+        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
     }
     
     @media (max-width: 768px) {
@@ -244,9 +282,14 @@ st.markdown("""
         }
         
         .control-btn {
-            width: 50px;
-            height: 50px;
-            font-size: 20px;
+            width: 60px;
+            height: 60px;
+            font-size: 24px;
+        }
+        
+        .game-board {
+            width: 90vw;
+            height: 90vw;
         }
     }
 </style>
@@ -271,17 +314,25 @@ def init_session_state():
     if 'loading' not in st.session_state:
         st.session_state.loading = False
     if 'game_state' not in st.session_state:
-        st.session_state.game_state = {
-            "player_x": 100,
-            "player_y": 200,
-            "score": 0,
-            "goal_x": 600,
-            "goal_y": 200,
-            "obstacles": [],
-            "game_active": False
-        }
+        reset_game_state()
     if 'groq_api_key' not in st.session_state:
         st.session_state.groq_api_key = ""
+    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 = "⭐"
+    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
+    }
 
 # Concept database
 CONCEPTS = {
@@ -376,7 +427,7 @@ def generate_game_scenario(story, concepts):
             
             system_prompt = (
                 "You are an expert in creating educational games for children aged 6-12. "
-                "Create a simple 3D-style game scenario based on the child's story. "
+                "Create a simple game scenario based on the child's story. "
                 "The game should teach programming concepts through gameplay. "
                 "Structure your response with these sections:\n"
                 "Game Title: ...\n"
@@ -414,8 +465,8 @@ Characters:
 
 Game Mechanics:
 1. Move your character using arrow keys
-2. Collect items mentioned in your story
-3. Avoid obstacles and solve puzzles
+2. Collect stars while avoiding obstacles
+3. Reach the goal to win
 4. Helper characters appear to teach {concept_list}
 
 Coding Concepts: This game teaches {concept_list} through:
@@ -425,7 +476,7 @@ Coding Concepts: This game teaches {concept_list} through:
 - Tracking progress with variables
 - Managing collections with lists
 
-Visual Description: Colorful 3D world with cartoon-style characters, vibrant landscapes, and magical effects.
+Visual Description: Colorful game world with cartoon-style characters, vibrant landscapes, and magical effects.
 """
 
 # Generate game code explanation
@@ -474,141 +525,7 @@ As you play the game, think about:
 1. How the game uses these concepts to create challenges
 2. How you might change the code to make the game easier or harder
 
-The code brings your story to life in a 3D game world!
-"""
-
-# Generate simple game code
-def generate_game_code(story, concepts):
-    """Generate simple PyGame code for the game"""
-    # Extract keywords from story
-    keywords = re.findall(r'\b\w{4,}\b', story)[:3]
-    player_char = keywords[0].capitalize() if keywords else "Hero"
-    collect_item = keywords[1] if len(keywords) > 1 else "star"
-    obstacle = keywords[2] if len(keywords) > 2 else "rock"
-    
-    # Get concept emojis
-    concept_emojis = "".join([CONCEPTS[c]['emoji'] for c in concepts])
-    
-    return f"""
-# {player_char}'s Adventure: {story[:20]}...
-# Teaches: {concept_emojis} {", ".join([CONCEPTS[c]['name'] for c in concepts])}
-
-import pygame
-import random
-import sys
-
-# Initialize pygame
-pygame.init()
-
-# Game setup
-WIDTH, HEIGHT = 800, 600
-screen = pygame.display.set_mode((WIDTH, HEIGHT))
-pygame.display.set_caption("{player_char}'s Adventure")
-clock = pygame.time.Clock()
-
-# Colors
-BACKGROUND = (230, 240, 255)  # Light blue
-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
-
-# Player setup
-player_size = 40
-player_x = 100
-player_y = HEIGHT // 2
-player_speed = 5
-
-# Goal setup
-goal_size = 30
-goal_x = WIDTH - 150
-goal_y = HEIGHT // 2
-
-# Variables concept: Tracking score
-score = 0
-font = pygame.font.SysFont(None, 36)
-
-# List concept: Creating obstacles
-obstacles = []
-for i in range(5):
-    obstacles.append([
-        random.randint(200, WIDTH - 100),
-        random.randint(50, HEIGHT - 100),
-        random.randint(30, 70),
-        random.randint(20, 50)
-    ])
-
-# Game loop
-running = True
-while running:
-    # Event handling
-    for event in pygame.event.get():
-        if event.type == pygame.QUIT:
-            running = False
-    
-    # Player movement
-    keys = pygame.key.get_pressed()
-    if keys[pygame.K_UP] or keys[pygame.K_w]:
-        player_y -= player_speed
-    if keys[pygame.K_DOWN] or keys[pygame.K_s]:
-        player_y += player_speed
-    if keys[pygame.K_LEFT] or keys[pygame.K_a]:
-        player_x -= player_speed
-    if keys[pygame.K_RIGHT] or keys[pygame.K_d]:
-        player_x += player_speed
-    
-    # Boundary checking
-    player_x = max(0, min(WIDTH - player_size, player_x))
-    player_y = max(0, min(HEIGHT - player_size, player_y))
-    
-    # Collision detection with goal
-    player_rect = pygame.Rect(player_x, player_y, player_size, player_size)
-    goal_rect = pygame.Rect(goal_x, goal_y, goal_size, goal_size)
-    
-    # Conditional concept: Check for collision
-    if player_rect.colliderect(goal_rect):
-        # Function concept: Increase score
-        score += 1
-        # Move goal to new position
-        goal_x = random.randint(100, WIDTH - 100)
-        goal_y = random.randint(50, HEIGHT - 100)
-    
-    # Drawing
-    screen.fill(BACKGROUND)
-    
-    # Draw obstacles
-    for obstacle in obstacles:
-        pygame.draw.rect(screen, OBSTACLE_COLOR, 
-                         (obstacle[0], obstacle[1], obstacle[2], obstacle[3]))
-    
-    # Draw player and goal
-    pygame.draw.rect(screen, PLAYER_COLOR, 
-                    (player_x, player_y, player_size, player_size))
-    pygame.draw.circle(screen, GOAL_COLOR, 
-                      (goal_x + goal_size//2, goal_y + goal_size//2), goal_size//2)
-    
-    # Display score
-    score_text = font.render(f"{collect_item.capitalize()}s: {{score}}", True, TEXT_COLOR)
-    screen.blit(score_text, (20, 20))
-    
-    # Display story title
-    title_text = font.render(f"{player_char}'s Adventure: {story[:20]}...", True, TEXT_COLOR)
-    screen.blit(title_text, (WIDTH // 2 - 150, 20))
-    
-    # Display concepts
-    concepts_text = font.render(f"Teaches: {', '.join([CONCEPTS[c]['name'] for c in concepts])}", True, TEXT_COLOR)
-    screen.blit(concepts_text, (20, HEIGHT - 40))
-    
-    # Display instructions
-    help_text = font.render("Arrow keys to move - Collect the yellow circles!", True, TEXT_COLOR)
-    screen.blit(help_text, (WIDTH // 2 - 200, HEIGHT - 80))
-    
-    # Update display
-    pygame.display.flip()
-    clock.tick(60)
-
-pygame.quit()
-sys.exit()
+The code brings your story to life in a fun game world!
 """
 
 # Generate game preview visualization
@@ -678,84 +595,110 @@ def generate_game_preview(story):
         st.error(f"Preview generation error: {str(e)}")
         return None
 
+# Handle player movement
+def move_player(direction):
+    """Update player position based on movement direction"""
+    state = st.session_state.game_state
+    player_pos = state["player_pos"]
+    goal_pos = state["goal_pos"]
+    obstacles = state["obstacles"]
+    
+    new_pos = player_pos.copy()
+    
+    if direction == "up" and player_pos[0] > 0:
+        new_pos[0] -= 1
+    elif direction == "down" and player_pos[0] < 7:
+        new_pos[0] += 1
+    elif direction == "left" and player_pos[1] > 0:
+        new_pos[1] -= 1
+    elif direction == "right" and player_pos[1] < 7:
+        new_pos[1] += 1
+        
+    # Check if new position is valid
+    if new_pos != player_pos:
+        # Check for obstacle collision
+        if new_pos not in obstacles:
+            state["player_pos"] = new_pos
+            state["moves"] += 1
+            
+            # Check for goal collision
+            if new_pos == goal_pos:
+                state["score"] += 10
+                state["game_over"] = True
+            # Check for star collection
+            elif new_pos in [[3, 3], [4, 4], [5, 5]]:
+                state["score"] += 5
+                
+    st.session_state.game_state = state
+
 # Create a playable game in the browser
 def create_playable_game():
-    """Create an interactive game using Streamlit components"""
-    st.subheader("🎮 Play Your Game in the Browser!")
-    
-    # Initialize game state
-    if 'game_state' not in st.session_state:
-        st.session_state.game_state = {
-            "player_x": 100,
-            "player_y": 200,
-            "score": 0,
-            "goal_x": 600,
-            "goal_y": 200,
-            "obstacles": [
-                {"x": 300, "y": 150, "w": 80, "h": 30},
-                {"x": 400, "y": 250, "w": 60, "h": 40},
-                {"x": 200, "y": 300, "w": 100, "h": 25}
-            ],
-            "game_active": True
-        }
+    """Create an interactive grid-based game"""
+    st.subheader("🎮 Play Your Game Now!")
     
     state = st.session_state.game_state
+    player_pos = state["player_pos"]
+    goal_pos = state["goal_pos"]
+    obstacles = state["obstacles"]
     
-    # Game canvas
+    # Score board
     st.markdown(f"""
-    <div class="game-canvas">
-        <div class="player" style="left:{state['player_x']}px; top:{state['player_y']}px;"></div>
-        <div class="goal" style="left:{state['goal_x']}px; top:{state['goal_y']}px;"></div>
-        {''.join([
-            f'<div class="obstacle" style="left:{obs["x"]}px; top:{obs["y"]}px; width:{obs["w"]}px; height:{obs["h"]}px;"></div>'
-            for obs in state['obstacles']
-        ])}
-    </div>
-    <div style="text-align:center; font-size:24px; font-family:'Fredoka One'; color: var(--dark);">
-        Stars Collected: {state['score']}
+    <div class="score-board">
+        Stars Collected: {state["score"]} &nbsp; | &nbsp; Moves: {state["moves"]}
     </div>
     """, unsafe_allow_html=True)
     
+    # Game board
+    st.markdown("<div class='game-board'>", unsafe_allow_html=True)
+    
+    # Create grid cells
+    for row in range(8):
+        cols = st.columns(8)
+        for col in range(8):
+            pos = [row, col]
+            cell_class = "cell"
+            
+            if pos == player_pos:
+                cell_class += " player"
+                cell_content = st.session_state.player_char
+            elif pos == goal_pos:
+                cell_class += " goal"
+                cell_content = "🏁"
+            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"
+                cell_content = "⭐"
+            else:
+                cell_class += " empty"
+                cell_content = ""
+            
+            with cols[col]:
+                st.markdown(f"<div class='{cell_class}'>{cell_content}</div>", unsafe_allow_html=True)
+    
+    st.markdown("</div>", unsafe_allow_html=True)
+    
     # Game controls
-    st.markdown("""
-    <div class="game-controls">
-        <button class="control-btn" onclick="movePlayer('up')">↑</button>
-        <div>
-            <button class="control-btn" onclick="movePlayer('left')">←</button>
-            <button class="control-btn" style="margin:0 10px;" onclick="movePlayer('down')">↓</button>
-            <button class="control-btn" onclick="movePlayer('right')">→</button>
-        </div>
-    </div>
+    st.markdown("<div class='game-controls'>", unsafe_allow_html=True)
+    col1, col2, col3, col4 = st.columns(4)
+    with col1:
+        st.button("↑", key="up", on_click=move_player, args=("up",), use_container_width=True)
+    with col2:
+        st.button("←", key="left", on_click=move_player, args=("left",), use_container_width=True)
+    with col3:
+        st.button("↓", key="down", on_click=move_player, args=("down",), use_container_width=True)
+    with col4:
+        st.button("→", key="right", on_click=move_player, args=("right",), use_container_width=True)
+    st.markdown("</div>", unsafe_allow_html=True)
     
-    <script>
-    function movePlayer(direction) {
-        Streamlit.setComponentValue(direction);
-    }
-    </script>
-    """, unsafe_allow_html=True)
+    # Reset button
+    st.button("🔄 Reset Game", on_click=reset_game_state, use_container_width=True)
     
-    # Handle movement
-    direction = streamlit_js_eval(js_expressions="parent.document.querySelector('.game-controls').lastDirection", want_output=True)
-    
-    if direction:
-        if direction == "up" and state['player_y'] > 20:
-            state['player_y'] -= 20
-        elif direction == "down" and state['player_y'] < 360:
-            state['player_y'] += 20
-        elif direction == "left" and state['player_x'] > 20:
-            state['player_x'] -= 20
-        elif direction == "right" and state['player_x'] < 740:
-            state['player_x'] += 20
-        
-        # Check for collision with goal
-        if (abs(state['player_x'] - state['goal_x']) < 40 and 
-            abs(state['player_y'] - state['goal_y']) < 40):
-            state['score'] += 1
-            state['goal_x'] = random.randint(100, 700)
-            state['goal_y'] = random.randint(50, 350)
-        
-        st.session_state.game_state = state
-        st.rerun()
+    # Game over message
+    if state["game_over"]:
+        st.balloons()
+        st.success(f"🎉 You won! Final Score: {state['score']} in {state['moves']} moves!")
 
 # Main application function
 def main():
@@ -770,12 +713,36 @@ def main():
             help="Get a free key from https://console.groq.com/keys"
         )
         st.caption("Using Groq API will create more creative and personalized games!")
+        
+        st.divider()
+        
+        st.header("🎮 Game Theme")
+        col1, col2, col3 = st.columns(3)
+        with col1:
+            st.session_state.player_char = st.selectbox(
+                "Player Character",
+                ["🦸", "👨‍🚀", "🧙‍♂️", "🐱", "🐉", "🦊"],
+                index=0
+            )
+        with col2:
+            st.session_state.goal_char = st.selectbox(
+                "Goal Character",
+                ["🏁", "🏰", "🚩", "🎯", "🔑"],
+                index=0
+            )
+        with col3:
+            st.session_state.obstacle_char = st.selectbox(
+                "Obstacle Character",
+                ["🪨", "🌵", "🔥", "🌊", "🌳"],
+                index=0
+            )
+        
         st.divider()
         st.caption("Made with ❤️ for kids learning to code")
-        st.caption("v2.0 | StoryCoder")
+        st.caption("v3.0 | StoryCoder")
     
-    st.title("🎮 StoryCoder - Learn Coding Through Games!")
-    st.subheader("Turn your story into a playable game and discover coding secrets!")
+    st.title("🎮 StoryCoder - Play & Learn Coding!")
+    st.subheader("Create your story, play the game, and learn programming concepts!")
     
     # Create tabs
     st.markdown('<div class="tabs">', unsafe_allow_html=True)
@@ -801,13 +768,14 @@ def main():
             st.session_state.game_explanation = ""
             st.session_state.game_preview = None
             st.session_state.active_tab = "story"
+            reset_game_state()
     st.markdown('</div>', unsafe_allow_html=True)
     
     # Story creation tab
     if st.session_state.active_tab == "story":
         with st.container():
             st.header("📖 Create Your Story")
-            st.write("Write a short story (2-5 sentences) and I'll turn it into a 3D game!")
+            st.write("Write a short story (2-5 sentences) and I'll turn it into a playable game!")
             
             story = st.text_area(
                 "Your story:",
@@ -827,16 +795,11 @@ def main():
                     with st.spinner("🧠 Analyzing your story for coding concepts..."):
                         st.session_state.concepts = analyze_story(story)
                     
-                    with st.spinner("🎮 Creating your 3D game scenario..."):
+                    with st.spinner("🎮 Creating your game scenario..."):
                         st.session_state.game_scenario = generate_game_scenario(
                             story, st.session_state.concepts
                         )
                     
-                    with st.spinner("💻 Generating game code..."):
-                        st.session_state.game_code = generate_game_code(
-                            story, st.session_state.concepts
-                        )
-                    
                     with st.spinner("📚 Creating coding explanations..."):
                         st.session_state.game_explanation = generate_game_explanation(
                             story, st.session_state.concepts, st.session_state.game_scenario
@@ -845,6 +808,7 @@ def main():
                     with st.spinner("🖼️ Generating game preview..."):
                         st.session_state.game_preview = generate_game_preview(story)
                     
+                    reset_game_state()
                     st.session_state.active_tab = "game"
                     st.session_state.loading = False
                     st.rerun()
@@ -905,20 +869,6 @@ def main():
         st.subheader("📚 How This Game Teaches Coding")
         st.markdown(f'<div class="game-card">{st.session_state.game_explanation}</div>', unsafe_allow_html=True)
         
-        # Play instructions
-        st.subheader("▶️ How to Play the Full Game")
-        st.markdown("""
-        <div class="game-card">
-        <ol>
-            <li>Download the game code from the <b>Game Code</b> tab</li>
-            <li>Install Python from <a href="https://python.org" target="_blank">python.org</a></li>
-            <li>Install PyGame: <code>pip install pygame</code></li>
-            <li>Run the game: <code>python your_game.py</code></li>
-            <li>Use arrow keys or WASD to move your character!</li>
-        </ol>
-        </div>
-        """, unsafe_allow_html=True)
-        
         if st.button("Learn Coding Concepts", use_container_width=True):
             st.session_state.active_tab = "concepts"
             st.rerun()
@@ -955,49 +905,168 @@ def main():
         st.header("💻 Game Code")
         st.write("Here's the Python code for your game. Download it and run on your computer!")
         
-        if st.session_state.game_code:
+        # Generate simple game code
+        if st.session_state.story and st.session_state.concepts:
+            # Extract keywords from story
+            keywords = re.findall(r'\b\w{4,}\b', st.session_state.story)[:3]
+            player_char = keywords[0].capitalize() if keywords else "Hero"
+            collect_item = keywords[1] if len(keywords) > 1 else "star"
+            obstacle = keywords[2] if len(keywords) > 2 else "rock"
+            
+            # Get concept emojis
+            concept_emojis = "".join([CONCEPTS[c]['emoji'] for c in st.session_state.concepts])
+            
+            game_code = f"""
+# {player_char}'s Adventure: {st.session_state.story[:20]}...
+# Teaches: {concept_emojis} {", ".join([CONCEPTS[c]['name'] for c in st.session_state.concepts])}
+
+import pygame
+import random
+import sys
+
+# Initialize pygame
+pygame.init()
+
+# Game setup
+WIDTH, HEIGHT = 800, 600
+screen = pygame.display.set_mode((WIDTH, HEIGHT))
+pygame.display.set_caption("{player_char}'s Adventure")
+clock = pygame.time.Clock()
+
+# Colors
+BACKGROUND = (230, 240, 255)  # Light blue
+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
+
+# Player setup
+player_size = 40
+player_x = 100
+player_y = HEIGHT // 2
+player_speed = 5
+
+# Goal setup
+goal_size = 30
+goal_x = WIDTH - 150
+goal_y = HEIGHT // 2
+
+# Variables concept: Tracking score
+score = 0
+font = pygame.font.SysFont(None, 36)
+
+# List concept: Creating obstacles
+obstacles = []
+for i in range(5):
+    obstacles.append([
+        random.randint(200, WIDTH - 100),
+        random.randint(50, HEIGHT - 100),
+        random.randint(30, 70),
+        random.randint(20, 50)
+    ])
+
+# Game loop
+running = True
+while running:
+    # Event handling
+    for event in pygame.event.get():
+        if event.type == pygame.QUIT:
+            running = False
+    
+    # Player movement
+    keys = pygame.key.get_pressed()
+    if keys[pygame.K_UP] or keys[pygame.K_w]:
+        player_y -= player_speed
+    if keys[pygame.K_DOWN] or keys[pygame.K_s]:
+        player_y += player_speed
+    if keys[pygame.K_LEFT] or keys[pygame.K_a]:
+        player_x -= player_speed
+    if keys[pygame.K_RIGHT] or keys[pygame.K_d]:
+        player_x += player_speed
+    
+    # Boundary checking
+    player_x = max(0, min(WIDTH - player_size, player_x))
+    player_y = max(0, min(HEIGHT - player_size, player_y))
+    
+    # Collision detection with goal
+    player_rect = pygame.Rect(player_x, player_y, player_size, player_size)
+    goal_rect = pygame.Rect(goal_x, goal_y, goal_size, goal_size)
+    
+    # Conditional concept: Check for collision
+    if player_rect.colliderect(goal_rect):
+        # Function concept: Increase score
+        score += 1
+        # Move goal to new position
+        goal_x = random.randint(100, WIDTH - 100)
+        goal_y = random.randint(50, HEIGHT - 100)
+    
+    # Drawing
+    screen.fill(BACKGROUND)
+    
+    # Draw obstacles
+    for obstacle in obstacles:
+        pygame.draw.rect(screen, OBSTACLE_COLOR, 
+                         (obstacle[0], obstacle[1], obstacle[2], obstacle[3]))
+    
+    # Draw player and goal
+    pygame.draw.rect(screen, PLAYER_COLOR, 
+                    (player_x, player_y, player_size, player_size))
+    pygame.draw.circle(screen, GOAL_COLOR, 
+                      (goal_x + goal_size//2, goal_y + goal_size//2), goal_size//2)
+    
+    # Display score
+    score_text = font.render(f"{collect_item.capitalize()}s: {{score}}", True, TEXT_COLOR)
+    screen.blit(score_text, (20, 20))
+    
+    # Display story title
+    title_text = font.render(f"{player_char}'s Adventure: {st.session_state.story[:20]}...", True, TEXT_COLOR)
+    screen.blit(title_text, (WIDTH // 2 - 150, 20))
+    
+    # Display concepts
+    concepts_text = font.render(f"Teaches: {', '.join([CONCEPTS[c]['name'] for c in st.session_state.concepts])}", True, TEXT_COLOR)
+    screen.blit(concepts_text, (20, HEIGHT - 40))
+    
+    # Display instructions
+    help_text = font.render("Arrow keys to move - Collect the yellow circles!", True, TEXT_COLOR)
+    screen.blit(help_text, (WIDTH // 2 - 200, HEIGHT - 80))
+    
+    # Update display
+    pygame.display.flip()
+    clock.tick(60)
+
+pygame.quit()
+sys.exit()
+"""
+            
             # Display code with syntax highlighting
             st.subheader("Your Game Code")
-            st.code(st.session_state.game_code, language="python")
+            st.code(game_code, language="python")
             
             # Download button
             st.download_button(
                 label="📥 Download Game Code",
-                data=st.session_state.game_code,
+                data=game_code,
                 file_name="story_game.py",
                 mime="text/python",
                 use_container_width=True
             )
-            
-            # 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)
-            
-            # What to expect
-            st.subheader("🎮 What to Expect When Playing")
-            st.markdown("""
-            <div class="game-card">
-            <ul>
-                <li>Move your character (purple square) with arrow keys</li>
-                <li>Collect the yellow circles to increase your score</li>
-                <li>Avoid the coral obstacles</li>
-                <li>See how programming concepts make the game work!</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)
+        
         if st.button("Create Another Story!", use_container_width=True):
             st.session_state.active_tab = "story"
             st.rerun()