add spinning animation to card

pages/thai/index.tsx

@@ -1,11 +1,31 @@
 import Head from 'next/head'
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 
+const cardSpinning = [
+  { transform: "rotate3D(0, 1, 0, 360deg)" },
+]
+
+const cardSpinningTimer = {
+  duration: 500,
+  iterations: 1,
+};
 
 export default function Home() {
-  const [randomeLetter, setRandomLetter] = useState(_getRandomLetter())
+  const cardRef = useRef<HTMLDivElement>(null)
+  const [randomeLetter, setRandomLetter] = useState<LetterType>({
+    letter: 'ฮ',
+    phono: 'ho ho',
+  })
+
+  async function _getRandomLetter() {
+    cardRef.current?.animate(cardSpinning, cardSpinningTimer);
+
+    await (new Promise((res, rej) => {
+      setTimeout(() => {
+        res(true)
+      }, 100);
+    }))
 
-  function _getRandomLetter() {
     return thaiConsonantsArray[Math.floor(Math.random() * thaiConsonantsArray.length)]
   }
 
@@ -15,7 +35,7 @@ export default function Home() {
         <title>Thai Stuff</title>
       </Head>
 
-      <div className='card'>
+      <div className='card' ref={cardRef}>
         <div>
           <p>{randomeLetter.letter}</p>
           <p>{randomeLetter.phono}</p>
@@ -25,9 +45,9 @@ export default function Home() {
             console.log("pressed listen")
           }}>Listen</button>
           <button onClick={async () => {
-            let k = _getRandomLetter()
+            let k = await _getRandomLetter()
             while (k == randomeLetter) {
-              k = _getRandomLetter()
+              k = await _getRandomLetter()
             }
             setRandomLetter(k)
           }}>Next</button>
@@ -38,7 +58,7 @@ export default function Home() {
 }
 
 
-const thaiConsonantsArray = [
+const thaiConsonantsArray: LetterType[] = [
   {
     letter: 'ก',
     phono: 'ko kai',
@@ -48,7 +68,7 @@ const thaiConsonantsArray = [
     phono: 'kho khai',
   },
   {
-    letter: 'คง',
+    letter: 'ค',
     phono: 'kho khon',
   },
   {
@@ -164,3 +184,8 @@ const thaiConsonantsArray = [
     phono: 'ho ho',
   },
 ];
+
+interface LetterType {
+  letter: string,
+  phono: string,
+}