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";
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 };
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<User | null>(null);
const [answers, setAnswers] = useState<Answer[]>([]);
const [rankings, setRankings] = useState<EloRanking[]>([]);
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 (
<Router>
<div className="app">
{showSplash ? <SplashScreen onGetStarted={() => setShowSplash(false)} /> : (
<>
<header>
<h1>Woodu</h1>
<div className="progress-bar">
<div className="progress" style={{ width: `${progress}%` }}></div>
</div>
</header>
<main>
<Routes>
<Route path="/" element={<Game user={user} saveAnswer={saveAnswer} />} />
<Route
path="/answers"
element={<Answers user={user} answers={answers} rankings={rankings} clearAnswers={clearAnswers} />}
/>
<Route path="/profile" element={<Profile user={user} setUser={setUser} />} />
</Routes>
</main>
<TabBar />