[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect, useRef } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { X, Volume2, VolumeX, HelpCircle } from "lucide-react" const MAIN_THEMES = [ { id: "identity", emoji: "🌍", title: "Identity & Human Rights", description: "Explore who we are, how we're treated, and why respect and equality matter.", }, { id: "wellbeing", emoji: "🧠", title: "Wellbeing & Mental Health", description: "Talk about emotions, care, stress, and how to support yourself and others.", }, { id: "sustainability", emoji: "🌱", title: "Sustainability & Planet Care", description: "Discover how our actions impact the Earth and what we can do to protect it.", }, { id: "digital", emoji: "💬", title: "Digital Life & Social Influence", description: "Think about the online world, social media, and how it affects us.", }, { id: "activism", emoji: "✊", title: "Youth Power & Participation", description: "Explore how young people can make change and speak up for what they believe.", }, ] const SUBTOPICS = { identity: [ { title: "Gender Identity and Respect", description: "Everyone experiences gender in their own way. Some people feel like boys, some like girls, and others don't feel either. Everyone has the right to be seen and respected for who they are, without being judged, excluded, or laughed at.", questions: [ "What helps someone feel safe showing their identity?", "Why do people hide who they are?", "How do you feel when people don't listen to you?", "What would respect look like in a story?", ], }, { title: "LGBTQIA+ Rights", description: "Some people love differently or identify in ways not everyone understands. These people often face hate or fear, just for being themselves. Everyone deserves to live without shame, fear, or violence.", questions: [ "What happens when someone feels they can't be themselves?", "What does it mean to be an ally?", "How can small actions make people feel safer?", "What makes a place feel welcoming?", ], }, { title: "Feminism", description: "Feminism means believing that people of all genders deserve equal rights and chances. It's not about hating anyone — it's about fairness and respect. Still, many people don't understand it or feel afraid of it.", questions: [ "What do people think feminism means?", "Why do some people not support it?", "What would equality look like in everyday life?", "Who is a role model for fairness?", ], }, { title: "Stereotypes and Discrimination", description: "Stereotypes are ideas that people believe about others, even if they're not true. These ideas can lead to unfair treatment and exclusion in school, jobs, and daily life.", questions: [ "What stereotypes exist in your country?", "Have you ever felt judged unfairly?", "What happens when someone breaks a stereotype?", "How can a story show real change?", ], }, { title: "Migration and Belonging", description: "People move between places for safety, work, or dreams. Being new can feel hard. Making people feel part of a group is what creates true community.", questions: [ "Why do people leave their countries?", "What makes someone feel included?", "How do we treat people who are new?", "What story could show real belonging?", ], }, { title: "Religious and Cultural Identity", description: "Beliefs and traditions are important to many people, but can also become a reason for exclusion. Respecting differences can create a richer, more beautiful world.", questions: [ "How do people show their culture?", "When do differences cause conflict?", "How can culture connect people?", "What does respectful curiosity look like?", ], }, { title: "Equal Rights for All", description: "Some people are treated worse just because of who they are — their skin color, background, gender, or ability. Rights must be for everyone, not just a few.", questions: [ "What does 'equality' mean to you?", "Who gets left out in your town or school?", "What small actions change unfairness?", "How can a group stand up for others?", ], }, ], wellbeing: [ { title: "Emotions and Emotional Expression", description: "Emotions are part of everyone's life, but not all people know how to talk about them. Some hide their feelings to appear strong or to avoid being judged. Learning to name and share feelings is a big step to healthy living.", questions: [ "Why do people hide emotions?", "What helps you feel safe to express yourself?", "What does 'emotional strength' mean to you?", "How can a group support someone feeling sad?", ], }, { title: "Stress and Pressure", description: "Pressure can come from school, family, social media, or friends. When it builds up, it can affect health and happiness. Not all pressure is bad, but too much can be dangerous.", questions: [ "Where does pressure come from in your life?", "What are signs someone is too stressed?", "What would a 'stress-free day' look like?", "Who can help when someone is overwhelmed?", ], }, { title: "Self-Esteem and Confidence", description: "Feeling good about yourself isn't always easy. People compare themselves with others and may feel 'not enough.' Building confidence means recognizing your value and also helping others feel good too.", questions: [ "What helps someone feel confident?", "What breaks someone's self-esteem?", "When do you feel proud of yourself?", "How can a scene show someone growing stronger?", ], }, { title: "Loneliness and Isolation", description: "You can feel lonely even in a crowd. Loneliness doesn't always mean being alone — it's about feeling disconnected. Talking about this can help break the silence and create connection.", questions: [ "What causes loneliness?", "What makes someone feel seen?", "What role does technology play in feeling alone?", "How can a scene show someone reaching out?", ], }, { title: "Asking for Help", description: "Many people think asking for help means weakness, but it's actually brave. Knowing when and how to ask for support is a life skill, not a failure.", questions: [ "Why is asking for help hard?", "Who do people turn to in crisis?", "What does 'support' look like in real life?", "How can a character change thanks to support?", ], }, { title: "Body Image and Appearance", description: "Many young people worry about how they look. Media, trends, and comments from others can hurt. Everyone has the right to feel good in their body, no matter the shape, color, or ability.", questions: [ "What messages do you get about appearance?", "How do these messages affect people?", "What helps someone feel comfortable in their skin?", "How could a scene challenge beauty norms?", ], }, { title: "Healthy Relationships", description: "Friendships, love, family… relationships are part of life. Healthy ones help us grow. Toxic ones can hurt us. Learning to set limits and recognize respect is essential.", questions: [ "What makes a relationship healthy?", "What are signs of disrespect?", "How do we learn to say 'no'?", "What happens when someone crosses a line?", ], }, ], sustainability: [ { title: "Climate Change", description: "The Earth is warming. Storms, fires, floods… the climate is changing fast. It's a huge issue, but even small choices can make a difference when people act together.", questions: [ "What signs of climate change do you see around you?", "What can one person do?", "What makes people care (or not care)?", "How can a group act in the story?", ], }, { title: "Pollution and Waste", description: "Plastic in the ocean, trash in the streets — pollution is everywhere. Reducing waste, recycling, and changing habits are part of protecting the future.", questions: [ "Where does your waste go?", "What are easy ways to reduce pollution?", "Why do people still litter?", "What happens in a place filled with trash?", ], }, { title: "Fast Fashion", description: "Trendy clothes come cheap, but at a cost: poor working conditions, pollution, and huge waste. Many don't know the impact of what they wear.", questions: [ "Where do your clothes come from?", "What's the problem with 'cheap and fast'?", "What are better fashion choices?", "How could a scene show transformation?", ], }, { title: "Animal Rights and Biodiversity", description: "Animals share the planet with us. Many are in danger because of human actions. Protecting animals and nature is part of taking care of the planet.", questions: [ "How do we treat animals in daily life?", "Why does biodiversity matter?", "What happens when animals disappear?", "What would animals say if they could speak?", ], }, { title: "Sustainable Eating", description: "Food affects the planet — not just our bodies. Eating less meat, wasting less, and choosing local products helps the environment.", questions: [ "What do you know about where your food comes from?", "Why do people waste food?", "What are easy changes people can make?", "How could a character inspire others to eat better?", ], }, { title: "Energy and Resources", description: "Electricity, water, gas — we use a lot, often without thinking. Saving resources helps protect our future. It's not just about money; it's about care.", questions: [ "What uses the most energy in your home?", "What habits waste resources?", "What motivates people to change?", "How can a character become aware?", ], }, { title: "Local Actions, Global Impact", description: "Even small actions — like planting a tree or starting a clean-up — can lead to bigger change. When communities act, the world changes.", questions: [ "What local problems do you see?", "Who's already taking action near you?", "What stops people from acting?", "How can a group create something great?", ], }, ], digital: [ { title: "Social Media and Self-Image", description: "Likes, followers, perfect photos — social media can make us feel great or terrible about ourselves. What we see online isn't always real, but it affects how we feel about our lives.", questions: [ "How does social media make you feel about yourself?", "What's real vs. fake online?", "Why do people compare themselves to others?", "How could a character break free from online pressure?", ], }, { title: "Cyberbullying and Online Harassment", description: "The internet can be cruel. People say things online they'd never say face-to-face. Cyberbullying can follow you everywhere and hurt deeply. Everyone deserves to feel safe online.", questions: [ "Why are people meaner online than in person?", "What does cyberbullying look like?", "How can someone get help?", "What would a supportive online community look like?", ], }, { title: "Digital Privacy and Safety", description: "Everything you do online leaves traces. Companies collect your data, strangers can find your information, and nothing really disappears. Protecting yourself online is important.", questions: [ "What information about you is online?", "Who can see what you post?", "What are the risks of sharing too much?", "How can a character learn to be safer online?", ], }, { title: "Screen Time and Digital Addiction", description: "Phones, games, videos — screens are everywhere. Sometimes we use them so much we forget the real world. Finding balance between online and offline life is a challenge.", questions: [ "How much time do you spend on screens?", "What makes it hard to put devices away?", "What do you miss when you're always online?", "How could a character find better balance?", ], }, { title: "Fake News and Information", description: "Not everything online is true. Fake news, conspiracy theories, and misleading information spread fast. Learning to check sources and think critically is essential.", questions: [ "How do you know if something online is true?", "Why do people believe fake news?", "What happens when false information spreads?", "How can a character become a fact-checker?", ], }, { title: "Online Relationships and Dating", description: "Meeting people online is normal now. But digital relationships can be complicated. Catfishing, pressure, and misunderstandings happen. Healthy boundaries matter online too.", questions: [ "What's different about online vs. offline relationships?", "What are the risks of meeting people online?", "How do you build trust digitally?", "What would healthy online dating look like?", ], }, ], activism: [ { title: "Youth Voice and Power", description: "Young people often feel ignored. But they have ideas, energy, and power to change things. Having a voice means being heard — and respected.", questions: [ "Where can young people speak up?", "What makes adults listen (or not)?", "How do you react when you see injustice?", "How can youth lead in a scene?", ], }, { title: "Protests and Movements", description: "From climate strikes to marches for rights, protests are ways people show what matters. Movements start when people feel enough is enough.", questions: [ "What causes would you protest for?", "What makes a protest peaceful or violent?", "What's the risk in standing up?", "How does a group become a movement?", ], }, { title: "Social Media and Change", description: "Likes, shares, hashtags… social media spreads messages fast. It can inspire, or it can harm. Using it well is part of activism today.", questions: [ "What makes a post powerful?", "What's fake vs. real online action?", "How can social media help or hurt?", "What would a character go viral for?", ], }, { title: "Volunteering and Community Action", description: "Helping others changes both the helper and the helped. Volunteering is a way to act with heart, not just words. Community projects can solve real problems.", questions: [ "What issues could you help with locally?", "What stops people from giving time?", "How do you feel when you help?", "How could a small act grow bigger?", ], }, { title: "Democracy and Participation", description: "Voting, meeting, deciding together — democracy is more than elections. It's a way to live. Participation means taking part, not just watching.", questions: [ "What does real participation look like?", "How can people be heard between elections?", "What happens when people don't care?", "How can a scene show a fair decision?", ], }, { title: "Courage and Speaking Out", description: "It takes courage to speak the truth — especially when no one else does. Whistleblowers, leaders, and everyday heroes change things by daring to speak.", questions: [ "When did you see someone speak up?", "What gives people courage?", "What's the risk of silence?", "What does bravery look like?", ], }, { title: "Creative Activism (Art, Theatre, Music)", description: "Art can wake people up. A song, a play, or a mural can touch hearts and make people think. Creativity is a powerful way to spread messages.", questions: [ "What art forms speak to you?", "What makes a message memorable?", "What role does creativity play in protest?", "How can a scene be both art and action?", ], }, ], } const ANIMALS = [ { emoji: "🦁", name: "Lion", description: "Wants to lead, but sometimes forgets to listen." }, { emoji: "🐭", name: "Mouse", description: "Quiet, observant, and full of surprising ideas." }, { emoji: "🦊", name: "Fox", description: "Clever and sarcastic, often teases others." }, { emoji: "🐶", name: "Dog", description: "Energetic and loyal, but talks too much sometimes." }, { emoji: "🐱", name: "Cat", description: "Independent and picky, not always friendly." }, { emoji: "🐼", name: "Panda", description: "Chill and caring, but a bit lazy." }, { emoji: "🐘", name: "Elephant", description: "Wise and gentle, but sometimes stubborn." }, { emoji: "🐍", name: "Snake", description: "Smart and strategic — or maybe sneaky?" }, { emoji: "🐸", name: "Frog", description: "Always jumping into things without thinking." }, { emoji: "🐧", name: "Penguin", description: "Loyal team player, but hates being ignored." }, { emoji: "🐺", name: "Wolf", description: "Strong and intense, doesn't trust easily." }, { emoji: "🦜", name: "Parrot", description: "Loud and playful, sometimes repeats nonsense." }, { emoji: "🦉", name: "Owl", description: "Thinks a lot before acting. Maybe too much." }, { emoji: "🐢", name: "Turtle", description: "Slow and steady, but hates being rushed." }, { emoji: "🐴", name: "Horse", description: "Strong, proud, sometimes tries to control others." }, { emoji: "🦝", name: "Raccoon", description: "Mischievous and unpredictable, loves chaos." }, { emoji: "🦔", name: "Hedgehog", description: "Shy and defensive, needs time to open up." }, { emoji: "🦂", name: "Scorpion", description: "Protective, bold, sometimes a little mean." }, { emoji: "🦩", name: "Flamingo", description: "Stylish and dramatic, loves attention." }, { emoji: "🦦", name: "Otter", description: "Playful and quick, hates being bored." }, ] const CHALLENGES = [ { title: "🧊 Freeze!", description: "All characters must freeze for 5 seconds in the middle of the scene.", }, { title: "🎤 Switch voices!", description: "One character must suddenly change their voice (high, low, robotic...) for 10 seconds.", }, { title: "🕺 Dance break!", description: "Include a short improvised dance by one or more characters.", }, { title: "🤐 Silent moment!", description: "The whole group must act without speaking for 10 seconds.", }, { title: "🎭 Change of emotion!", description: "One character must suddenly act very angry, very sad, or very excited — just for a moment.", }, { title: "📦 Invisible object!", description: "Include one important imaginary object (a notebook, a box, a toy...) that all characters treat as real.", }, { title: "🎉 Celebrate something weird!", description: "Everyone must suddenly celebrate something unusual (like 'National Socks Day').", }, { title: "🙊 Only sounds!", description: "For 10 seconds, everyone must only speak using animal sounds or weird noises — no real words allowed.", }, { title: "🪐 Zero gravity!", description: "For 10 seconds, all characters must act like gravity has disappeared — float, wobble, or fly slowly...", }, { title: "🙋 Audience invasion!", description: "Someone from the audience must be included for 10 seconds — maybe they get asked a question or given an imaginary gift!", }, { title: "🗯️ Crazy word challenge!", description: "Each character must include this word during the scene: **Cucumberlicious**. They must say it seriously, like it’s totally normal.", }, { title: "🗯️ Crazy word challenge!", description: "Each character must include this word during the scene: **SpaceToaster**. They must say it seriously, like it’s totally normal.", }, { title: "🗯️ Crazy word challenge!", description: "Each character must include this word during the scene: **ZiggleZaggle**. They must say it seriously, like it’s totally normal.", }, { title: "🗯️ Crazy word challenge!", description: "Each character must include this word during the scene: **Blorf**. They must say it seriously, like it’s totally normal.", }, { title: "🪞 Mirror mode!", description: "For 7 seconds, one character must copy the movements or words of another, like a reflection.", }, { title: "👏 Slow clap!", description: "At one moment, all characters must do a dramatic slow clap — then go back to the scene like nothing happened.", }, { title: "⏸️ Freeze & narrate!", description: "The scene freezes for 10 seconds while one character becomes the narrator and describes what’s going on — dramatic or silly!", }, { title: "🔁 Emotion swap!", description: "Two characters must switch emotions for 10 seconds — for example, the sad one becomes excited and the shy one becomes loud.", }, ] // Spinning animation emojis for each column const SPIN_EMOJIS = { subtopic: ["🎭", "🎪", "🎨", "🎬", "🎯", "💡", "🔍", "📚"], characters: ["🐧", "🦁", "🐭", "🦊", "🐶", "🐱", "🐼", "🐸"], questions: ["💬", "❓", "🤔", "💭", "🗣️", "📝", "🎤", "💡"], } // Audio hook for managing sound effects function useAudio() { const [isMuted, setIsMuted] = useState(false) const audioContextRef = useRef(null) useEffect(() => { // Initialize AudioContext on first user interaction const initAudio = () => { if (!audioContextRef.current) { audioContextRef.current = new (window.AudioContext || (window as any).webkitAudioContext)() } } document.addEventListener("click", initAudio, { once: true }) return () => document.removeEventListener("click", initAudio) }, []) const playSound = (frequency: number, duration: number, type: OscillatorType = "sine", volume = 0.1) => { if (isMuted || !audioContextRef.current) return try { const oscillator = audioContextRef.current.createOscillator() const gainNode = audioContextRef.current.createGain() oscillator.connect(gainNode) gainNode.connect(audioContextRef.current.destination) oscillator.frequency.setValueAtTime(frequency, audioContextRef.current.currentTime) oscillator.type = type gainNode.gain.setValueAtTime(0, audioContextRef.current.currentTime) gainNode.gain.linearRampToValueAtTime(volume, audioContextRef.current.currentTime + 0.01) gainNode.gain.exponentialRampToValueAtTime(0.001, audioContextRef.current.currentTime + duration) oscillator.start(audioContextRef.current.currentTime) oscillator.stop(audioContextRef.current.currentTime + duration) } catch (error) { console.log("Audio playback failed:", error) } } const playButtonClick = () => { playSound(800, 0.1, "sine", 0.05) } const playTransition = () => { playSound(600, 0.2, "sine", 0.08) setTimeout(() => playSound(800, 0.15, "sine", 0.06), 100) } const playSpinStart = () => { // Ascending notes for spin start playSound(400, 0.1, "sine", 0.08) setTimeout(() => playSound(500, 0.1, "sine", 0.08), 50) setTimeout(() => playSound(600, 0.1, "sine", 0.08), 100) setTimeout(() => playSound(700, 0.15, "sine", 0.08), 150) } const playSpinComplete = () => { // Success chime playSound(800, 0.2, "sine", 0.1) setTimeout(() => playSound(1000, 0.2, "sine", 0.08), 100) setTimeout(() => playSound(1200, 0.3, "sine", 0.06), 200) } const playChallenge = () => { // Playful challenge sound playSound(600, 0.1, "square", 0.06) setTimeout(() => playSound(800, 0.1, "square", 0.06), 80) setTimeout(() => playSound(600, 0.1, "square", 0.06), 160) setTimeout(() => playSound(900, 0.2, "square", 0.06), 240) } const playHover = () => { playSound(1000, 0.05, "sine", 0.03) } const playModalOpen = () => { playSound(500, 0.15, "sine", 0.06) setTimeout(() => playSound(700, 0.2, "sine", 0.05), 80) } const playModalClose = () => { playSound(700, 0.1, "sine", 0.05) setTimeout(() => playSound(500, 0.15, "sine", 0.04), 60) } return { isMuted, setIsMuted, playButtonClick, playTransition, playSpinStart, playSpinComplete, playChallenge, playHover, playModalOpen, playModalClose, } } // Spinning emoji animation component function SpinningEmoji({ emojis, isSpinning }: { emojis: string[]; isSpinning: boolean }) { const [currentEmoji, setCurrentEmoji] = useState(0) useEffect(() => { if (!isSpinning) return const interval = setInterval(() => { setCurrentEmoji((prev) => (prev + 1) % emojis.length) }, 100) return () => clearInterval(interval) }, [isSpinning, emojis]) if (!isSpinning) return null return

{emojis[currentEmoji]}

} // Improved random function to avoid consecutive duplicates function getRandomIndex(array: any[], previousIndex: number | null = null): number { if (array.length <= 1) return 0 let newIndex do { newIndex = Math.floor(Math.random() * array.length) } while (newIndex === previousIndex && array.length > 1) return newIndex } export default function SocialJungleGame() { const [screen, setScreen] = useState<"intro" | "theme-selection" | "group-size" | "game">("intro") const [showCredits, setShowCredits] = useState(false) const [showInstructions, setShowInstructions] = useState(false) const [showSpinWarning, setShowSpinWarning] = useState(false) const [showNewGameWarning, setShowNewGameWarning] = useState(false) const [selectedTheme, setSelectedTheme] = useState(null) const [groupSize, setGroupSize] = useState(null) const [isSpinning, setIsSpinning] = useState(false) const [hasSpun, setHasSpun] = useState(false) const [selectedSubtopic, setSelectedSubtopic] = useState(null) const [selectedAnimals, setSelectedAnimals] = useState([]) const [selectedChallenge, setSelectedChallenge] = useState(null) const [previousSubtopicIndex, setPreviousSubtopicIndex] = useState(null) const [previousAnimalsIndices, setPreviousAnimalsIndices] = useState([]) const { isMuted, setIsMuted, playButtonClick, playTransition, playSpinStart, playSpinComplete, playChallenge, playHover, playModalOpen, playModalClose, } = useAudio() const startApp = () => { playTransition() setScreen("theme-selection") } const selectTheme = (themeId: string) => { playButtonClick() setSelectedTheme(themeId) setTimeout(() => { playTransition() setScreen("group-size") }, 100) } const selectGroupSize = (size: number) => { playButtonClick() setGroupSize(size) setTimeout(() => { playTransition() setScreen("game") // Don't auto-generate on entry - wait for first spin }, 100) } const generateRandomResult = () => { if (!selectedTheme || !groupSize) return // Select random subtopic from chosen theme (avoid previous) const subtopics = SUBTOPICS[selectedTheme as keyof typeof SUBTOPICS] const newSubtopicIndex = getRandomIndex(subtopics, previousSubtopicIndex) const randomSubtopic = subtopics[newSubtopicIndex] setSelectedSubtopic(randomSubtopic) setPreviousSubtopicIndex(newSubtopicIndex) // Select random animals based on group size (avoid previous combination) const newAnimalsIndices: number[] = [] const usedIndices = new Set(previousAnimalsIndices) for (let i = 0; i < groupSize; i++) { let newIndex let attempts = 0 do { newIndex = Math.floor(Math.random() * ANIMALS.length) attempts++ } while ((newAnimalsIndices.includes(newIndex) || (attempts < 10 && usedIndices.has(newIndex))) && attempts < 20) newAnimalsIndices.push(newIndex) } const randomAnimals = newAnimalsIndices.map((index) => ANIMALS[index]) setSelectedAnimals(randomAnimals) setPreviousAnimalsIndices(newAnimalsIndices) } const handleSpinClick = () => { if (isSpinning) return if (hasSpun) { // Show warning if already spun playModalOpen() setShowSpinWarning(true) } else { // First spin, proceed directly spinRandomizer() } } const confirmSpin = () => { playModalClose() setShowSpinWarning(false) spinRandomizer() } const spinRandomizer = () => { playSpinStart() setIsSpinning(true) setSelectedChallenge(null) setTimeout(() => { generateRandomResult() setIsSpinning(false) setHasSpun(true) playSpinComplete() }, 2000) } const handleNewGameClick = () => { playModalOpen() setShowNewGameWarning(true) } const confirmNewGame = () => { playModalClose() setShowNewGameWarning(false) resetGame() } const addChallenge = () => { playChallenge() const randomChallenge = CHALLENGES[Math.floor(Math.random() * CHALLENGES.length)] setSelectedChallenge(randomChallenge) } const resetGame = () => { playTransition() setScreen("intro") setSelectedTheme(null) setGroupSize(null) setSelectedSubtopic(null) setSelectedAnimals([]) setSelectedChallenge(null) setIsSpinning(false) setHasSpun(false) setShowCredits(false) setShowInstructions(false) setShowSpinWarning(false) setShowNewGameWarning(false) setPreviousSubtopicIndex(null) setPreviousAnimalsIndices([]) } const openCredits = () => { playModalOpen() setShowCredits(true) } const closeCredits = () => { playModalClose() setShowCredits(false) } const openInstructions = () => { playModalOpen() setShowInstructions(true) } const closeInstructions = () => { playModalClose() setShowInstructions(false) } const closeSpinWarning = () => { playModalClose() setShowSpinWarning(false) } const closeNewGameWarning = () => { playModalClose() setShowNewGameWarning(false) } if (screen === "intro") { return (

{/* Sound Toggle */} {/* How to Play Button */}

🐾 The Social Jungle

A creative and fun game for groups of young people.

Create short scenes with animals, explore important topics and talk about things that matter.

{/* Credits Button */} {/* Instructions Modal */} {showInstructions && (

❓ How to Play

🎯 Step 1: Choose your theme (like Identity, Environment, or Digital Life)

👥 Step 2: Tell us how many people are in your group (2-6 people)

🎲 Step 3: Spin the wheel to get your topic, animal characters, and questions

🎭 Step 4: Create and perform a short scene with your group!

✨ Have fun, be creative, and respect everyone! ✨

)} {/* Credits Modal */} {showCredits && (

Credits

This game was created by Marisa, Fabio, Gabrielle, Gabriel, Tomás, and Lucía during the training course:

!isMuted && playButtonClick()} className="block text-teal-600 hover:text-teal-800 font-semibold underline text-lg" > CTRL + Y – Transforming Digital Spaces in Youth Work

)}

) } if (screen === "theme-selection") { return (

{/* Sound Toggle */}

🎯 Choose your Youth Exchange Theme

Your game experience will be based on the theme of your project.

{MAIN_THEMES.map((theme) => ( selectTheme(theme.id)} onMouseEnter={() => !isMuted && playHover()} >

{theme.emoji}

{theme.title}

{theme.description}

))}

) } if (screen === "group-size") { return (

{/* Sound Toggle */}

👥 How many people are in your group?

{/* Large Number Emoji Buttons */}

{[2, 3, 4, 5, 6].map((size) => ( ))}

) } if (screen === "game") { const currentTheme = MAIN_THEMES.find((t) => t.id === selectedTheme) return (

{/* Sound Toggle */} {/* How to Play Button on Game Screen */}

{currentTheme?.emoji} {currentTheme?.title}

{/* Larger Buttons on Separate Lines */}

{/* Column 1: SUBTOPIC */}

🎭

YOUR TOPIC

{isSpinning ? (

Selecting your topic...

) : !hasSpun ? (

🎲

Click "Spin the Wheel" to generate your first scenario!

) : selectedSubtopic ? (

{selectedSubtopic.title}

{selectedSubtopic.description}

) : null}

{/* Column 2: CHARACTERS */}

🐾

YOUR CHARACTERS

{isSpinning ? (

Choosing animals...

) : !hasSpun ? (

🎲

Your characters will appear here!

) : selectedAnimals.length > 0 ? (

{selectedAnimals.map((animal, index) => (

{animal.emoji}

{animal.name}

{animal.description}

))}

) : null}

{/* Column 3: GUIDING QUESTIONS */}

💬

GUIDING QUESTIONS

{isSpinning ? (

Preparing questions...

) : !hasSpun ? (

🎲

Questions will appear with your theme!

) : selectedSubtopic ? (

Use these questions to think about your sketch. There are no right answers!

{index + 1}. {question}

) : null}

{/* Challenge Section */} {!isSpinning && hasSpun && selectedSubtopic && (

{!selectedChallenge ? (

Click to add a small twist to your scene!

) : (

🎯

Your Challenge:

{selectedChallenge.description}

This is just for fun! You can skip the challenge if you want.

)}

)} {/* Ethical Guidelines */} {!isSpinning && hasSpun && selectedSubtopic && (

🎭 BEFORE YOU START — PLEASE READ THIS

This game is about creativity, fun, and thinking deeply. But also respect. When acting your scene:

✅ You can play with stereotypes — but never mock or insult identities.

✅ Don't turn these serious topics into jokes. Fun should be for everyone!

✅ Don't make fun of people's appearances, bodies, or struggles.

✅ Be creative — but always kind. Think about who might feel hurt.

🧠 Ask yourself: Would I say this if someone in the room was living this reality?

Thank you for playing with care ❤️

)} {/* Instructions */} {!isSpinning && hasSpun && selectedSubtopic && (

🎬 Now create your scene!

🎭 Your characters: {selectedAnimals.map((a) => a.name).join(", ")}

💡 Your topic: {selectedSubtopic.title}

✨ Use the guiding questions to inspire your sketch and present it to the group! ✨

)}

{/* Spin Warning Modal */} {showSpinWarning && (

⚠️

Are you sure?

Spinning again will create a brand-new result with different themes, questions, and characters. You will lose the current selection.

)} {/* New Game Warning Modal */} {showNewGameWarning && (

🚨

Attention!

Starting a new game will erase your current random selection. Do you want to continue?

)} {/* Instructions Modal */} {showInstructions && (

❓ How to Play

🎯 Step 1: Choose your theme (like Identity, Environment, or Digital Life)

👥 Step 2: Tell us how many people are in your group (2-6 people)

🎲 Step 3: Spin the wheel to get your topic, animal characters, and questions

🎭 Step 4: Create and perform a short scene with your group!

✨ Have fun, be creative, and respect everyone! ✨

)}

) } return null }