\n {showSplash ? setShowSplash(false)} /> : (\n <>\n

Woodu

\n \n } />\n }\n />\n } />\n \n

\n \n \n )}\n

\n \n );\n}\n\nfunction SplashScreen({ onGetStarted }: { onGetStarted: () => void }) {\n return (\n

Woodu

a questionable game to discover your values

How it works

\n 1 Answer some \"would you rather\" questions...the more the better.\n
\n 2 Then based on your answers we'll determine your values.\n
\n 3 Get to know you and your friends!\n

\n \n

\n );\n}\n\nfunction TabBar() {\n const location = useLocation();\n const tabs = [\n { path: \"/\", icon: \"M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z\", label: \"Questions\" },\n {\n path: \"/answers\",\n icon: \"M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z\",\n label: \"Answers\",\n },\n {\n path: \"/profile\",\n icon:\n \"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z\",\n label: \"Profile\",\n },\n ];\n\n return (\n \n );\n}\n\nfunction Game({ user, saveAnswer }: { user: User | null; saveAnswer: (answer: Answer, losingAnswer: string) => void }) {\n const getRandomQuestion = useCallback((): Question => {\n const availableOptions = [...ANSWER_OPTIONS];\n const option1Index = Math.floor(Math.random() * availableOptions.length);\n const option1 = availableOptions.splice(option1Index, 1)[0];\n const option2Index = Math.floor(Math.random() * availableOptions.length);\n const option2 = availableOptions[option2Index];\n return { id: Math.random(), option1, option2 };\n }, []);\n\n const [currentQuestion, setCurrentQuestion] = useState(getRandomQuestion);\n\n const selectAnswer = useCallback((selectedAnswer: string) => {\n if (user) {\n const losingAnswer = selectedAnswer === currentQuestion.option1\n ? currentQuestion.option2\n : currentQuestion.option1;\n saveAnswer({ questionId: currentQuestion.id, answer: selectedAnswer }, losingAnswer);\n } else {\n console.log(\"User not logged in\");\n }\n setCurrentQuestion(getRandomQuestion());\n }, [user, currentQuestion, saveAnswer, getRandomQuestion]);\n\n return (\n

Would you rather...

\n \n \n

\n );\n}\n\nfunction Answers(\n { user, answers, rankings, clearAnswers }: {\n user: User | null;\n answers: Answer[];\n rankings: EloRanking[];\n clearAnswers: () => void;\n },\n) {\n const navigate = useNavigate();\n\n if (!user) {\n return (\n

\n navigate(\"/profile\")}>Log in to track your answers.\n

\n );\n }\n\n return (\n

Rankings

\n {rankings.length === 0 ?

No rankings available yet.

: (\n

{ranking.answer} (Score: {ranking.score})

\n )}\n

Your Answers

\n {answers.length === 0 ?

You haven't answered any questions yet.

: (\n <>\n

Question {index + 1}: {answer.answer}

\n \n \n )}\n

\n );\n}\n\nfunction Profile({ user, setUser }: { user: User | null; setUser: (user: User | null) => void }) {\n const [username, setUsername] = useState(\"\");\n\n const handleLogin = useCallback(async (e: React.FormEvent) => {\n e.preventDefault();\n const response = await fetch(\"/api/login\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ username }),\n });\n const userData = await response.json();\n setUser(userData);\n }, [username, setUser]);\n\n if (user) {\n return (\n

Welcome, {user.username}!

\n \n

\n );\n }\n\n return (\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 KEY = \"reluctantCoffeeGayal\";\n\n // Create tables if they don't exist\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_users (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n username TEXT UNIQUE NOT NULL\n )\n `);\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_answers (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n user_id INTEGER NOT NULL,\n question_id INTEGER NOT NULL,\n answer TEXT NOT NULL,\n FOREIGN KEY (user_id) REFERENCES ${KEY}_users(id)\n )\n `);\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_rankings (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n answer TEXT UNIQUE NOT NULL,\n score INTEGER NOT NULL DEFAULT 1000\n )\n `);\n\n const url = new URL(request.url);\n if (url.pathname === \"/api/login\") {\n const { username } = await request.json();\n await sqlite.execute(`INSERT OR IGNORE INTO ${KEY}_users (username) VALUES (?)`, [username]);\n const user = (await sqlite.execute(`SELECT * FROM ${KEY}_users WHERE username = ?`, [username])).rows[0];\n return new Response(JSON.stringify(user), { headers: { \"Content-Type\": \"application/json\" } });\n }\n\n if (url.pathname === \"/api/answer\") {\n const { questionId, answer, losingAnswer } = await request.json();\n const userId = 1; // In a real app, you'd get this from the session\n await sqlite.execute(`INSERT INTO ${KEY}_answers (user_id, question_id, answer) VALUES (?, ?, ?)`, [\n userId,\n questionId,\n answer,\n ]);\n await updateEloRankings(sqlite, KEY, answer, losingAnswer);\n return new Response(\"OK\");\n }\n\n if (url.pathname === \"/api/answers\") {\n const userId = 1; // In a real app, you'd get this from the session\n const answers = (await sqlite.execute(`SELECT * FROM ${KEY}_answers WHERE user_id = ?`, [userId])).rows;\n const rankings = (await sqlite.execute(`SELECT * FROM ${KEY}_rankings ORDER BY score DESC`)).rows;\n return new Response(JSON.stringify({ answers, rankings }), { headers: { \"Content-Type\": \"application/json\" } });\n }\n\n if (url.pathname === \"/api/clear-answers\") {\n const userId = 1; // In a real app, you'd get this from the session\n await sqlite.execute(`DELETE FROM ${KEY}_answers WHERE user_id = ?`, [userId]);\n await sqlite.execute(`DELETE FROM ${KEY}_rankings`);\n return new Response(\"OK\");\n }\n\n return new Response(\n `\n \n \n \n \n \n Woodu\n \n \n \n

\n \n \n \n `,\n {\n headers: { \"content-type\": \"text/html\" },\n },\n );\n}\n\nasync function updateEloRankings(sqlite: any, KEY: string, winningAnswer: string, losingAnswer: string) {\n const K = 32; // This is the maximum score change per match\n\n // Ensure both answers exist in the rankings table\n await sqlite.execute(\n `\n INSERT OR IGNORE INTO ${KEY}_rankings (answer, score) VALUES (?, 1000), (?, 1000)\n `,\n [winningAnswer, losingAnswer],\n );\n\n // Get current scores\n const [winner, loser] = await Promise.all([\n sqlite.execute(`SELECT score FROM ${KEY}_rankings WHERE answer = ?`, [winningAnswer]),\n sqlite.execute(`SELECT score FROM ${KEY}_rankings WHERE answer = ?`, [losingAnswer]),\n ]);\n\n const winnerScore = winner.rows[0].score;\n const loserScore = loser.rows[0].score;\n\n // Calculate expected scores\n const expectedWinner = 1 / (1 + Math.pow(10, (loserScore - winnerScore) / 400));\n const expectedLoser = 1 - expectedWinner;\n\n // Calculate new scores\n const newWinnerScore = Math.round(winnerScore + K * (1 - expectedWinner));\n const newLoserScore = Math.round(loserScore + K * (0 - expectedLoser));\n\n // Update scores in the database\n await sqlite.execute(\n `\n UPDATE ${KEY}_rankings SET score = CASE\n WHEN answer = ? THEN ?\n WHEN answer = ? THEN ?\n END\n WHERE answer IN (?, ?)\n `,\n [winningAnswer, newWinnerScore, losingAnswer, newLoserScore, winningAnswer, losingAnswer],\n );\n}\n\nconst css = `\n @import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Roboto:wght@300;400;500&display=swap');\n\n :root {\n --primary-color: #3498db;\n --secondary-color: #2ecc71;\n --accent-color: #e74c3c;\n --background-color: #f5f7fa;\n --card-background: #ffffff;\n --text-color: #333333;\n --subtitle-color: #666666;\n }\n\n body {\n font-family: 'Roboto', sans-serif;\n margin: 0;\n padding: 0;\n background-color: var(--background-color);\n color: var(--text-color);\n line-height: 1.6;\n }\n\n .app {\n max-width: 100%;\n margin: 0 auto;\n padding: 20px;\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n }\n\n header {\n text-align: center;\n padding: 20px 0;\n margin-bottom: 20px;\n }\n\n header h1 {\n margin: 0;\n font-size: 2.5em;\n color: black;\n font-family: 'Pacifico', cursive;\n text-shadow: 1px 1px 2px rgba(0,0,0,0.1);\n }\n\n .progress-bar {\n width: 100%;\n height: 6px;\n background-color: #e0e0e0;\n border-radius: 3px;\n overflow: hidden;\n margin-top: 15px;\n }\n\n .progress {\n height: 100%;\n background-color: var(--secondary-color);\n transition: width 0.3s ease-in-out;\n }\n\n main {\n flex-grow: 1;\n padding: 20px 0;\n margin-bottom: 80px;\n }\n\n .tab-bar {\n display: flex;\n justify-content: space-around;\n background-color: white;\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n border-top: 1px solid #e1e1e1;\n padding: 10px 0;\n box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);\n }\n\n .tab-button {\n display: flex;\n flex-direction: column;\n align-items: center;\n text-decoration: none;\n color: var(--text-color);\n padding: 10px;\n flex: 1;\n transition: all 0.3s ease;\n }\n\n .tab-button.active {\n color: var(--primary-color);\n background-color: rgba(52, 152, 219, 0.1);\n border-top: 2px solid var(--primary-color);\n }\n\n .tab-button .icon {\n font-size: 24px;\n margin-bottom: 5px;\n }\n\n .tab-button .label {\n font-size: 12px;\n font-weight: 400;\n }\n\n .game, .answers, .profile, .login-form {\n background-color: var(--card-background);\n padding: 25px;\n border-radius: 12px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);\n margin-bottom: 20px;\n }\n\n .options {\n display: flex;\n flex-direction: column;\n }\n\n button {\n margin: 10px 0;\n padding: 15px 20px;\n font-size: 16px;\n cursor: pointer;\n background-color: var(--primary-color);\n color: white;\n border: none;\n border-radius: 8px;\n transition: all 0.3s ease;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n height: auto;\n min-height: 50px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 500;\n }\n\n button:hover {\n background-color: #2980b9;\n transform: translateY(-2px);\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);\n }\n\n button:active {\n transform: translateY(0);\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);\n }\n\n .clear-answers {\n background-color: var(--accent-color);\n }\n\n .clear-answers:hover {\n background-color: #c0392b;\n }\n\n input {\n width: 100%;\n padding: 15px;\n margin-bottom: 20px;\n font-size: 16px;\n border: 1px solid #ddd;\n border-radius: 8px;\n transition: all 0.3s ease;\n box-sizing: border-box;\n }\n\n input:focus {\n border-color: var(--primary-color);\n outline: none;\n box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);\n }\n\n ul, ol {\n list-style-type: none;\n padding: 0;\n }\n\n li {\n margin-bottom: 15px;\n padding: 15px;\n background-color: #f9f9f9;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);\n transition: all 0.3s ease;\n }\n\n li:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n }\n\n h2 {\n color: var(--subtitle-color);\n margin-top: 0;\n margin-bottom: 20px;\n font-weight: 400;\n font-size: 1.5em;\n }\n\n p {\n margin-bottom: 15px;\n }\n\n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n\n .game, .answers, .profile {\n animation: fadeIn 0.5s ease-out;\n }\n\n .splash-screen {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n width: 90vw;\n height: 100vh;\n text-align: center;\n padding: 40px 0;\n background-color: var(--background-color);\n box-sizing: border-box;\n }\n\n .splash-header {\n margin-bottom: 40px;\n width: 100%;\n }\n\n .splash-title {\n font-family: 'Pacifico', cursive;\n font-size: 4em;\n color: black;\n margin-bottom: 5px;\n }\n\n .splash-subtitle {\n font-style: italic;\n color: var(--subtitle-color);\n margin-top: 0;\n }\n\n .how-it-works-container {\n background-color: var(--card-background);\n padding: 20px;\n border-radius: 12px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);\n margin-bottom: 40px;\n max-width: 360px;\n width: 90%;\n box-sizing: border-box;\n }\n\n .how-it-works-container h2 {\n font-size: 1.5em;\n margin-bottom: 20px;\n color: var(--text-color);\n font-weight: 500;\n }\n\n .how-it-works-container ol {\n text-align: left;\n padding-left: 0;\n list-style-type: none;\n }\n\n .how-it-works-container li {\n margin-bottom: 15px;\n background: none;\n box-shadow: none;\n padding: 0;\n display: flex;\n align-items: center;\n font-size: 1.1em;\n font-weight: 400;\n }\n\n .step-number {\n background-color: var(--primary-color);\n color: white;\n width: 24px;\n height: 24px;\n border-radius: 50%;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n margin-right: 10px;\n flex-shrink: 0;\n }\n\n .get-started-btn {\n font-size: 1.2em;\n padding: 15px 30px;\n }\n\n .login-link {\n color: var(--primary-color);\n text-decoration: underline;\n cursor: pointer;\n }\n\n .login-message {\n margin-bottom: 20px;\n color: var(--subtitle-color);\n }\n\n .profile.logged-out {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n text-align: left;\n }\n\n .login-form {\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n }\n\n .login-form input {\n width: 100%;\n margin-bottom: 15px;\n }\n\n .login-form button {\n align-self: flex-start;\n }\n\n @media (max-width: 480px) {\n .splash-title {\n font-size: 3em;\n }\n\n .how-it-works-container {\n padding: 15px;\n }\n\n .how-it-works-container h2 {\n font-size: 1.3em;\n }\n\n .how-it-works-container li {\n font-size: 1em;\n }\n\n .step-number {\n width: 20px;\n height: 20px;\n font-size: 0.9em;\n }\n }\n`;\n\nexport default server;","deleted","subdomain",[102],"permalink","https://www.val.town/x/kaz/reluctantCoffeeGayal/code/main.tsx","extension","routes/embed","actionData","errors"]