\n {!gameActive\n ? (\n

🎱 Billiard Challenge

\n \n

\n )\n : (\n

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

{challengeType}

\n \n \n

\n )}\n

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

🎱 Billiard Challenge

\n {error &&

{error}

}\n

\n );\n\n const renderGame = () => (\n

Welcome, {user.username}! 🎱

\n \n

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

Your Level: {user.level || 1}

\n \n

\n {renderLeaderboard()}\n

\n );\n\n const renderLeaderboard = () => (\n

🏆 Leaderboard

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

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

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

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

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

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