diff --git a/pages/thai/index.tsx b/pages/thai/index.tsx index 962b989..4ef0d5a 100644 --- a/pages/thai/index.tsx +++ b/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(null) + const [randomeLetter, setRandomLetter] = useState({ + 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() { Thai Stuff -
+

{randomeLetter.letter}

{randomeLetter.phono}

@@ -25,9 +45,9 @@ export default function Home() { console.log("pressed listen") }}>Listen @@ -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, +}