/** * This app implements a "Would You Rather" game with a ranking system for answers and a progress bar. * It uses React for the frontend and SQLite for persistent storage on the backend. * The ranking system updates based on user choices and displays in the Answers tab. * A progress bar is added to show completion of 20 questions. */ /** @jsxImportSource https://esm.sh/react */ import React, { useCallback, useEffect, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import { BrowserRouter as Router, Link, Route, Routes, useLocation, useNavigate, } from "https://esm.sh/react-router-dom"; // Types type Question = { id: number; option1: string; option2: string }; type Answer = { questionId: number; answer: string }; type User = { id: number; username: string }; type EloRanking = { answer: string; score: number }; // Constants const ANSWER_OPTIONS = [ "Have the ability to see through people's clothes", "Have the ability to murder anyone without any consequences", "Have a tight knit and loyal friend group", "Have another set of eyes in the back of your head (they are fully functional)", "Have a very physically attractive romantic partner", "Be able to spawn pizzas by snapping your fingers (max 2 per 12 hours)", "Be able to eat whatever you want and stay at your ideal weight", "Have perfect health your whole life except for the illness that will eventually kill you", "Have a job you like that pays 3x the usual salary", ]; function App() { const [user, setUser] = useState(null); const [answers, setAnswers] = useState([]); const [rankings, setRankings] = useState([]); const [progress, setProgress] = useState(0); const [showSplash, setShowSplash] = useState(true); useEffect(() => { fetchAnswersAndRankings(); }, [user]); const fetchAnswersAndRankings = async () => { if (user) { const response = await fetch("/api/answers"); const data = await response.json(); setAnswers(data.answers); setRankings(data.rankings); setProgress(Math.min(data.answers.length / 20 * 100, 100)); } }; const saveAnswer = useCallback(async (newAnswer: Answer, losingAnswer: string) => { if (user) { await fetch("/api/answer", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ ...newAnswer, losingAnswer }), }); fetchAnswersAndRankings(); } }, [user]); const clearAnswers = useCallback(async () => { if (user) { await fetch("/api/clear-answers", { method: "POST" }); setAnswers([]); setRankings([]); setProgress(0); } }, [user]); return (

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

Woodu

} /> } /> } />

)}

); } function SplashScreen({ onGetStarted }: { onGetStarted: () => void }) { return (

Woodu

a questionable game to discover your values

How it works

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

); } function TabBar() { const location = useLocation(); const tabs = [ { path: "/", icon: "M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z", label: "Questions" }, { path: "/answers", icon: "M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z", label: "Answers", }, { path: "/profile", icon: "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", label: "Profile", }, ]; return ( ); } function Game({ user, saveAnswer }: { user: User | null; saveAnswer: (answer: Answer, losingAnswer: string) => void }) { const getRandomQuestion = useCallback((): Question => { const availableOptions = [...ANSWER_OPTIONS]; const option1Index = Math.floor(Math.random() * availableOptions.length); const option1 = availableOptions.splice(option1Index, 1)[0]; const option2Index = Math.floor(Math.random() * availableOptions.length); const option2 = availableOptions[option2Index]; return { id: Math.random(), option1, option2 }; }, []); const [currentQuestion, setCurrentQuestion] = useState(getRandomQuestion); const selectAnswer = useCallback((selectedAnswer: string) => { if (user) { const losingAnswer = selectedAnswer === currentQuestion.option1 ? currentQuestion.option2 : currentQuestion.option1; saveAnswer({ questionId: currentQuestion.id, answer: selectedAnswer }, losingAnswer); } else { console.log("User not logged in"); } setCurrentQuestion(getRandomQuestion()); }, [user, currentQuestion, saveAnswer, getRandomQuestion]); return (

Would you rather...

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

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

); } return (

Rankings

{rankings.length === 0 ?

No rankings available yet.

: (

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

)}

Your Answers

{answers.length === 0 ?

You haven't answered any questions yet.

: ( <>

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

)}

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

Welcome, {user.username}!

); } return (

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

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

kaz