[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" const SOCIAL_TOPICS = [ { title: "Gender Identity and Respect", icon: "⚧", description: "Each person feels and shows who they are in their own way — including gender. This can look very different from one person to another. Understanding and respecting someone's identity helps everyone feel safe and valued.", questions: [ "What happens when someone can't be themselves in their community?", "How do different cultures think about gender identity?", "What problems do people have when they show their gender identity?", "What can help a group be more respectful and open to differences?", ], }, { title: "Gender Stereotypes", icon: "🧠", description: "Stereotypes are strong ideas about what boys and girls \"should\" do, like or be. These beliefs are everywhere, but they can limit people's freedom and dreams — and they aren't always true.", questions: [ "What are some things boys and girls are expected to do in your country?", "Where do these ideas come from? Who teaches them?", "What happens when someone does something different from what people expect?", "How could a story show the effect of someone breaking a gender stereotype?", ], }, { title: "Gender and Professions", icon: "🧑‍🔧", description: "In many cultures, people think some jobs are for women and others are for men. But everyone should be free to do what they love, without judgment or limits based on gender.", questions: [ 'Are there jobs in your country that people think are "for men" or "for women"?', "Have you seen someone do a job that people didn't expect for their gender? What did others say?", "Why do these ideas about jobs still exist in some cultures?", "How could a story show someone who follows their dream, even with gender rules?", ], }, { title: "Tasks and Responsibilities", icon: "🧹", description: "In families and in society, chores and duties are often divided by gender. These roles can be unfair, and they stop us from living in more equal ways.", questions: [ "Who usually does housework in your home or culture?", "Is this because of gender? Is it fair?", "What happens when someone does something that is not usually done by their gender?", "How can we imagine a world where everyone shares tasks more equally?", ], }, { title: "Toxic Masculinity", icon: "🧠", description: "Boys and men are often told to be tough, strong, and in control — never to cry or show fear. These rules can hurt them and the people around them. We need new ways to be boys and men.", questions: [ "What are boys and men told they must be like in your country?", "Why is it sometimes hard for boys to show feelings like fear or sadness?", "How can these ideas make life more difficult for boys and men?", "What could happen in a group where someone doesn't follow these 'rules'?", ], }, { title: "Feminism", icon: "⚖️", description: "Feminism means believing that all genders should have the same rights and chances. Some people support it, others fear it or misunderstand it — but it's about fairness and dignity for everyone.", questions: [ "What does feminism mean to you? How do people in your country see it?", "Do girls and women have the same chances and freedom as boys and men where you live?", "Why do some people not like or not understand feminism?", "How could a story show someone trying to make things fair for everyone?", ], }, { title: "LGBTQIA+ Rights", icon: "🌈", description: "People who are LGBTQIA+ may express gender or love differently. They face challenges, but also bring beauty and strength to the world. They deserve respect, safety and to feel seen.", questions: [ "How do people in your country or community treat LGBTQIA+ people?", "What problems do LGBTQIA+ people have when they want to be accepted or understood?", "What does it mean to be an ally — someone who helps others, even if they are different?", "How could a story show what it feels like to be left out — and how good it feels to be accepted?", ], }, ] 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 = [ "Freeze! All characters must freeze for 3 seconds in the middle of the scene.", "Switch voices! One character must suddenly change their voice (high, low, robotic...).", "Shout something random! Each character must shout a silly word like 'Pineapple!' or 'Toothbrush!' during the scene.", "Dance break! Include a short improvised dance by one or more characters.", "Silent moment! The whole group must act without speaking for 10 seconds.", "Make a video call! Pretend one character joins the group via video call or phone.", "Change of emotion! One character must suddenly act very angry, very sad, or very excited — just for a moment.", "Invisible object! Include one important imaginary object (a notebook, a box, a toy...) that all characters treat as real.", "Confused moment! A character gets confused and calls another by the wrong name or role.", "Celebrate something weird! Everyone must suddenly celebrate something unusual (like 'National Socks Day').", ] export default function SocialJungleGame() { const [screen, setScreen] = useState<"welcome" | "game">("welcome") const [groupSize, setGroupSize] = useState(null) const [isSpinning, setIsSpinning] = useState(false) const [selectedTopic, setSelectedTopic] = useState<(typeof SOCIAL_TOPICS)[0] | null>(null) const [selectedAnimals, setSelectedAnimals] = useState([]) const [selectedChallenge, setSelectedChallenge] = useState(null) const startGame = () => { if (groupSize) { setScreen("game") // Initialize with first spin spinRandomizer() } } const spinRandomizer = () => { setIsSpinning(true) setSelectedChallenge(null) // Reset challenge when spinning // Simulate spinning animation delay setTimeout(() => { // Select random topic const randomTopic = SOCIAL_TOPICS[Math.floor(Math.random() * SOCIAL_TOPICS.length)] setSelectedTopic(randomTopic) // Select random animals based on group size const shuffledAnimals = [...ANIMALS].sort(() => Math.random() - 0.5) const randomAnimals = shuffledAnimals.slice(0, groupSize!) setSelectedAnimals(randomAnimals) setIsSpinning(false) }, 2000) } const addChallenge = () => { const randomChallenge = CHALLENGES[Math.floor(Math.random() * CHALLENGES.length)] setSelectedChallenge(randomChallenge) } const resetGame = () => { setScreen("welcome") setGroupSize(null) setSelectedTopic(null) setSelectedAnimals([]) setSelectedChallenge(null) setIsSpinning(false) } if (screen === "welcome") { return (

🧑‍🤝‍🧑 The Social Jungle ✨

Choose how many participants are in your group (from 2 to 6)

👥 Group Size

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

) } if (screen === "game") { return (

🎨 Creative Scene Generator ✨

{/* Column 1: THEME */}

🎭

THEME

{isSpinning ? (

🎲

Selecting theme...

) : selectedTopic ? (

{selectedTopic.icon}

{selectedTopic.title}

{selectedTopic.description}

) : (

Click "Spin" to get started!

)}

{/* Column 2: CHARACTERS */}

🐾

CHARACTERS

{isSpinning ? (

🎲

Choosing animals...

) : selectedAnimals.length > 0 ? (

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

{animal.emoji}

{animal.name}

{animal.description}

))}

) : (

Click "Spin" to meet your characters!

)}

{/* Column 3: QUESTIONS TO TALK ABOUT */}

💬

QUESTIONS TO TALK ABOUT

{isSpinning ? (

🎲

Preparing questions...

) : selectedTopic ? (

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

{index + 1}. {question}

) : (

Questions will appear with your theme!

)}

{/* Challenge Section */} {!isSpinning && selectedTopic && (

{!selectedChallenge ? (

Click to add a small twist to your scene!

) : (

🎯

Your Challenge:

{selectedChallenge}

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

)}

)} {/* Ethical Guidelines */} {!isSpinning && selectedTopic && (

🎯 Before You Start...

• Be respectful. Don't make fun of anyone's gender, identity or story.

• Some topics are serious — you can be creative and funny, but never offensive.

• Avoid turning people into jokes or stereotypes.

• Imagine someone in your group is living that story — how would you want them to feel?

)} {/* Instructions */} {!isSpinning && selectedTopic && (

🎬 Now create your scene!

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

💡 Theme: {selectedTopic.title}

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

)}

) } return null }