# app.py - Enhanced Version with Playable Online Game
import streamlit as st
import random
import re
import time
import base64
import json
import requests
from PIL import Image
import io
import matplotlib.pyplot as plt
from groq import Groq
# Configure Streamlit page
st.set_page_config(
page_title="StoryCoder - Play & Learn Coding",
page_icon="🎮",
layout="wide",
initial_sidebar_state="expanded"
)
# Custom CSS with modern gradient background
st.markdown("""
""", unsafe_allow_html=True)
# Initialize session state
def init_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 'game_scenario' not in st.session_state:
st.session_state.game_scenario = ""
if 'game_code' not in st.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:
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:
st.session_state.goal_char = "⭐"
if 'obstacle_char' not in st.session_state:
st.session_state.obstacle_char = "🪨"
def reset_game_state():
st.session_state.game_state = {
"player_pos": [0, 0],
"goal_pos": [7, 7],
"obstacles": [[2, 2], [3, 4], [5, 3], [4, 6], [6, 5]],
"score": 0,
"moves": 0,
"game_over": False
}
# Concept database
CONCEPTS = {
"loop": {
"name": "Loop",
"emoji": "🔄",
"description": "Loops repeat actions multiple times",
"example": "for i in range(5):\n print('Jump!')",
"color": "#6A67CE",
"game_example": "Repeating jumps to cross a river"
},
"conditional": {
"name": "Conditional",
"emoji": "❓",
"description": "Conditionals make decisions in code",
"example": "if key_found:\n open_door()\nelse:\n keep_searching()",
"color": "#FF7C7C",
"game_example": "Choosing paths based on obstacles"
},
"function": {
"name": "Function",
"emoji": "✨",
"description": "Functions are reusable blocks of code",
"example": "def collect_star():\n score += 1\n play_sound()",
"color": "#FDD85D",
"game_example": "Creating a jump function used multiple times"
},
"variable": {
"name": "Variable",
"emoji": "📦",
"description": "Variables store information",
"example": "score = 0\nplayer_health = 100",
"color": "#1A8CD8",
"game_example": "Tracking collected stars"
},
"list": {
"name": "List",
"emoji": "📝",
"description": "Lists store collections of items",
"example": "inventory = ['sword', 'shield', 'potion']",
"color": "#4CAF50",
"game_example": "Storing collected treasures"
}
}
# 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"""
story_lower = story.lower()
detected_concepts = []
# Improved concept detection
# Check for loops
if any(word in story_lower for word in ["times", "repeat", "again", "multiple", "each", "every"]):
detected_concepts.append("loop")
# Check for conditionals
if any(word in story_lower for word in ["if", "when", "unless", "whether", "decide", "choice", "otherwise"]):
detected_concepts.append("conditional")
# Check for functions
if any(word in story_lower for word in ["make", "create", "do", "perform", "cast", "action", "use"]):
detected_concepts.append("function")
# Check for variables
if any(word in story_lower for word in ["is", "has", "set to", "value", "score", "count", "number"]):
detected_concepts.append("variable")
# Check for lists
if any(word in story_lower for word in ["and", "many", "several", "collection", "items", "group", "set of"]):
detected_concepts.append("list")
return list(set(detected_concepts)) if detected_concepts else ["variable", "function"]
# Generate game scenario using Groq
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)
return f"""
Game Title: {story[:15]} Adventure
Game Objective: Complete challenges based on your story: {story[:100]}...
Characters:
- Hero: The main character from your story
- Helper: A friendly guide who explains coding concepts
- Villain: A character that creates obstacles (if applicable)
Game Mechanics:
1. Move your character using arrow keys
2. Collect stars while avoiding obstacles
3. Reach the goal to win
4. Helper characters appear to teach {concept_list}
Coding Concepts: This game teaches {concept_list} through:
- Using loops to repeat actions
- Making decisions with conditionals
- Creating reusable functions
- Tracking progress with variables
- Managing collections with lists
Visual Description: Colorful game world with cartoon-style characters, vibrant landscapes, and magical effects.
"""
# 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]
)
return f"""
In this game based on your story "{story[:20]}...", we use programming concepts to make it work:
{concept_explanations}
As you play the game, think about:
1. How the game uses these concepts to create challenges
2. How you might change the code to make the game easier or harder
The code brings your story to life in a 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 = '#6A67CE'
goal_color = '#FDD85D'
obstacle_color = '#FF7C7C'
title = "Space Adventure"
elif theme == "jungle":
bg_color = '#143D2C'
player_color = '#6A67CE'
goal_color = '#FDD85D'
obstacle_color = '#D35400'
title = "Jungle Adventure"
else:
bg_color = '#3A015C'
player_color = '#6A67CE'
goal_color = '#FDD85D'
obstacle_color = '#FF7C7C'
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)
# 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
# Handle player movement
def move_player(direction):
"""Update player position based on movement direction"""
state = st.session_state.game_state
player_pos = state["player_pos"]
goal_pos = state["goal_pos"]
obstacles = state["obstacles"]
new_pos = player_pos.copy()
if direction == "up" and player_pos[0] > 0:
new_pos[0] -= 1
elif direction == "down" and player_pos[0] < 7:
new_pos[0] += 1
elif direction == "left" and player_pos[1] > 0:
new_pos[1] -= 1
elif direction == "right" and player_pos[1] < 7:
new_pos[1] += 1
# Check if new position is valid
if new_pos != player_pos:
# Check for obstacle collision
if new_pos not in obstacles:
state["player_pos"] = new_pos
state["moves"] += 1
# Check for goal collision
if new_pos == goal_pos:
state["score"] += 10
state["game_over"] = True
# Check for star collection
elif new_pos in [[3, 3], [4, 4], [5, 5]]:
state["score"] += 5
st.session_state.game_state = state
# Create a playable game in the browser
def create_playable_game():
"""Create an interactive grid-based game"""
st.subheader("🎮 Play Your Game Now!")
state = st.session_state.game_state
player_pos = state["player_pos"]
goal_pos = state["goal_pos"]
obstacles = state["obstacles"]
# Score board
st.markdown(f"""
Stars Collected: {state["score"]} | Moves: {state["moves"]}
""", unsafe_allow_html=True)
# Game board
st.markdown("", unsafe_allow_html=True)
# Create grid cells
for row in range(8):
cols = st.columns(8)
for col in range(8):
pos = [row, col]
cell_class = "cell"
if pos == player_pos:
cell_class += " player"
cell_content = st.session_state.player_char
elif pos == goal_pos:
cell_class += " goal"
cell_content = "🏁"
elif pos in obstacles:
cell_class += " obstacle"
cell_content = st.session_state.obstacle_char
elif pos in [[3, 3], [4, 4], [5, 5]]:
cell_class += " goal"
cell_content = "⭐"
else:
cell_class += " empty"
cell_content = ""
with cols[col]:
st.markdown(f"
{cell_content}
", unsafe_allow_html=True)
st.markdown("
", unsafe_allow_html=True)
col1, col2, col3, col4 = st.columns(4)
with col1:
st.button("↑", key="up", on_click=move_player, args=("up",), use_container_width=True)
with col2:
st.button("←", key="left", on_click=move_player, args=("left",), use_container_width=True)
with col3:
st.button("↓", key="down", on_click=move_player, args=("down",), use_container_width=True)
with col4:
st.button("→", key="right", on_click=move_player, args=("right",), use_container_width=True)
st.markdown("
", unsafe_allow_html=True)
# Reset button
st.button("🔄 Reset Game", on_click=reset_game_state, use_container_width=True)
# Game over message
if state["game_over"]:
st.balloons()
st.success(f"🎉 You won! Final Score: {state['score']} in {state['moves']} moves!")
# Main application function
def main():
init_session_state()
# Sidebar for API key
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()
st.header("🎮 Game Theme")
col1, col2, col3 = st.columns(3)
with col1:
st.session_state.player_char = st.selectbox(
"Player Character",
["🦸", "👨🚀", "🧙♂️", "🐱", "🐉", "🦊"],
index=0
)
with col2:
st.session_state.goal_char = st.selectbox(
"Goal Character",
["🏁", "🏰", "🚩", "🎯", "🔑"],
index=0
)
with col3:
st.session_state.obstacle_char = st.selectbox(
"Obstacle Character",
["🪨", "🌵", "🔥", "🌊", "🌳"],
index=0
)
st.divider()
st.caption("Made with ❤️ for kids learning to code")
st.caption("v3.0 | StoryCoder")
st.title("🎮 StoryCoder - Play & Learn Coding!")
st.subheader("Create your story, play the game, and learn programming concepts!")
# Create tabs
st.markdown('', unsafe_allow_html=True)
col1, col2, col3, col4, col5 = st.columns(5)
with col1:
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):
st.session_state.active_tab = "game"
with col3:
if st.button("🔍 Concepts", use_container_width=True):
st.session_state.active_tab = "concepts"
with col4:
if st.button("💻 Game Code", use_container_width=True):
st.session_state.active_tab = "code"
with col5:
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('
', unsafe_allow_html=True)
# Story creation tab
if st.session_state.active_tab == "story":
with st.container():
st.header("📖 Create Your Story")
st.write("Write a short story (2-5 sentences) and I'll turn it into a playable game!")
story = st.text_area(
"Your story:",
height=200,
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"
)
if st.button("Create Game!", use_container_width=True):
if len(story) < 10:
st.error("Your story needs to be at least 10 characters long!")
else:
st.session_state.story = story
st.session_state.loading = True
with st.spinner("🧠 Analyzing your story for coding concepts..."):
st.session_state.concepts = analyze_story(story)
with st.spinner("🎮 Creating your game scenario..."):
st.session_state.game_scenario = generate_game_scenario(
story, st.session_state.concepts
)
with st.spinner("📚 Creating coding explanations..."):
st.session_state.game_explanation = generate_game_explanation(
story, st.session_state.concepts, st.session_state.game_scenario
)
with st.spinner("🖼️ Generating game preview..."):
st.session_state.game_preview = generate_game_preview(story)
reset_game_state()
st.session_state.active_tab = "game"
st.session_state.loading = False
st.rerun()
# 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":
st.header("🎮 Your Story Game")
if not st.session_state.story:
st.warning("Please create a story first!")
st.session_state.active_tab = "story"
st.rerun()
# Display game scenario
st.subheader("🌟 Game Scenario")
st.markdown(f'{st.session_state.game_scenario}
', 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()
# Game explanation
st.subheader("📚 How This Game Teaches Coding")
st.markdown(f'{st.session_state.game_explanation}
', unsafe_allow_html=True)
if st.button("Learn Coding Concepts", use_container_width=True):
st.session_state.active_tab = "concepts"
st.rerun()
# Concepts tab
elif st.session_state.active_tab == "concepts":
st.header("🔍 Coding Concepts in Your Game")
st.subheader("Your game teaches these programming concepts:")
if not st.session_state.concepts:
st.warning("No concepts detected in your story! Try adding words like '3 times', 'if', or 'collect'.")
else:
for concept in st.session_state.concepts:
if concept in CONCEPTS:
details = CONCEPTS[concept]
st.markdown(f"""
{details['emoji']}
{details['name']}
{details['description']}
In your game: {details['game_example']}
{details['example']}
""", unsafe_allow_html=True)
if st.button("See the Game Code", use_container_width=True):
st.session_state.active_tab = "code"
st.rerun()
# Code tab
elif st.session_state.active_tab == "code":
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, 240, 255) # Light blue
PLAYER_COLOR = (106, 103, 206) # Purple
GOAL_COLOR = (253, 216, 93) # Yellow
OBSTACLE_COLOR = (255, 124, 124) # Coral
TEXT_COLOR = (45, 50, 80) # Dark blue
# Player setup
player_size = 40
player_x = 100
player_y = HEIGHT // 2
player_speed = 5
# Goal setup
goal_size = 30
goal_x = WIDTH - 150
goal_y = HEIGHT // 2
# Variables concept: Tracking score
score = 0
font = pygame.font.SysFont(None, 36)
# List concept: Creating obstacles
obstacles = []
for i in range(5):
obstacles.append([
random.randint(200, WIDTH - 100),
random.randint(50, HEIGHT - 100),
random.randint(30, 70),
random.randint(20, 50)
])
# Game loop
running = True
while running:
# Event handling
for event in pygame.event.get():
if event.type == pygame.QUIT:
running = False
# Player movement
keys = pygame.key.get_pressed()
if keys[pygame.K_UP] or keys[pygame.K_w]:
player_y -= player_speed
if keys[pygame.K_DOWN] or keys[pygame.K_s]:
player_y += player_speed
if keys[pygame.K_LEFT] or keys[pygame.K_a]:
player_x -= player_speed
if keys[pygame.K_RIGHT] or keys[pygame.K_d]:
player_x += player_speed
# Boundary checking
player_x = max(0, min(WIDTH - player_size, player_x))
player_y = max(0, min(HEIGHT - player_size, player_y))
# Collision detection with goal
player_rect = pygame.Rect(player_x, player_y, player_size, player_size)
goal_rect = pygame.Rect(goal_x, goal_y, goal_size, goal_size)
# Conditional concept: Check for collision
if player_rect.colliderect(goal_rect):
# Function concept: Increase score
score += 1
# Move goal to new position
goal_x = random.randint(100, WIDTH - 100)
goal_y = random.randint(50, HEIGHT - 100)
# Drawing
screen.fill(BACKGROUND)
# Draw obstacles
for obstacle in obstacles:
pygame.draw.rect(screen, OBSTACLE_COLOR,
(obstacle[0], obstacle[1], obstacle[2], obstacle[3]))
# Draw player and goal
pygame.draw.rect(screen, PLAYER_COLOR,
(player_x, player_y, player_size, player_size))
pygame.draw.circle(screen, GOAL_COLOR,
(goal_x + goal_size//2, goal_y + goal_size//2), goal_size//2)
# Display score
score_text = font.render(f"{collect_item.capitalize()}s: {{score}}", True, TEXT_COLOR)
screen.blit(score_text, (20, 20))
# Display story title
title_text = font.render(f"{player_char}'s Adventure: {st.session_state.story[:20]}...", True, TEXT_COLOR)
screen.blit(title_text, (WIDTH // 2 - 150, 20))
# Display concepts
concepts_text = font.render(f"Teaches: {', '.join([CONCEPTS[c]['name'] for c in st.session_state.concepts])}", True, TEXT_COLOR)
screen.blit(concepts_text, (20, HEIGHT - 40))
# Display instructions
help_text = font.render("Arrow keys to move - Collect the yellow circles!", True, TEXT_COLOR)
screen.blit(help_text, (WIDTH // 2 - 200, HEIGHT - 80))
# Update display
pygame.display.flip()
clock.tick(60)
pygame.quit()
sys.exit()
"""
# Display code with syntax highlighting
st.subheader("Your Game Code")
st.code(game_code, language="python")
# Download button
st.download_button(
label="📥 Download Game Code",
data=game_code,
file_name="story_game.py",
mime="text/python",
use_container_width=True
)
else:
st.warning("No game code generated yet!")
# Game running instructions
st.subheader("🖥️ How to Run Your Game")
st.markdown("""
- Install Python from python.org
- Install PyGame: Open command prompt and type
pip install pygame
- Save the game code to a file named
my_game.py
- Run the game:
python my_game.py
- Use arrow keys or WASD to play!
""", unsafe_allow_html=True)
if st.button("Create Another Story!", use_container_width=True):
st.session_state.active_tab = "story"
st.rerun()
if __name__ == "__main__":
main()