Kindergarten Word-Picture Game

/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; // Define our word-picture pairs const wordPicturePairs = [ { word: "Cat", emoji: "🐱" }, { word: "Dog", emoji: "🐶" }, { word: "Fish", emoji: "🐠" }, { word: "Bird", emoji: "🐦" }, { word: "Sun", emoji: "☀️" }, { word: "Moon", emoji: "🌙" }, { word: "Star", emoji: "⭐" }, { word: "Tree", emoji: "🌳" }, { word: "Apple", emoji: "🍎" }, { word: "Banana", emoji: "🍌" }, { word: "Cow", emoji: "🐮" }, { word: "Pig", emoji: "🐷" }, { word: "Horse", emoji: "🐴" }, { word: "Sheep", emoji: "🐑" }, { word: "Chicken", emoji: "🐔" }, { word: "Duck", emoji: "🦆" }, { word: "Frog", emoji: "🐸" }, { word: "Rabbit", emoji: "🐰" }, { word: "Mouse", emoji: "🐭" }, { word: "Elephant", emoji: "🐘" }, { word: "Lion", emoji: "🦁" }, { word: "Tiger", emoji: "🐯" }, { word: "Monkey", emoji: "🐵" }, { word: "Penguin", emoji: "🐧" }, { word: "Owl", emoji: "🦉" }, { word: "Bear", emoji: "🐻" }, { word: "Panda", emoji: "🐼" }, { word: "Koala", emoji: "🐨" }, { word: "Giraffe", emoji: "🦒" }, { word: "Zebra", emoji: "🦓" }, { word: "Snake", emoji: "🐍" }, { word: "Turtle", emoji: "🐢" }, { word: "Butterfly", emoji: "🦋" }, { word: "Bee", emoji: "🐝" }, { word: "Ant", emoji: "🐜" }, { word: "Spider", emoji: "🕷️" }, { word: "Octopus", emoji: "🐙" }, { word: "Dolphin", emoji: "🐬" }, { word: "Whale", emoji: "🐳" }, { word: "Shark", emoji: "🦈" }, { word: "Crocodile", emoji: "🐊" }, { word: "Dragon", emoji: "🐉" }, { word: "Unicorn", emoji: "🦄" }, { word: "Car", emoji: "🚗" }, { word: "Bus", emoji: "🚌" }, { word: "Train", emoji: "🚂" }, { word: "Airplane", emoji: "✈️" }, { word: "Rocket", emoji: "🚀" }, { word: "Boat", emoji: "⛵" }, { word: "Bicycle", emoji: "🚲" }, { word: "Truck", emoji: "🚚" }, { word: "Ambulance", emoji: "🚑" }, { word: "Police Car", emoji: "🚓" }, { word: "Fire Truck", emoji: "🚒" }, { word: "Helicopter", emoji: "🚁" }, { word: "Tractor", emoji: "🚜" }, { word: "House", emoji: "🏠" }, { word: "School", emoji: "🏫" }, { word: "Hospital", emoji: "🏥" }, { word: "Castle", emoji: "🏰" }, { word: "Church", emoji: "⛪" }, { word: "Tent", emoji: "⛺" }, { word: "Factory", emoji: "🏭" }, { word: "Bridge", emoji: "🌉" }, { word: "Mountain", emoji: "⛰️" }, { word: "Beach", emoji: "🏖️" }, { word: "Desert", emoji: "🏜️" }, { word: "Island", emoji: "🏝️" }, { word: "Volcano", emoji: "🌋" }, { word: "Rainbow", emoji: "🌈" }, { word: "Cloud", emoji: "☁️" }, { word: "Snowman", emoji: "⛄" }, { word: "Umbrella", emoji: "☂️" }, { word: "Clock", emoji: "🕰️" }, { word: "Gift", emoji: "🎁" }, { word: "Balloon", emoji: "🎈" }, { word: "Camera", emoji: "📷" }, { word: "Television", emoji: "📺" }, { word: "Computer", emoji: "💻" }, { word: "Phone", emoji: "📱" }, { word: "Book", emoji: "📚" }, { word: "Pencil", emoji: "✏️" }, { word: "Scissors", emoji: "✂️" }, { word: "Key", emoji: "🔑" }, { word: "Lock", emoji: "🔒" }, { word: "Magnet", emoji: "🧲" }, { word: "Light Bulb", emoji: "💡" }, { word: "Candle", emoji: "🕯️" }, { word: "Toilet", emoji: "🚽" }, { word: "Shower", emoji: "🚿" }, { word: "Bathtub", emoji: "🛁" }, { word: "Bed", emoji: "🛏️" }, { word: "Chair", emoji: "🪑" }, { word: "Couch", emoji: "🛋️" }, { word: "Pizza", emoji: "🍕" }, { word: "Hamburger", emoji: "🍔" }, { word: "Taco", emoji: "🌮" }, { word: "Sushi", emoji: "🍣" }, { word: "Ice Cream", emoji: "🍦" }, { word: "Cake", emoji: "🎂" }, ]; function App() { const [currentWord, setCurrentWord] = useState(""); const [options, setOptions] = useState([]); const [score, setScore] = useState(0); const [gameOver, setGameOver] = useState(false); useEffect(() => { if (!gameOver) { newRound(); } }, [gameOver]); const newRound = () => { const randomIndex = Math.floor(Math.random() * wordPicturePairs.length); const correctAnswer = wordPicturePairs[randomIndex]; setCurrentWord(correctAnswer.word); // Create options including the correct answer and 3 random ones let newOptions = [correctAnswer]; while (newOptions.length < 4) { const randomOption = wordPicturePairs[Math.floor(Math.random() * wordPicturePairs.length)]; if (!newOptions.includes(randomOption)) { newOptions.push(randomOption); } } // Shuffle the options setOptions(newOptions.sort(() => Math.random() - 0.5)); }; const handleAnswer = (selectedEmoji) => { const correctEmoji = wordPicturePairs.find(pair => pair.word === currentWord).emoji; if (selectedEmoji === correctEmoji) { setScore(prevScore => prevScore + 1); newRound(); } else { setGameOver(true); } }; const restartGame = () => { setScore(0); setGameOver(false); }; if (gameOver) { return (

Great job!

Your score: {score}

); } return (

Match the word to the picture

Score: {score}

{currentWord}

{options.map((option, index) => ( ))}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response(` Kindergarten Word-Picture Game

`, { headers: { "content-type": "text/html", }, }); } const css = ` body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0; } .game-container { text-align: center; background-color: white; padding: 2rem; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } .word { font-size: 2rem; font-weight: bold; margin: 1rem 0; } .options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .option { font-size: 3rem; padding: 1rem; border: none; background-color: #e0e0e0; border-radius: 5px; cursor: pointer; transition: background-color 0.3s; } .option:hover { background-color: #d0d0d0; } button { font-size: 1rem; padding: 0.5rem 1rem; background-color: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s; } button:hover { background-color: #45a049; } footer { position: fixed; bottom: 10px; right: 10px; } footer a { color: #666; text-decoration: none; } footer a:hover { text-decoration: underline; } `;

wordPictureMatch

Version 0