BlahajTeam/next-app
3
0
Fork 0
Code Issues Pull requests 1 Packages Projects Releases Wiki Activity

Smoothed out the animations

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

17
app/components/question_component.tsx
View file

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

20
app/learn/[category]/page.tsx
View file

@ -9,6 +9,16 @@ import { AnswerType, Question, getQuestions } from '@/app/lib/question';
import QuestionView from '@/app/components/question_component';
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 [mobileMenuOpen, setMobileMenuOpen] = useState(false)
@ -35,6 +45,7 @@ const Page = ({ params }: { params: { category: string }}) => {
result = result.filter( q => q.category === params.category)
.map(it=>({...it, answered: AnswerType.Unset}));
//result = result.filter
shuffle( result );
setQuestions( result );
console.log( `q12 uestions: ${ JSON.stringify( questions ) }`, result );
}
@ -44,6 +55,7 @@ const Page = ({ params }: { params: { category: string }}) => {
questions?.forEach(q => {
ans[ q.id ] = AnswerType.Unset;
});
/*
setState( (prevState: SessionState) => ({
@ -83,7 +95,13 @@ const Page = ({ params }: { params: { category: string }}) => {
</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
className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"