Submit Your Score

\n \n

\n\n

Game Leaderboard

\n \n \n \n \n \n \n \n \n \n {scores.map((score) => (\n \n \n \n \n \n ))}\n \n

Rank	Player	Score
{score.rank}	{score.player}	{score.score}

\n\n

\n setPage(p => Math.max(1, p - 1))}\n disabled={page === 1}\n >\n Previous {PAGE_SIZE}\n \n setPage(p => p + 1)}\n disabled={scores.length < PAGE_SIZE}\n >\n Next {PAGE_SIZE}\n \n

\n\n

\n \n View Source\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")!).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nasync function server(request: Request): Promise {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const { nanoid } = await import(\"https://esm.sh/nanoid\");\n const SCHEMA_VERSION = 2;\n const KEY = \"gameLeaderboard\";\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_scores_${SCHEMA_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n player TEXT NOT NULL,\n score INTEGER NOT NULL,\n session_token TEXT NOT NULL\n )\n `);\n\n const url = new URL(request.url);\n\n if (url.pathname === \"/scores\") {\n const page = parseInt(url.searchParams.get(\"page\") || \"1\");\n const offset = (page - 1) * PAGE_SIZE;\n const result = await sqlite.execute(\n `\n SELECT id, player, score, RANK() OVER (ORDER BY score DESC) as rank\n FROM ${KEY}_scores_${SCHEMA_VERSION}\n ORDER BY score DESC\n LIMIT ${PAGE_SIZE} OFFSET ?\n `,\n [offset],\n );\n return new Response(JSON.stringify(result.rows), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n if (url.pathname === \"/create-session\" && request.method === \"POST\") {\n const sessionToken = nanoid();\n return new Response(JSON.stringify({ sessionToken }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n if (url.pathname === \"/submit\" && request.method === \"POST\") {\n const apiKey = request.headers.get(\"X-API-Key\");\n const validApiKey = Deno.env.get(\"LIGHT_THE_NIGHT_API_KEY\");\n\n if (apiKey !== validApiKey) {\n return new Response(JSON.stringify({ error: \"Invalid API key\" }), {\n status: 401,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n const sessionToken = request.headers.get(\"X-Session-Token\");\n if (!sessionToken) {\n return new Response(JSON.stringify({ error: \"Session token required\" }), {\n status: 400,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n const { player, score } = await request.json();\n\n // Check if the player has already submitted a score for this session\n const existingScore = await sqlite.execute(\n `\n SELECT id FROM ${KEY}_scores_${SCHEMA_VERSION}\n WHERE session_token = ?\n `,\n [sessionToken],\n );\n\n if (existingScore.rows.length > 0) {\n return new Response(JSON.stringify({ error: \"Score already submitted for this session\" }), {\n status: 400,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n try {\n const result = await sqlite.execute(\n `\n INSERT INTO ${KEY}_scores_${SCHEMA_VERSION} (player, score, session_token)\n VALUES (?, ?, ?)\n `,\n [player, score, sessionToken],\n );\n\n if (result.rowsAffected === 1) {\n return new Response(JSON.stringify({ success: true }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n } else {\n throw new Error(\"Insert operation did not affect any rows\");\n }\n } catch (error) {\n console.error(\"Error inserting score:\", error);\n return new Response(JSON.stringify({ success: false, error: \"Failed to insert score\" }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n }\n\n if (url.pathname === \"/clear-scores\" && request.method === \"POST\") {\n const apiKey = request.headers.get(\"X-API-Key\");\n const validApiKey = Deno.env.get(\"LIGHT_THE_NIGHT_API_KEY\");\n\n if (apiKey !== validApiKey) {\n return new Response(JSON.stringify({ error: \"Invalid API key\" }), {\n status: 401,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n try {\n const result = await sqlite.execute(`\n DELETE FROM ${KEY}_scores_${SCHEMA_VERSION}\n `);\n\n return new Response(\n JSON.stringify({\n success: true,\n message: `Cleared ${result.rowsAffected} scores from the database.`,\n }),\n {\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n } catch (error) {\n console.error(\"Error clearing scores:\", error);\n return new Response(JSON.stringify({ success: false, error: \"Failed to clear scores\" }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n }\n\n // Default response for the root path\n return new Response(\n `\n \n \n Game Leaderboard\n \n \n \n

\n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}\n\nconst css = `\n:root {\n --color-background: #041014;\n --color-primary: #0A192F;\n --color-secondary: #112240;\n --color-accent: #64FFDA;\n --color-text: #E6E6E6;\n --color-border: #233554;\n --color-danger: #FF4136;\n --color-success: #2ECC40;\n}\n\nbody {\n font-family: 'Arial', sans-serif;\n background-color: var(--color-background);\n color: var(--color-text);\n margin: 0;\n padding: 0;\n display: flex;\n justify-content: center;\n line-height: 1.6;\n}\n\n.leaderboard-container {\n width: 100%;\n max-width: 900px;\n background-color: var(--color-secondary);\n padding: 30px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n\n.score-submission {\n background-color: var(--color-primary);\n padding: 20px;\n margin-bottom: 20px;\n border-radius: 8px;\n}\n\n.score-submission h2 {\n color: var(--color-accent);\n margin-bottom: 15px;\n text-align: center;\n}\n\n.input-row {\n display: flex;\n gap: 10px;\n align-items: center;\n}\n\n.input-row input {\n flex-grow: 1;\n padding: 8px;\n background-color: var(--color-border);\n border: 1px solid var(--color-accent);\n color: var(--color-text);\n border-radius: 4px;\n}\n\n.leaderboard h1 {\n color: var(--color-accent);\n text-align: center;\n margin-bottom: 20px;\n}\n\ntable {\n width: 100%;\n border-collapse: collapse;\n margin-bottom: 20px;\n background-color: var(--color-primary);\n}\n\ntable th, table td {\n border: 1px solid var(--color-border);\n padding: 12px;\n text-align: left;\n color: var(--color-text);\n}\n\ntable thead {\n background-color: var(--color-secondary);\n}\n\ntable tbody tr:nth-child(even) {\n background-color: var(--color-secondary);\n}\n\ntable tbody tr:hover {\n background-color: var(--color-border);\n transition: background-color 0.3s ease;\n}\n\n.pagination {\n display: flex;\n justify-content: center;\n gap: 15px;\n margin-bottom: 20px;\n}\n\n.pagination button {\n background-color: var(--color-accent);\n color: var(--color-primary);\n border: none;\n padding: 10px 15px;\n border-radius: 4px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n}\n\n.pagination button:disabled {\n background-color: var(--color-border);\n color: var(--color-accent);\n cursor: not-allowed;\n}\n\n.admin-actions {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.clear-scores-btn, .submit-scores-btn {\n border: none;\n padding: 10px 15px;\n border-radius: 4px;\n cursor: pointer;\n}\n\n.clear-scores-btn {\n background-color: var(--color-danger);\n color: white;\n}\n\n.submit-scores-btn {\n background-color: var(--color-success);\n color: white;\n}\n\na {\n color: var(--color-accent);\n text-decoration: none;\n}\n\nbutton {\n cursor: pointer;\n}\n`;\n\nexport default server;","deleted","label",[99],"permalink","https://www.val.town/x/michaelwschultz/gameLeaderboard/code/main.tsx","extension","actionData","errors"]