Update app.py

app.py

@@ -1,68 +1,70 @@
-# app.py - Final Version with Enhanced Performance & Light Purple Theme
+# app.py - StoryCoder: Learn Coding Through Games & Stories
 import streamlit as st
 import os
 import time
 import random
-import numpy as np
-import pandas as pd
-import plotly.express as px
-import plotly.graph_objects as go
-from gtts import gTTS
 import base64
 from PIL import Image
 import io
-import matplotlib.pyplot as plt
 import requests
-from io import BytesIO
 import json
+import pygame
+import gtts
+from io import BytesIO
+import numpy as np
+import pandas as pd
+import plotly.express as px
 
 # Configure Streamlit page
 st.set_page_config(
-    page_title="StoryCoder - Learn Python Through Stories",
-    page_icon="🧙‍♂️",
+    page_title="StoryCoder - Learn Coding Through Games",
+    page_icon="🎮",
     layout="wide",
     initial_sidebar_state="expanded"
 )
 
-# Custom CSS with Light Purple Theme
+# Custom CSS with purple/grey color scheme
 st.markdown("""
 <style>
-    @import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&family=Poppins:wght@400;600&display=swap');
+    @import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&family=Fredoka+One&display=swap');
     
     :root {
-        --primary: #8A2BE2;       /* Violet */
-        --secondary: #9370DB;    /* Medium Purple */
-        --accent: #FFD700;       /* Gold */
-        --dark: #4B0082;         /* Indigo */
-        --light: #E6E6FA;        /* Lavender */
-        --light2: #F5F0FF;       /* Light Lavender */
+        --primary: #7E57C2;
+        --secondary: #9575CD;
+        --accent: #D1C4E9;
+        --dark: #4527A0;
+        --light: #F3E5F5;
+        --grey: #ECEFF1;
     }
     
     body {
-        background: linear-gradient(135deg, var(--light) 0%, var(--light2) 100%);
-        font-family: 'Poppins', sans-serif;
+        background: linear-gradient(135deg, var(--grey) 0%, var(--light) 100%);
+        font-family: 'Comic Neue', cursive;
     }
     
     .stApp {
-        background: url('https://www.transparenttextures.com/patterns/soft-circle-scales.png');
+        background: url('https://www.transparenttextures.com/patterns/cartographer.png');
+        background-color: #fafafa;
+    }
+    
+    .header {
+        color: var(--dark);
+        text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
+        font-family: 'Fredoka One', cursive;
     }
     
     .story-box {
         background-color: white;
         border-radius: 20px;
         padding: 25px;
-        box-shadow: 0 8px 16px rgba(74, 0, 128, 0.15);
+        box-shadow: 0 8px 16px rgba(123, 31, 162, 0.15);
         border: 3px solid var(--accent);
         margin-bottom: 25px;
-    }
-    
-    .header {
-        color: var(--dark);
-        text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
+        background: linear-gradient(145deg, #ffffff, var(--grey));
     }
     
     .concept-card {
-        background: linear-gradient(145deg, #ffffff, #f8f4ff);
+        background: linear-gradient(145deg, #ffffff, var(--light));
         border-radius: 15px;
         padding: 15px;
         margin: 10px 0;
@@ -74,108 +76,61 @@ st.markdown("""
         background: linear-gradient(45deg, var(--primary), var(--secondary));
         color: white;
         border-radius: 12px;
-        padding: 12px 28px;
+        padding: 10px 24px;
         font-weight: bold;
         font-size: 18px;
         border: none;
         transition: all 0.3s;
-        font-family: 'Comic Neue', cursive;
+        font-family: 'Fredoka One', cursive;
     }
     
     .stButton>button:hover {
-        transform: translateY(-3px);
-        box-shadow: 0 6px 12px rgba(138, 43, 226, 0.3);
+        transform: scale(1.05);
+        box-shadow: 0 6px 12px rgba(123, 31, 162, 0.25);
     }
     
-    .stTextInput>div>div>input {
-        border-radius: 12px;
-        padding: 12px;
-        border: 2px solid var(--accent);
-        font-family: 'Poppins', sans-serif;
+    .game-container {
+        background: linear-gradient(135deg, var(--accent), #EDE7F6);
+        border-radius: 20px;
+        padding: 25px;
+        box-shadow: 0 8px 32px rgba(123, 31, 162, 0.2);
+        margin-bottom: 25px;
+        text-align: center;
     }
     
-    .tabs {
-        display: flex;
+    .game-board {
+        display: grid;
+        grid-template-columns: repeat(5, 1fr);
         gap: 10px;
-        margin-bottom: 20px;
-        overflow-x: auto;
+        margin: 20px auto;
+        max-width: 500px;
     }
     
-    .tab {
-        padding: 12px 24px;
-        background-color: var(--secondary);
-        border-radius: 12px;
+    .game-cell {
+        background: white;
+        border-radius: 10px;
+        height: 80px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 24px;
         cursor: pointer;
-        font-weight: bold;
-        white-space: nowrap;
-        color: white;
-        transition: all 0.3s;
-    }
-    
-    .tab:hover {
-        background-color: var(--primary);
-    }
-    
-    .tab.active {
-        background-color: var(--primary);
         box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+        transition: all 0.3s;
     }
     
-    @media (max-width: 768px) {
-        .tabs {
-            flex-wrap: wrap;
-        }
-    }
-    
-    .animation-container {
-        background: linear-gradient(135deg, #d8bfd8, #e6e6fa);
-        border-radius: 15px;
-        padding: 20px;
-        box-shadow: 0 8px 32px rgba(75, 0, 130, 0.2);
-        margin-bottom: 25px;
-        position: relative;
-        overflow: hidden;
-    }
-    
-    .animation-canvas {
-        border-radius: 10px;
-        overflow: hidden;
-        margin: 0 auto;
-        display: block;
-        max-width: 100%;
-    }
-    
-    .character {
-        font-size: 48px;
-        text-align: center;
-        margin: 10px 0;
-    }
-    
-    .audio-player {
-        width: 100%;
-        margin: 20px 0;
-        border-radius: 20px;
-        background: #f0e6ff;
-        padding: 15px;
-    }
-    
-    .animation-gif {
-        max-width: 100%;
-        border-radius: 10px;
-        box-shadow: 0 8px 16px rgba(0,0,0,0.15);
-        border: 2px solid white;
+    .game-cell:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 6px 12px rgba(0,0,0,0.15);
     }
     
-    .ai-animation {
-        border: 3px solid var(--accent);
-        border-radius: 15px;
-        padding: 15px;
-        background: white;
-        margin: 20px 0;
+    .game-cell.selected {
+        background: var(--secondary);
+        color: white;
     }
     
     .explanation-box {
-        background: linear-gradient(135deg, #f0e6ff, #e6d8ff);
+        background: linear-gradient(135deg, var(--light), #E1BEE7);
         border-radius: 15px;
         padding: 20px;
         margin: 20px 0;
@@ -188,110 +143,143 @@ st.markdown("""
         display: flex;
         align-items: center;
         gap: 10px;
-        margin-bottom: 15px;
+        font-family: 'Fredoka One', cursive;
     }
     
-    .magic-pulse {
-        animation: pulse 2s infinite;
+    .code-block {
+        background: #2c3e50;
+        color: #ecf0f1;
+        padding: 15px;
+        border-radius: 10px;
+        font-family: 'Courier New', monospace;
+        margin: 15px 0;
+        overflow-x: auto;
     }
     
-    @keyframes pulse {
-        0% { transform: scale(1); }
-        50% { transform: scale(1.05); }
-        100% { transform: scale(1); }
+    .tabs {
+        display: flex;
+        gap: 10px;
+        margin-bottom: 20px;
+        overflow-x: auto;
     }
     
-    .concept-highlight {
-        background: linear-gradient(120deg, #e0d6ff, #d8c8ff);
-        padding: 3px 8px;
-        border-radius: 6px;
+    .tab {
+        padding: 10px 20px;
+        background-color: var(--accent);
+        border-radius: 10px;
+        cursor: pointer;
         font-weight: bold;
+        white-space: nowrap;
+        font-family: 'Fredoka One', cursive;
+    }
+    
+    .tab.active {
+        background: linear-gradient(45deg, var(--primary), var(--dark));
+        color: white;
+    }
+    
+    @media (max-width: 768px) {
+        .tabs {
+            flex-wrap: wrap;
+        }
+        
+        .game-board {
+            grid-template-columns: repeat(3, 1fr);
+        }
     }
 </style>
 """, unsafe_allow_html=True)
 
-# Concept database
+# Concept database with detailed explanations
 CONCEPTS = {
     "loop": {
         "name": "Loop",
         "emoji": "🔄",
         "description": "Loops repeat actions multiple times",
-        "example": "for i in range(5):\n    print('Hello!')",
-        "color": "#8A2BE2",
+        "example": "for i in range(5):\n    print('Hello!')\n    jump()",
+        "color": "#7E57C2",
         "explanation": "A loop is like a magic spell that makes something happen again and again. In programming, we use loops when we want to repeat an action multiple times without writing the same code over and over."
     },
     "conditional": {
         "name": "Conditional",
         "emoji": "❓",
         "description": "Conditionals make decisions in code",
-        "example": "if sunny:\n    go_outside()\nelse:\n    stay_inside()",
-        "color": "#9370DB",
+        "example": "if is_sunny:\n    play_outside()\nelse:\n    stay_inside()",
+        "color": "#9575CD",
         "explanation": "Conditionals are like crossroads in a story where you choose which path to take. In programming, we use 'if' statements to make decisions based on certain conditions, just like choosing what to wear based on the weather."
     },
     "function": {
         "name": "Function",
         "emoji": "✨",
         "description": "Functions are reusable blocks of code",
-        "example": "def greet(name):\n    print(f'Hello {name}!')",
-        "color": "#DA70D6",
+        "example": "def cast_spell():\n    print('Abracadabra!')\n    create_magic()\n\ncast_spell()",
+        "color": "#D1C4E9",
         "explanation": "Functions are like magic spells you can create and reuse whenever you need them. They help us organize code into reusable blocks so we don't have to write the same thing multiple times."
     },
     "variable": {
         "name": "Variable",
         "emoji": "📦",
         "description": "Variables store information",
-        "example": "score = 10\nplayer = 'Alex'",
-        "color": "#BA55D3",
+        "example": "score = 10\nplayer_name = 'Wizard'",
+        "color": "#B39DDB",
         "explanation": "Variables are like labeled boxes where you can store information. They help us remember values and use them later in our code, just like remembering a character's name in a story."
-    },
-    "list": {
-        "name": "List",
-        "emoji": "📝",
-        "description": "Lists store collections of items",
-        "example": "fruits = ['apple', 'banana', 'orange']",
-        "color": "#9932CC",
-        "explanation": "Lists are like magical scrolls that can hold multiple items. In programming, we use lists to store collections of related things, like a wizard's inventory of potions."
     }
 }
 
-# Updated animation examples with reliable URLs
-ANIMATION_EXAMPLES = {
-    "loop": "https://media.giphy.com/media/3o7abKhOpu0NwenH3O/giphy.gif",
-    "conditional": "https://media.giphy.com/media/l0HlG8vJXW0X5yX4s/giphy.gif",
-    "function": "https://media.giphy.com/media/3o7TKsQ8UQ4l4LhGz6/giphy.gif",
-    "variable": "https://media.giphy.com/media/3o7TKsQ8UQ4l4LhGz6/giphy.gif",
-    "list": "https://media.giphy.com/media/3o7abKhOpu0NwenH3O/giphy.gif"
+# Game configurations
+GAME_CONFIGS = {
+    "loop": {
+        "title": "Loop Adventure",
+        "description": "Help the wizard collect stars by repeating actions!",
+        "instructions": "Click the stars in order. Complete 3 rounds to win!",
+        "emoji": "🔄"
+    },
+    "conditional": {
+        "title": "Decision Maze",
+        "description": "Guide the robot through the maze by making choices!",
+        "instructions": "Choose the correct path based on the conditions.",
+        "emoji": "❓"
+    },
+    "function": {
+        "title": "Magic Function",
+        "description": "Create spells by defining functions!",
+        "instructions": "Combine magic elements to create powerful functions.",
+        "emoji": "✨"
+    }
 }
 
-# Fallback images if URLs fail
-FALLBACK_IMAGES = {
-    "loop": "https://i.ibb.co/4sY7d0j/loop.gif",
-    "conditional": "https://i.ibb.co/8Xg7zY6/conditional.gif",
-    "function": "https://i.ibb.co/7yVnZ8C/function.gif",
-    "variable": "https://i.ibb.co/7yVnZ8C/function.gif",
-    "list": "https://i.ibb.co/4sY7d0j/loop.gif"
-}
+# Initialize pygame for audio
+pygame.mixer.init()
 
-def check_url(url):
-    """Check if a URL is valid and accessible"""
+def text_to_speech(text, filename="explanation.mp3"):
+    """Convert text to speech using gTTS"""
     try:
-        response = requests.head(url, timeout=5)
-        return response.status_code == 200
-    except:
-        return False
+        tts = gtts.gTTS(text=text, lang='en')
+        tts.save(filename)
+        return filename
+    except Exception as e:
+        st.error(f"Audio creation error: {str(e)}")
+        return None
 
-def create_animation_preview(concept):
-    """Create an animation preview for the concept with fallback"""
+def play_audio(file_path):
+    """Play audio using pygame"""
     try:
-        # Check if the URL is valid
-        url = ANIMATION_EXAMPLES.get(concept, "")
-        if url and check_url(url):
-            return url
-        
-        # Use fallback if primary URL fails
-        return FALLBACK_IMAGES.get(concept, FALLBACK_IMAGES["loop"])
+        pygame.mixer.music.load(file_path)
+        pygame.mixer.music.play()
+        return True
     except:
-        return FALLBACK_IMAGES["loop"]
+        return False
+
+def autoplay_audio(file_path):
+    """Create an audio autoplay element for Streamlit"""
+    audio_bytes = open(file_path, "rb").read()
+    b64 = base64.b64encode(audio_bytes).decode()
+    md = f"""
+    <audio autoplay>
+        <source src="data:audio/mp3;base64,{b64}" type="audio/mp3">
+    </audio>
+    """
+    st.markdown(md, unsafe_allow_html=True)
 
 def analyze_story(story):
     """Analyze story and identify programming concepts"""
@@ -299,345 +287,253 @@ def analyze_story(story):
     detected_concepts = []
     
     # Check for loops
-    if any(word in story_lower for word in ["times", "repeat", "again", "multiple", "each"]):
+    if any(word in story_lower for word in ["times", "repeat", "again", "multiple"]):
         detected_concepts.append("loop")
     
     # Check for conditionals
-    if any(word in story_lower for word in ["if", "when", "unless", "whether", "decide"]):
+    if any(word in story_lower for word in ["if", "when", "unless", "whether", "choose"]):
         detected_concepts.append("conditional")
     
     # Check for functions
-    if any(word in story_lower for word in ["make", "create", "do", "perform", "cast", "spell"]):
+    if any(word in story_lower for word in ["make", "create", "do", "perform", "cast"]):
         detected_concepts.append("function")
     
     # Check for variables
-    if any(word in story_lower for word in ["is", "has", "set to", "value", "named", "called"]):
+    if any(word in story_lower for word in ["is", "has", "set to", "value", "store"]):
         detected_concepts.append("variable")
     
-    # Check for lists
-    if any(word in story_lower for word in ["and", "many", "several", "collection", "items", "group"]):
-        detected_concepts.append("list")
-    
     return list(set(detected_concepts))
 
-def extract_count_from_story(story):
-    """Extract a number from the story to use in animations"""
-    for word in story.split():
-        if word.isdigit():
-            return min(int(word), 10)
-    return 3  # Default value
-
-def text_to_speech_custom(text, filename="story_audio.mp3"):
-    """Convert text to speech using gTTS (faster and reliable)"""
-    try:
-        tts = gTTS(text=text, lang='en')
-        tts.save(filename)
-        return filename
-    except Exception as e:
-        st.error(f"Audio creation error: {str(e)}")
-        return None
-
-def autoplay_audio(file_path):
-    """Autoplay audio in Streamlit"""
-    with open(file_path, "rb") as f:
-        data = f.read()
-        b64 = base64.b64encode(data).decode()
-        md = f"""
-            <audio autoplay>
-            <source src="data:audio/mp3;base64,{b64}" type="audio/mp3">
-            </audio>
-            """
-        st.markdown(md, unsafe_allow_html=True)
-
-def generate_animation_code(story, concept):
-    """Generate Python animation code based on story"""
+def create_story_image(story, concept):
+    """Create a story image using DiceBear avatars"""
     try:
-        count = extract_count_from_story(story)
-        short_story = story[:20] + '...' if len(story) > 20 else story
+        # Create avatar based on story theme
+        theme = "lorelei" if "dragon" in story.lower() else "pixel-art"
+        url = f"https://api.dicebear.com/7.x/{theme}/png?seed={story[:10]}"
+        response = requests.get(url)
         
-        # Sample code based on concept
-        if concept == "loop":
-            code = f"""
-# Loop Animation: Repeating Actions
-import time
-
-def animate_story():
-    actions = {count}
-    
-    print("Story: {short_story}")
-    print("Concept: Looping {count} times")
-    
-    for i in range(actions):
-        print(f"Action {{i+1}}: Performing story action")
-        # Animation code would go here
-        time.sleep(0.5)
-        
-    print("Story animation complete!")
-
-animate_story()
-            """
-            description = "Looping through actions multiple times"
-            visual_cue = "Repeating actions in a loop"
-        
-        elif concept == "conditional":
-            code = f"""
-# Conditional Animation: Making Decisions
-import random
-
-print("Story: {short_story}")
-print("Concept: Making decisions based on conditions")
-
-condition = random.choice([True, False])
-print(f"Condition is {{condition}}")
-
-if condition:
-    print("Path 1: Following the true branch")
-    # True branch animation
-else:
-    print("Path 2: Following the false branch")
-    # False branch animation
-
-print("Story animation complete!")
-            """
-            description = "Making decisions based on conditions"
-            visual_cue = "Branching paths based on conditions"
-        
-        elif concept == "function":
-            code = f"""
-# Function Animation: Reusable Actions
-import time
-
-print("Story: {short_story}")
-print("Concept: Creating reusable functions")
-
-def perform_action():
-    print("Performing story action")
-    # Action animation code
-
-# Call the function multiple times
-for _ in range({count}):
-    perform_action()
-    time.sleep(0.3)
-
-print("Story animation complete!")
-            """
-            description = "Reusing code with functions"
-            visual_cue = "Calling a reusable function"
-        
-        elif concept == "variable":
-            code = f"""
-# Variable Animation: Storing Information
-import time
-
-print("Story: {short_story}")
-print("Concept: Using variables to store information")
-
-character = "Hero"
-score = 10
-inventory = ["sword", "shield", "potion"]
-
-print(f"Welcome {{character}}! You have {{score}} points.")
-print(f"Your inventory: {{inventory}}")
-
-for item in inventory:
-    print(f"Using {{item}}...")
-    time.sleep(0.5)
-
-print("Story animation complete!")
-            """
-            description = "Storing information in variables"
-            visual_cue = "Using stored values"
-        
-        else:  # list
-            code = f"""
-# List Animation: Managing Collections
-import time
-
-print("Story: {short_story}")
-print("Concept: Working with lists of items")
-
-items = ["item1", "item2", "item3", "item4", "item5"][:{count}]
-print(f"Collection has {{len(items)}} items")
-
-for i, item in enumerate(items):
-    print(f"Processing item {{i+1}}: {{item}}")
-    time.sleep(0.4)
-
-print("Story animation complete!")
-            """
-            description = "Managing collections of items"
-            visual_cue = "Processing multiple items"
-        
-        return code, description, visual_cue
-    
-    except Exception as e:
-        return f"# Error generating code\nprint('Could not generate code: {str(e)}')", "", ""
-
-def create_interactive_animation(story, concept):
-    """Create an interactive animation using Plotly"""
-    try:
-        # Create animation data
-        frames = []
-        count = extract_count_from_story(story)
-        
-        for i in range(count):
-            frames.append({
-                "frame": i,
-                "x": np.random.uniform(1, 9),
-                "y": np.random.uniform(1, 9),
-                "size": np.random.uniform(20, 40),
-                "label": f"Action {i+1}",
-                "color": f"hsl({i*40}, 100%, 50%)"
-            })
-        
-        df = pd.DataFrame(frames)
-        
-        # Create animated scatter plot
-        fig = px.scatter(
-            df, 
-            x="x", 
-            y="y", 
-            animation_frame="frame",
-            text="label",
-            size="size",
-            size_max=45,
-            color="color",
-            color_discrete_sequence=px.colors.qualitative.Pastel,
-            range_x=[0, 10],
-            range_y=[0, 10],
-            title=f"Interactive Animation: {story[:40]}{'...' if len(story) > 40 else ''}"
-        )
-        
-        # Customize layout
-        fig.update_layout(
-            showlegend=False,
-            plot_bgcolor='rgba(245, 240, 255, 0.8)',
-            paper_bgcolor='rgba(245, 240, 255, 0.8)',
-            width=800,
-            height=600,
-            xaxis=dict(showgrid=False, zeroline=False, visible=False),
-            yaxis=dict(showgrid=False, zeroline=False, visible=False),
-            font_family="Poppins"
-        )
-        
-        fig.update_traces(
-            textfont_size=18,
-            textposition='middle center',
-            marker=dict(sizemode='diameter')
-        )
-        
-        return fig
-    
-    except Exception as e:
-        st.error(f"Interactive animation error: {str(e)}")
+        if response.status_code == 200:
+            return BytesIO(response.content)
+        return None
+    except:
         return None
 
-def generate_concept_explanation(story, concept, code_description, visual_cue):
-    """Generate a detailed explanation of the programming concept with examples"""
+def create_concept_explanation(story, concept):
+    """Create a detailed explanation of the programming concept"""
     concept_info = CONCEPTS.get(concept, {})
     
     explanation = f"""
-    Let me explain what's happening in your story and how it relates to programming!
+    ✨ Let's learn about {concept_info.get('name', 'programming')} through your story!
     
-    <div class='concept-highlight'>Your story</div>: "{story[:100]}..."
+    Your story: "{story[:100]}..."
     
-    <div class='concept-highlight'>Programming concept</div>: {concept_info.get('name', 'Programming')}
+    This story shows the concept of: {concept_info.get('name', 'Programming')}
     
     {concept_info.get('explanation', 'This is a fundamental programming concept.')}
     
-    <div class='concept-highlight'>In our animation</div>:
-    - {visual_cue}
-    - This represents: {code_description}
-    
-    <div class='concept-highlight'>How it works in code</div>:
-    We use {concept_info.get('name', 'this concept')} like this:
+    In programming, we use {concept_info.get('name', 'this concept')} like this:
     ```
     {concept_info.get('example', 'Example code will appear here')}
     ```
     
-    <div class='concept-highlight'>Real-world use</div>:
-    You might use this concept when:
-    - Creating games with repeating actions (loops)
-    - Making decisions in apps (conditionals)
-    - Building reusable components (functions)
-    - Storing player information (variables)
-    - Managing collections of data (lists)
+    In your game, you'll:
+    - Practice using {concept_info.get('name', 'this concept')}
+    - See how it works in real code
+    - Create your own version of the concept
     
-    Try to spot this concept in other stories you create!
+    Ready to play and learn? Let's go!
     """
     
     return explanation
 
+def create_game_state(concept):
+    """Initialize game state based on concept"""
+    game_state = {
+        "concept": concept,
+        "score": 0,
+        "level": 1,
+        "completed": False
+    }
+    
+    if concept == "loop":
+        game_state["cells"] = [""] * 9
+        game_state["sequence"] = random.sample(range(9), 3)
+        game_state["current_step"] = 0
+        game_state["max_steps"] = 3
+        
+    elif concept == "conditional":
+        game_state["paths"] = [
+            {"condition": "sunny", "result": "park"},
+            {"condition": "rainy", "result": "home"},
+            {"condition": "windy", "result": "kite"}
+        ]
+        game_state["current_condition"] = random.choice(["sunny", "rainy", "windy"])
+        
+    elif concept == "function":
+        game_state["spell_components"] = ["✨", "🔥", "💧", "🌪️", "🌱"]
+        game_state["current_spell"] = []
+        game_state["target_spell"] = random.sample(game_state["spell_components"], 3)
+        
+    return game_state
+
+def render_game(game_state):
+    """Render the game UI based on game state"""
+    concept = game_state["concept"]
+    config = GAME_CONFIGS.get(concept, {})
+    
+    with st.container():
+        st.markdown(f"<h2 style='text-align:center; color:{CONCEPTS[concept]['color']};'>{config.get('title', 'Programming Game')}</h2>", unsafe_allow_html=True)
+        st.markdown(f"<h3 style='text-align:center;'>{config.get('description', 'Learn programming through play!')}</h3>", unsafe_allow_html=True)
+        
+        # Score and level display
+        col1, col2 = st.columns(2)
+        with col1:
+            st.markdown(f"<div style='background:{CONCEPTS[concept]['color']}; color:white; padding:10px; border-radius:10px; text-align:center;'>🌟 Score: {game_state['score']}</div>", unsafe_allow_html=True)
+        with col2:
+            st.markdown(f"<div style='background:{CONCEPTS[concept]['color']}; color:white; padding:10px; border-radius:10px; text-align:center;'>📈 Level: {game_state['level']}</div>", unsafe_allow_html=True)
+        
+        st.divider()
+        
+        # Game-specific rendering
+        if concept == "loop":
+            st.markdown(f"<h4 style='text-align:center;'>{config.get('instructions', 'Complete the sequence!')}</h4>", unsafe_allow_html=True)
+            
+            # Display sequence to remember
+            seq_emojis = " → ".join(["⭐" for _ in game_state["sequence"]])
+            st.markdown(f"<h3 style='text-align:center;'>{seq_emojis}</h3>", unsafe_allow_html=True)
+            
+            # Game board
+            st.markdown("<div class='game-board'>", unsafe_allow_html=True)
+            cols = st.columns(3)
+            for i in range(9):
+                with cols[i % 3]:
+                    if st.button("⭐" if i in game_state["sequence"] else "✨", 
+                                key=f"cell_{i}",
+                                use_container_width=True,
+                                disabled=game_state["completed"]):
+                        if i == game_state["sequence"][game_state["current_step"]]:
+                            game_state["current_step"] += 1
+                            game_state["score"] += 10
+                            
+                            if game_state["current_step"] >= len(game_state["sequence"]):
+                                game_state["completed"] = True
+                                game_state["score"] += 50
+                        else:
+                            game_state["score"] = max(0, game_state["score"] - 5)
+            st.markdown("</div>", unsafe_allow_html=True)
+            
+        elif concept == "conditional":
+            st.markdown(f"<h4 style='text-align:center;'>It's {game_state['current_condition']} today! Where should we go?</h4>", unsafe_allow_html=True)
+            
+            for path in game_state["paths"]:
+                if st.button(f"If {path['condition']} → Go to {path['result']}", 
+                            key=f"path_{path['condition']}",
+                            use_container_width=True,
+                            disabled=game_state["completed"]):
+                    if path["condition"] == game_state["current_condition"]:
+                        game_state["score"] += 20
+                        game_state["completed"] = True
+                    else:
+                        game_state["score"] = max(0, game_state["score"] - 5)
+                        
+        elif concept == "function":
+            st.markdown(f"<h4 style='text-align:center;'>Create this spell: {' '.join(game_state['target_spell'])}</h4>", unsafe_allow_html=True)
+            
+            # Current spell
+            current_spell = " ".join(game_state["current_spell"]) if game_state["current_spell"] else "Empty"
+            st.markdown(f"<h5 style='text-align:center;'>Your Spell: {current_spell}</h5>", unsafe_allow_html=True)
+            
+            # Spell components
+            st.markdown("<div style='display:flex; justify-content:center; gap:10px; margin:20px;'>", unsafe_allow_html=True)
+            for component in game_state["spell_components"]:
+                if st.button(component, key=f"comp_{component}"):
+                    if len(game_state["current_spell"]) < 3:
+                        game_state["current_spell"].append(component)
+            st.markdown("</div>", unsafe_allow_html=True)
+            
+            # Spell actions
+            col1, col2 = st.columns(2)
+            with col1:
+                if st.button("Cast Spell", use_container_width=True, disabled=len(game_state["current_spell"]) == 0):
+                    if game_state["current_spell"] == game_state["target_spell"]:
+                        game_state["score"] += 30
+                        game_state["completed"] = True
+                    else:
+                        game_state["score"] = max(0, game_state["score"] - 5)
+            with col2:
+                if st.button("Clear Spell", use_container_width=True, disabled=len(game_state["current_spell"]) == 0):
+                    game_state["current_spell"] = []
+        
+        # Game completion
+        if game_state["completed"]:
+            st.balloons()
+            st.success(f"🎉 Level Complete! Final Score: {game_state['score']}")
+            
+            if st.button("Play Again", use_container_width=True):
+                game_state.update(create_game_state(concept))
+                game_state["level"] += 1
+        
+        return game_state
+
 def main():
     """Main application function"""
-    st.title("🧙‍♂️ StoryCoder - Learn Python Through Stories!")
-    st.subheader("Turn your story into an animation and discover coding secrets with voice explanations!")
+    st.title("🎮 StoryCoder: Learn Coding Through Games & Stories!")
+    st.subheader("Create a story, play a game, and discover coding secrets with voice explanations!")
     
     # Initialize session state
     if 'story' not in st.session_state:
         st.session_state.story = ""
     if 'concepts' not in st.session_state:
         st.session_state.concepts = []
-    if 'interactive_animation' not in st.session_state:
-        st.session_state.interactive_animation = None
-    if 'animation_code' not in st.session_state:
-        st.session_state.animation_code = ""
-    if 'code_description' not in st.session_state:
-        st.session_state.code_description = ""
-    if 'visual_cue' not in st.session_state:
-        st.session_state.visual_cue = ""
+    if 'story_image' not in st.session_state:
+        st.session_state.story_image = None
+    if 'game_state' not in st.session_state:
+        st.session_state.game_state = None
+    if 'concept_explanation' not in st.session_state:
+        st.session_state.concept_explanation = ""
     if 'audio_file' not in st.session_state:
         st.session_state.audio_file = None
-    if 'active_tab' not in st.session_state:
-        st.session_state.active_tab = "story"
     if 'explanation_audio' not in st.session_state:
         st.session_state.explanation_audio = None
-    if 'concept_explanation' not in st.session_state:
-        st.session_state.concept_explanation = ""
+    if 'active_tab' not in st.session_state:
+        st.session_state.active_tab = "story"
     
     # Create tabs
     tabs = st.empty()
     tab_cols = st.columns(5)
-    with tab_cols[0]:
-        if st.button("📖 Create Story", key="tab_story"):
-            st.session_state.active_tab = "story"
-    with tab_cols[1]:
-        if st.button("🎬 Animation", key="tab_animation"):
-            st.session_state.active_tab = "animation"
-    with tab_cols[2]:
-        if st.button("🔍 Concepts", key="tab_concepts"):
-            st.session_state.active_tab = "concepts"
-    with tab_cols[3]:
-        if st.button("💻 Code", key="tab_code"):
-            st.session_state.active_tab = "code"
-    with tab_cols[4]:
-        if st.button("🔄 Reset", key="tab_reset"):
-            st.session_state.story = ""
-            st.session_state.concepts = []
-            st.session_state.interactive_animation = None
-            st.session_state.animation_code = ""
-            st.session_state.code_description = ""
-            st.session_state.visual_cue = ""
-            st.session_state.audio_file = None
-            st.session_state.explanation_audio = None
-            st.session_state.concept_explanation = ""
-            st.session_state.active_tab = "story"
+    tab_names = ["📖 Story", "🎮 Game", "🎓 Learn", "💻 Code", "🔄 Reset"]
+    
+    for i, tab_name in enumerate(tab_names):
+        with tab_cols[i]:
+            if st.button(tab_name, use_container_width=True):
+                if tab_name == "🔄 Reset":
+                    st.session_state.story = ""
+                    st.session_state.concepts = []
+                    st.session_state.story_image = None
+                    st.session_state.game_state = None
+                    st.session_state.concept_explanation = ""
+                    st.session_state.audio_file = None
+                    st.session_state.explanation_audio = None
+                    st.session_state.active_tab = "story"
+                else:
+                    st.session_state.active_tab = tab_name.split()[0].lower()
     
     # Story creation tab
     if st.session_state.active_tab == "story":
         with st.container():
+            st.markdown("<div class='story-box'>", unsafe_allow_html=True)
             st.header("📖 Create Your Story")
-            st.write("Write a short story (2-5 sentences) and I'll turn it into an animation with voice explanations!")
+            st.write("Write a short story (2-3 sentences) and I'll turn it into a coding game!")
             
             story = st.text_area(
                 "Your story:",
-                height=200,
-                placeholder="Once upon a time, a rabbit hopped 3 times to reach a carrot...",
+                height=150,
+                placeholder="Once upon a time, a rabbit hopped 3 times to reach a magic carrot...",
                 value=st.session_state.story,
                 key="story_input"
             )
             
-            if st.button("✨ Create Animation!", use_container_width=True, key="create_animation"):
+            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:
@@ -646,40 +542,23 @@ def main():
                         st.session_state.concepts = analyze_story(story)
                     
                     # Get the main concept
-                    main_concept = st.session_state.concepts[0] if st.session_state.concepts else "variable"
+                    main_concept = st.session_state.concepts[0] if st.session_state.concepts else "loop"
                     
-                    with st.spinner("🚀 Creating interactive animation..."):
-                        st.session_state.interactive_animation = create_interactive_animation(
-                            story, main_concept
-                        )
+                    with st.spinner("🎨 Creating story image..."):
+                        st.session_state.story_image = create_story_image(story, main_concept)
                     
-                    with st.spinner("💻 Generating animation code..."):
-                        st.session_state.animation_code, st.session_state.code_description, st.session_state.visual_cue = generate_animation_code(
-                            story, main_concept
-                        )
-                    
-                    with st.spinner("🔊 Creating audio narration..."):
-                        audio_text = f"Your story: {story}. This demonstrates the programming concept: {st.session_state.code_description}"
-                        st.session_state.audio_file = text_to_speech_custom(
-                            audio_text
-                        )
+                    with st.spinner("🎮 Creating your game..."):
+                        st.session_state.game_state = create_game_state(main_concept)
                     
                     with st.spinner("🧠 Generating concept explanation..."):
-                        st.session_state.concept_explanation = generate_concept_explanation(
-                            story, 
-                            main_concept, 
-                            st.session_state.code_description, 
-                            st.session_state.visual_cue
-                        )
+                        st.session_state.concept_explanation = create_concept_explanation(story, main_concept)
                     
-                    with st.spinner("🔊 Creating explanation audio..."):
-                        explanation_text = st.session_state.concept_explanation.replace('<div class="concept-highlight">', '').replace('</div>', '')
-                        st.session_state.explanation_audio = text_to_speech_custom(
-                            explanation_text,
-                            "concept_explanation.mp3"
-                        )
+                    with st.spinner("🔊 Creating audio explanation..."):
+                        audio_file = text_to_speech(st.session_state.concept_explanation)
+                        if audio_file:
+                            st.session_state.explanation_audio = audio_file
                     
-                    st.session_state.active_tab = "animation"
+                    st.session_state.active_tab = "game"
                     st.rerun()
             
             # Show examples
@@ -688,199 +567,177 @@ def main():
             with col1:
                 st.caption("Loop Example")
                 st.code('"A dragon breathes fire 5 times at the castle"', language="text")
-                st.image(create_animation_preview("loop"), 
-                         use_container_width=True, 
-                         caption="Loop Animation Preview")
+                st.image("https://api.dicebear.com/7.x/lorelei/png?seed=dragon", 
+                         use_column_width=True, 
+                         caption="Dragon Story Character")
             with col2:
                 st.caption("Conditional Example")
                 st.code('"If it rains, the cat stays inside, else it goes out"', language="text")
-                st.image(create_animation_preview("conditional"), 
-                         use_container_width=True, 
-                         caption="Conditional Animation Preview")
+                st.image("https://api.dicebear.com/7.x/lorelei/png?seed=cat", 
+                         use_column_width=True, 
+                         caption="Cat Story Character")
             with col3:
                 st.caption("Function Example")
                 st.code('"A wizard casts a spell to make flowers grow"', language="text")
-                st.image(create_animation_preview("function"), 
-                         use_container_width=True, 
-                         caption="Function Animation Preview")
+                st.image("https://api.dicebear.com/7.x/lorelei/png?seed=wizard", 
+                         use_column_width=True, 
+                         caption="Wizard Story Character")
+            st.markdown("</div>", unsafe_allow_html=True)
     
-    # Animation tab
-    elif st.session_state.active_tab == "animation":
-        st.header("🎬 Your Story Animation")
-        
+    # Game tab
+    elif st.session_state.active_tab == "game":
         if not st.session_state.story:
             st.warning("Please create a story first!")
             st.session_state.active_tab = "story"
             st.rerun()
         
-        # Display interactive animation
-        st.subheader("🎮 Interactive Animation")
-        if st.session_state.interactive_animation:
-            st.plotly_chart(st.session_state.interactive_animation, use_container_width=True)
-        else:
-            st.info("Interactive animation preview. The real animation would run on your computer!")
-            concept = st.session_state.concepts[0] if st.session_state.concepts else "loop"
-            st.image(create_animation_preview(concept), 
-                    use_container_width=True)
-        
-        # Animation concept preview
-        st.subheader("📽️ Animation Concept Preview")
-        if st.session_state.concepts:
-            concept = st.session_state.concepts[0]
-            st.image(create_animation_preview(concept), 
-                     caption=f"{CONCEPTS[concept]['name']} Animation Example", 
-                     use_container_width=True)
-        else:
-            st.info("Animation preview would appear here")
-        
-        # Play audio narration
-        st.subheader("🔊 Story Narration")
-        if st.session_state.audio_file:
-            audio_bytes = open(st.session_state.audio_file, 'rb').read()
-            st.audio(audio_bytes, format='audio/mp3')
+        with st.container():
+            st.markdown("<div class='story-box'>", unsafe_allow_html=True)
+            st.header("🎮 Your Coding Game")
             
-            if st.button("▶️ Play Story Automatically", use_container_width=True):
-                autoplay_audio(st.session_state.audio_file)
-        else:
-            st.info("Audio narration would play automatically here")
-        
-        # Concept explanation section
-        if st.session_state.concepts and st.session_state.concept_explanation:
-            st.subheader("🎓 Concept Explanation")
-            concept = st.session_state.concepts[0]
-            details = CONCEPTS.get(concept, {})
+            # Display story image
+            if st.session_state.story_image:
+                st.image(st.session_state.story_image, use_column_width=True)
             
-            st.markdown(f"""
-            <div class="explanation-box">
-                <div class="explanation-header">
-                    <span style="font-size:36px;">{details.get('emoji', '✨')}</span>
-                    <h3>Understanding {details.get('name', 'Programming')} Concept</h3>
-                </div>
-                {st.session_state.concept_explanation}
-            </div>
-            """, unsafe_allow_html=True)
+            # Display game
+            if st.session_state.game_state:
+                st.session_state.game_state = render_game(st.session_state.game_state)
             
+            # Play explanation audio
             if st.session_state.explanation_audio:
-                explanation_bytes = open(st.session_state.explanation_audio, 'rb').read()
-                st.audio(explanation_bytes, format='audio/mp3')
-                
-                if st.button("▶️ Play Concept Explanation", use_container_width=True):
-                    autoplay_audio(st.session_state.explanation_audio)
-        
-        st.success("✨ Animation created successfully!")
-        st.caption("This animation was generated with Python code based on your story!")
-        
-        if st.button("Reveal Coding Secrets!", use_container_width=True):
-            st.session_state.active_tab = "concepts"
-            st.rerun()
-    
-    # Concepts tab
-    elif st.session_state.active_tab == "concepts":
-        st.header("🔍 Coding Concepts in Your Story")
-        st.subheader("We secretly used these programming concepts:")
-        
-        if not st.session_state.concepts:
-            st.warning("No concepts detected in your story! Try adding words like '3 times', 'if', or 'make'.")
-        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>
-                        <pre style="background:#f8f4ff; padding:10px; border-radius:8px;">{details['example']}</pre>
-                        <p><strong>Explanation:</strong> {details.get('explanation', 'Learn how this concept works!')}</p>
-                    </div>
-                    """, unsafe_allow_html=True)
-                    
-                    # Show animation preview for the concept
-                    st.image(create_animation_preview(concept), 
-                             caption=f"{details['name']} Animation Example", 
-                             use_container_width=True)
-        
-        # Play explanation if available
-        if st.session_state.explanation_audio:
-            st.subheader("🔊 Full Concept Explanation")
-            explanation_bytes = open(st.session_state.explanation_audio, 'rb').read()
-            st.audio(explanation_bytes, format='audio/mp3')
+                st.subheader("🔊 Concept Explanation")
+                if st.button("▶️ Play Explanation", use_container_width=True):
+                    if play_audio(st.session_state.explanation_audio):
+                        st.success("Playing audio explanation...")
+                    else:
+                        autoplay_audio(st.session_state.explanation_audio)
             
-            if st.button("▶️ Play Full Explanation", use_container_width=True):
-                autoplay_audio(st.session_state.explanation_audio)
-        
-        if st.button("See the Magic Code!", use_container_width=True):
-            st.session_state.active_tab = "code"
-            st.rerun()
+            st.markdown("</div>", unsafe_allow_html=True)
     
-    # Code tab
-    elif st.session_state.active_tab == "code":
-        st.header("💻 The Magic Code Behind Your Animation")
-        st.write("Here's the Python code that would create your animation:")
+    # Learn tab
+    elif st.session_state.active_tab == "learn":
+        if not st.session_state.story:
+            st.warning("Please create a story first!")
+            st.session_state.active_tab = "story"
+            st.rerun()
         
-        if st.session_state.animation_code:
-            st.subheader(st.session_state.code_description)
-            st.markdown(f"**Visual Cue:** {st.session_state.visual_cue}")
-            st.code(st.session_state.animation_code, language="python")
-            
-            # Download button
-            st.download_button(
-                label="📥 Download Animation Code",
-                data=st.session_state.animation_code,
-                file_name="story_animation.py",
-                mime="text/python",
-                use_container_width=True
-            )
-            
-            st.info("💡 To run this animation on your computer:")
-            st.markdown("""
-            1. Install Python from [python.org](https://python.org)
-            2. Install required libraries: `pip install matplotlib numpy`
-            3. Copy the code above into a file named `animation.py`
-            4. Run it with: `python animation.py`
-            """)
-            
-            st.success("🎉 When you run this code, you'll see your story come to life!")
-            
-            # Show what the animation would look like
-            st.subheader("🎬 What Your Animation Would Look Like")
-            concept = st.session_state.concepts[0] if st.session_state.concepts else "loop"
-            st.image(create_animation_preview(concept), 
-                    caption="This is similar to what your animation would look like", 
-                    use_container_width=True)
+        with st.container():
+            st.markdown("<div class='story-box'>", unsafe_allow_html=True)
+            st.header("🎓 Learn Programming Concepts")
             
-            # Code explanation section
-            if st.session_state.concept_explanation:
-                st.subheader("🎓 Code Concept Explanation")
-                concept = st.session_state.concepts[0] if st.session_state.concepts else "loop"
-                details = CONCEPTS.get(concept, {})
+            if st.session_state.concepts:
+                main_concept = st.session_state.concepts[0]
+                concept_info = CONCEPTS.get(main_concept, {})
                 
+                # Concept explanation
                 st.markdown(f"""
                 <div class="explanation-box">
                     <div class="explanation-header">
-                        <span style="font-size:36px;">{details.get('emoji', '✨')}</span>
-                        <h3>Understanding the Code</h3>
+                        <span style="font-size:36px;">{concept_info.get('emoji', '✨')}</span>
+                        <h2>Understanding {concept_info.get('name', 'Programming')}</h2>
+                    </div>
+                    <p>{concept_info.get('explanation', 'This is a fundamental programming concept.')}</p>
+                    
+                    <h3>How It Works in Code</h3>
+                    <div class="code-block">
+                        {concept_info.get('example', 'Example code will appear here')}
                     </div>
-                    {st.session_state.concept_explanation}
+                    
+                    <h3>Real-World Example</h3>
+                    <p>In your story: "{st.session_state.story[:100]}..."</p>
+                    
+                    <h3>How You Used It in the Game</h3>
+                    <p>{st.session_state.concept_explanation.split('In your game, you\'ll:')[-1]}</p>
                 </div>
                 """, unsafe_allow_html=True)
                 
                 # Play explanation audio
                 if st.session_state.explanation_audio:
-                    explanation_bytes = open(st.session_state.explanation_audio, 'rb').read()
-                    st.audio(explanation_bytes, format='audio/mp3')
-                    
-                    if st.button("▶️ Play Code Explanation", use_container_width=True):
-                        autoplay_audio(st.session_state.explanation_audio)
-        else:
-            st.warning("No code generated yet!")
-        
-        if st.button("✨ Create Another Story!", use_container_width=True):
+                    st.subheader("🔊 Full Audio Explanation")
+                    if st.button("▶️ Play Full Explanation", use_container_width=True):
+                        if play_audio(st.session_state.explanation_audio):
+                            st.success("Playing audio explanation...")
+                        else:
+                            autoplay_audio(st.session_state.explanation_audio)
+            else:
+                st.warning("No concepts detected in your story!")
+            
+            st.markdown("</div>", unsafe_allow_html=True)
+    
+    # Code tab
+    elif st.session_state.active_tab == "code":
+        if not st.session_state.story:
+            st.warning("Please create a story first!")
             st.session_state.active_tab = "story"
-            st.session_state.story = ""
             st.rerun()
+        
+        with st.container():
+            st.markdown("<div class='story-box'>", unsafe_allow_html=True)
+            st.header("💻 See the Code Behind Your Game")
+            
+            if st.session_state.concepts:
+                main_concept = st.session_state.concepts[0]
+                concept_info = CONCEPTS.get(main_concept, {})
+                
+                st.subheader(f"{concept_info.get('name', 'Programming')} Concept in Action")
+                
+                st.markdown("""
+                <div class="code-block">
+                    # Python code for your game
+                    import game_engine
+                    
+                    def main():
+                        # Initialize game based on player's story
+                        game = game_engine.create_game(story)
+                        
+                        # Game loop
+                        while game.running:
+                            # Handle player input
+                            handle_events()
+                            
+                            # Update game state
+                            update_game()
+                            
+                            # Render everything
+                            render_screen()
+                            
+                        # Game completion
+                        show_results()
+                </div>
+                """, unsafe_allow_html=True)
+                
+                st.markdown(f"""
+                <h3>How the {concept_info.get('name', 'Programming')} Concept is Implemented</h3>
+                <div class="code-block">
+                    # {concept_info.get('name', 'Programming')} implementation
+                    {concept_info.get('example', 'Example code will appear here')}
+                </div>
+                """, unsafe_allow_html=True)
+                
+                st.info("💡 To create games like this:")
+                st.markdown("""
+                1. Learn Python programming
+                2. Explore game libraries like Pygame
+                3. Practice by modifying simple games
+                4. Join coding communities for kids
+                """)
+                
+                st.markdown("""
+                <div class="explanation-box">
+                    <h3>Next Steps in Your Coding Journey</h3>
+                    <p>You've taken your first step in game development! To continue:</p>
+                    <ul>
+                        <li>Try creating your own simple game with Scratch</li>
+                        <li>Explore Python game tutorials online</li>
+                        <li>Join a coding club at your school</li>
+                        <li>Attend a game development workshop</li>
+                    </ul>
+                </div>
+                """, unsafe_allow_html=True)
+            else:
+                st.warning("No concepts detected in your story!")
+            
+            st.markdown("</div>", unsafe_allow_html=True)
 
 if __name__ == "__main__":
     main()