Smoothed out the animations

This commit is contained in:
Alex Stan 2024-06-02 10:09:16 +03:00
parent 6fa4bf8bdd
commit c65777432f
2 changed files with 33 additions and 4 deletions

View file

@ -33,9 +33,20 @@ const QuestionView = ({ question, setState, state }: { question: Question, setSt
return ( return (
<div className="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56"> <div className="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
<div className="text-center"> <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"> <h1 className="text-4xl font-bold tracking-tight text-gray-50">
{question && question.text} {question.text}
</h1> </h1>
</Transition>
<Transition <Transition
show={(question && state.opened[ question.id ]) ? true : false} show={(question && state.opened[ question.id ]) ? true : false}
enter="transition-opacity duration-300" enter="transition-opacity duration-300"

View file

@ -9,6 +9,16 @@ import { AnswerType, Question, getQuestions } from '@/app/lib/question';
import QuestionView from '@/app/components/question_component'; import QuestionView from '@/app/components/question_component';
import ResultScreen from '@/app/components/results'; import ResultScreen from '@/app/components/results';
const shuffle = (array: any[]) => {
let i = array.length - 1;
while ( i >= 0 ) {
const random_i = Math.floor( Math.random() * i );
[array[ i ], array[ random_i ]] = [array[ random_i ], array[ i ]];
i--;
}
}
const Page = ({ params }: { params: { category: string }}) => { const Page = ({ params }: { params: { category: string }}) => {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false) const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
@ -35,6 +45,7 @@ const Page = ({ params }: { params: { category: string }}) => {
result = result.filter( q => q.category === params.category) result = result.filter( q => q.category === params.category)
.map(it=>({...it, answered: AnswerType.Unset})); .map(it=>({...it, answered: AnswerType.Unset}));
//result = result.filter //result = result.filter
shuffle( result );
setQuestions( result ); setQuestions( result );
console.log( `q12 uestions: ${ JSON.stringify( questions ) }`, result ); console.log( `q12 uestions: ${ JSON.stringify( questions ) }`, result );
} }
@ -45,6 +56,7 @@ const Page = ({ params }: { params: { category: string }}) => {
ans[ q.id ] = AnswerType.Unset; ans[ q.id ] = AnswerType.Unset;
}); });
/* /*
setState( (prevState: SessionState) => ({ setState( (prevState: SessionState) => ({
...prevState, ...prevState,
@ -83,7 +95,13 @@ const Page = ({ params }: { params: { category: string }}) => {
</div> </div>
<div style={{paddingTop: '72px'}}></div> <div style={{paddingTop: '72px'}}></div>
{questions[ index ] ? (<QuestionView question={questions[ index ]} state = {state} setState={setState}/>) : <ResultScreen state={state}/>} {(()=>{
if ( !questions[ 0 ] )
return <></>;
return (index < 10 && questions[ index ]) ? <QuestionView question={questions[ index ]} state = {state} setState={setState}/> : <ResultScreen state={state}/>;
})()}
{/* {questions[ 0 ] ? ((index < 10 && questions[ index ]) ? <QuestionView question={questions[ index ]} state = {state} setState={setState}/> : <ResultScreen state={state}/>) : null} */}
<div <div
className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]" className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"