120 lines
5 KiB
TypeScript
120 lines
5 KiB
TypeScript
import { ReactComponentElement, ReactNode, useEffect } from "react";
|
|
import { AnswerType, Question } from "../lib/question";
|
|
import { SessionState } from "../lib/session";
|
|
import { CheckCircleIcon, XCircleIcon } from "@heroicons/react/24/outline";
|
|
import { Button, Transition } from "@headlessui/react";
|
|
import wait from "../lib/delay";
|
|
import { motion } from "framer-motion";
|
|
|
|
const QuestionView = ({ question, setState, state }: { question: Question, setState: any, state: SessionState }) => {
|
|
|
|
const handleOpenClick = () => {
|
|
setState( (prevState: SessionState) => ({
|
|
...prevState,
|
|
opened: {
|
|
...prevState.opened,
|
|
[question.id]: !prevState.opened[ question.id ]
|
|
}
|
|
}))
|
|
}
|
|
|
|
useEffect( () => {
|
|
wait( 1000 );
|
|
}, [] );
|
|
|
|
const handleAnswerClick = (right: boolean) => {
|
|
setState( (prevState: SessionState) => ({
|
|
...prevState,
|
|
answered: prevState.answered + 1,
|
|
wrong: prevState.wrong + (right ? 0 : 1),
|
|
right: prevState.right + (right ? 1 : 0),
|
|
answer: {
|
|
...prevState.answer,
|
|
[question.id]: right ? AnswerType.Right : AnswerType.Wrong
|
|
}
|
|
}))
|
|
question.answered = right ? AnswerType.Right : AnswerType.Wrong;
|
|
}
|
|
|
|
return (
|
|
<div className="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
|
|
<div className="text-center">
|
|
{/* {question && question.text} */}
|
|
<Transition
|
|
appear={true}
|
|
show={question ? true : false /* a bit hacky */}
|
|
enter="transition-opacity duration-300"
|
|
enterFrom="opacity-0"
|
|
enterTo="opacity-90"
|
|
leave="transition-opacity duration-150"
|
|
leaveFrom="opacity-90"
|
|
leaveTo="opacity-0">
|
|
<h1 className="text-4xl font-bold tracking-tight text-gray-50 sm:text-6xl">
|
|
{question.text}
|
|
</h1>
|
|
</Transition>
|
|
{/* <Transition
|
|
show={(question && state.opened[ question.id ]) ? true : false}
|
|
enter="transition-opacity duration-300"
|
|
enterFrom="opacity-0"
|
|
enterTo="opacity-90"
|
|
leave="transition-opacity duration-150"
|
|
leaveFrom="opacity-90"
|
|
leaveTo="opacity-0"> */}
|
|
{/* <motion.div animate={{visibility: ((question && state.opened[ question.id ]) ? "visible" : "collapse") }}> */}
|
|
<Transition
|
|
show={(question && (state.opened[ question.id ])) ? false : true}
|
|
enter="transition-opacity duration-300"
|
|
enterFrom="opacity-0"
|
|
enterTo="opacity-90"
|
|
leave="transition-opacity duration-150"
|
|
leaveFrom="opacity-90"
|
|
leaveTo="opacity-0">
|
|
<Button className="mt-10 leading-6 text-black back rounded-md bg-white text-sm font-semibold text-gray-900" onClick={handleOpenClick} style = {{padding: '5px'}}>
|
|
Show answer
|
|
</Button>
|
|
</Transition>
|
|
<motion.div animate={(question && state.opened[ question.id ]) ? {visibility: "visible", opacity: 1} : {visibility: "collapse", opacity: 0}}>
|
|
<div><p className="mt-6 text-lg leading-8 text-gray-200">
|
|
{question.answer}
|
|
</p>
|
|
{/* <div className="mt-10 flex items-center justify-center gap-x-6">
|
|
<button
|
|
onClick={() => { handleAnswerClick( true )}}
|
|
className="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
|
|
>
|
|
I knew that!
|
|
</button>
|
|
<button
|
|
onClick={() => {handleAnswerClick( false )}}
|
|
className="text-sm font-semibold leading-6 text-gray-300"
|
|
>
|
|
I didn't know that!
|
|
</button>
|
|
</div> */}
|
|
<div className="mt-10 flex items-center justify-center gap-x-6">
|
|
<button
|
|
onClick={() => { handleAnswerClick( true )}}
|
|
className="rounded-md bg-green-600 px-3.5 py-2.5 text-s font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
|
|
style={{minWidth:'40%', minHeight:'40%', maxWidth:'40%', maxHeight:'40%'}}
|
|
>
|
|
<CheckCircleIcon></CheckCircleIcon>
|
|
I knew that!
|
|
</button>
|
|
<button
|
|
onClick={() => {handleAnswerClick( false )}}
|
|
className="rounded-md bg-red-600 px-3.5 py-2.5 text-s font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
|
|
style={{minWidth:'40%', minHeight:'40%', maxWidth:'40%', maxHeight:'40%'}}
|
|
>
|
|
<XCircleIcon></XCircleIcon>
|
|
I didn't know!
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default QuestionView;
|