\n {gameState === 'intro' && (\n

🕰️ 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!

\n \n

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

Enter Your Name

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

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

Hold The Button!

{timer.toFixed(1)}s

\n \n

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

Game Over!

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

\n \n

\n )}\n

\n \n {showLeaderboard && (\n

Leaderboard

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

\n )}\n

\n View Source\n

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

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