/** @jsxImportSource https://esm.sh/react */ import React, { useEffect, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const [num1, setNum1] = useState(0); const [num2, setNum2] = useState(0); const [userAnswer, setUserAnswer] = useState(""); const [message, setMessage] = useState(""); const [score, setScore] = useState(0); const [showGlitter, setShowGlitter] = useState(false); const [notificationSent, setNotificationSent] = useState(false); const generateProblem = () => { setNum1(Math.floor(Math.random() * 10) + 1); setNum2(Math.floor(Math.random() * 10) + 1); setUserAnswer(""); setMessage(""); setShowGlitter(false); }; useEffect(() => { generateProblem(); // Request notification permission when the component mounts if ("Notification" in window) { Notification.requestPermission(); } }, []); const sendNotification = () => { if ("Notification" in window && Notification.permission === "granted" && !notificationSent) { new Notification("Kindergarten Addition Game", { body: "Your child has reached a score of 20! Time for a reward!", icon: "🎉", }); setNotificationSent(true); } }; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); const correctAnswer = num1 + num2; if (parseInt(userAnswer) === correctAnswer) { setMessage(score + 1 === 20 ? "Congratulations! You've reached 20 points! 🎉🎉🎉" : "Correct! 🎉"); setScore(score + 1); setShowGlitter(true); setTimeout(() => { generateProblem(); }, 1500); } else { setMessage(`Oops! Try again. The correct answer is ${correctAnswer}.`); } if (score + 1 === 20) { sendNotification(); } }; return (

🧮 Kindergarten Addition Game

{num1} + {num2} = ?

{message}

Score: {score}

View Source {score >= 20 && (

🏆 Congratulations! You've reached 20 points! 🏆

Show this to your parents for a reward!

)}

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

`, { headers: { "content-type": "text/html", }, }, ); } const css = ` body { font-family: 'Comic Sans MS', cursive, sans-serif; background-color: #f0f8ff; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .container { background-color: white; border-radius: 20px; padding: 2rem; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); text-align: center; position: relative; overflow: hidden; } h1 { color: #4a4a4a; margin-bottom: 1rem; } .problem { font-size: 2.5rem; margin-bottom: 1rem; color: #2c3e50; } input { font-size: 1.5rem; padding: 0.5rem; width: 100px; margin-right: 0.5rem; border: 2px solid #3498db; border-radius: 5px; } button { font-size: 1.2rem; padding: 0.5rem 1rem; background-color: #2ecc71; color: white; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s; } button:hover { background-color: #27ae60; } .message { margin-top: 1rem; font-size: 1.2rem; font-weight: bold; min-height: 1.5em; } .score { margin-top: 1rem; font-size: 1.2rem; color: #3498db; } .new-problem { margin-top: 1rem; background-color: #3498db; } .new-problem:hover { background-color: #2980b9; } .view-source { display: inline-block; margin-top: 1rem; font-size: 0.9rem; color: #7f8c8d; text-decoration: none; } .view-source:hover { text-decoration: underline; } @keyframes glitter { 0% { background-position: 0 0, 0 0; } 100% { background-position: 100% 100%, 0 0; } } .glitter::before { content: ""; position: absolute; top: -50%; left: -50%; right: -50%; bottom: -50%; background: linear-gradient(45deg, rgba(255,255,255,0) 45%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 55%, rgba(255,255,255,0) 100%), linear-gradient(-45deg, rgba(255,255,255,0) 45%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 55%, rgba(255,255,255,0) 100%); background-size: 200% 200%, 200% 200%; animation: glitter 0.5s ease-in-out infinite; z-index: -1; } `;

SimpleAddition

Version 3