/** * This game challenges players to click and hold a button for as long as possible. * It uses React for the UI, SQLite for storing high scores, and includes a leaderboard. * The game features vibrant colors and a pre-game explanation. */ /** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect, useRef } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const [showLeaderboard, setShowLeaderboard] = useState(false); const toggleLeaderboard = () => { setShowLeaderboard(!showLeaderboard); }; const [gameState, setGameState] = useState('intro'); // 'intro', 'name', 'game', 'end' const [playerName, setPlayerName] = useState(''); const [timer, setTimer] = useState(0); const [isHolding, setIsHolding] = useState(false); const [leaderboard, setLeaderboard] = useState([]); const intervalRef = useRef(null); useEffect(() => { fetchLeaderboard(); }, []); useEffect(() => { if (isHolding) { intervalRef.current = setInterval(() => { setTimer(prev => prev + 0.1); }, 100); } else if (intervalRef.current) { clearInterval(intervalRef.current); } return () => { if (intervalRef.current) clearInterval(intervalRef.current); }; }, [isHolding]); const fetchLeaderboard = async () => { const response = await fetch('/leaderboard'); const data = await response.json(); setLeaderboard(data); }; const startHolding = () => setIsHolding(true); const stopHolding = async () => { setIsHolding(false); setGameState('end'); await submitScore(); await fetchLeaderboard(); }; const submitScore = async () => { await fetch('/submit-score', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: playerName, score: timer.toFixed(1) }) }); }; const restartGame = () => { setTimer(0); setGameState('name'); }; return (

{gameState === 'intro' && (

🕰️ Hold The Clock 🕰️

How long can you hold the button? Test your endurance and compete with others!

Click and hold the button for as long as you can. The longer you hold, the higher your score!

)} {gameState === 'name' && (

Enter Your Name

setPlayerName(e.target.value)} placeholder="Your Name" />

)} {gameState === 'game' && (

Hold The Button!

{timer.toFixed(1)}s

)} {gameState === 'end' && (

Game Over!

You held for {timer.toFixed(1)} seconds!

)}

{showLeaderboard && (

Leaderboard

{medal || `#${index + 1}`} {entry.name} {entry.score}s

)}

View Source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } async function server(request: Request): Promise { const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); const SCHEMA_VERSION = 1 const KEY = new URL(import.meta.url).pathname.split("/").at(-1); await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_scores_${SCHEMA_VERSION} ( id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL, score REAL NOT NULL ) `); const url = new URL(request.url); if (url.pathname === '/leaderboard') { const leaderboard = await sqlite.execute(` SELECT name, score FROM ${KEY}_scores_${SCHEMA_VERSION} ORDER BY score DESC LIMIT 10 `); return new Response(JSON.stringify(leaderboard.rows), { headers: { 'Content-Type': 'application/json' } }); } else if (url.pathname === '/submit-score' && request.method === 'POST') { const { name, score } = await request.json(); await sqlite.execute(` INSERT INTO ${KEY}_scores_${SCHEMA_VERSION} (name, score) VALUES (?, ?) `, [name, score]); return new Response('Score submitted', { status: 200 }); } return new Response(` Hold The Clock

`, { headers: { "content-type": "text/html", }, }); } const css = ` body { margin: 0; font-family: 'Roboto', sans-serif; background: linear-gradient(135deg, #FF416C, #FF4B2B); color: #FFFFFF; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; } .page-container { width: 100%; max-width: 600px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .intro, .name-input, .game, .end { text-align: center; padding: 3rem; border-radius: 20px; box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); backdrop-filter: blur(8px); border: 2px solid rgba(255, 255, 255, 0.18); max-width: 90%; width: 450px; } h1, h2, h3 { font-family: 'Bangers', cursive; letter-spacing: 2px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); } h1 { font-size: 2.5rem; margin-bottom: 1rem; } h2 { font-size: 2rem; } .intro-text { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 1.2rem; font-weight: 300; line-height: 1.6; margin-bottom: 1.5rem; max-width: 600px; margin-left: auto; margin-right: auto; } .intro-text p { margin-bottom: 1rem; } button { background-color: #FFC107; color: #000000; border: none; padding: 12px 24px; margin: 15px; border-radius: 50px; font-size: 1.2rem; font-weight: bold; text-transform: uppercase; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 6px rgba(0,0,0,0.1); } button:hover { background-color: #FFD54F; transform: translateY(-2px); box-shadow: 0 6px 8px rgba(0,0,0,0.15); } .hold-button { width: 200px; height: 200px; border-radius: 50%; font-size: 1.8rem; background-color: #00E676; transition: all 0.3s ease; border: 4px solid #FFFFFF; box-shadow: 0 0 20px rgba(0,230,118,0.5); } .hold-button:active, .hold-button.holding { transform: scale(0.95); background-color: #00C853; box-shadow: 0 0 30px rgba(0,230,118,0.8); } .timer { font-family: 'Bangers', cursive; font-size: 3.5rem; margin: 20px 0; text-shadow: 3px 3px 6px rgba(0,0,0,0.3); color: #FFC107; } input { padding: 12px; font-size: 1.1rem; border-radius: 25px; border: none; margin-bottom: 15px; width: 80%; text-align: center; box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); } .leaderboard-container { width: 100%; margin-top: 2rem; } .toggle-leaderboard { margin-bottom: 1rem; } .leaderboard { background: rgba(0, 0, 0, 0.2); border-radius: 15px; padding: 10px; max-height: 300px; overflow-y: auto; } .leaderboard h3 { font-size: 2rem; margin-bottom: 15px; color: #FFC107; } .leaderboard ul { list-style-type: none; padding: 0; margin: 0; } .leaderboard li { margin: 8px 0; font-size: 1.1rem; font-family: 'Bangers', cursive; display: flex; justify-content: space-between; align-items: center; padding: 10px 15px; background: rgba(255, 255, 255, 0.1); border-radius: 10px; transition: all 0.3s ease; } .leaderboard li:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.2); } .leaderboard .rank { font-size: 1.3rem; width: 40px; text-align: center; } .leaderboard .name { flex-grow: 1; text-align: left; margin: 0 10px; } .leaderboard .score { font-size: 1.2rem; color: #FFC107; } .leaderboard .rank-1, .leaderboard .rank-2, .leaderboard .rank-3 { font-size: 1.3rem; border-radius: 10px; } .footer { margin-top: 20px; font-size: 0.8rem; } .footer a { color: #FFFFFF; text-decoration: none; opacity: 0.7; transition: opacity 0.3s ease; } .footer a:hover { opacity: 1; } .intro, .name-input, .game, .end { animation: fadeIn 0.5s ease-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 600px) { body { padding: 10px; } .page-container { width: 100%; } .intro, .name-input, .game, .end { padding: 15px; width: 90%; } .intro-text { font-size: 1rem; line-height: 1.4; } h1 { font-size: 2rem; } h2 { font-size: 1.8rem; } .hold-button { width: 180px; height: 180px; font-size: 1.5rem; } .timer { font-size: 3rem; } input { width: 90%; } .leaderboard h3 { font-size: 1.8rem; } .leaderboard li { font-size: 1rem; padding: 8px 12px; } .leaderboard .rank { font-size: 1.2rem; width: 30px; } .leaderboard .name { font-size: 0.9rem; } .leaderboard .score { font-size: 1rem; } .toggle-leaderboard { font-size: 1rem; padding: 8px 16px; } button { font-size: 1rem; padding: 10px 20px; margin: 10px 5px; } } `; export default server;

successiveVioletGrouse