Update app.py

app.py

@@ -1,4 +1,4 @@
-# app.py - Ultimate Enhanced Version
+# app.py - Enhanced Version with New Design
 import streamlit as st
 import random
 import re
@@ -10,12 +10,6 @@ from PIL import Image
 import io
 import matplotlib.pyplot as plt
 import numpy as np
-from groq import Groq
-import pygame
-import sys
-from io import StringIO
-import contextlib
-import traceback
 
 # Configure Streamlit page
 st.set_page_config(
@@ -25,22 +19,22 @@ st.set_page_config(
     initial_sidebar_state="expanded"
 )
 
-# Modern gradient background with animation
+# Custom CSS with light purple background and wave design
 st.markdown("""
 <style>
     @import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Comic+Neue:wght@700&display=swap');
     
     :root {
-        --primary: #6A67CE;
-        --secondary: #FF7C7C;
-        --accent: #FDD85D;
-        --dark: #2D3250;
-        --light: #F0F0F0;
-        --game-blue: #1A8CD8;
-        --game-purple: #9B5DE5;
-        --gradient-start: #1a2a6c;
-        --gradient-mid: #b21f1f;
-        --gradient-end: #1a2a6c;
+        --primary: #8A2BE2;
+        --secondary: #9370DB;
+        --accent: #FFD700;
+        --dark: #4B0082;
+        --light: #E6E6FA;
+        --game-blue: #6A5ACD;
+        --game-purple: #9400D3;
+        --gradient-start: #E6E6FA;
+        --gradient-mid: #D8BFD8;
+        --gradient-end: #DDA0DD;
     }
     
     body {
@@ -60,34 +54,54 @@ st.markdown("""
     }
     
     .stApp {
-        background: rgba(255, 255, 255, 0.05);
-        backdrop-filter: blur(12px);
-        -webkit-backdrop-filter: blur(12px);
+        background: url('https://www.transparenttextures.com/patterns/always-grey.png');
+        background-color: rgba(230, 230, 250, 0.9);
+        backdrop-filter: blur(5px);
+        -webkit-backdrop-filter: blur(5px);
+    }
+    
+    .wave-divider {
+        width: 100%;
+        height: 150px;
+        overflow: hidden;
+        margin: -10px 0 20px 0;
+        transform: rotate(180deg);
+    }
+    
+    .wave-divider svg {
+        height: 100%;
+        width: 100%;
+    }
+    
+    .wave-divider path {
+        stroke: none;
+        fill: var(--primary);
+        opacity: 0.2;
     }
     
     .game-card {
-        background: rgba(255, 255, 255, 0.9);
+        background: rgba(255, 255, 255, 0.85);
         border-radius: 20px;
         padding: 25px;
-        box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
-        border: 2px solid rgba(255, 255, 255, 0.18);
+        box-shadow: 0 8px 32px rgba(138, 43, 226, 0.2);
+        border: 2px solid rgba(255, 255, 255, 0.5);
         margin-bottom: 25px;
         transition: all 0.3s;
     }
     
     .game-card:hover {
         transform: translateY(-5px);
-        box-shadow: 0 12px 24px rgba(31, 38, 135, 0.5);
+        box-shadow: 0 12px 24px rgba(138, 43, 226, 0.3);
     }
     
     .header {
-        color: white;
+        color: var(--dark);
         font-family: 'Fredoka One', cursive;
-        text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+        text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8);
     }
     
     .concept-card {
-        background: rgba(255, 255, 255, 0.95);
+        background: rgba(255, 255, 255, 0.9);
         border-radius: 15px;
         padding: 15px;
         margin: 10px 0;
@@ -96,7 +110,7 @@ st.markdown("""
     }
     
     .stButton>button {
-        background: linear-gradient(45deg, var(--primary), var(--game-blue));
+        background: linear-gradient(45deg, var(--primary), var(--game-purple));
         color: white;
         border-radius: 50px;
         padding: 12px 28px;
@@ -110,7 +124,7 @@ st.markdown("""
     
     .stButton>button:hover {
         transform: scale(1.05);
-        box-shadow: 0 8px 16px rgba(106, 103, 206, 0.4);
+        box-shadow: 0 8px 16px rgba(138, 43, 226, 0.4);
     }
     
     .stTextInput>div>div>input {
@@ -126,7 +140,7 @@ st.markdown("""
         gap: 10px;
         margin-bottom: 20px;
         overflow-x: auto;
-        background: rgba(255, 255, 255, 0.15);
+        background: rgba(255, 255, 255, 0.3);
         padding: 10px;
         border-radius: 20px;
         backdrop-filter: blur(5px);
@@ -134,7 +148,7 @@ st.markdown("""
     
     .tab {
         padding: 12px 24px;
-        background: rgba(255, 255, 255, 0.25);
+        background: rgba(255, 255, 255, 0.4);
         border-radius: 15px;
         cursor: pointer;
         font-weight: bold;
@@ -142,11 +156,12 @@ st.markdown("""
         font-family: 'Fredoka One', cursive;
         font-size: 16px;
         transition: all 0.3s;
-        color: white;
+        color: var(--dark);
     }
     
     .tab.active {
-        background: linear-gradient(45deg, var(--primary), var(--game-blue));
+        background: linear-gradient(45deg, var(--primary), var(--game-purple));
+        color: white;
         box-shadow: 0 4px 8px rgba(0,0,0,0.2);
     }
     
@@ -158,7 +173,7 @@ st.markdown("""
         width: 500px;
         height: 500px;
         margin: 0 auto;
-        background: rgba(106, 103, 206, 0.2);
+        background: rgba(147, 112, 219, 0.2);
         padding: 10px;
         border-radius: 15px;
     }
@@ -181,18 +196,18 @@ st.markdown("""
     }
     
     .player {
-        background: linear-gradient(45deg, #6A67CE, #1A8CD8);
+        background: linear-gradient(45deg, var(--primary), var(--game-blue));
         color: white;
         box-shadow: 0 4px 8px rgba(0,0,0,0.2);
     }
     
     .goal {
-        background: linear-gradient(45deg, #FDD85D, #FFB347);
+        background: linear-gradient(45deg, var(--accent), #FFA500);
         box-shadow: 0 4px 8px rgba(0,0,0,0.2);
     }
     
     .obstacle {
-        background: linear-gradient(45deg, #FF7C7C, #FF5252);
+        background: linear-gradient(45deg, var(--secondary), #8A2BE2);
         box-shadow: 0 4px 8px rgba(0,0,0,0.2);
     }
     
@@ -217,7 +232,7 @@ st.markdown("""
         width: 70px;
         height: 70px;
         border-radius: 50%;
-        background: linear-gradient(45deg, var(--primary), var(--game-blue));
+        background: linear-gradient(45deg, var(--primary), var(--game-purple));
         color: white;
         display: flex;
         align-items: center;
@@ -244,6 +259,7 @@ st.markdown("""
         margin: 20px auto;
         width: 300px;
         box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+        border: 2px solid var(--primary);
     }
     
     .level-indicator {
@@ -256,48 +272,30 @@ st.markdown("""
         margin: 10px auto;
         width: 200px;
         box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+        border: 2px solid var(--accent);
     }
     
-    .concept-highlight {
-        background: rgba(253, 216, 93, 0.2);
-        border-radius: 10px;
-        padding: 15px;
-        margin: 10px 0;
-        border-left: 4px solid var(--accent);
-    }
-    
-    .code-block {
-        background: #2b2d42;
-        color: #f8f9fa;
-        border-radius: 15px;
+    .theme-customizer {
+        background: rgba(255, 255, 255, 0.9);
+        border-radius: 20px;
         padding: 20px;
-        font-family: 'Courier New', monospace;
-        overflow-x: auto;
         margin: 20px 0;
-        box-shadow: 0 8px 16px rgba(0,0,0,0.2);
-    }
-    
-    .code-explanation {
-        background: rgba(255, 255, 255, 0.9);
-        border-radius: 15px;
-        padding: 15px;
-        margin: 15px 0;
+        box-shadow: 0 8px 16px rgba(138, 43, 226, 0.2);
+        border: 3px solid var(--primary);
     }
     
-    .game-animation {
+    .customizer-title {
         text-align: center;
-        margin: 20px 0;
-    }
-    
-    .animated-char {
-        font-size: 80px;
-        display: inline-block;
-        animation: bounce 2s infinite;
+        font-family: 'Fredoka One', cursive;
+        color: var(--primary);
+        margin-bottom: 20px;
+        font-size: 24px;
     }
     
-    @keyframes bounce {
-        0%, 100% {transform: translateY(0);}
-        50% {transform: translateY(-20px);}
+    .char-preview {
+        text-align: center;
+        font-size: 48px;
+        margin: 10px 0;
     }
     
     @media (max-width: 768px) {
@@ -324,6 +322,8 @@ st.markdown("""
         margin: 0 auto;
         letter-spacing: .15em;
         animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
+        color: var(--dark);
+        font-family: 'Fredoka One', cursive;
     }
     
     @keyframes typing {
@@ -335,6 +335,16 @@ st.markdown("""
         from, to { border-color: transparent }
         50% { border-color: var(--accent); }
     }
+    
+    .floating {
+        animation: floating 3s ease-in-out infinite;
+    }
+    
+    @keyframes floating {
+        0% { transform: translate(0,  0px); }
+        50%  { transform: translate(0, 15px); }
+        100%   { transform: translate(0, -0px); }
+    }
 </style>
 """, unsafe_allow_html=True)
 
@@ -358,8 +368,6 @@ def init_session_state():
         st.session_state.loading = False
     if 'game_state' not in st.session_state:
         reset_game_state()
-    if 'groq_api_key' not in st.session_state:
-        st.session_state.groq_api_key = ""
     if 'player_char' not in st.session_state:
         st.session_state.player_char = "🦸"
     if 'goal_char' not in st.session_state:
@@ -370,14 +378,6 @@ def init_session_state():
         st.session_state.current_level = 1
     if 'total_levels' not in st.session_state:
         st.session_state.total_levels = 3
-    if 'show_concept_animation' not in st.session_state:
-        st.session_state.show_concept_animation = False
-    if 'concept_animation' not in st.session_state:
-        st.session_state.concept_animation = None
-    if 'pygame_running' not in st.session_state:
-        st.session_state.pygame_running = False
-    if 'pygame_output' not in st.session_state:
-        st.session_state.pygame_output = ""
 
 # Concept database
 CONCEPTS = {
@@ -386,57 +386,43 @@ CONCEPTS = {
         "emoji": "🔄",
         "description": "Loops repeat actions multiple times",
         "example": "for i in range(5):\n    print('Hello!')",
-        "color": "#6A67CE",
-        "game_example": "Repeating jumps to cross a river",
-        "animation": "🔄➰➿"
+        "color": "#8A2BE2",
+        "game_example": "Repeating jumps to cross a river"
     },
     "conditional": {
         "name": "Conditional",
         "emoji": "❓",
         "description": "Conditionals make decisions in code",
         "example": "if sunny:\n    go_outside()\nelse:\n    stay_inside()",
-        "color": "#FF7C7C",
-        "game_example": "Choosing paths based on obstacles",
-        "animation": "❓👉👈"
+        "color": "#9370DB",
+        "game_example": "Choosing paths based on obstacles"
     },
     "function": {
         "name": "Function",
         "emoji": "✨",
         "description": "Functions are reusable blocks of code",
         "example": "def greet(name):\n    print(f'Hello {name}!')",
-        "color": "#FDD85D",
-        "game_example": "Creating a jump function used multiple times",
-        "animation": "✨🌟💫"
+        "color": "#FFD700",
+        "game_example": "Creating a jump function used multiple times"
     },
     "variable": {
         "name": "Variable",
         "emoji": "📦",
         "description": "Variables store information",
         "example": "score = 10\nplayer = 'Alex'",
-        "color": "#1A8CD8",
-        "game_example": "Keeping track of collected stars",
-        "animation": "📊📈📉"
+        "color": "#6A5ACD",
+        "game_example": "Keeping track of collected stars"
     },
     "list": {
         "name": "List",
         "emoji": "📝",
         "description": "Lists store collections of items",
         "example": "fruits = ['apple', 'banana', 'orange']",
-        "color": "#4CAF50",
-        "game_example": "Storing collected treasures in a backpack",
-        "animation": "📋📑📄"
+        "color": "#9400D3",
+        "game_example": "Storing collected treasures in a backpack"
     }
 }
 
-# Initialize Groq client
-def get_groq_client():
-    try:
-        if st.session_state.groq_api_key:
-            return Groq(api_key=st.session_state.groq_api_key)
-        return None
-    except:
-        return None
-
 # Analyze story and extract concepts
 def analyze_story(story):
     """Analyze story and identify programming concepts"""
@@ -466,42 +452,9 @@ def analyze_story(story):
     
     return list(set(detected_concepts)) if detected_concepts else ["variable", "function"]
 
-# Generate game scenario using Groq
+# Generate game scenario
 def generate_game_scenario(story, concepts):
     """Generate a game scenario based on the story and concepts"""
-    try:
-        client = get_groq_client()
-        if client:
-            concept_names = [CONCEPTS[c]['name'] for c in concepts]
-            concept_list = ", ".join(concept_names)
-            
-            system_prompt = (
-                "You are an expert in creating educational games for children aged 6-12. "
-                "Create a simple game scenario based on the child's story. "
-                "The game should teach programming concepts through gameplay. "
-                "Structure your response with these sections:\n"
-                "Game Title: ...\n"
-                "Game Objective: ...\n"
-                "Characters: ...\n"
-                "Game Mechanics: ...\n"
-                "Coding Concepts: Explain how these programming concepts are used: " + concept_list + "\n"
-                "Visual Description: Describe the game world visually\n"
-                "Keep it under 200 words and fun for kids."
-            )
-            
-            response = client.chat.completions.create(
-                model="llama3-70b-8192",
-                messages=[
-                    {"role": "system", "content": system_prompt},
-                    {"role": "user", "content": story}
-                ],
-                temperature=0.8,
-                max_tokens=500
-            )
-            return response.choices[0].message.content
-    except Exception as e:
-        st.error(f"Game scenario generation error: {str(e)}")
-    
     # Fallback template
     concept_names = [CONCEPTS[c]['name'] for c in concepts]
     concept_list = ", ".join(concept_names)
@@ -532,36 +485,6 @@ Visual Description: Colorful game world with cartoon-style characters, vibrant l
 # Generate game code explanation
 def generate_game_explanation(story, concepts, game_scenario):
     """Generate explanation of game code"""
-    try:
-        client = get_groq_client()
-        if client:
-            concept_names = [CONCEPTS[c]['name'] for c in concepts]
-            concept_list = ", ".join(concept_names)
-            
-            system_prompt = (
-                "Explain how the game code implements programming concepts in a way "
-                "a child aged 6-12 can understand. Use simple analogies and relate to the story. "
-                "Structure your response with:\n"
-                "Introduction: ...\n"
-                "Concept 1: ... (with example from the game)\n"
-                "Concept 2: ... (with example from the game)\n"
-                "Conclusion: ...\n"
-                "Keep it under 300 words and engaging for kids."
-            )
-            
-            response = client.chat.completions.create(
-                model="llama3-70b-8192",
-                messages=[
-                    {"role": "system", "content": system_prompt},
-                    {"role": "user", "content": f"Story: {story}\nGame Scenario: {game_scenario}\nConcepts: {concept_list}"}
-                ],
-                temperature=0.7,
-                max_tokens=600
-            )
-            return response.choices[0].message.content
-    except Exception as e:
-        st.error(f"Explanation generation error: {str(e)}")
-    
     # Fallback explanation
     concept_explanations = "\n".join(
         [f"- {CONCEPTS[c]['name']}: {CONCEPTS[c]['game_example']}" for c in concepts]
@@ -590,21 +513,21 @@ def generate_game_preview(story):
         
         if theme == "space":
             bg_color = '#0B0B2B'
-            player_color = '#6A67CE'
-            goal_color = '#FDD85D'
-            obstacle_color = '#FF7C7C'
+            player_color = '#8A2BE2'
+            goal_color = '#FFD700'
+            obstacle_color = '#9370DB'
             title = "Space Adventure"
         elif theme == "jungle":
             bg_color = '#143D2C'
-            player_color = '#6A67CE'
-            goal_color = '#FDD85D'
-            obstacle_color = '#D35400'
+            player_color = '#8A2BE2'
+            goal_color = '#FFD700'
+            obstacle_color = '#6A5ACD'
             title = "Jungle Adventure"
         else:
             bg_color = '#3A015C'
-            player_color = '#6A67CE'
-            goal_color = '#FDD85D'
-            obstacle_color = '#FF7C7C'
+            player_color = '#8A2BE2'
+            goal_color = '#FFD700'
+            obstacle_color = '#9370DB'
             title = "Fantasy Quest"
         
         ax.set_facecolor(bg_color)
@@ -801,79 +724,23 @@ def create_playable_game():
                 reset_game_state()
                 st.rerun()
 
-# Run PyGame code in the browser
-def run_pygame_in_browser(code):
-    """Simulate running PyGame code with output capture"""
-    st.subheader("🎮 Play the Full Game in Your Browser")
-    
-    # Create a code runner
-    output = StringIO()
-    with contextlib.redirect_stdout(output), contextlib.redirect_stderr(output):
-        try:
-            # Create a fake pygame module for simulation
-            class FakePygame:
-                def __init__(self):
-                    self.quit = lambda: None
-                    self.init = lambda: None
-                    self.display = type('', (), {'set_mode': lambda *a, **kw: None, 'set_caption': lambda *a: None, 'flip': lambda: None})()
-                    self.event = type('', (), {'get': lambda: []})()
-                    self.key = type('', (), {'get_pressed': lambda: [0]*300})()
-                    self.Rect = lambda *a: None
-                    self.draw = type('', (), {'rect': lambda *a, **kw: None, 'circle': lambda *a, **kw: None})()
-                    self.font = type('', (), {'SysFont': lambda *a, **kw: type('', (), {'render': lambda *a, **kw: None})})()
-                    self.time = type('', (), {'Clock': lambda: type('', (), {'tick': lambda *a: None})()})()
-                    self.Surface = lambda *a: type('', (), {'blit': lambda *a, **kw: None})()
-            
-            sys.modules['pygame'] = FakePygame()
-            
-            # Execute the code
-            exec(code, {'__name__': '__main__'})
-            st.session_state.pygame_output = "Game executed successfully!"
-        except Exception as e:
-            st.session_state.pygame_output = f"Error: {str(e)}\n{traceback.format_exc()}"
-    
-    # Show output
-    st.code(st.session_state.pygame_output, language='python')
-    st.info("This is a simulation. To play the full game, download the code and run it on your computer!")
-
-# Display concept animation
-def show_concept_animation(concept):
-    """Display animated concept visualization"""
-    if concept in CONCEPTS:
-        st.subheader(f"{CONCEPTS[concept]['emoji']} {CONCEPTS[concept]['name']} Concept")
-        
-        # Animation
-        st.markdown(f"<div class='game-animation'><span class='animated-char'>{CONCEPTS[concept]['animation']}</span></div>", 
-                    unsafe_allow_html=True)
-        
-        # Explanation
-        st.markdown(f"""
-        <div class='concept-highlight'>
-            <p><strong>How it works:</strong> {CONCEPTS[concept]['description']}</p>
-            <p><strong>In your game:</strong> {CONCEPTS[concept]['game_example']}</p>
-        </div>
-        """, unsafe_allow_html=True)
-        
-        # Code example
-        st.code(CONCEPTS[concept]['example'], language='python')
-
-# Main application function
-def main():
-    init_session_state()
+# Theme customizer section
+def theme_customizer():
+    """Theme customization section"""
+    st.markdown("""
+    <div class="wave-divider">
+        <svg viewBox="0 0 1200 120" preserveAspectRatio="none">
+            <path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" opacity=".25" class="shape-fill"></path>
+            <path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" opacity=".5" class="shape-fill"></path>
+            <path d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z" class="shape-fill"></path>
+        </svg>
+    </div>
+    """, unsafe_allow_html=True)
     
-    # Sidebar for API key and settings
-    with st.sidebar:
-        st.header("⚙️ Settings")
-        st.session_state.groq_api_key = st.text_input(
-            "Enter Groq API Key (optional):", 
-            type="password",
-            help="Get a free key from https://console.groq.com/keys"
-        )
-        st.caption("Using Groq API will create more creative and personalized games!")
-        
-        st.divider()
+    with st.container():
+        st.markdown("<div class='theme-customizer'>", unsafe_allow_html=True)
+        st.markdown("<div class='customizer-title'>🎨 Customize Your Game Theme</div>", unsafe_allow_html=True)
         
-        st.header("🎮 Game Theme")
         col1, col2, col3 = st.columns(3)
         with col1:
             st.session_state.player_char = st.selectbox(
@@ -881,35 +748,52 @@ def main():
                 ["🦸", "👨‍🚀", "🧙‍♂️", "🐱", "🐉", "🦊"],
                 index=0
             )
+            st.markdown(f"<div class='char-preview floating'>{st.session_state.player_char}</div>", unsafe_allow_html=True)
+            
         with col2:
             st.session_state.goal_char = st.selectbox(
                 "Goal Character",
                 ["🏁", "🏰", "🚩", "🎯", "🔑"],
                 index=0
             )
+            st.markdown(f"<div class='char-preview floating'>{st.session_state.goal_char}</div>", unsafe_allow_html=True)
+            
         with col3:
             st.session_state.obstacle_char = st.selectbox(
                 "Obstacle Character",
                 ["🪨", "🌵", "🔥", "🌊", "🌳"],
                 index=0
             )
+            st.markdown(f"<div class='char-preview floating'>{st.session_state.obstacle_char}</div>", unsafe_allow_html=True)
         
-        st.divider()
-        
-        st.header("📚 Learning Level")
         st.session_state.current_level = st.slider(
             "Select Difficulty Level",
             1, 5, st.session_state.current_level
         )
         
-        st.divider()
-        st.caption("Made with ❤️ for kids learning to code")
-        st.caption("v4.0 | StoryCoder")
+        st.markdown("</div>", unsafe_allow_html=True)
+        
+        st.markdown("""
+        <div class="wave-divider">
+            <svg viewBox="0 0 1200 120" preserveAspectRatio="none">
+                <path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" opacity=".25" class="shape-fill"></path>
+                <path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" opacity=".5" class="shape-fill"></path>
+                <path d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z" class="shape-fill"></path>
+            </svg>
+        </div>
+        """, unsafe_allow_html=True)
+
+# Main application function
+def main():
+    init_session_state()
     
     st.title("🎮 StoryCoder - Play & Learn Coding!")
     st.markdown("<div class='typewriter'><h2>Turn stories into games, and games into coding skills!</h2></div>", 
                 unsafe_allow_html=True)
     
+    # Theme customizer
+    theme_customizer()
+    
     # Create tabs
     st.markdown('<div class="tabs">', unsafe_allow_html=True)
     col1, col2, col3, col4, col5 = st.columns(5)
@@ -926,8 +810,15 @@ def main():
         if st.button("💻 Game Code", use_container_width=True):
             st.session_state.active_tab = "code"
     with col5:
-        if st.button("🚀 PyGame", use_container_width=True):
-            st.session_state.active_tab = "pygame"
+        if st.button("🔄 New Story", use_container_width=True):
+            st.session_state.story = ""
+            st.session_state.concepts = []
+            st.session_state.game_scenario = ""
+            st.session_state.game_code = ""
+            st.session_state.game_explanation = ""
+            st.session_state.game_preview = None
+            st.session_state.active_tab = "story"
+            reset_game_state()
     st.markdown('</div>', unsafe_allow_html=True)
     
     # Story creation tab
@@ -1047,9 +938,20 @@ def main():
                 format_func=lambda x: CONCEPTS[x]["name"]
             )
             
-            # Show animation and explanation for selected concept
+            # Show explanation for selected concept
             if selected_concept:
-                show_concept_animation(selected_concept)
+                details = CONCEPTS[selected_concept]
+                st.markdown(f"""
+                <div class="concept-card" style="border-left: 5px solid {details['color']};">
+                    <div style="display:flex; align-items:center; gap:15px;">
+                        <span style="font-size:36px;">{details['emoji']}</span>
+                        <h3 style="color:{details['color']};">{details['name']}</h3>
+                    </div>
+                    <p>{details['description']}</p>
+                    <p><b>In your game:</b> {details['game_example']}</p>
+                    <pre style="background:#f0f0f0; padding:10px; border-radius:8px;">{details['example']}</pre>
+                </div>
+                """, unsafe_allow_html=True)
         
         if st.button("See the Game Code", use_container_width=True):
             st.session_state.active_tab = "code"
@@ -1089,11 +991,11 @@ pygame.display.set_caption("{player_char}'s Adventure")
 clock = pygame.time.Clock()
 
 # Colors
-BACKGROUND = (230, 240, 255)  # Light blue
-PLAYER_COLOR = (106, 103, 206) # Purple
-GOAL_COLOR = (253, 216, 93)   # Yellow
-OBSTACLE_COLOR = (255, 124, 124) # Coral
-TEXT_COLOR = (45, 50, 80)     # Dark blue
+BACKGROUND = (230, 230, 250)  # Light purple
+PLAYER_COLOR = (138, 43, 226) # Purple
+GOAL_COLOR = (255, 215, 0)    # Gold
+OBSTACLE_COLOR = (147, 112, 219) # Medium purple
+TEXT_COLOR = (75, 0, 130)     # Indigo
 STAR_COLOR = (255, 215, 0)    # Gold
 
 # Player setup
@@ -1231,7 +1133,7 @@ sys.exit()
             # Code explanation
             st.subheader("🧠 Code Explanation")
             st.markdown("""
-            <div class="code-explanation">
+            <div class="game-card">
             <p>This code creates a game based on your story:</p>
             <ul>
                 <li><strong>Variables:</strong> Used to track score and positions</li>
@@ -1245,29 +1147,9 @@ sys.exit()
         else:
             st.warning("No game code generated yet!")
         
-        # Try PyGame button
-        if st.session_state.story and st.session_state.concepts:
-            if st.button("▶️ Try PyGame in Browser", use_container_width=True):
-                st.session_state.active_tab = "pygame"
-                st.session_state.pygame_running = True
-                st.rerun()
-        
         if st.button("Create Another Story!", use_container_width=True):
             st.session_state.active_tab = "story"
             st.rerun()
-    
-    # PyGame tab
-    elif st.session_state.active_tab == "pygame":
-        st.header("🎮 Play PyGame in Browser")
-        
-        if st.session_state.story and st.session_state.concepts:
-            run_pygame_in_browser(st.session_state.game_code)
-        else:
-            st.warning("No game code generated yet!")
-        
-        if st.button("Back to Game Code", use_container_width=True):
-            st.session_state.active_tab = "code"
-            st.rerun()
 
 if __name__ == "__main__":
     main()