/** @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 [participants, setParticipants] = useState([]); const [logs, setLogs] = useState([]); const [isAdmin, setIsAdmin] = useState(false); const [showLoginModal, setShowLoginModal] = useState(false); const [showExportModal, setShowExportModal] = useState(false); const [username, setUsername] = useState(""); const [password, setPassword] = useState(""); const [name, setName] = useState(""); const [points, setPoints] = useState(""); const [note, setNote] = useState(""); useEffect(() => { fetchData(); }, []); const fetchData = async () => { const response = await fetch("/api/data"); const data = await response.json(); setParticipants(data.participants); setLogs(data.logs); }; const handleLogin = async (e) => { e.preventDefault(); const response = await fetch("/api/login", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ username, password }), }); if (response.ok) { setIsAdmin(true); setShowLoginModal(false); setUsername(""); setPassword(""); } else { alert("Invalid credentials"); } }; const handleLogout = () => { setIsAdmin(false); }; const handleSubmit = async (e) => { e.preventDefault(); const response = await fetch("/api/update", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ name, points: parseInt(points), note }), }); if (response.ok) { setName(""); setPoints(""); setNote(""); fetchData(); } }; const handleReset = async () => { if (window.confirm("Are you sure you want to reset all points?")) { const response = await fetch("/api/reset", { method: "POST" }); if (response.ok) { fetchData(); } } }; const handleExportCSV = async () => { const response = await fetch("/api/export-csv"); const blob = await response.blob(); const url = window.URL.createObjectURL(blob); const a = document.createElement("a"); a.style.display = "none"; a.href = url; a.download = "Leaderboard_Export.csv"; document.body.appendChild(a); a.click(); window.URL.revokeObjectURL(url); }; const podium = participants.slice(0, 3); return (

🏆 Leaderboard 🏆

{isAdmin ? : }

Leaderboard

{podium.map((participant, index) => (

{participant.name} {participant.score}

))}

{participants.map((participant, index) => ( ))}

Rank	Name	Score
{index + 1}	{participant.name}	{participant.score}

Recent Activity

{log.name} {log.points > 0 ? "gained" : "lost"} {Math.abs(log.points)} points {log.note && - {log.note}}
{new Date(log.timestamp + " UTC").toLocaleString("en-PH", { timeZone: "Asia/Manila" })}

{isAdmin && (

Admin Panel

)} {showLoginModal && (

Admin Login

)} {showExportModal && (

Export Options

)}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(req: Request): Promise { const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); const SCHEMA_VERSION = 3; const KEY = new URL(import.meta.url).pathname.split("/").at(-1); await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_participants_${SCHEMA_VERSION} ( id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT UNIQUE NOT NULL, score INTEGER NOT NULL DEFAULT 0 ) `); await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_logs_${SCHEMA_VERSION} ( id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL, points INTEGER NOT NULL, note TEXT, timestamp DATETIME DEFAULT (datetime('now')) ) `); if (req.method === "POST" && req.url.endsWith("/api/login")) { const { username, password } = await req.json(); if (username === "admin" && password === "123123123") { return new Response("OK"); } return new Response("Unauthorized", { status: 401 }); } if (req.method === "POST" && req.url.endsWith("/api/update")) { const { name, points, note } = await req.json(); await sqlite.execute( ` INSERT INTO ${KEY}_participants_${SCHEMA_VERSION} (name, score) VALUES (?, ?) ON CONFLICT(name) DO UPDATE SET score = score + ? `, [name, points, points], ); await sqlite.execute( ` INSERT INTO ${KEY}_logs_${SCHEMA_VERSION} (name, points, note) VALUES (?, ?, ?) `, [name, points, note], ); return new Response("OK"); } if (req.method === "POST" && req.url.endsWith("/api/reset")) { await sqlite.execute(`DELETE FROM ${KEY}_participants_${SCHEMA_VERSION}`); await sqlite.execute(`DELETE FROM ${KEY}_logs_${SCHEMA_VERSION}`); return new Response("OK"); } if (req.url.endsWith("/api/data")) { const participants = await sqlite.execute(` SELECT * FROM ${KEY}_participants_${SCHEMA_VERSION} ORDER BY score DESC `); const logs = await sqlite.execute(` SELECT * FROM ${KEY}_logs_${SCHEMA_VERSION} ORDER BY timestamp DESC LIMIT 10 `); return new Response( JSON.stringify({ participants: participants.rows, logs: logs.rows, }), { headers: { "Content-Type": "application/json" }, }, ); } if (req.url.endsWith("/api/export-csv")) { const participants = await sqlite.execute(` SELECT * FROM ${KEY}_participants_${SCHEMA_VERSION} ORDER BY score DESC `); const logs = await sqlite.execute(` SELECT * FROM ${KEY}_logs_${SCHEMA_VERSION} ORDER BY timestamp DESC `); let csv = "Participants\n"; csv += "Rank,Name,Score\n"; participants.rows.forEach((participant, index) => { csv += `${index + 1},${participant.name},${participant.score}\n`; }); csv += "\nLogs\n"; csv += "Name,Points,Note,Timestamp\n"; logs.rows.forEach((log) => { csv += `${log.name},${log.points},"${log.note}",${log.timestamp}\n`; }); return new Response(csv, { headers: { "Content-Type": "text/csv", "Content-Disposition": `attachment; filename="Leaderboard_Export.csv"`, }, }); } return new Response( ` Leaderboard

`, { headers: { "Content-Type": "text/html" }, }, ); } const css = ` body { font-family: 'Arial', sans-serif; background-color: #f0f0f0; margin: 0; padding: 0; } .container { max-width: 1000px; margin: 0 auto; padding: 20px; } .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } h1, h2 { color: #2c3e50; } .content { display: flex; gap: 30px; } .left-column { flex: 2; } .right-column { flex: 1; } form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; } input { padding: 10px; font-size: 16px; border: 1px solid #ddd; border-radius: 4px; } .btn { padding: 10px 20px; font-size: 16px; border: none; border-radius: 4px; cursor: pointer; transition: all 0.3s ease; } .btn-primary { background-color: #3498db; color: white; } .btn-primary:hover { background-color: #2980b9; } .btn-secondary { background-color: #95a5a6; color: white; } .btn-secondary:hover { background-color: #7f8c8d; } .btn-danger { background-color: #e74c3c; color: white; } .btn-danger:hover { background-color: #c0392b; } .btn-success { background-color: #2ecc71; color: white; } .btn-success:hover { background-color: #27ae60; } .podium { display: flex; justify-content: center; align-items: flex-end; height: 200px; margin-bottom: 20px; } .podium-place { width: 100px; display: flex; flex-direction: column; align-items: center; margin: 0 10px; border-radius: 8px 8px 0 0; overflow: hidden; } .place-1 { height: 100%; background-color: #ffd700; } .place-2 { height: 80%; background-color: #c0c0c0; } .place-3 { height: 60%; background-color: #cd7f32; } .podium-place .name { font-weight: bold; margin-top: 10px; text-align: center; padding: 5px; width: 100%; background-color: rgba(255, 255, 255, 0.7); } .podium-place .score { font-size: 24px; margin-top: 5px; } table { width: 100%; border-collapse: collapse; margin-top: 20px; background-color: white; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } th, td { padding: 12px; text-align: left; border-bottom: 1px solid #ddd; } th { background-color: #3498db; color: white; } .logs { list-style-type: none; padding: 0; } .logs li { background-color: #fff; margin-bottom: 10px; padding: 12px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .note { font-style: italic; color: #666; } .timestamp { font-size: 0.8em; color: #888; } .admin-panel { margin-top: 30px; background-color: #fff; padding: 20px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; } .modal-content { background-color: white; padding: 20px; border-radius: 5px; width: 300px; } .modal-buttons { display: flex; justify-content: space-between; margin-top: 20px; } footer { text-align: center; margin-top: 20px; } footer a { color: #3498db; text-decoration: none; } footer a:hover { text-decoration: underline; } `;

ronr