From e9ee6c0b6921f562f8ae2af13a0816f2c244ad79 Mon Sep 17 00:00:00 2001
From: Alex Stan <alex.stan.2010@proton.me>
Date: Sun, 2 Jun 2024 10:10:16 +0300
Subject: [PATCH] Smoothed out the animations (#10) Co-authored-by: Alex Stan
 <alex.stan.2010@proton.me> Co-committed-by: Alex Stan
 <alex.stan.2010@proton.me>

---
 app/components/question_component.tsx | 17 ++++++++++++++---
 app/learn/[category]/page.tsx         | 20 +++++++++++++++++++-
 2 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/app/components/question_component.tsx b/app/components/question_component.tsx
index 82454fb..bdc457a 100644
--- a/app/components/question_component.tsx
+++ b/app/components/question_component.tsx
@@ -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"
diff --git a/app/learn/[category]/page.tsx b/app/learn/[category]/page.tsx
index e125721..665d43d 100644
--- a/app/learn/[category]/page.tsx
+++ b/app/learn/[category]/page.tsx
@@ -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)]"