style: just enhance small interaction details for today cuz i'm super…

… tired
arkhlima · Jun 3, 2023 · 5a2c503 · 5a2c503 · vercel · Jun 3, 2023
1 parent 9a564c3
commit 5a2c503
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 16 deletions.
diff --git a/src/components/CharGroupSelect.tsx b/src/components/CharGroupSelect.tsx
@@ -151,7 +151,7 @@ const CharGroupSelect = (props: CharGroupProps) => {
               {(char) => (
                 <div
                   class={twMerge(
-                    'grid grid-flow-row justify-center gap-y-2 rounded-xl border-2 p-2 transition-all duration-75 ease-linear',
+                    'grid grid-flow-row justify-center gap-y-2 rounded-xl border-2 p-2 transition-all duration-100 ease-linear',
                     CHAR_STATE_CLASSES[
                       isCharSelected(groupIndex) ? 'active' : 'inactive'
                     ]

diff --git a/src/components/Dialog.tsx b/src/components/Dialog.tsx
@@ -19,7 +19,7 @@ const Dialog = (props: DialogProps) => {
   return (
     <dialog
       ref={(el) => (dialog = el)}
-      class="w-full max-w-xs rounded-xl border-2 border-slate-500 bg-slate-50 p-8 shadow-md backdrop:backdrop-blur-[1px] backdrop:transition-all backdrop:duration-75 backdrop:ease-[cubic-bezier(0.19,1,0.22,1)] focus-visible:outline-none"
+      class="w-full max-w-xs rounded-xl border-2 border-slate-500 bg-slate-50 p-8 shadow-md backdrop:backdrop-blur-[1px] backdrop:transition-all backdrop:duration-100 backdrop:ease-[cubic-bezier(0.19,1,0.22,1)] focus-visible:outline-none"
     >
       {props.children}
     </dialog>

diff --git a/src/constants/classes.ts b/src/constants/classes.ts
@@ -1,2 +1,2 @@
 export const DEFAULT_INTERACTION_CLASS =
-  'transition-all duration-75 ease-linear focus-visible:ring-offset-1 focus-visible:ring-offset-slate-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-300'
+  'transition-all duration-100 ease-linear focus-visible:ring-offset-1 focus-visible:ring-offset-slate-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-300 disabled:cursor-not-allowed'
diff --git a/src/routes/quiz.tsx b/src/routes/quiz.tsx
@@ -88,7 +88,7 @@ const Quiz = () => {
           {
             scale: 0.8,
             duration: 0.2,
-            ease: 'expo.out',
+            ease: 'expo.in',
           }
         )
         .to(
@@ -114,8 +114,8 @@ const Quiz = () => {
               }
             : {
                 x: `${calculatedTranslate}rem`,
-                duration: 0.2,
-                ease: 'expo.out',
+                duration: 0.1,
+                ease: 'expo.in.out',
               }
         )
       answerInput.focus()
@@ -132,23 +132,34 @@ const Quiz = () => {
     if (state.resetState) {
       animation = gsap
         .timeline()
-        .to('.question-kana', {
-          opacity: 0,
+        .to('.reset-icon', {
+          rotate: '75deg',
           duration: 0.2,
           ease: 'expo.in',
+        })
+        .to('.question-kana', {
+          opacity: 0,
+          duration: 0.1,
+          ease: 'expo.in.out',
           onComplete: () => {
             resetQuiz()
             setQuestions()
           },
         })
         .to('.question-kana', {
           opacity: 1,
-          duration: 0.2,
-          ease: 'expo.out',
+          duration: 0.1,
+          ease: 'expo.in.out',
           onComplete: () => {
             setResetState(false)
           },
         })
+        .to('.reset-icon', {
+          rotate: '0deg',
+          delay: 0.4,
+          duration: 0.2,
+          ease: 'expo.out',
+        })
     }
   })
 
@@ -261,7 +272,12 @@ const Quiz = () => {
                     ]
                   )}
                 >
-                  <span class="question-kana flex items-end justify-center font-sans text-3xl font-bold leading-none">
+                  <span
+                    class={twMerge(
+                      'question-kana',
+                      'flex items-end justify-center font-sans text-3xl font-bold leading-none'
+                    )}
+                  >
                     {question.char}
                   </span>
                   <span class="flex justify-center text-xl lowercase leading-none text-slate-500">
@@ -285,9 +301,10 @@ const Quiz = () => {
               type="button"
               aria-labelledby="reset-button"
               class={twMerge(
-                'w-12 h-12 flex items-center justify-center rounded-full bg-slate-500 text-slate-50 decoration-slate-50 decoration-wavy shadow-md shadow-slate-200 hover:bg-slate-600 active:bg-slate-700 active:scale-90',
+                'w-12 h-12 flex items-center justify-center rounded-full bg-slate-500 text-slate-50 decoration-slate-50 decoration-wavy shadow-md shadow-slate-200 hover:bg-slate-600 [&:not(:disabled)]:active:bg-slate-700 [&:not(:disabled)]:active:scale-90 disabled:bg-slate-300',
                 DEFAULT_INTERACTION_CLASS
               )}
+              disabled={!state.currentQuestion}
               onClick={() => state.currentQuestion && setResetState(true)}
             >
               <span id="reset-button" hidden>
@@ -300,7 +317,7 @@ const Quiz = () => {
                 stroke-width="3"
                 stroke="currentColor"
                 aria-hidden="true"
-                class="h-5 w-5"
+                class={twMerge('reset-icon', 'h-5 w-5')}
               >
                 <path
                   stroke-linecap="round"
@@ -331,7 +348,7 @@ const Quiz = () => {
               type="submit"
               aria-labelledby="submit-button"
               class={twMerge(
-                'w-12 h-12 flex items-center justify-center rounded-full bg-slate-500 text-slate-50 decoration-slate-50 decoration-wavy shadow-md shadow-slate-200 hover:bg-slate-600 active:bg-slate-700 active:scale-90',
+                'w-12 h-12 flex items-center justify-center rounded-full bg-slate-500 text-slate-50 decoration-slate-50 decoration-wavy shadow-md shadow-slate-200 [&:not(:disabled)]:active:bg-slate-700 [&:not(:disabled)]:active:scale-90 disabled:bg-slate-300',
                 DEFAULT_INTERACTION_CLASS
               )}
             >
@@ -342,15 +359,15 @@ const Quiz = () => {
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"
                 viewBox="0 0 24 24"
-                stroke-width="4"
+                stroke-width="3"
                 stroke="currentColor"
                 aria-hidden="true"
                 class="h-5 w-5"
               >
                 <path
                   stroke-linecap="round"
                   stroke-linejoin="round"
-                  d="M4.5 12.75l6 6 9-13.5"
+                  d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75"
                 />
               </svg>
             </button>