/** @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 [predictions, setPredictions] = useState({}); const [username, setUsername] = useState(""); const [leaderboard, setLeaderboard] = useState([]); const [awardCategories, setAwardCategories] = useState([]); const [isLoading, setIsLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { fetchData(); }, []); const fetchData = async () => { try { const response = await fetch("/data"); if (!response.ok) { throw new Error("Failed to fetch data"); } const { categories, allPredictions } = await response.json(); console.error("data:", categories); setAwardCategories(categories); calculateLeaderboard(categories, allPredictions); setIsLoading(false); } catch (err) { console.error("Error fetching data:", err); setError(err.message); setIsLoading(false); } }; const calculateLeaderboard = (categories, allPredictions) => { const scores = allPredictions.map((entry) => { const userPredictions = JSON.parse(entry.predictions); const score = categories.reduce((total, category) => { return ( total + (userPredictions[category.category] === category.answer ? 1 : 0) ); }, 0); return { username: entry.username, score }; }); const sortedLeaderboard = scores.sort((a, b) => b.score - a.score); setLeaderboard(sortedLeaderboard.slice(0, 10)); // Top 10 }; const handlePredictionChange = (category, value) => { setPredictions((prev) => ({ ...prev, [category]: value, })); }; const handleSubmit = async (e) => { e.preventDefault(); // Form is disabled, but we keep this code block for reference alert("Submission is currently disabled."); }; if (isLoading) { return (

🎮 Loading Game Awards Challenge 🏆

Loading categories...

); } if (error) { return (

🚨 Error Loading Game Awards Challenge

Failed to load data: {error}

); } return (

🚀 Built in 10 minutes with GitHub Gist and Val Town. Val Town rules! 🎉

🎮 Game Awards Prediction Challenge 🏆

🏅 Prediction Leaderboard

{leaderboard.length > 0 ? (

{leaderboard.map((entry, index) => ( ))}

Rank	Username	Score
{index + 1}	{entry.username} {" "}(Link to Results 🔗)	{entry.score \|\| "Results TBD"}

) :

No scores yet!

}

{awardCategories.map((category) => (

{category.category}

{option} {option === category.answer ? "🏆" : ""}

))}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); const KEY = new URL(import.meta.url).pathname.split("/").at(-1); const SCHEMA_VERSION = 2; // Increment to reset database await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_predictions_${SCHEMA_VERSION} ( id INTEGER PRIMARY KEY AUTOINCREMENT, username TEXT NOT NULL, predictions TEXT NOT NULL, timestamp DATETIME DEFAULT CURRENT_TIMESTAMP ) `); // Handle prediction submission - now disabled if ( request.method === "POST" && new URL(request.url).pathname === "/submit" ) { return new Response(JSON.stringify({ error: "Submission disabled" }), { status: 403, headers: { "Content-Type": "application/json" }, }); } // Data endpoint if (request.method === "GET" && new URL(request.url).pathname === "/data") { const gistResponse = await fetch( "https://gist.githubusercontent.com/bmitchinson/5c3ed5df80977e402113fc33c149ae7e/raw/ea393f1407d31da96623387299fc6e3702f5fb0a/gameawards_24_backend.json", ); const categories = await gistResponse.json(); const result = await sqlite.execute(` SELECT username, predictions FROM ${KEY}_predictions_${SCHEMA_VERSION} `); return new Response( JSON.stringify({ categories, allPredictions: result.rows, }), { headers: { "Content-Type": "application/json" }, }, ); } // Handle /user/{username} route if ( request.method === "GET" && new URL(request.url).pathname.startsWith("/user/") ) { const urlPath = new URL(request.url).pathname; const segments = urlPath.split("/").map(decodeURIComponent); const username = segments.pop(); // Fetch categories const gistResponse = await fetch( "https://gist.githubusercontent.com/bmitchinson/5c3ed5df80977e402113fc33c149ae7e/raw/ea393f1407d31da96623387299fc6e3702f5fb0a/gameawards_24_backend.json", ); const categories = await gistResponse.json(); // Fetch this user's predictions const userResult = await sqlite.execute( `SELECT predictions FROM ${KEY}_predictions_${SCHEMA_VERSION} WHERE username = ?`, [username], ); let bodyContent = `

`; bodyContent += `

🚀 Built in 10 minutes with GitHub Gist and Val Town. Val Town rules! 🎉

`; bodyContent += `

User: ${username}

`; bodyContent += `← Back`; if (userResult.rows.length === 0) { bodyContent += `

No predictions found for this user.

`; } else { const userPredictions = JSON.parse(userResult.rows[0].predictions); bodyContent += "

User Predictions

"; bodyContent += ""; categories.forEach((cat) => { const userAnswer = userPredictions[cat.category] || "No Answer"; const correct = userAnswer === cat.answer ? "✅" : "❌"; bodyContent += ``; }); bodyContent += "

Category	User Answer	Correct Answer	Result
${cat.category}	${userAnswer}	${cat.answer}	${correct}

"; } bodyContent += `

`; return new Response( `User ${username}${bodyContent}`, { headers: { "Content-Type": "text/html" }, }, ); } const sampleImageUrl = "https://www.hollywoodreporter.com/wp-content/uploads/2024/11/tga24_poster1_4k-e1731968563811.jpg"; return new Response( ` Game Awards Prediction Challenge

`, { headers: { "Content-Type": "text/html" }, }, ); } const css = ` * { box-sizing: border-box; } body { font-family: 'Arial', sans-serif; background-color: #121212; display: flex; justify-content: center; line-height: 1.6; color: #e0e0e0; margin: 0; padding: 0; font-size: 16px; min-height: 100vh; } .game-prediction-container { background-color: #1e1e1e; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.3); padding: 20px; width: 100%; max-width: 100%; margin: 10px; border: 1px solid #333; } .built-with-note { background-color: #2c2c2c; color: #03dac6; padding: 10px; border-radius: 4px; text-align: center; margin-bottom: 20px; font-weight: bold; border: 1px solid #444; font-size: 0.9em; } h1 { text-align: center; color: #bb86fc; margin-bottom: 20px; font-size: 1.8em; } .leaderboard { background-color: #2c2c2c; border-radius: 4px; padding: 15px; margin-bottom: 20px; border: 1px solid #444; overflow-x: auto; } .table-container { overflow-x: auto; } .leaderboard table { width: 100%; border-collapse: collapse; min-width: 300px; } .leaderboard th, .leaderboard td { border: 1px solid #444; padding: 8px; text-align: left; color: #e0e0e0; } .leaderboard th { background-color: #3c3c3c; color: #bb86fc; } .leaderboard tr:nth-child(even) { background-color: #2a2a2a; } .prediction-note { text-align: center; background-color: #2c2c2c; border-radius: 4px; padding: 10px; margin-bottom: 20px; font-style: italic; border: 1px solid #444; color: #03dac6; font-size: 0.9em; } .prediction-category { margin-bottom: 15px; } label { display: block; margin-bottom: 5px; font-weight: bold; color: #bb86fc; } select, input { width: 100%; padding: 10px; border: 1px solid #444; border-radius: 4px; background-color: #2c2c2c; color: #e0e0e0; font-size: 1em; } select option { background-color: #1e1e1e; color: #e0e0e0; } button { width: 100%; padding: 12px; background-color: #bb86fc; color: #000; border: none; border-radius: 4px; cursor: pointer; margin-top: 20px; font-weight: bold; transition: background-color 0.3s ease; font-size: 1em; } button:hover { background-color: #9f6bdc; } a { color: #bb86fc; } @media (max-width: 600px) { body { font-size: 14px; } .game-prediction-container { padding: 10px; margin: 0; border-radius: 0; } h1 { font-size: 1.5em; } .built-with-note, .prediction-note { font-size: 0.8em; padding: 8px; } select, input, button { font-size: 0.9em; padding: 8px; } .leaderboard { padding: 10px; } .leaderboard th, .leaderboard td { padding: 6px; } } @media (min-width: 601px) { .game-prediction-container { max-width: 800px; } } `;

GameAwards2024PredictionGame