Update app.py

app.py

@@ -19,7 +19,7 @@ st.set_page_config(
     initial_sidebar_state="expanded"
 )
 
-# Custom CSS with light purple background and wave design
+# Custom CSS with white background
 st.markdown("""
 <style>
     @import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Comic+Neue:wght@700&display=swap');
@@ -29,140 +29,107 @@ st.markdown("""
         --secondary: #9370DB;
         --accent: #FFD700;
         --dark: #4B0082;
-        --light: #E6E6FA;
+        --light: #FFFFFF;
         --game-blue: #6A5ACD;
         --game-purple: #9400D3;
-        --gradient-start: #E6E6FA;
-        --gradient-mid: #D8BFD8;
-        --gradient-end: #DDA0DD;
     }
     
     body {
-        background: linear-gradient(135deg, var(--gradient-start), var(--gradient-mid), var(--gradient-end));
-        background-size: 400% 400%;
-        animation: gradientBG 15s ease infinite;
+        background: #FFFFFF;
         font-family: 'Comic Neue', cursive;
         margin: 0;
         padding: 0;
         min-height: 100vh;
     }
     
-    @keyframes gradientBG {
-        0% {background-position: 0% 50%;}
-        50% {background-position: 100% 50%;}
-        100% {background-position: 0% 50%;}
-    }
-    
     .stApp {
-        background: url('https://www.transparenttextures.com/patterns/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;
+        background: #FFFFFF;
     }
     
     .game-card {
-        background: rgba(255, 255, 255, 0.85);
-        border-radius: 20px;
-        padding: 25px;
-        box-shadow: 0 8px 32px rgba(138, 43, 226, 0.2);
-        border: 2px solid rgba(255, 255, 255, 0.5);
-        margin-bottom: 25px;
+        background: rgba(255, 255, 255, 0.95);
+        border-radius: 15px;
+        padding: 20px;
+        box-shadow: 0 4px 16px rgba(138, 43, 226, 0.1);
+        border: 1px solid #E0E0E0;
+        margin-bottom: 20px;
         transition: all 0.3s;
     }
     
     .game-card:hover {
-        transform: translateY(-5px);
-        box-shadow: 0 12px 24px rgba(138, 43, 226, 0.3);
+        transform: translateY(-3px);
+        box-shadow: 0 8px 16px rgba(138, 43, 226, 0.15);
     }
     
     .header {
         color: var(--dark);
         font-family: 'Fredoka One', cursive;
-        text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8);
     }
     
     .concept-card {
-        background: rgba(255, 255, 255, 0.9);
-        border-radius: 15px;
+        background: rgba(255, 255, 255, 0.95);
+        border-radius: 12px;
         padding: 15px;
         margin: 10px 0;
-        border-left: 5px solid var(--accent);
-        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+        border-left: 4px solid var(--accent);
+        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
     }
     
     .stButton>button {
         background: linear-gradient(45deg, var(--primary), var(--game-purple));
         color: white;
-        border-radius: 50px;
-        padding: 12px 28px;
+        border-radius: 12px;
+        padding: 10px 24px;
         font-weight: bold;
-        font-size: 18px;
+        font-size: 16px;
         border: none;
         transition: all 0.3s;
         font-family: 'Fredoka One', cursive;
-        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
     }
     
     .stButton>button:hover {
-        transform: scale(1.05);
-        box-shadow: 0 8px 16px rgba(138, 43, 226, 0.4);
+        transform: scale(1.03);
+        box-shadow: 0 6px 12px rgba(138, 43, 226, 0.2);
     }
     
     .stTextInput>div>div>input {
-        border-radius: 20px;
-        padding: 14px;
-        border: 3px solid var(--accent);
-        font-size: 18px;
-        background: rgba(255, 255, 255, 0.9);
+        border-radius: 12px;
+        padding: 12px;
+        border: 2px solid var(--accent);
+        font-size: 16px;
+        background: rgba(255, 255, 255, 0.95);
     }
     
     .tabs {
         display: flex;
-        gap: 10px;
+        gap: 8px;
         margin-bottom: 20px;
         overflow-x: auto;
-        background: rgba(255, 255, 255, 0.3);
-        padding: 10px;
-        border-radius: 20px;
-        backdrop-filter: blur(5px);
+        background: rgba(255, 255, 255, 0.95);
+        padding: 8px;
+        border-radius: 12px;
+        border: 1px solid #E0E0E0;
     }
     
     .tab {
-        padding: 12px 24px;
-        background: rgba(255, 255, 255, 0.4);
-        border-radius: 15px;
+        padding: 10px 20px;
+        background: rgba(255, 255, 255, 0.95);
+        border-radius: 12px;
         cursor: pointer;
         font-weight: bold;
         white-space: nowrap;
         font-family: 'Fredoka One', cursive;
-        font-size: 16px;
+        font-size: 14px;
         transition: all 0.3s;
         color: var(--dark);
+        border: 1px solid #E0E0E0;
     }
     
     .tab.active {
         background: linear-gradient(45deg, var(--primary), var(--game-purple));
         color: white;
-        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
     }
     
     .game-board {
@@ -170,132 +137,134 @@ st.markdown("""
         grid-template-columns: repeat(8, 1fr);
         grid-template-rows: repeat(8, 1fr);
         gap: 4px;
-        width: 500px;
-        height: 500px;
+        width: 450px;
+        height: 450px;
         margin: 0 auto;
-        background: rgba(147, 112, 219, 0.2);
+        background: #FFFFFF;
         padding: 10px;
-        border-radius: 15px;
+        border-radius: 12px;
+        border: 1px solid #E0E0E0;
     }
     
     .cell {
         display: flex;
         justify-content: center;
         align-items: center;
-        border-radius: 8px;
-        font-size: 30px;
-        background: rgba(255, 255, 255, 0.85);
+        border-radius: 6px;
+        font-size: 28px;
+        background: #FFFFFF;
         transition: all 0.2s;
         cursor: pointer;
-        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+        border: 1px solid #F0F0F0;
     }
     
     .cell:hover {
-        transform: scale(1.05);
-        background: rgba(255, 255, 255, 1);
+        transform: scale(1.03);
+        background: #F8F8F8;
     }
     
     .player {
         background: linear-gradient(45deg, var(--primary), var(--game-blue));
         color: white;
-        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
     }
     
     .goal {
         background: linear-gradient(45deg, var(--accent), #FFA500);
-        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
     }
     
     .obstacle {
         background: linear-gradient(45deg, var(--secondary), #8A2BE2);
-        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
     }
     
     .star {
         background: linear-gradient(45deg, #FFD700, #FFA500);
-        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
     }
     
     .portal {
         background: linear-gradient(45deg, #9B5DE5, #6A0DAD);
-        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
     }
     
     .game-controls {
         display: flex;
         justify-content: center;
-        gap: 15px;
-        margin: 25px 0;
+        gap: 12px;
+        margin: 20px 0;
     }
     
     .control-btn {
-        width: 70px;
-        height: 70px;
+        width: 60px;
+        height: 60px;
         border-radius: 50%;
         background: linear-gradient(45deg, var(--primary), var(--game-purple));
         color: white;
         display: flex;
         align-items: center;
         justify-content: center;
-        font-size: 30px;
+        font-size: 24px;
         cursor: pointer;
         border: none;
-        box-shadow: 0 6px 12px rgba(0,0,0,0.2);
+        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
         transition: all 0.2s;
     }
     
     .control-btn:hover {
-        transform: scale(1.1);
-        box-shadow: 0 8px 16px rgba(0,0,0,0.3);
+        transform: scale(1.08);
+        box-shadow: 0 6px 12px rgba(0,0,0,0.15);
     }
     
     .score-board {
-        background: rgba(255, 255, 255, 0.9);
-        border-radius: 15px;
-        padding: 15px;
+        background: #FFFFFF;
+        border-radius: 12px;
+        padding: 12px;
         text-align: center;
         font-family: 'Fredoka One', cursive;
-        font-size: 24px;
-        margin: 20px auto;
-        width: 300px;
-        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
-        border: 2px solid var(--primary);
+        font-size: 20px;
+        margin: 15px auto;
+        width: 280px;
+        box-shadow: 0 4px 8px rgba(0,0,0,0.05);
+        border: 1px solid #E0E0E0;
     }
     
     .level-indicator {
-        background: rgba(255, 255, 255, 0.9);
-        border-radius: 15px;
-        padding: 10px 20px;
+        background: #FFFFFF;
+        border-radius: 12px;
+        padding: 8px 16px;
         text-align: center;
         font-family: 'Fredoka One', cursive;
-        font-size: 20px;
-        margin: 10px auto;
-        width: 200px;
-        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-        border: 2px solid var(--accent);
+        font-size: 18px;
+        margin: 8px auto;
+        width: 180px;
+        box-shadow: 0 2px 6px rgba(0,0,0,0.05);
+        border: 1px solid #E0E0E0;
     }
     
     .theme-customizer {
-        background: rgba(255, 255, 255, 0.9);
-        border-radius: 20px;
-        padding: 20px;
-        margin: 20px 0;
-        box-shadow: 0 8px 16px rgba(138, 43, 226, 0.2);
-        border: 3px solid var(--primary);
+        background: #FFFFFF;
+        border-radius: 15px;
+        padding: 15px;
+        margin: 15px 0;
+        box-shadow: 0 4px 12px rgba(138, 43, 226, 0.1);
+        border: 1px solid #E0E0E0;
     }
     
     .customizer-title {
         text-align: center;
         font-family: 'Fredoka One', cursive;
         color: var(--primary);
-        margin-bottom: 20px;
-        font-size: 24px;
+        margin-bottom: 15px;
+        font-size: 20px;
     }
     
     .char-preview {
         text-align: center;
-        font-size: 48px;
-        margin: 10px 0;
+        font-size: 40px;
+        margin: 8px 0;
     }
     
     @media (max-width: 768px) {
@@ -304,46 +273,83 @@ st.markdown("""
         }
         
         .game-board {
-            width: 90vw;
-            height: 90vw;
+            width: 85vw;
+            height: 85vw;
         }
         
         .control-btn {
-            width: 60px;
-            height: 60px;
-            font-size: 24px;
+            width: 50px;
+            height: 50px;
+            font-size: 20px;
         }
     }
     
-    .typewriter h2 {
-        overflow: hidden;
-        border-right: .15em solid var(--accent);
-        white-space: nowrap;
-        margin: 0 auto;
-        letter-spacing: .15em;
-        animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
-        color: var(--dark);
-        font-family: 'Fredoka One', cursive;
+    .concept-buttons {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 10px;
+        margin: 15px 0;
+    }
+    
+    .concept-btn {
+        flex: 1 0 calc(33.333% - 10px);
+        min-width: 120px;
+        padding: 12px;
+        border-radius: 10px;
+        background: rgba(255, 255, 255, 0.95);
+        border: 1px solid #E0E0E0;
+        box-shadow: 0 2px 6px rgba(0,0,0,0.05);
+        transition: all 0.3s;
+        text-align: center;
+        cursor: pointer;
+    }
+    
+    .concept-btn:hover {
+        transform: translateY(-3px);
+        box-shadow: 0 4px 8px rgba(138, 43, 226, 0.15);
+        border-color: var(--primary);
     }
     
-    @keyframes typing {
-        from { width: 0 }
-        to { width: 100% }
+    .concept-btn.active {
+        background: linear-gradient(45deg, var(--primary), var(--game-purple));
+        color: white;
+        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
     }
     
-    @keyframes blink-caret {
-        from, to { border-color: transparent }
-        50% { border-color: var(--accent); }
+    .example-box {
+        border: 1px solid #E0E0E0;
+        border-radius: 12px;
+        padding: 15px;
+        margin-bottom: 15px;
+        transition: all 0.3s;
+        cursor: pointer;
     }
     
-    .floating {
-        animation: floating 3s ease-in-out infinite;
+    .example-box:hover {
+        transform: translateY(-3px);
+        box-shadow: 0 4px 12px rgba(138, 43, 226, 0.1);
+        border-color: var(--primary);
     }
     
-    @keyframes floating {
-        0% { transform: translate(0,  0px); }
-        50%  { transform: translate(0, 15px); }
-        100%   { transform: translate(0, -0px); }
+    .toast {
+        position: fixed;
+        bottom: 20px;
+        left: 50%;
+        transform: translateX(-50%);
+        background: rgba(0, 0, 0, 0.8);
+        color: white;
+        padding: 10px 20px;
+        border-radius: 25px;
+        z-index: 1000;
+        font-family: 'Fredoka One', cursive;
+        animation: fadeInOut 2s ease-in-out;
+    }
+    
+    @keyframes fadeInOut {
+        0% { opacity: 0; bottom: 0; }
+        20% { opacity: 1; bottom: 20px; }
+        80% { opacity: 1; bottom: 20px; }
+        100% { opacity: 0; bottom: 0; }
     }
 </style>
 """, unsafe_allow_html=True)
@@ -360,8 +366,6 @@ def init_session_state():
         st.session_state.game_code = ""
     if 'game_explanation' not in st.session_state:
         st.session_state.game_explanation = ""
-    if 'game_preview' not in st.session_state:
-        st.session_state.game_preview = None
     if 'active_tab' not in st.session_state:
         st.session_state.active_tab = "story"
     if 'loading' not in st.session_state:
@@ -378,6 +382,10 @@ 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 'selected_concept' not in st.session_state:
+        st.session_state.selected_concept = None
+    if 'toast_message' not in st.session_state:
+        st.session_state.toast_message = None
 
 # Concept database
 CONCEPTS = {
@@ -467,7 +475,7 @@ Characters:
 - Villain: A character that creates obstacles (if applicable)
 
 Game Mechanics:
-1. Move your character using arrow keys
+1. Move your character using arrow keys or buttons
 2. Collect stars while avoiding obstacles
 3. Reach the goal to win
 4. Helper characters appear to teach {concept_list}
@@ -479,7 +487,7 @@ Coding Concepts: This game teaches {concept_list} through:
 - Tracking progress with variables
 - Managing collections with lists
 
-Visual Description: Colorful game world with cartoon-style characters, vibrant landscapes, and magical effects.
+Visual Style: Clean and colorful game world with simple characters.
 """
 
 # Generate game code explanation
@@ -501,80 +509,6 @@ As you play the game, think about:
 The code brings your story to life in a fun game world!
 """
 
-# Generate game preview visualization
-def generate_game_preview(story):
-    """Generate a visual preview of the game"""
-    try:
-        # Extract keywords for theme
-        theme = "space" if "space" in story.lower() else "jungle" if "jungle" in story.lower() else "fantasy"
-        
-        # Create a simple visualization
-        fig, ax = plt.subplots(figsize=(10, 6))
-        
-        if theme == "space":
-            bg_color = '#0B0B2B'
-            player_color = '#8A2BE2'
-            goal_color = '#FFD700'
-            obstacle_color = '#9370DB'
-            title = "Space Adventure"
-        elif theme == "jungle":
-            bg_color = '#143D2C'
-            player_color = '#8A2BE2'
-            goal_color = '#FFD700'
-            obstacle_color = '#6A5ACD'
-            title = "Jungle Adventure"
-        else:
-            bg_color = '#3A015C'
-            player_color = '#8A2BE2'
-            goal_color = '#FFD700'
-            obstacle_color = '#9370DB'
-            title = "Fantasy Quest"
-        
-        ax.set_facecolor(bg_color)
-        ax.set_xlim(0, 10)
-        ax.set_ylim(0, 6)
-        
-        # Draw game elements
-        ax.text(5, 5, title, fontsize=20, ha='center', color='white')
-        ax.plot([1, 9], [1, 1], 'w-', linewidth=2)  # Ground
-        
-        # Player character
-        ax.plot(2, 2, 'o', markersize=15, color=player_color)
-        ax.text(2, 2.7, 'You', ha='center', color='white', fontsize=12)
-        
-        # Goal
-        ax.plot(8, 2, 'o', markersize=12, color=goal_color)
-        ax.text(8, 2.7, 'Goal', ha='center', color='white', fontsize=12)
-        
-        # Obstacles
-        for i in range(3):
-            x = random.uniform(3, 7)
-            y = random.uniform(1.5, 2.5)
-            ax.plot(x, y, 's', markersize=15, color=obstacle_color)
-            ax.text(x, y+0.4, 'Obstacle', ha='center', color='white', fontsize=8)
-        
-        # Stars
-        for i in range(3):
-            x = random.uniform(2.5, 7.5)
-            y = random.uniform(1.2, 2.8)
-            ax.plot(x, y, '*', markersize=15, color='yellow')
-            ax.text(x, y+0.4, 'Star', ha='center', color='white', fontsize=8)
-        
-        # Path
-        ax.plot([2, 8], [2, 2], 'y--', linewidth=1, alpha=0.5)
-        
-        ax.axis('off')
-        ax.set_title("Game Preview", fontsize=16, color='white')
-        
-        # Save to bytes
-        buf = io.BytesIO()
-        plt.savefig(buf, format='png', dpi=100, bbox_inches='tight', facecolor=bg_color)
-        buf.seek(0)
-        return buf
-    except Exception as e:
-        st.error(f"Preview generation error: {str(e)}")
-        return None
-
 def reset_game_state():
     st.session_state.game_state = {
         "player_pos": [0, 0],
@@ -629,10 +563,12 @@ def move_player(direction):
             if new_pos == goal_pos:
                 state["score"] += 20
                 state["game_over"] = True
+                st.session_state.toast_message = "🎉 You reached the goal! Well done!"
             # Check for star collection
             elif new_pos in stars:
                 state["score"] += 5
                 state["stars"].remove(new_pos)
+                st.session_state.toast_message = "⭐ You collected a star! +5 points"
                 
     st.session_state.game_state = state
 
@@ -716,8 +652,6 @@ def create_playable_game():
     
     # Next level button
     if state["game_over"]:
-        st.balloons()
-        st.success(f"🎉 You won! Final Score: {state['score']} in {state['moves']} moves!")
         if st.session_state.current_level < st.session_state.total_levels:
             if st.button("Next Level →", use_container_width=True):
                 st.session_state.current_level += 1
@@ -727,16 +661,6 @@ def create_playable_game():
 # 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)
-    
     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)
@@ -748,7 +672,7 @@ def theme_customizer():
                 ["🦸", "👨‍🚀", "🧙‍♂️", "🐱", "🐉", "🦊"],
                 index=0
             )
-            st.markdown(f"<div class='char-preview floating'>{st.session_state.player_char}</div>", unsafe_allow_html=True)
+            st.markdown(f"<div class='char-preview'>{st.session_state.player_char}</div>", unsafe_allow_html=True)
             
         with col2:
             st.session_state.goal_char = st.selectbox(
@@ -756,7 +680,7 @@ def theme_customizer():
                 ["🏁", "🏰", "🚩", "🎯", "🔑"],
                 index=0
             )
-            st.markdown(f"<div class='char-preview floating'>{st.session_state.goal_char}</div>", unsafe_allow_html=True)
+            st.markdown(f"<div class='char-preview'>{st.session_state.goal_char}</div>", unsafe_allow_html=True)
             
         with col3:
             st.session_state.obstacle_char = st.selectbox(
@@ -764,31 +688,31 @@ def theme_customizer():
                 ["🪨", "🌵", "🔥", "🌊", "🌳"],
                 index=0
             )
-            st.markdown(f"<div class='char-preview floating'>{st.session_state.obstacle_char}</div>", unsafe_allow_html=True)
+            st.markdown(f"<div class='char-preview'>{st.session_state.obstacle_char}</div>", unsafe_allow_html=True)
         
-        st.session_state.current_level = st.slider(
+        # Level selector with visible options
+        st.session_state.current_level = st.select_slider(
             "Select Difficulty Level",
-            1, 5, st.session_state.current_level
+            options=[1, 2, 3, 4, 5],
+            value=st.session_state.current_level
         )
         
         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)
+
+# Show toast message
+def show_toast():
+    """Show a toast message if one exists"""
+    if st.session_state.toast_message:
+        st.markdown(f"<div class='toast'>{st.session_state.toast_message}</div>", unsafe_allow_html=True)
+        # Clear message after showing
+        st.session_state.toast_message = None
 
 # 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>", 
+    st.markdown("Turn stories into games, and games into coding skills!", 
                 unsafe_allow_html=True)
     
     # Theme customizer
@@ -801,13 +725,16 @@ def main():
         if st.button("📖 Create Story", use_container_width=True):
             st.session_state.active_tab = "story"
     with col2:
-        if st.button("🎮 Play Game", use_container_width=True):
+        if st.button("🎮 Play Game", use_container_width=True, 
+                     disabled=not st.session_state.story or st.session_state.loading):
             st.session_state.active_tab = "game"
     with col3:
-        if st.button("🔍 Concepts", use_container_width=True):
+        if st.button("🔍 Concepts", use_container_width=True, 
+                     disabled=not st.session_state.concepts or st.session_state.loading):
             st.session_state.active_tab = "concepts"
     with col4:
-        if st.button("💻 Game Code", use_container_width=True):
+        if st.button("💻 Game Code", use_container_width=True, 
+                     disabled=not st.session_state.game_code or st.session_state.loading):
             st.session_state.active_tab = "code"
     with col5:
         if st.button("🔄 New Story", use_container_width=True):
@@ -816,20 +743,60 @@ def main():
             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.session_state.toast_message = "✨ New story started! Create your adventure."
     st.markdown('</div>', unsafe_allow_html=True)
     
     # Story creation tab
     if st.session_state.active_tab == "story":
         with st.container():
             st.header("📖 Create Your Story")
+            
+            # Show examples
+            st.subheader("✨ Story Examples")
+            col1, col2, col3 = st.columns(3)
+            examples = {
+                "Space Explorer": "An astronaut needs to collect 3 stars while avoiding asteroids in space.",
+                "Jungle Adventure": "A monkey swings through trees to collect bananas before sunset.",
+                "Dragon Quest": "A dragon flies through clouds to collect magic crystals in a mystical land."
+            }
+            
+            with col1:
+                with st.container():
+                    st.markdown('<div class="example-box">', unsafe_allow_html=True)
+                    st.subheader("🚀 Space Explorer")
+                    st.code(examples["Space Explorer"], language="text")
+                    if st.button("Copy Story", key="copy_space", use_container_width=True):
+                        st.session_state.story = examples["Space Explorer"]
+                        st.session_state.toast_message = "🚀 Space story copied to clipboard!"
+                    st.markdown('</div>', unsafe_allow_html=True)
+            
+            with col2:
+                with st.container():
+                    st.markdown('<div class="example-box">', unsafe_allow_html=True)
+                    st.subheader("🌿 Jungle Adventure")
+                    st.code(examples["Jungle Adventure"], language="text")
+                    if st.button("Copy Story", key="copy_jungle", use_container_width=True):
+                        st.session_state.story = examples["Jungle Adventure"]
+                        st.session_state.toast_message = "🌿 Jungle story copied to clipboard!"
+                    st.markdown('</div>', unsafe_allow_html=True)
+            
+            with col3:
+                with st.container():
+                    st.markdown('<div class="example-box">', unsafe_allow_html=True)
+                    st.subheader("🐉 Dragon Quest")
+                    st.code(examples["Dragon Quest"], language="text")
+                    if st.button("Copy Story", key="copy_dragon", use_container_width=True):
+                        st.session_state.story = examples["Dragon Quest"]
+                        st.session_state.toast_message = "🐉 Dragon story copied to clipboard!"
+                    st.markdown('</div>', unsafe_allow_html=True)
+            
             st.write("Write a short story (2-5 sentences) and I'll turn it into a playable game!")
             
             story = st.text_area(
                 "Your story:",
-                height=200,
+                height=150,
                 placeholder="Once upon a time, a brave knight had to collect 5 magical stars in a castle...",
                 value=st.session_state.story,
                 key="story_input"
@@ -855,41 +822,34 @@ def main():
                             story, st.session_state.concepts, st.session_state.game_scenario
                         )
                     
-                    with st.spinner("🖼️ Generating game preview..."):
-                        st.session_state.game_preview = generate_game_preview(story)
+                    # Generate simple game code
+                    keywords = re.findall(r'\b\w{4,}\b', st.session_state.story)[:3]
+                    player_char = keywords[0].capitalize() if keywords else "Hero"
+                    collect_item = keywords[1] if len(keywords) > 1 else "star"
+                    obstacle = keywords[2] if len(keywords) > 2 else "rock"
+                    
+                    # Get concept emojis
+                    concept_emojis = "".join([CONCEPTS[c]['emoji'] for c in st.session_state.concepts])
+                    
+                    game_code = f"""
+# {player_char}'s Adventure: {st.session_state.story[:20]}...
+# Teaches: {concept_emojis} {", ".join([CONCEPTS[c]['name'] for c in st.session_state.concepts])}
+
+import pygame
+import random
+import sys
+
+# Game setup and code would go here...
+# This is a simplified representation of the actual game code
+"""
+                    
+                    st.session_state.game_code = game_code
                     
                     reset_game_state()
                     st.session_state.active_tab = "game"
                     st.session_state.loading = False
+                    st.session_state.toast_message = "🎮 Game created successfully! Time to play."
                     st.rerun()
-            
-            # Show examples
-            st.subheader("✨ Story Examples")
-            col1, col2, col3 = st.columns(3)
-            example_images = {
-                "Space Explorer": "https://images.unsplash.com/photo-1462331940025-496dfbfc7564?w=500",
-                "Jungle Adventure": "https://images.unsplash.com/photo-1546182990-dffeafbe841d?w=500",
-                "Dragon Quest": "https://images.unsplash.com/photo-1541414779316-9564c1f85944?w=500"
-            }
-            
-            with col1:
-                st.caption("Space Explorer")
-                st.code('"An astronaut needs to collect 3 stars while avoiding asteroids"', language="text")
-                st.image(example_images["Space Explorer"], 
-                         use_container_width=True, 
-                         caption="Space Explorer Game")
-            with col2:
-                st.caption("Jungle Adventure")
-                st.code('"A monkey swings through trees to collect bananas before sunset"', language="text")
-                st.image(example_images["Jungle Adventure"], 
-                         use_container_width=True, 
-                         caption="Jungle Adventure Game")
-            with col3:
-                st.caption("Dragon Quest")
-                st.code('"A dragon flies through clouds to collect magic crystals"', language="text")
-                st.image(example_images["Dragon Quest"], 
-                         use_container_width=True, 
-                         caption="Dragon Quest Game")
     
     # Game tab
     elif st.session_state.active_tab == "game":
@@ -904,14 +864,6 @@ def main():
         st.subheader("🌟 Game Scenario")
         st.markdown(f'<div class="game-card">{st.session_state.game_scenario}</div>', unsafe_allow_html=True)
         
-        # Display game preview
-        st.subheader("🖼️ Game Preview")
-        if st.session_state.game_preview:
-            st.image(st.session_state.game_preview, use_container_width=True)
-        else:
-            st.info("Game preview visualization")
-            st.image("https://images.unsplash.com/photo-1542751110-97427bbecf20?w=500", use_container_width=True)
-        
         # Playable game
         create_playable_game()
         
@@ -931,16 +883,26 @@ def main():
         if not st.session_state.concepts:
             st.warning("No concepts detected in your story! Try adding words like '3 times', 'if', or 'collect'.")
         else:
-            # Concept selector
-            selected_concept = st.selectbox(
-                "Select a concept to explore:",
-                st.session_state.concepts,
-                format_func=lambda x: CONCEPTS[x]["name"]
-            )
+            # Concept buttons instead of dropdown
+            st.markdown("<div class='concept-buttons'>", unsafe_allow_html=True)
+            
+            for concept in st.session_state.concepts:
+                details = CONCEPTS[concept]
+                is_active = st.session_state.selected_concept == concept
+                btn_class = "concept-btn active" if is_active else "concept-btn"
+                
+                if st.button(
+                    f"{details['emoji']} {details['name']}",
+                    key=f"concept_{concept}",
+                    use_container_width=True
+                ):
+                    st.session_state.selected_concept = concept if not is_active else None
+            
+            st.markdown("</div>", unsafe_allow_html=True)
             
             # Show explanation for selected concept
-            if selected_concept:
-                details = CONCEPTS[selected_concept]
+            if st.session_state.selected_concept:
+                details = CONCEPTS[st.session_state.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;">
@@ -952,6 +914,8 @@ def main():
                     <pre style="background:#f0f0f0; padding:10px; border-radius:8px;">{details['example']}</pre>
                 </div>
                 """, unsafe_allow_html=True)
+            else:
+                st.info("👆 Click on a concept button above to learn more about it")
         
         if st.button("See the Game Code", use_container_width=True):
             st.session_state.active_tab = "code"
@@ -962,169 +926,15 @@ def main():
         st.header("💻 Game Code")
         st.write("Here's the Python code for your game. Download it and run on your computer!")
         
-        # Generate simple game code
-        if st.session_state.story and st.session_state.concepts:
-            # Extract keywords from story
-            keywords = re.findall(r'\b\w{4,}\b', st.session_state.story)[:3]
-            player_char = keywords[0].capitalize() if keywords else "Hero"
-            collect_item = keywords[1] if len(keywords) > 1 else "star"
-            obstacle = keywords[2] if len(keywords) > 2 else "rock"
-            
-            # Get concept emojis
-            concept_emojis = "".join([CONCEPTS[c]['emoji'] for c in st.session_state.concepts])
-            
-            game_code = f"""
-# {player_char}'s Adventure: {st.session_state.story[:20]}...
-# Teaches: {concept_emojis} {", ".join([CONCEPTS[c]['name'] for c in st.session_state.concepts])}
-
-import pygame
-import random
-import sys
-
-# Initialize pygame
-pygame.init()
-
-# Game setup
-WIDTH, HEIGHT = 800, 600
-screen = pygame.display.set_mode((WIDTH, HEIGHT))
-pygame.display.set_caption("{player_char}'s Adventure")
-clock = pygame.time.Clock()
-
-# Colors
-BACKGROUND = (230, 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
-player_size = 40
-player_x = 100
-player_y = HEIGHT // 2
-player_speed = 5
-
-# Goal setup
-goal_size = 30
-goal_x = WIDTH - 150
-goal_y = HEIGHT // 2
-
-# Variables concept: Tracking score
-score = 0
-font = pygame.font.SysFont(None, 36)
-
-# List concept: Creating obstacles
-obstacles = []
-for i in range(5):
-    obstacles.append([
-        random.randint(200, WIDTH - 100),
-        random.randint(50, HEIGHT - 100),
-        random.randint(30, 70),
-        random.randint(20, 50)
-    ])
-
-# List concept: Creating stars
-stars = []
-for i in range(5):
-    stars.append([
-        random.randint(100, WIDTH - 100),
-        random.randint(50, HEIGHT - 100),
-        20
-    ])
-
-# Game loop
-running = True
-while running:
-    # Event handling
-    for event in pygame.event.get():
-        if event.type == pygame.QUIT:
-            running = False
-    
-    # Player movement
-    keys = pygame.key.get_pressed()
-    if keys[pygame.K_UP] or keys[pygame.K_w]:
-        player_y -= player_speed
-    if keys[pygame.K_DOWN] or keys[pygame.K_s]:
-        player_y += player_speed
-    if keys[pygame.K_LEFT] or keys[pygame.K_a]:
-        player_x -= player_speed
-    if keys[pygame.K_RIGHT] or keys[pygame.K_d]:
-        player_x += player_speed
-    
-    # Boundary checking
-    player_x = max(0, min(WIDTH - player_size, player_x))
-    player_y = max(0, min(HEIGHT - player_size, player_y))
-    
-    # Collision detection with goal
-    player_rect = pygame.Rect(player_x, player_y, player_size, player_size)
-    goal_rect = pygame.Rect(goal_x, goal_y, goal_size, goal_size)
-    
-    # Conditional concept: Check for collision
-    if player_rect.colliderect(goal_rect):
-        # Function concept: Increase score
-        score += 10
-        # Move goal to new position
-        goal_x = random.randint(100, WIDTH - 100)
-        goal_y = random.randint(50, HEIGHT - 100)
-    
-    # Collision detection with stars
-    for star in stars[:]:
-        star_rect = pygame.Rect(star[0], star[1], star[2], star[2])
-        if player_rect.colliderect(star_rect):
-            score += 5
-            stars.remove(star)
-    
-    # Drawing
-    screen.fill(BACKGROUND)
-    
-    # Draw obstacles
-    for obstacle in obstacles:
-        pygame.draw.rect(screen, OBSTACLE_COLOR, 
-                         (obstacle[0], obstacle[1], obstacle[2], obstacle[3]))
-    
-    # Draw stars
-    for star in stars:
-        pygame.draw.circle(screen, STAR_COLOR, 
-                          (star[0] + star[2]//2, star[1] + star[2]//2), star[2]//2)
-    
-    # Draw player and goal
-    pygame.draw.rect(screen, PLAYER_COLOR, 
-                    (player_x, player_y, player_size, player_size))
-    pygame.draw.circle(screen, GOAL_COLOR, 
-                      (goal_x + goal_size//2, goal_y + goal_size//2), goal_size//2)
-    
-    # Display score
-    score_text = font.render(f"{collect_item.capitalize()}s: {{score}}", True, TEXT_COLOR)
-    screen.blit(score_text, (20, 20))
-    
-    # Display story title
-    title_text = font.render(f"{player_char}'s Adventure: {st.session_state.story[:20]}...", True, TEXT_COLOR)
-    screen.blit(title_text, (WIDTH // 2 - 150, 20))
-    
-    # Display concepts
-    concepts_text = font.render(f"Teaches: {', '.join([CONCEPTS[c]['name'] for c in st.session_state.concepts])}", True, TEXT_COLOR)
-    screen.blit(concepts_text, (20, HEIGHT - 40))
-    
-    # Display instructions
-    help_text = font.render("Arrow keys to move - Collect stars and reach the goal!", True, TEXT_COLOR)
-    screen.blit(help_text, (WIDTH // 2 - 200, HEIGHT - 80))
-    
-    # Update display
-    pygame.display.flip()
-    clock.tick(60)
-
-pygame.quit()
-sys.exit()
-"""
-            
+        if st.session_state.game_code:
             # Display code with syntax highlighting
             st.subheader("Your Game Code")
-            st.code(game_code, language="python")
+            st.code(st.session_state.game_code, language="python")
             
             # Download button
             st.download_button(
                 label="📥 Download Game Code",
-                data=game_code,
+                data=st.session_state.game_code,
                 file_name="story_game.py",
                 mime="text/python",
                 use_container_width=True
@@ -1132,16 +942,18 @@ sys.exit()
             
             # Code explanation
             st.subheader("🧠 Code Explanation")
-            st.markdown("""
+            st.markdown(f"""
             <div class="game-card">
-            <p>This code creates a game based on your story:</p>
+            <p>This code creates a game based on your story: <em>{st.session_state.story[:50]}...</em></p>
+            <p>Key programming concepts used:</p>
             <ul>
                 <li><strong>Variables:</strong> Used to track score and positions</li>
                 <li><strong>Conditionals:</strong> Check collisions and game rules</li>
-                <li><strong>Functions:</strong> pygame functions create the game mechanics</li>
+                <li><strong>Functions:</strong> Organize game mechanics into reusable blocks</li>
                 <li><strong>Loops:</strong> The game loop runs continuously</li>
                 <li><strong>Lists:</strong> Store obstacles and collectible stars</li>
             </ul>
+            <p>To run this game, you'll need to install PyGame and Python on your computer.</p>
             </div>
             """, unsafe_allow_html=True)
         else:
@@ -1150,6 +962,9 @@ sys.exit()
         if st.button("Create Another Story!", use_container_width=True):
             st.session_state.active_tab = "story"
             st.rerun()
+    
+    # Show toast messages
+    show_toast()
 
 if __name__ == "__main__":
     main()