Leaderboard

\n {entry.name}: {entry.wpm} WPM\n ({entry.timestamp.toLocaleString()})\n

\n );\n\n return (\n

Typing Challenge

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

Press Enter to Start

\n {renderLeaderboard()}\n

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

{currentText}

\n \n

\n {skillLevel && (\n

Current Skill Level: {skillLevel}

\n )}\n {hasError && (\n

There's an error in your typing. Please correct it to continue.

\n )}\n

Current Speed: {wpm} WPM

Press Alt+Enter to restart the game

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

Test Completed!

Your speed: {wpm} WPM

\n {skillLevel && (\n

Your Skill Level: {skillLevel}

\n )}\n

\n \n View Source\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\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 = 2\n const KEY = \"typetest\";\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_leaderboard_${SCHEMA_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL,\n wpm INTEGER NOT NULL,\n timestamp INTEGER NOT NULL\n )\n `);\n\n const url = new URL(request.url);\n \n if (url.pathname === '/leaderboard') {\n const leaderboard = await sqlite.execute(`\n SELECT name, wpm, timestamp FROM ${KEY}_leaderboard_${SCHEMA_VERSION}\n ORDER BY wpm DESC, timestamp DESC LIMIT 10\n `);\n return new Response(JSON.stringify(leaderboard.rows), {\n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n if (url.pathname === '/submit-score' && request.method === 'POST') {\n const { name, wpm } = await request.json();\n const timestamp = Math.floor(Date.now() / 1000);\n await sqlite.execute(`\n INSERT INTO ${KEY}_leaderboard_${SCHEMA_VERSION} (name, wpm, timestamp)\n VALUES (?, ?, ?)\n `, [name, wpm, timestamp]);\n return new Response(JSON.stringify({ success: true }), {\n headers: { 'Content-Type': 'application/json' }\n });\n }\n \n return new Response(`\n \n \n Typing Challenge\n \n \n \n

\n \n \n \n `, {\n headers: { 'Content-Type': 'text/html' }\n });\n}\n\nconst css = `\n @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');\n \n body, html {\n height: 100%;\n margin: 0;\n padding: 0;\n font-family: 'Roboto', sans-serif;\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: #e6f3ff;\n color: #333333;\n }\n .container {\n width: 95%;\n max-width: 1000px;\n background-color: #f0f8ff;\n padding: 2rem;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);\n }\n h1, h2 {\n color: #333;\n margin-bottom: 1.5rem;\n font-weight: 300;\n text-shadow: none;\n text-align: center;\n }\n #text-display {\n font-size: 1.2rem;\n margin-bottom: 1rem;\n min-height: 4.5em;\n line-height: 1.5;\n background-color: #e1f1ff;\n color: #333;\n padding: 1rem;\n border-radius: 5px;\n text-align: left;\n box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);\n }\n input[type=\"text\"] {\n width: 100%;\n padding: 0.75rem;\n font-size: 1rem;\n margin-bottom: 1rem;\n background-color: #ffffff;\n color: #333333;\n border: 1px solid #b3d9ff;\n border-radius: 5px;\n font-family: 'Roboto', sans-serif;\n box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);\n }\n #instructions {\n margin-bottom: 1rem;\n color: #4a90e2;\n font-weight: 500;\n font-size: 1.5rem;\n text-align: center;\n cursor: pointer;\n }\n .wpm-current {\n text-align: center;\n font-size: 24px;\n margin-top: 20px;\n font-weight: bold;\n color: #4a90e2;\n }\n .progress-bar {\n width: 100%;\n height: 20px;\n background-color: #e0e0e0;\n border-radius: 10px;\n margin-bottom: 1rem;\n overflow: hidden;\n }\n .progress {\n height: 100%;\n background-color: #4a90e2;\n transition: width 0.3s ease-in-out;\n }\n .skill-level {\n text-align: center;\n font-size: 18px;\n margin-top: 10px;\n margin-bottom: 10px;\n font-weight: 500;\n color: #4a90e2;\n }\n .error-message {\n text-align: center;\n font-size: 18px;\n margin-top: 10px;\n color: #d32f2f;\n }\n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n .skill-level, .wpm-current, .error-message {\n animation: fadeIn 0.5s ease-in-out;\n }\n #instructions:hover {\n color: #2a70c2;\n transition: color 0.3s ease;\n }\n .blink {\n animation: blink 1s infinite;\n }\n @keyframes blink {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.5; }\n }\n button {\n background-color: #4a90e2;\n color: #ffffff;\n border: none;\n padding: 10px 20px;\n font-size: 1rem;\n border-radius: 5px;\n cursor: pointer;\n transition: background-color 0.3s;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n margin-top: 10px;\n }\n button:hover {\n background-color: #2a70c2;\n }\n .leaderboard {\n margin-top: 2rem;\n padding: 0.5rem;\n padding-left: 2rem;\n background-color: #e1f1ff;\n border-radius: 5px;\n }\n .leaderboard h2 {\n margin-top: 0;\n padding-top: 0.5rem;\n color: #333;\n }\n .leaderboard li {\n margin-bottom: 0.5rem;\n padding: 0.5rem;\n border-bottom: 1px solid #b3d9ff;\n }\n .timestamp {\n font-size: 0.8em;\n color: #666666;\n margin-left: 0.5rem;\n }\n form {\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n .restart-instruction {\n font-size: 0.8em;\n color: #4a90e2;\n text-align: center;\n margin-top: 10px;\n }\n .source-link {\n text-align: center;\n margin-top: 20px;\n font-size: 0.8em;\n }\n .source-link a {\n color: #4a90e2;\n text-decoration: none;\n }\n @media (max-width: 768px) {\n .container {\n width: 100%;\n padding: 1rem;\n }\n #text-display {\n font-size: 1rem;\n }\n }\n`;\n\nexport default server;","deleted","label",[98],"permalink","https://www.val.town/x/stevekrouse/typetest/code/main.tsx","extension","actionData","errors"]