263 lines
9.9 KiB
TypeScript
263 lines
9.9 KiB
TypeScript
import { useState, useRef, useEffect } from "react";
|
|
import { CountdownCircleTimer } from "react-countdown-circle-timer";
|
|
import Reward, { RewardElement } from 'react-rewards';
|
|
import Link from "../components/Link";
|
|
import { useUser } from "../user-context";
|
|
import "./timer.css";
|
|
import {
|
|
getPercentageDone,
|
|
} from "../lib/game-utils";
|
|
import {
|
|
saveResult,
|
|
postSavedResults,
|
|
} from "../lib/game-results";
|
|
import {
|
|
AT,
|
|
getTimestamp,
|
|
} from "@lingdocs/lingdocs-main";
|
|
import {
|
|
randFromArray,
|
|
Types,
|
|
} from "@lingdocs/pashto-inflector";
|
|
import ReactGA from "react-ga";
|
|
import { isProd } from "../lib/isProd";
|
|
import autoAnimate from "@formkit/auto-animate";
|
|
const errorVibration = 200;
|
|
|
|
const maxStrikes = 2;
|
|
|
|
function GameCore<T>({ questions, Display, timeLimit, Instructions, studyLink, id }:{
|
|
id: string,
|
|
studyLink: string,
|
|
Instructions: (props: { opts?: Types.TextOptions }) => JSX.Element,
|
|
questions: () => QuestionGenerator<T>,
|
|
Display: (props: QuestionDisplayProps<T>) => JSX.Element,
|
|
timeLimit: number;
|
|
}) {
|
|
// TODO: report pass with id to user info
|
|
const rewardRef = useRef<RewardElement | null>(null);
|
|
const parent = useRef<HTMLDivElement | null>(null);
|
|
const { user, pullUser, setUser } = useUser();
|
|
const [finish, setFinish] = useState<undefined | "pass" | { msg: "fail", answer: JSX.Element } | "time out">(undefined);
|
|
const [strikes, setStrikes] = useState<number>(0);
|
|
const [justStruck, setJustStruck] = useState<boolean>(false);
|
|
const [current, setCurrent] = useState<Current<T> | undefined>(undefined);
|
|
const [questionBox, setQuestionBox] = useState<QuestionGenerator<T>>(questions());
|
|
const [timerKey, setTimerKey] = useState<number>(1);
|
|
useEffect(() => {
|
|
parent.current && autoAnimate(parent.current)
|
|
}, [parent]);
|
|
|
|
function logGameEvent(action: string) {
|
|
if (isProd && !(user?.admin)) {
|
|
ReactGA.event({
|
|
category: "Game",
|
|
action: `${action} - ${id}`,
|
|
label: id,
|
|
});
|
|
}
|
|
}
|
|
|
|
function handleCallback(correct: true | JSX.Element) {
|
|
if (correct === true) {
|
|
handleAdvance();
|
|
return;
|
|
}
|
|
setStrikes(s => s + 1);
|
|
navigator.vibrate(errorVibration);
|
|
if (strikes < maxStrikes) {
|
|
setJustStruck(true);
|
|
} else {
|
|
logGameEvent("fail on game");
|
|
setFinish({ msg: "fail", answer: correct });
|
|
}
|
|
}
|
|
function handleAdvance() {
|
|
setJustStruck(false);
|
|
const next = questionBox.next();
|
|
if (next.done) handleFinish();
|
|
else setCurrent(next.value);
|
|
}
|
|
function handleResult(result: AT.TestResult) {
|
|
// add the test to the user object
|
|
if (!user) return;
|
|
setUser((u) => {
|
|
// pure type safety with the prevUser
|
|
if (!u) return u;
|
|
return {
|
|
...u,
|
|
tests: [...u.tests, result],
|
|
};
|
|
});
|
|
// save the test result in local storage
|
|
saveResult(result, user.userId);
|
|
// try to post the result
|
|
postSavedResults(user.userId).then((r) => {
|
|
if (r === "sent") pullUser();
|
|
}).catch(console.error);
|
|
}
|
|
function handleFinish() {
|
|
logGameEvent("passed game")
|
|
setFinish("pass");
|
|
rewardRef.current?.rewardMe();
|
|
if (!user) return;
|
|
const result: AT.TestResult = {
|
|
done: true,
|
|
time: getTimestamp(),
|
|
id,
|
|
};
|
|
handleResult(result);
|
|
}
|
|
function handleQuit() {
|
|
setFinish(undefined);
|
|
setCurrent(undefined);
|
|
}
|
|
function handleRestart() {
|
|
logGameEvent("started game");
|
|
const newQuestionBox = questions();
|
|
const { value } = newQuestionBox.next();
|
|
// just for type safety -- the generator will have at least one question
|
|
if (!value) return;
|
|
setQuestionBox(newQuestionBox);
|
|
setJustStruck(false);
|
|
setStrikes(0);
|
|
setFinish(undefined);
|
|
setCurrent(value);
|
|
setTimerKey(prev => prev + 1);
|
|
}
|
|
function handleTimeOut() {
|
|
logGameEvent("timeout on game")
|
|
setFinish("time out");
|
|
navigator.vibrate(errorVibration);
|
|
}
|
|
function getProgressWidth(): string {
|
|
const num = !current
|
|
? 0
|
|
: (finish === "pass")
|
|
? 100
|
|
: getPercentageDone(current.progress);
|
|
return `${num}%`;
|
|
}
|
|
const progressColor = finish === "pass"
|
|
? "success"
|
|
: typeof finish === "object"
|
|
? "danger"
|
|
: "primary";
|
|
const gameRunning = current && finish === undefined;
|
|
return <>
|
|
<div className="text-center" style={{ minHeight: "200px", zIndex: 10, position: "relative" }}>
|
|
<div className="progress" style={{ height: "5px" }}>
|
|
<div className={`progress-bar bg-${progressColor}`} role="progressbar" style={{ width: getProgressWidth() }} />
|
|
</div>
|
|
{current && <div className="d-flex flex-row justify-content-between mt-2">
|
|
<StrikesDisplay strikes={strikes} />
|
|
<div className="d-flex flex-row-reverse">
|
|
<CountdownCircleTimer
|
|
key={timerKey}
|
|
isPlaying={!!current && !finish}
|
|
size={30}
|
|
colors={["#555555", "#F7B801", "#A30000"]}
|
|
colorsTime={[timeLimit, timeLimit*0.33, 0]}
|
|
strokeWidth={4}
|
|
strokeLinecap="square"
|
|
duration={timeLimit}
|
|
onComplete={handleTimeOut}
|
|
/>
|
|
<button onClick={handleQuit} className="btn btn-outline-secondary btn-sm mr-2">Quit</button>
|
|
</div>
|
|
</div>}
|
|
<div ref={parent}>
|
|
{justStruck && <div className="alert alert-warning my-2" role="alert" style={{ maxWidth: "300px", margin: "0 auto" }}>
|
|
{getStrikeMessage()}
|
|
</div>}
|
|
</div>
|
|
<Reward ref={rewardRef} config={{ lifetime: 130, spread: 90, elementCount: 150, zIndex: 999999999 }} type="confetti">
|
|
<div>
|
|
{finish === undefined &&
|
|
(current
|
|
? <div>
|
|
<Display question={current.question} callback={handleCallback} />
|
|
</div>
|
|
: <div>
|
|
<div className="pt-3">
|
|
{/* TODO: ADD IN TEXT DISPLAY OPTIONS HERE TOO - WHEN WE START USING THEM*/}
|
|
<Instructions />
|
|
</div>
|
|
<div>
|
|
<button className="btn btn-primary mt-4" onClick={handleRestart}>Start</button>
|
|
</div>
|
|
</div>)
|
|
}
|
|
{finish === "pass" && <div>
|
|
<h4 className="mt-4">
|
|
<span role="img" aria-label="celebration">🎉</span> Finished!
|
|
</h4>
|
|
<button className="btn btn-secondary mt-4" onClick={handleRestart}>Try Again</button>
|
|
</div>}
|
|
{(typeof finish === "object" || finish === "time out") && <div>
|
|
<h4 className="mt-4">{failMessage(current?.progress, finish)}</h4>
|
|
{typeof finish === "object" && <div>
|
|
<div>The correct answer was:</div>
|
|
<div className="my-2">
|
|
{finish?.answer}
|
|
</div>
|
|
</div>}
|
|
<div className="mt-3">
|
|
<button className="btn btn-success mr-2" onClick={handleRestart}>Try Again</button>
|
|
<button className="btn btn-danger ml-2" onClick={handleQuit}>Quit</button>
|
|
</div>
|
|
<div onClick={handleQuit} className="my-3">
|
|
<Link to={studyLink}>
|
|
<button className="btn btn-outline-secondary"><span role="img" aria-label="">📚</span> Study more</button>
|
|
</Link>
|
|
</div>
|
|
</div>}
|
|
</div>
|
|
</Reward>
|
|
</div>
|
|
{gameRunning && <div style={{
|
|
position: "absolute",
|
|
backgroundColor: "rgba(255, 255, 255, 0.3)",
|
|
backdropFilter: "blur(10px)",
|
|
top: "0px",
|
|
left: "0px",
|
|
width: "100%",
|
|
height: "100%",
|
|
zIndex: 6,
|
|
}}></div>}
|
|
</>;
|
|
}
|
|
|
|
function StrikesDisplay({ strikes }: { strikes: number }) {
|
|
return <div>
|
|
{[...Array(strikes)].map(_ => <span key={Math.random()} className="mr-2">❌</span>)}
|
|
</div>;
|
|
}
|
|
|
|
function getStrikeMessage() {
|
|
return randFromArray([
|
|
"Not quite! Try again.",
|
|
"No sorry, try again",
|
|
"Umm, no, try again",
|
|
"Try again",
|
|
"Oooooooo, sorry no...",
|
|
]);
|
|
}
|
|
|
|
function failMessage(progress: Progress | undefined, finish: "time out" | { msg: "fail", answer: JSX.Element }): string {
|
|
const pDone = progress ? getPercentageDone(progress) : 0;
|
|
const { message, face } = pDone < 20
|
|
? { message: "No, sorry", face: "😑" }
|
|
: pDone < 30
|
|
? { message: "Oops, that's wrong", face: "😟" }
|
|
: pDone < 55
|
|
? { message: "Fail", face: "😕" }
|
|
: pDone < 78
|
|
? { message: "You almost got it!", face: "😩" }
|
|
: { message: "Nooo! So close!", face: "😭" };
|
|
return typeof finish === "object"
|
|
? `${message} ${face}`
|
|
: `⏳ Time's Up ${face}`;
|
|
}
|
|
|
|
export default GameCore; |