/** @jsxImportSource https://esm.sh/react@18.2.0 */ import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import React, { useCallback, useEffect, useMemo, useRef, useState } from "https://esm.sh/react@18.2.0"; function GameChallenge({ user, onGameEnd }) { const [level, setLevel] = useState(1); const [timeLeft, setTimeLeft] = useState(60); const [gameActive, setGameActive] = useState(false); const [challengeType, setChallengeType] = useState(null); const [score, setScore] = useState(0); const timerRef = useRef(null); const CHALLENGE_TYPES = [ "🎱 Pocket 3 Balls", "🎯 Hit Target Balls", "🏆 Clear Table", "💥 Break Challenge", "🌀 Spin Shot", ]; const startGame = useCallback(() => { setGameActive(true); setLevel(1); setScore(0); startTimer(); generateChallenge(); }, []); const startTimer = useCallback(() => { if (timerRef.current) clearInterval(timerRef.current); timerRef.current = setInterval(() => { setTimeLeft(prev => { if (prev <= 0) { clearInterval(timerRef.current); endGame(); return 0; } return prev - 1; }); }, 1000); }, []); const generateChallenge = useCallback(() => { const randomIndex = Math.floor(Math.random() * CHALLENGE_TYPES.length); setChallengeType(CHALLENGE_TYPES[randomIndex]); }, []); const completeChallenge = useCallback(() => { // Increase score setScore(prev => prev + level * 10); // Increase time for winning setTimeLeft(prev => prev + 15); // Level up setLevel(prev => Math.min(prev + 1, 999)); // Generate new challenge generateChallenge(); }, [level]); const endGame = useCallback(() => { clearInterval(timerRef.current); setGameActive(false); onGameEnd(score, level); }, [score, level, onGameEnd]); useEffect(() => { return () => { if (timerRef.current) clearInterval(timerRef.current); }; }, []); return (

{!gameActive ? (

🎱 Billiard Challenge

) : (

Level: {level} Time: {timeLeft}s Score: {score}

{challengeType}

)}

); } function App() { const [user, setUser] = useState(null); const [username, setUsername] = useState(""); const [error, setError] = useState(""); const [leaderboard, setLeaderboard] = useState([]); const [view, setView] = useState("login"); const handleLogin = async (e) => { e.preventDefault(); // Validate username (non-empty and meets basic criteria) if (!username.trim()) { setError("Username cannot be empty"); return; } if (username.length < 3 || username.length > 20) { setError("Username must be between 3 and 20 characters"); return; } try { const response = await fetch("/login", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ username }), }); const data = await response.json(); if (data.success) { localStorage.setItem("token", data.token); setUser(data.user); setView("game"); fetchLeaderboard(); } else { setError(data.message || "Login failed"); } } catch (err) { setError("Network error. Please try again."); } }; const fetchLeaderboard = async () => { try { const response = await fetch("/leaderboard"); const data = await response.json(); setLeaderboard(data.leaderboard); } catch (error) { console.error("Failed to fetch leaderboard:", error); } }; const handleLogout = () => { localStorage.removeItem("token"); setUser(null); setView("login"); }; const handleGameEnd = async (score, level) => { try { const token = localStorage.getItem("token"); const response = await fetch("/update-score", { method: "POST", headers: { "Content-Type": "application/json", "Authorization": `Bearer ${token}`, }, body: JSON.stringify({ score, level }), }); const data = await response.json(); if (data.success) { setUser(prev => ({ ...prev, score: data.newScore, level: data.newLevel })); fetchLeaderboard(); } } catch (error) { console.error("Error updating score:", error); } }; const renderLogin = () => (

🎱 Billiard Challenge

{error &&

{error}

}

); const renderGame = () => (

Welcome, {user.username}! 🎱

Your Current Score: {user.score || 0}

Your Level: {user.level || 1}

{renderLeaderboard()}

); const renderLeaderboard = () => (

🏆 Leaderboard

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

Rank	Username	Score	Level
{index + 1}	{entry.username}	{entry.score}	{entry.level}

); useEffect(() => { const token = localStorage.getItem("token"); if (token) { fetch("/verify-token", { method: "POST", headers: { "Authorization": `Bearer ${token}` }, }) .then(response => response.json()) .then(data => { if (data.success) { setUser(data.user); setView("game"); fetchLeaderboard(); } else { localStorage.removeItem("token"); } }) .catch(() => localStorage.removeItem("token")); } }, []); return (

{view === "login" && renderLogin()} {view === "game" && renderGame()}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { try { // Dynamically import sqlite with error handling let sqlite; try { sqlite = await import("https://esm.town/v/stevekrouse/sqlite"); if (!sqlite || !sqlite.sqlite || typeof sqlite.sqlite.execute !== "function") { throw new Error("Invalid SQLite module"); } } catch (importError) { console.error("SQLite Import Error:", importError); return new Response( JSON.stringify({ error: "Database Connection Failed", details: importError.message, }), { status: 500, headers: { "Content-Type": "application/json" }, }, ); } const crypto = await import("node:crypto"); const KEY = new URL(import.meta.url).pathname.split("/").at(-1); const SCHEMA_VERSION = 23; // Increment to ensure fresh table creation // More robust table creation with additional error handling try { await sqlite.sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_users_${SCHEMA_VERSION} ( username TEXT PRIMARY KEY, token TEXT UNIQUE, score INTEGER DEFAULT 0, level INTEGER DEFAULT 1, last_login DATETIME DEFAULT CURRENT_TIMESTAMP ) `); } catch (tableError) { console.error("Table Creation Error:", tableError); return new Response( JSON.stringify({ error: "Table Initialization Failed", details: tableError.message, }), { status: 500, headers: { "Content-Type": "application/json" }, }, ); } const url = new URL(request.url); console.log("Request:", request.method, url.pathname); // Authentication helpers const generateToken = () => crypto.randomBytes(32).toString("hex"); // Route handling switch (url.pathname) { case "/": case "": return new Response( ` Billiard Challenge

`, { headers: { "Content-Type": "text/html", "Cache-Control": "no-cache, no-store, must-revalidate", }, }, ); // [Rest of the routes remain the same as in the previous implementation] default: return new Response("Not Found", { status: 404 }); } } catch (globalError) { console.error("Global Server Error:", globalError); return new Response( JSON.stringify({ error: "Internal Server Error", details: globalError.message, }), { status: 500, headers: { "Content-Type": "application/json" }, }, ); } } const css = ` body { font-family: 'Arial', sans-serif; background-color: #f4f4f4; margin: 0; padding: 20px; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .login-container, .game-container { background-color: white; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); padding: 30px; width: 100%; max-width: 500px; text-align: center; } .login-container form { display: flex; flex-direction: column; gap: 15px; } .login-container input { padding: 10px; border: 1px solid #ddd; border-radius: 4px; } .form-actions { display: flex; justify-content: center; } .error { color: red; margin-bottom: 15px; } button { padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s; } button:hover { background-color: #0056b3; } `;

billiardCafeApp

Version 22