86:I[903690,["/chat-static/_next/static/immutable/chunks/196gtrnm34jez.js","/chat-static/_next/static/immutable/chunks/1enj0--qh8_5a.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/1zwrrh1n1isp0.js","/chat-static/_next/static/immutable/chunks/0ko_j9ax7y6x0.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/33yo_g45dr57n.js","/chat-static/_next/static/immutable/chunks/2_sbgebowt27c.js","/chat-static/_next/static/immutable/chunks/2y4tmciu_pml1.js","/chat-static/_next/static/immutable/chunks/42f8gzjthz4xm.js","/chat-static/_next/static/immutable/chunks/0z_kwscs0-xkv.js","/chat-static/_next/static/immutable/chunks/3l8fzjkdgt0wd.js","/chat-static/_next/static/immutable/chunks/3nlorw7q2vubs.js","/chat-static/_next/static/immutable/chunks/2297wuuoux0mr.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/365o88upxg8nb.js","/chat-static/_next/static/immutable/chunks/2lo4wuedhi-j3.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2i3ljaggpd7p4.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/0jywfwuiu_hpq.js","/chat-static/_next/static/immutable/chunks/3e68w17lftq23.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/0ocytjp9zxitf.js","/chat-static/_next/static/immutable/chunks/1bfn_hru-4enh.js","/chat-static/_next/static/immutable/chunks/38fcx4vaj9p6g.js","/chat-static/_next/static/immutable/chunks/39x5wlubw1qy9.js","/chat-static/_next/static/immutable/chunks/43-jsj0fq5lhp.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/1w6qqgfpk6ysv.js","/chat-static/_next/static/immutable/chunks/0wekn8517kmiz.js","/chat-static/_next/static/immutable/chunks/3db-uyiz6we29.js","/chat-static/_next/static/immutable/chunks/2g2_401nxyrm5.js","/chat-static/_next/static/immutable/chunks/11o1o6qzk3ejc.js","/chat-static/_next/static/immutable/chunks/2nu9j7-o_9ilo.js","/chat-static/_next/static/immutable/chunks/3eajo0i8vj831.js"],"ExplicitChatIdProvider"] 87:I[838238,["/chat-static/_next/static/immutable/chunks/196gtrnm34jez.js","/chat-static/_next/static/immutable/chunks/1enj0--qh8_5a.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/1zwrrh1n1isp0.js","/chat-static/_next/static/immutable/chunks/0ko_j9ax7y6x0.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/33yo_g45dr57n.js","/chat-static/_next/static/immutable/chunks/2_sbgebowt27c.js","/chat-static/_next/static/immutable/chunks/2y4tmciu_pml1.js","/chat-static/_next/static/immutable/chunks/42f8gzjthz4xm.js","/chat-static/_next/static/immutable/chunks/0z_kwscs0-xkv.js","/chat-static/_next/static/immutable/chunks/3l8fzjkdgt0wd.js","/chat-static/_next/static/immutable/chunks/3nlorw7q2vubs.js","/chat-static/_next/static/immutable/chunks/2297wuuoux0mr.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/365o88upxg8nb.js","/chat-static/_next/static/immutable/chunks/2lo4wuedhi-j3.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2i3ljaggpd7p4.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/0jywfwuiu_hpq.js","/chat-static/_next/static/immutable/chunks/3e68w17lftq23.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/0ocytjp9zxitf.js","/chat-static/_next/static/immutable/chunks/1bfn_hru-4enh.js","/chat-static/_next/static/immutable/chunks/38fcx4vaj9p6g.js","/chat-static/_next/static/immutable/chunks/39x5wlubw1qy9.js","/chat-static/_next/static/immutable/chunks/43-jsj0fq5lhp.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/1w6qqgfpk6ysv.js","/chat-static/_next/static/immutable/chunks/0wekn8517kmiz.js","/chat-static/_next/static/immutable/chunks/3db-uyiz6we29.js","/chat-static/_next/static/immutable/chunks/2g2_401nxyrm5.js","/chat-static/_next/static/immutable/chunks/11o1o6qzk3ejc.js","/chat-static/_next/static/immutable/chunks/2nu9j7-o_9ilo.js","/chat-static/_next/static/immutable/chunks/3eajo0i8vj831.js"],"SWRDataProvider"] 88:T325d,[V0_FILE]typescriptreact:file="games/PictureThis.tsx" isEdit="true" isMerged="true" import type React from "react" import { useState, useEffect } from "react" import { GameContainer } from "../components/GameContainer" const words = [ { word: "photosynthesis", emoji: "🌱☀️", category: "science" }, { word: "equation", emoji: "🔢=", category: "math" }, { word: "evaporation", emoji: "💧☁️", category: "science" }, { word: "fraction", emoji: "½", category: "math" }, { word: "ecosystem", emoji: "🌳🐻🐟", category: "science" }, { word: "multiplication", emoji: "2️⃣✖️2️⃣", category: "math" }, { word: "gravity", emoji: "🍎⬇️", category: "science" }, { word: "geometry", emoji: "📐🔺", category: "math" }, { word: "magnetism", emoji: "🧲", category: "science" }, { word: "temperature", emoji: "🌡️", category: "science" }, ] export default function PictureThis() { const [currentWord, setCurrentWord] = useState(words[0]) const [userGuess, setUserGuess] = useState("") const [feedback, setFeedback] = useState("") const [score, setScore] = useState(0) const nextWord = () => { const nextIndex = Math.floor(Math.random() * words.length) setCurrentWord(words[nextIndex]) setUserGuess("") setFeedback("") } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (userGuess.toLowerCase() === currentWord.word.toLowerCase()) { setFeedback("¡Correcto! Great job, Luis!") setScore(score + 1) setTimeout(nextWord, 2000) } else { setFeedback(`Almost! The word was "${currentWord.word}". Try again!`) } } useEffect(() => { nextWord() }, []) return (

Category: {currentWord.category}

{currentWord.emoji}

{feedback &&

{feedback}

}

Score: {score}

) } [V0_FILE]typescriptreact:file="games/StorySpinner.tsx" isMerged="true" import React, { useState } from "react" import { GameContainer } from "../components/GameContainer" const sentenceParts = { subjects: ["The dog", "My friend", "The teacher", "The soccer ball"], verbs: ["chased", "sang", "wrote", "kicked"], objects: ["the cat", "a song", "a story", "the goal"], } export default function StorySpinner() { const [sentence, setSentence] = useState({ subject: "", verb: "", object: "" }) const [completedSentences, setCompletedSentences] = useState([]) const spinWheel = (part: "subject" | "verb" | "object") => { const randomIndex = Math.floor(Math.random() * sentenceParts[`${part}s`].length) setSentence({ ...sentence, [part]: sentenceParts[`${part}s`][randomIndex] }) } const createSentence = () => { if (sentence.subject && sentence.verb && sentence.object) { const newSentence = `${sentence.subject} ${sentence.verb} ${sentence.object}.` setCompletedSentences([...completedSentences, newSentence]) setSentence({ subject: "", verb: "", object: "" }) } } return (

{(["subject", "verb", "object"] as const).map((part) => (

{sentence[part]}

))}

Your Story:

{completedSentences.map((s, index) => (

{s}

))}

) } [V0_FILE]typescriptreact:file="games/ActionHeroes.tsx" isMerged="true" import React, { useState, useEffect } from "react" import { GameContainer } from "../components/GameContainer" const verbs = [ { word: "jump", difficulty: "easy" }, { word: "swim", difficulty: "easy" }, { word: "dance", difficulty: "easy" }, { word: "write", difficulty: "medium" }, { word: "cook", difficulty: "medium" }, { word: "celebrate", difficulty: "hard" }, { word: "investigate", difficulty: "hard" }, // Add more verbs here ] export default function ActionHeroes() { const [currentVerb, setCurrentVerb] = useState(verbs[0]) const [timeLeft, setTimeLeft] = useState(30) const [isPlaying, setIsPlaying] = useState(false) const [score, setScore] = useState(0) useEffect(() => { let timer: NodeJS.Timeout if (isPlaying && timeLeft > 0) { timer = setTimeout(() => setTimeLeft(timeLeft - 1), 1000) } else if (timeLeft === 0) { setIsPlaying(false) } return () => clearTimeout(timer) }, [isPlaying, timeLeft]) const startGame = () => { const randomIndex = Math.floor(Math.random() * verbs.length) setCurrentVerb(verbs[randomIndex]) setTimeLeft(30) setIsPlaying(true) } const handleCorrect = () => { setScore(score + 1) startGame() } const handleSkip = () => { startGame() } return (

{!isPlaying ? ( ) : ( <>

{currentVerb.word}

Difficulty: {currentVerb.difficulty}

Time left: {timeLeft} seconds

)}

Score: {score}

) } [V0_FILE]typescriptreact:file="games/EmojiStoryteller.tsx" import type React from "react" import { useState } from "react" import { GameContainer } from "../components/GameContainer" const emojiStories = [ { emojis: ["🐶", "🏃‍♂️", "🏞️"], story: "The dog runs in the park." }, { emojis: ["👩‍🏫", "📚", "👨‍👩‍👧‍👦"], story: "The teacher reads books to the students." }, { emojis: ["🌞", "🌱", "💧"], story: "The sun helps plants grow with water." }, { emojis: ["🚀", "🌙", "👨‍🚀"], story: "The rocket flies to the moon with an astronaut." }, { emojis: ["🍳", "🥚", "🍽️"], story: "I cook eggs for breakfast." }, ] export default function EmojiStoryteller() { const [currentStory, setCurrentStory] = useState(emojiStories[0]) const [userStory, setUserStory] = useState("") const [feedback, setFeedback] = useState("") const [score, setScore] = useState(0) const nextStory = () => { const nextIndex = Math.floor(Math.random() * emojiStories.length) setCurrentStory(emojiStories[nextIndex]) setUserStory("") setFeedback("") } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() const userWords = userStory.toLowerCase().split(" ") const targetWords = currentStory.story.toLowerCase().split(" ") const matchedWords = userWords.filter((word) => targetWords.includes(word)) const matchPercentage = (matchedWords.length / targetWords.length) * 100 if (matchPercentage >= 70) { setFeedback("¡Excelente! Your story matches the target very well!") setScore(score + 1) setTimeout(nextStory, 2000) } else if (matchPercentage >= 50) { setFeedback("¡Bien hecho! Your story is close. Try to use more of the key words.") } else { setFeedback(`Good try! The target story was: "${currentStory.story}"`) } } return (

{currentStory.emojis.map((emoji, index) => ( {emoji} ))}

setUserStory(e.target.value)}
            placeholder="Write your story here..."
            className="w-full px-4 py-2 mb-4 border rounded h-32 resize-none"
          />
          <button type="submit" className="w-full px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
            Submit Story
          </button>
        </form>
        {feedback && <p className="mt-4 text-lg font-semibold">{feedback}</p>}
        <p className="mt-4 text-xl">Score: {score}</p>
        <button onClick={nextStory} className="mt-4 px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600">
          Next Story
        </button>
      </div>
    </GameContainer>
  )
}

[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true"
import React from "react"
import PictureThis from "../games/PictureThis"
import StorySpinner from "../games/StorySpinner"
import ActionHeroes from "../games/ActionHeroes"
import EmojiStoryteller from "../games/EmojiStoryteller"

export default function Home() {
  return (
    <div className="min-h-screen bg-gray-100 py-12">
      <div className="max-w-4xl mx-auto px-4">
        <h1 className="text-4xl font-bold text-center mb-6">Fun English Games for Luis</h1>
        <div className="bg-white rounded-lg shadow-lg p-6 mb-12">
          <h2 className="text-2xl font-semibold mb-4">Welcome, Luis and Family!</h2>
          <p className="mb-4">
            These games are designed to help Luis improve his English skills in a fun and interactive way. Each game
            focuses on different aspects of language learning:
          </p>
          <ul className="list-disc list-inside mb-4">
            <li>
              <strong>Picture This!</strong> helps build vocabulary with emojis.
            </li>
            <li>
              <strong>Story Spinner</strong> practices forming complete sentences.
            </li>
            <li>
              <strong>Action Heroes</strong> learns and acts out verbs.
            </li>
            <li>
              <strong>Emoji Storyteller</strong> combines vocabulary and sentence formation.
            </li>
          </ul>
          <p>
            Parents, feel free to join in and play these games with Luis. Regular practice will help improve his English
            skills. ¡Diviértanse!
          </p>
        </div>
        <div className="space-y-12">
          <PictureThis />
          <StorySpinner />
          <ActionHeroes />
          <EmojiStoryteller />
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/GameContainer.tsx" isEdit="true"
import React, { type ReactNode } from "react"

interface GameContainerProps {
  title: string
  children: ReactNode
}

export function GameContainer({ title, children }: GameContainerProps) {
  return (
    <section
      className="max-w-4xl mx-auto p-6 bg-white rounded-lg shadow-lg"
      aria-labelledby={`game-title-${title.toLowerCase().replace(/\s+/g, "-")}`}
    >
      <h2
        id={`game-title-${title.toLowerCase().replace(/\s+/g, "-")}`}
        className="text-3xl font-bold mb-6 text-center text-blue-600"
      >
        {title}
      </h2>
      {children}
    </section>
  )
}
7c:["$","$L86",null,{"chatId":"mRu0hjHT4Fh","children":["$","$L87",null,{"data":{"@\"active-block\",\"mRu0hjHT4Fh\",":{"id":"b_DwYNoodtHOh","messageId":"xohSVT9cN7tQt4lQMTup85yqurGwANNN","source":"$88","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"ESL-Games-for-Luis","type":"code-project","project":"ESL-Games-for-Luis"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"mRu0hjHT4Fh\",":false,"":null},"children":"$L89"}]}]
</article></body></html>

About

Tags

Share

About

Tags

Share

More from mleiter

More Templates Like This