Update app.py

app.py

@@ -1,23 +1,26 @@
-# app.py - StoryCoder: Learn Coding Through Games & Stories
+# app.py - Learn Python Through Interactive Games
 import streamlit as st
 import os
 import time
 import random
-import base64
-from PIL import Image
-import io
-import requests
-import json
-import pygame
-import gtts
-from io import BytesIO
 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
+import json
+import requests
+from io import BytesIO
+import pygame
+import sys
+import math
+from PIL import Image, ImageDraw
+import io
 
 # Configure Streamlit page
 st.set_page_config(
-    page_title="StoryCoder - Learn Coding Through Games",
+    page_title="StoryCoder - Learn Python Through Games",
     page_icon="🎮",
     layout="wide",
     initial_sidebar_state="expanded"
@@ -30,53 +33,52 @@ st.markdown("""
     
     :root {
         --primary: #7E57C2;
-        --secondary: #9575CD;
+        --secondary: #B39DDB;
         --accent: #D1C4E9;
         --dark: #4527A0;
         --light: #F3E5F5;
-        --grey: #ECEFF1;
+        --neutral: #E0E0E0;
     }
     
     body {
-        background: linear-gradient(135deg, var(--grey) 0%, var(--light) 100%);
+        background: linear-gradient(135deg, var(--light) 0%, #EDE7F6 100%);
         font-family: 'Comic Neue', cursive;
+        color: #333;
     }
     
     .stApp {
         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(123, 31, 162, 0.15);
+        box-shadow: 0 8px 16px rgba(69, 39, 160, 0.15);
         border: 3px solid var(--accent);
         margin-bottom: 25px;
-        background: linear-gradient(145deg, #ffffff, var(--grey));
+    }
+    
+    .header {
+        color: var(--dark);
+        text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
+        font-family: 'Fredoka One', cursive;
     }
     
     .concept-card {
-        background: linear-gradient(145deg, #ffffff, var(--light));
+        background: linear-gradient(145deg, #ffffff, #f5f5f5);
         border-radius: 15px;
-        padding: 15px;
-        margin: 10px 0;
-        border-left: 5px solid var(--secondary);
-        box-shadow: 0 4px 8px rgba(0,0,0,0.05);
+        padding: 20px;
+        margin: 15px 0;
+        border-left: 5px solid var(--primary);
+        box-shadow: 0 4px 12px rgba(126, 87, 194, 0.1);
     }
     
     .stButton>button {
         background: linear-gradient(45deg, var(--primary), var(--secondary));
         color: white;
-        border-radius: 12px;
-        padding: 10px 24px;
+        border-radius: 20px;
+        padding: 12px 28px;
         font-weight: bold;
         font-size: 18px;
         border: none;
@@ -86,117 +88,136 @@ st.markdown("""
     
     .stButton>button:hover {
         transform: scale(1.05);
-        box-shadow: 0 6px 12px rgba(123, 31, 162, 0.25);
+        box-shadow: 0 6px 12px rgba(126, 87, 194, 0.2);
     }
     
-    .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;
+    .stTextInput>div>div>input {
+        border-radius: 15px;
+        padding: 14px;
+        border: 2px solid var(--accent);
+        font-size: 16px;
     }
     
-    .game-board {
-        display: grid;
-        grid-template-columns: repeat(5, 1fr);
+    .tabs {
+        display: flex;
         gap: 10px;
-        margin: 20px auto;
-        max-width: 500px;
+        margin-bottom: 20px;
+        overflow-x: auto;
     }
     
-    .game-cell {
-        background: white;
-        border-radius: 10px;
-        height: 80px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 24px;
+    .tab {
+        padding: 12px 24px;
+        background-color: var(--accent);
+        border-radius: 15px;
         cursor: pointer;
-        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+        font-weight: bold;
+        white-space: nowrap;
+        font-family: 'Fredoka One', cursive;
         transition: all 0.3s;
     }
     
-    .game-cell:hover {
-        transform: translateY(-5px);
-        box-shadow: 0 6px 12px rgba(0,0,0,0.15);
+    .tab:hover {
+        background-color: var(--secondary);
     }
     
-    .game-cell.selected {
-        background: var(--secondary);
+    .tab.active {
+        background-color: var(--primary);
         color: white;
+        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
     }
     
-    .explanation-box {
-        background: linear-gradient(135deg, var(--light), #E1BEE7);
+    @media (max-width: 768px) {
+        .tabs {
+            flex-wrap: wrap;
+        }
+    }
+    
+    .game-container {
+        background-color: #f9f5ff;
+        border-radius: 20px;
+        padding: 25px;
+        box-shadow: 0 8px 32px rgba(126, 87, 194, 0.15);
+        margin-bottom: 30px;
+        position: relative;
+        overflow: hidden;
+        border: 3px solid var(--accent);
+    }
+    
+    .game-canvas {
         border-radius: 15px;
-        padding: 20px;
+        overflow: hidden;
+        margin: 0 auto;
+        display: block;
+        max-width: 100%;
+        background: #fff;
+        box-shadow: 0 6px 16px rgba(0,0,0,0.1);
+    }
+    
+    .character {
+        font-size: 48px;
+        text-align: center;
+        margin: 10px 0;
+    }
+    
+    .audio-player {
+        width: 100%;
         margin: 20px 0;
+        border-radius: 20px;
+        background: #f0f8ff;
+        padding: 15px;
+    }
+    
+    .game-preview {
+        max-width: 100%;
+        border-radius: 15px;
+        box-shadow: 0 8px 24px rgba(0,0,0,0.15);
+        border: 3px solid var(--accent);
+    }
+    
+    .explanation-box {
+        background: linear-gradient(135deg, #f3e5f5, #e8daf0);
+        border-radius: 20px;
+        padding: 25px;
+        margin: 25px 0;
         border-left: 5px solid var(--primary);
-        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+        box-shadow: 0 6px 20px rgba(0,0,0,0.08);
     }
     
     .explanation-header {
         color: var(--dark);
         display: flex;
         align-items: center;
-        gap: 10px;
-        font-family: 'Fredoka One', cursive;
+        gap: 15px;
+        margin-bottom: 15px;
     }
     
     .code-block {
-        background: #2c3e50;
-        color: #ecf0f1;
-        padding: 15px;
+        background: #2d2d2d;
+        color: #f8f8f2;
         border-radius: 10px;
+        padding: 15px;
         font-family: 'Courier New', monospace;
         margin: 15px 0;
         overflow-x: auto;
     }
     
-    .tabs {
-        display: flex;
-        gap: 10px;
-        margin-bottom: 20px;
-        overflow-x: auto;
-    }
-    
-    .tab {
-        padding: 10px 20px;
-        background-color: var(--accent);
-        border-radius: 10px;
-        cursor: pointer;
+    .concept-highlight {
+        background: linear-gradient(120deg, #e0d6f0, #d1c4e9);
+        padding: 5px 10px;
+        border-radius: 8px;
         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);
-        }
+        color: var(--dark);
     }
 </style>
 """, unsafe_allow_html=True)
 
-# Concept database with detailed explanations
+# Concept database
 CONCEPTS = {
     "loop": {
         "name": "Loop",
         "emoji": "🔄",
         "description": "Loops repeat actions multiple times",
-        "example": "for i in range(5):\n    print('Hello!')\n    jump()",
+        "example": "for i in range(5):\n    print('Hello!')",
         "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."
     },
@@ -204,82 +225,68 @@ CONCEPTS = {
         "name": "Conditional",
         "emoji": "❓",
         "description": "Conditionals make decisions in code",
-        "example": "if is_sunny:\n    play_outside()\nelse:\n    stay_inside()",
-        "color": "#9575CD",
+        "example": "if sunny:\n    go_outside()\nelse:\n    stay_inside()",
+        "color": "#5E35B1",
         "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 cast_spell():\n    print('Abracadabra!')\n    create_magic()\n\ncast_spell()",
-        "color": "#D1C4E9",
+        "example": "def greet(name):\n    print(f'Hello {name}!')",
+        "color": "#4527A0",
         "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_name = 'Wizard'",
-        "color": "#B39DDB",
+        "example": "score = 10\nplayer = 'Alex'",
+        "color": "#7B1FA2",
         "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": "#6A1B9A",
+        "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."
     }
 }
 
-# Game configurations
-GAME_CONFIGS = {
+# Game templates
+GAME_TEMPLATES = {
     "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": "🔄"
+        "name": "Loop Adventure",
+        "description": "Help the character repeat actions multiple times to achieve a goal",
+        "color": "#7E57C2",
+        "instructions": "Press the action button multiple times to complete the task!"
     },
     "conditional": {
-        "title": "Decision Maze",
-        "description": "Guide the robot through the maze by making choices!",
-        "instructions": "Choose the correct path based on the conditions.",
-        "emoji": "❓"
+        "name": "Decision Quest",
+        "description": "Make choices based on conditions to progress through the story",
+        "color": "#5E35B1",
+        "instructions": "Choose the correct path based on the conditions you see!"
     },
     "function": {
-        "title": "Magic Function",
-        "description": "Create spells by defining functions!",
-        "instructions": "Combine magic elements to create powerful functions.",
-        "emoji": "✨"
+        "name": "Magic Function",
+        "description": "Create and use reusable actions to solve challenges",
+        "color": "#4527A0",
+        "instructions": "Create your function then use it whenever needed!"
     }
 }
 
-# Initialize pygame for audio
-pygame.mixer.init()
-
-def text_to_speech(text, filename="explanation.mp3"):
-    """Convert text to speech using gTTS"""
-    try:
-        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 play_audio(file_path):
-    """Play audio using pygame"""
-    try:
-        pygame.mixer.music.load(file_path)
-        pygame.mixer.music.play()
-        return True
-    except:
-        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)
+# Game assets
+GAME_ASSETS = {
+    "player": "👦",
+    "obstacle": "🌵",
+    "goal": "🏆",
+    "enemy": "🐉",
+    "item": "⭐",
+    "path": "🟩",
+    "wall": "⬛"
+}
 
 def analyze_story(story):
     """Analyze story and identify programming concepts"""
@@ -291,7 +298,7 @@ def analyze_story(story):
         detected_concepts.append("loop")
     
     # Check for conditionals
-    if any(word in story_lower for word in ["if", "when", "unless", "whether", "choose"]):
+    if any(word in story_lower for word in ["if", "when", "unless", "whether"]):
         detected_concepts.append("conditional")
     
     # Check for functions
@@ -299,196 +306,310 @@ def analyze_story(story):
         detected_concepts.append("function")
     
     # Check for variables
-    if any(word in story_lower for word in ["is", "has", "set to", "value", "store"]):
+    if any(word in story_lower for word in ["is", "has", "set to", "value"]):
         detected_concepts.append("variable")
     
+    # Check for lists
+    if any(word in story_lower for word in ["and", "many", "several", "collection", "items"]):
+        detected_concepts.append("list")
+    
     return list(set(detected_concepts))
 
-def create_story_image(story, concept):
-    """Create a story image using DiceBear avatars"""
-    try:
-        # 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)
+def extract_count_from_story(story):
+    """Extract a number from the story to use in games"""
+    for word in story.split():
+        if word.isdigit():
+            return min(int(word), 10)
+    return 3  # Default value
+
+def create_game_preview(concept):
+    """Create a preview image for the game"""
+    width, height = 400, 300
+    img = Image.new('RGB', (width, height), color=(243, 229, 245))
+    draw = ImageDraw.Draw(img)
+    
+    # Draw game elements based on concept
+    if concept == "loop":
+        # Draw a path with repeated obstacles
+        for i in range(5):
+            x = 80 + i * 60
+            y = 150
+            draw.rectangle([x, y, x+30, y+30], fill=(126, 87, 194))
+            draw.text((x+10, y+5), GAME_ASSETS["obstacle"], fill=(255, 255, 255), font_size=20)
         
-        if response.status_code == 200:
-            return BytesIO(response.content)
-        return None
-    except:
+        # Draw player and goal
+        draw.text((50, 150), GAME_ASSETS["player"], fill=(69, 39, 160), font_size=30)
+        draw.text((350, 150), GAME_ASSETS["goal"], fill=(255, 193, 7), font_size=30)
+        
+        # Draw title
+        draw.text((100, 50), "Loop Adventure", fill=(69, 39, 160), font_size=25)
+    
+    elif concept == "conditional":
+        # Draw two paths
+        draw.rectangle([100, 100, 180, 180], fill=(93, 64, 155))
+        draw.rectangle([220, 100, 300, 180], fill=(93, 64, 155))
+        
+        # Draw weather symbols
+        draw.text((130, 110), "☀️", fill=(255, 255, 0), font_size=30)
+        draw.text((250, 110), "🌧️", fill=(100, 181, 246), font_size=30)
+        
+        # Draw items
+        draw.text((130, 150), "😎", fill=(255, 255, 255), font_size=30)
+        draw.text((250, 150), "☂️", fill=(255, 255, 255), font_size=30)
+        
+        # Draw title
+        draw.text((120, 50), "Decision Quest", fill=(69, 39, 160), font_size=25)
+    
+    else:  # function
+        # Draw magic wand and effects
+        draw.text((100, 150), "🪄", fill=(126, 87, 194), font_size=40)
+        
+        # Draw magic effects
+        for i in range(3):
+            x = 180 + i * 60
+            y = 150
+            draw.ellipse([x, y, x+40, y+40], fill=(179, 157, 219))
+            draw.text((x+10, y+5), "✨", fill=(255, 255, 255), font_size=30)
+        
+        # Draw title
+        draw.text((130, 50), "Magic Function", fill=(69, 39, 160), font_size=25)
+    
+    # Convert to bytes
+    buf = io.BytesIO()
+    img.save(buf, format='PNG')
+    buf.seek(0)
+    return buf
+
+def text_to_speech(text, filename="explanation.wav"):
+    """Convert text to speech using gTTS"""
+    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 create_concept_explanation(story, concept):
-    """Create a detailed explanation of the programming concept"""
+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/wav;base64,{b64}" type="audio/wav">
+            </audio>
+            """
+        st.markdown(md, unsafe_allow_html=True)
+
+def generate_concept_explanation(story, concept):
+    """Generate a detailed explanation of the programming concept with examples"""
     concept_info = CONCEPTS.get(concept, {})
+    count = extract_count_from_story(story)
     
     explanation = f"""
-    ✨ Let's learn about {concept_info.get('name', 'programming')} through your story!
+    Let me explain what's happening in your story and how it relates to programming!
     
     Your story: "{story[:100]}..."
     
-    This story shows the concept of: {concept_info.get('name', 'Programming')}
+    This story demonstrates the programming concept of: <span class="concept-highlight">{concept_info.get('name', 'Programming')}</span>
     
     {concept_info.get('explanation', 'This is a fundamental programming concept.')}
     
-    In programming, we use {concept_info.get('name', 'this concept')} like this:
-    ```
-    {concept_info.get('example', 'Example code will appear here')}
-    ```
+    In your game:
+    - You'll see how {concept_info.get('name', 'this concept')} works in action
+    - The game is designed around the idea from your story
+    
+    How it works in code:
+    We use {concept_info.get('name', 'this concept')} like this:
+    """
+    
+    # Add code example
+    explanation += f"""<div class="code-block">{concept_info.get('example', 'Example code will appear here')}</div>"""
     
-    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
+    explanation += f"""
+    In real life, you might use this concept when:
+    - Creating games with repeating actions (loops)
+    - Making decisions in apps (conditionals)
+    - Building reusable components (functions)
     
-    Ready to play and learn? Let's go!
+    As you play the game, think about how the concept is being used!
     """
     
     return explanation
 
-def create_game_state(concept):
-    """Initialize game state based on concept"""
-    game_state = {
-        "concept": concept,
-        "score": 0,
-        "level": 1,
-        "completed": False
-    }
+def create_loop_game(story):
+    """Create a loop-based game"""
+    actions_needed = extract_count_from_story(story)
     
-    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
+    # Initialize session state for game
+    if 'loop_count' not in st.session_state:
+        st.session_state.loop_count = 0
+        st.session_state.game_complete = False
+    
+    # Game layout
+    st.subheader("🔄 Loop Adventure Game")
+    st.write(f"**Story:** {story[:100]}{'...' if len(story) > 100 else ''}")
+    st.write("**Instructions:** Press the action button repeatedly to complete the task!")
+    
+    # Create game grid
+    grid_html = "<div style='display: flex; justify-content: center; margin: 20px 0;'>"
+    
+    # Player position
+    player_pos = min(st.session_state.loop_count, actions_needed)
+    player_offset = player_pos * (100 // actions_needed)
+    
+    # Draw game path
+    grid_html += f"<div style='position: relative; width: 400px; height: 100px; background: #EDE7F6; border-radius: 10px; border: 2px solid {CONCEPTS['loop']['color']}'>"
+    
+    # Draw path
+    grid_html += f"<div style='position: absolute; top: 40px; left: 0; width: 100%; height: 20px; background: {CONCEPTS['loop']['color']}; border-radius: 10px;'></div>"
+    
+    # Draw obstacles
+    for i in range(actions_needed):
+        grid_html += f"<div style='position: absolute; top: 30px; left: {i * (400 // actions_needed)}px; font-size: 24px;'>🌵</div>"
+    
+    # Draw player
+    grid_html += f"<div style='position: absolute; top: 20px; left: {player_offset}px; font-size: 36px;'>👦</div>"
+    
+    # Draw goal
+    grid_html += f"<div style='position: absolute; top: 20px; left: 380px; font-size: 36px;'>🏆</div>"
+    
+    grid_html += "</div></div>"
+    
+    st.markdown(grid_html, unsafe_allow_html=True)
+    
+    # Action button
+    if st.session_state.game_complete:
+        st.success("🎉 You completed the game! Great job using loops!")
+        if st.button("Play Again", key="loop_restart"):
+            st.session_state.loop_count = 0
+            st.session_state.game_complete = False
+            st.rerun()
+    else:
+        if st.button(f"Perform Action ({st.session_state.loop_count}/{actions_needed})", key="loop_action"):
+            st.session_state.loop_count += 1
+            if st.session_state.loop_count >= actions_needed:
+                st.session_state.game_complete = True
+            st.rerun()
 
-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()
+def create_conditional_game(story):
+    """Create a conditional-based game"""
+    # Initialize session state for game
+    if 'conditional_choice' not in st.session_state:
+        st.session_state.conditional_choice = None
+        st.session_state.game_complete = False
+        st.session_state.weather = random.choice(["sunny", "rainy"])
+    
+    # Game layout
+    st.subheader("❓ Decision Quest Game")
+    st.write(f"**Story:** {story[:100]}{'...' if len(story) > 100 else ''}")
+    st.write("**Instructions:** Choose the correct item based on the weather condition!")
+    
+    # Display weather
+    col1, col2 = st.columns([1, 2])
+    with col1:
+        st.subheader("Current Weather:")
+        if st.session_state.weather == "sunny":
+            st.markdown("<div style='font-size: 48px; text-align: center;'>☀️</div>", unsafe_allow_html=True)
+            st.write("It's a sunny day!")
+        else:
+            st.markdown("<div style='font-size: 48px; text-align: center;'>🌧️</div>", unsafe_allow_html=True)
+            st.write("It's a rainy day!")
+    
+    with col2:
+        st.subheader("Choose Your Item:")
         
-        # 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)
+        if not st.session_state.game_complete:
+            if st.button("😎 Sunglasses", key="sunglasses", use_container_width=True):
+                st.session_state.conditional_choice = "sunglasses"
+                st.session_state.game_complete = True
+                st.rerun()
             
-            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)
+            if st.button("☂️ Umbrella", key="umbrella", use_container_width=True):
+                st.session_state.conditional_choice = "umbrella"
+                st.session_state.game_complete = True
+                st.rerun()
+        else:
+            if st.session_state.weather == "sunny" and st.session_state.conditional_choice == "sunglasses":
+                st.success("🎉 Correct choice! You wore sunglasses on a sunny day!")
+            elif st.session_state.weather == "rainy" and st.session_state.conditional_choice == "umbrella":
+                st.success("🎉 Correct choice! You took an umbrella on a rainy day!")
+            else:
+                st.error("❌ Oops! That wasn't the right choice for this weather.")
             
-            # 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", key="conditional_restart"):
+                st.session_state.conditional_choice = None
+                st.session_state.game_complete = False
+                st.session_state.weather = random.choice(["sunny", "rainy"])
+                st.rerun()
+
+def create_function_game(story):
+    """Create a function-based game"""
+    actions_needed = extract_count_from_story(story)
+    
+    # Initialize session state for game
+    if 'function_created' not in st.session_state:
+        st.session_state.function_created = False
+        st.session_state.function_used = 0
+        st.session_state.game_complete = False
+    
+    # Game layout
+    st.subheader("✨ Magic Function Game")
+    st.write(f"**Story:** {story[:100]}{'...' if len(story) > 100 else ''}")
+    st.write("**Instructions:** Create your function then use it to solve the challenge!")
+    
+    # Game area
+    col1, col2 = st.columns(2)
+    
+    with col1:
+        st.subheader("Your Function")
+        if not st.session_state.function_created:
+            st.write("Create your magic function:")
+            if st.button("✨ Create Magic Function", key="create_func", use_container_width=True):
+                st.session_state.function_created = True
+                st.rerun()
+        else:
+            st.success("Function created!")
+            st.code("def magic_spell():\n    print('✨ Magic happens!')", language="python")
+    
+    with col2:
+        st.subheader("Cast Your Spell")
+        if st.session_state.function_created:
+            st.write(f"Use your function to complete the task ({st.session_state.function_used}/{actions_needed}):")
+            if st.button("🔮 Cast Spell", key="cast_spell", use_container_width=True):
+                st.session_state.function_used += 1
+                if st.session_state.function_used >= actions_needed:
+                    st.session_state.game_complete = True
+                st.rerun()
             
-            if st.button("Play Again", use_container_width=True):
-                game_state.update(create_game_state(concept))
-                game_state["level"] += 1
-        
-        return game_state
+            # Visual effects
+            effect_html = "<div style='text-align: center; margin-top: 20px;'>"
+            for i in range(st.session_state.function_used):
+                effect_html += "<span style='font-size: 36px; margin: 5px;'>✨</span>"
+            effect_html += "</div>"
+            st.markdown(effect_html, unsafe_allow_html=True)
+    
+    if st.session_state.game_complete:
+        st.success("🎉 You completed the game by reusing your function! Great job!")
+        if st.button("Play Again", key="function_restart"):
+            st.session_state.function_created = False
+            st.session_state.function_used = 0
+            st.session_state.game_complete = False
+            st.rerun()
 
 def main():
     """Main application function"""
-    st.title("🎮 StoryCoder: Learn Coding Through Games & Stories!")
-    st.subheader("Create a story, play a game, and discover coding secrets with voice explanations!")
+    st.title("🎮 StoryCoder - Learn Python Through Games!")
+    st.subheader("Turn your story into a game and discover coding secrets with interactive gameplay!")
     
     # 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 '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 'game_type' not in st.session_state:
+        st.session_state.game_type = None
     if 'concept_explanation' not in st.session_state:
         st.session_state.concept_explanation = ""
     if 'audio_file' not in st.session_state:
@@ -501,34 +622,38 @@ def main():
     # Create tabs
     tabs = st.empty()
     tab_cols = st.columns(5)
-    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()
+    with tab_cols[0]:
+        if st.button("📖 Create Story"):
+            st.session_state.active_tab = "story"
+    with tab_cols[1]:
+        if st.button("🎮 Play Game"):
+            st.session_state.active_tab = "game"
+    with tab_cols[2]:
+        if st.button("🔍 Concepts"):
+            st.session_state.active_tab = "concepts"
+    with tab_cols[3]:
+        if st.button("💡 Explain"):
+            st.session_state.active_tab = "explain"
+    with tab_cols[4]:
+        if st.button("🔄 Reset"):
+            st.session_state.story = ""
+            st.session_state.concepts = []
+            st.session_state.game_type = None
+            st.session_state.concept_explanation = ""
+            st.session_state.audio_file = None
+            st.session_state.explanation_audio = None
+            st.session_state.active_tab = "story"
     
     # 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-3 sentences) and I'll turn it into a coding game!")
+            st.write("Write a short story (2-5 sentences) and I'll turn it into an interactive game!")
             
             story = st.text_area(
                 "Your story:",
-                height=150,
-                placeholder="Once upon a time, a rabbit hopped 3 times to reach a magic carrot...",
+                height=200,
+                placeholder="Once upon a time, a rabbit hopped 3 times to reach a carrot...",
                 value=st.session_state.story,
                 key="story_input"
             )
@@ -541,22 +666,26 @@ def main():
                     with st.spinner("🧠 Analyzing your story for coding concepts..."):
                         st.session_state.concepts = analyze_story(story)
                     
-                    # Get the main concept
-                    main_concept = st.session_state.concepts[0] if st.session_state.concepts else "loop"
-                    
-                    with st.spinner("🎨 Creating story image..."):
-                        st.session_state.story_image = create_story_image(story, main_concept)
+                    if not st.session_state.concepts:
+                        st.warning("No coding concepts detected! Using a default game.")
+                        st.session_state.game_type = "loop"
+                    else:
+                        st.session_state.game_type = st.session_state.concepts[0]
                     
-                    with st.spinner("🎮 Creating your game..."):
-                        st.session_state.game_state = create_game_state(main_concept)
+                    with st.spinner("🎮 Creating your interactive game..."):
+                        # Just a delay for effect
+                        time.sleep(1)
                     
                     with st.spinner("🧠 Generating concept explanation..."):
-                        st.session_state.concept_explanation = create_concept_explanation(story, main_concept)
+                        st.session_state.concept_explanation = generate_concept_explanation(
+                            story, 
+                            st.session_state.game_type
+                        )
                     
-                    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
+                    with st.spinner("🔊 Creating audio narration..."):
+                        st.session_state.audio_file = text_to_speech(
+                            f"Your story: {story}. Let's play a game to learn programming!"
+                        )
                     
                     st.session_state.active_tab = "game"
                     st.rerun()
@@ -567,177 +696,172 @@ def main():
             with col1:
                 st.caption("Loop Example")
                 st.code('"A dragon breathes fire 5 times at the castle"', language="text")
-                st.image("https://api.dicebear.com/7.x/lorelei/png?seed=dragon", 
-                         use_column_width=True, 
-                         caption="Dragon Story Character")
+                st.image(create_game_preview("loop"), 
+                         use_container_width=True, 
+                         caption="Loop Adventure Game Preview")
             with col2:
                 st.caption("Conditional Example")
                 st.code('"If it rains, the cat stays inside, else it goes out"', language="text")
-                st.image("https://api.dicebear.com/7.x/lorelei/png?seed=cat", 
-                         use_column_width=True, 
-                         caption="Cat Story Character")
+                st.image(create_game_preview("conditional"), 
+                         use_container_width=True, 
+                         caption="Decision Quest Game Preview")
             with col3:
                 st.caption("Function Example")
                 st.code('"A wizard casts a spell to make flowers grow"', language="text")
-                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)
+                st.image(create_game_preview("function"), 
+                         use_container_width=True, 
+                         caption="Magic Function Game Preview")
     
     # Game tab
     elif st.session_state.active_tab == "game":
+        st.header(f"🎮 Your Story Game: {GAME_TEMPLATES.get(st.session_state.game_type, {}).get('name', 'Coding Adventure')}")
+        
         if not st.session_state.story:
             st.warning("Please create a story first!")
             st.session_state.active_tab = "story"
             st.rerun()
         
-        with st.container():
-            st.markdown("<div class='story-box'>", unsafe_allow_html=True)
-            st.header("🎮 Your Coding Game")
+        # Display game based on concept
+        if st.session_state.game_type == "loop":
+            create_loop_game(st.session_state.story)
+        elif st.session_state.game_type == "conditional":
+            create_conditional_game(st.session_state.story)
+        elif st.session_state.game_type == "function":
+            create_function_game(st.session_state.story)
+        else:
+            # Default to loop game
+            create_loop_game(st.session_state.story)
+        
+        # Concept explanation section
+        if st.session_state.concept_explanation:
+            st.subheader("🎓 What You're Learning")
+            concept = st.session_state.game_type
+            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>Learning {details.get('name', 'Programming')} Concept</h3>
+                </div>
+                <p>{st.session_state.concept_explanation}</p>
+            </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)
+            # Generate explanation audio if not already generated
+            if not st.session_state.explanation_audio:
+                with st.spinner("🔊 Creating concept explanation audio..."):
+                    st.session_state.explanation_audio = text_to_speech(
+                        st.session_state.concept_explanation.replace('<span class="concept-highlight">', '')
+                                                             .replace('</span>', '')
+                                                             .replace('<div class="code-block">', '')
+                                                             .replace('</div>', ''),
+                        "concept_explanation.wav"
+                    )
             
-            # Play explanation audio
             if st.session_state.explanation_audio:
-                st.subheader("🔊 Concept Explanation")
+                st.markdown("### 🔊 Concept Explanation")
+                with open(st.session_state.explanation_audio, "rb") as f:
+                    audio_bytes = f.read()
+                st.audio(audio_bytes, format='audio/wav')
+                
                 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)
-            
-            st.markdown("</div>", unsafe_allow_html=True)
+                    autoplay_audio(st.session_state.explanation_audio)
     
-    # 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()
+    # Concepts tab
+    elif st.session_state.active_tab == "concepts":
+        st.header("🔍 Coding Concepts in Your Story")
         
-        with st.container():
-            st.markdown("<div class='story-box'>", unsafe_allow_html=True)
-            st.header("🎓 Learn Programming Concepts")
-            
-            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;">{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')}
+        if not st.session_state.concepts:
+            st.warning("No concepts detected in your story! Try adding words like '3 times', 'if', or 'make'.")
+        else:
+            st.subheader("We used these programming concepts in your game:")
+            for concept in st.session_state.concepts:
+                if concept in CONCEPTS:
+                    details = CONCEPTS[concept]
+                    st.markdown(f"""
+                    <div class="concept-card">
+                        <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>
+                        <div class="code-block">{details['example']}</div>
+                        <p><strong>Explanation:</strong> {details.get('explanation', 'Learn how this concept works!')}</p>
                     </div>
-                    
-                    <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:
-                    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!")
+                    """, unsafe_allow_html=True)
+        
+        # Play explanation if available
+        if st.session_state.explanation_audio:
+            st.subheader("🔊 Concept Explanation")
+            with open(st.session_state.explanation_audio, "rb") as f:
+                audio_bytes = f.read()
+            st.audio(audio_bytes, format='audio/wav')
             
-            st.markdown("</div>", unsafe_allow_html=True)
+            if st.button("▶️ Play Full Explanation", use_container_width=True):
+                autoplay_audio(st.session_state.explanation_audio)
     
-    # Code tab
-    elif st.session_state.active_tab == "code":
-        if not st.session_state.story:
-            st.warning("Please create a story first!")
+    # Explanation tab
+    elif st.session_state.active_tab == "explain":
+        st.header("💡 Interactive Concept Explanation")
+        
+        if not st.session_state.concept_explanation:
+            st.warning("Please create a story first to generate explanations!")
             st.session_state.active_tab = "story"
             st.rerun()
         
-        with st.container():
-            st.markdown("<div class='story-box'>", unsafe_allow_html=True)
-            st.header("💻 See the Code Behind Your Game")
+        st.subheader("🧠 Deep Dive into Programming Concepts")
+        
+        if st.session_state.concepts:
+            concept = st.session_state.concepts[0]
+            details = CONCEPTS.get(concept, {})
             
-            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>
+            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>
-                """, unsafe_allow_html=True)
+                <p>{st.session_state.concept_explanation}</p>
+            </div>
+            """, unsafe_allow_html=True)
+            
+            # Visual example
+            st.subheader("🎮 How It Works in Your Game")
+            if concept == "loop":
+                st.image("https://media.giphy.com/media/3o7abKhOpu0NwenH3O/giphy.gif", 
+                         use_column_width=True, caption="Loop Concept in Action")
+            elif concept == "conditional":
+                st.image("https://media.giphy.com/media/l0HlG8vJXW0X5yX4s/giphy.gif", 
+                         use_column_width=True, caption="Conditional Concept in Action")
+            else:
+                st.image("https://media.giphy.com/media/3o7TKsQ8UQ4l4LhGz6/giphy.gif", 
+                         use_column_width=True, caption="Function Concept in Action")
+            
+            # Real-world examples
+            st.subheader("🌍 Real-World Examples")
+            if concept == "loop":
+                st.write("- Video games that have repeating levels or enemies")
+                st.write("- Apps that process multiple items (like photos in a gallery)")
+                st.write("- Animations that need to run continuously")
+            elif concept == "conditional":
+                st.write("- Weather apps that show different outfits based on temperature")
+                st.write("- Games that change difficulty based on player skill")
+                st.write("- Apps that display different content based on user preferences")
             else:
-                st.warning("No concepts detected in your story!")
+                st.write("- Calculator apps with reusable operations")
+                st.write("- Games with special moves that can be used repeatedly")
+                st.write("- Websites with reusable components like buttons and menus")
             
-            st.markdown("</div>", unsafe_allow_html=True)
+            # Play explanation audio
+            if st.session_state.explanation_audio:
+                st.subheader("🔊 Listen to the Explanation")
+                with open(st.session_state.explanation_audio, "rb") as f:
+                    audio_bytes = f.read()
+                st.audio(audio_bytes, format='audio/wav')
+                
+                if st.button("▶️ Play Explanation", use_container_width=True):
+                    autoplay_audio(st.session_state.explanation_audio)
 
 if __name__ == "__main__":
     main()