add thai flash cards for consonant alphabet

2024-02-10 00:48:12 -06:00 · 2024-02-10 00:48:12 -06:00 · 86cda450b3
commit 86cda450b3
parent b1f55fd898
3 changed files with 216 additions and 0 deletions
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@ -1,6 +1,7 @@
 import '../styles/global.css'
 import '../styles/prism.css'
 import '../components/portfolio/alien_styles.css'
+import '../styles/thai.css'
 import type { AppProps } from 'next/app'
 import type { HomeProps } from './notes'
 import React from 'react'
--- a/pages/thai/index.tsx
+++ b/pages/thai/index.tsx
@ -0,0 +1,166 @@
+import Head from 'next/head'
+import { useState } from 'react';
+
+
+export default function Home() {
+  const [randomeLetter, setRandomLetter] = useState(_getRandomLetter())
+
+  function _getRandomLetter() {
+    return thaiConsonantsArray[Math.floor(Math.random() * thaiConsonantsArray.length)]
+  }
+
+  return (
+    <>
+      <Head>
+        <title>Thai Stuff</title>
+      </Head>
+
+      <div className='card'>
+        <div>
+          <p>{randomeLetter.letter}</p>
+          <p>{randomeLetter.phono}</p>
+        </div>
+        <div className='buttons'>
+          <button onClick={async () => {
+            console.log("pressed listen")
+          }}>Listen</button>
+          <button onClick={async () => {
+            let k = _getRandomLetter()
+            while (k == randomeLetter) {
+              k = _getRandomLetter()
+            }
+            setRandomLetter(k)
+          }}>Next</button>
+        </div>
+      </div>
+    </>
+  )
+}
+
+
+const thaiConsonantsArray = [
+  {
+    letter: 'ก',
+    phono: 'ko kai',
+  },
+  {
+    letter: 'ข',
+    phono: 'kho khai',
+  },
+  {
+    letter: 'คง',
+    phono: 'kho khon',
+  },
+  {
+    letter: 'ง',
+    phono: 'ngo ngoo',
+  },
+  {
+    letter: 'จ',
+    phono: 'cho chan',
+  },
+  {
+    letter: 'ฉ',
+    phono: 'so chan',
+  },
+  {
+    letter: 'ช',
+    phono: 'so chon',
+  },
+  {
+    letter: 'ซ',
+    phono: 'so san',
+  },
+  {
+    letter: 'ฌ',
+    phono: 'so cho',
+  },
+  {
+    letter: 'ญ',
+    phono: 'yo ning',
+  },
+  {
+    letter: 'ฎ',
+    phono: 'do dek',
+  },
+  {
+    letter: 'ฏ',
+    phono: 'to tao',
+  },
+  {
+    letter: 'ฐ',
+    phono: 'tho thon',
+  },
+  {
+    letter: 'ฑ',
+    phono: 'tho thung',
+  },
+  {
+    letter: 'ฒ',
+    phono: 'tho tho',
+  },
+  {
+    letter: 'ณ',
+    phono: 'no nen',
+  },
+  {
+    letter: 'บ',
+    phono: 'bo bai',
+  },
+  {
+    letter: 'ป',
+    phono: 'po pao',
+  },
+  {
+    letter: 'พ',
+    phono: 'pho phan',
+  },
+  {
+    letter: 'ม',
+    phono: 'mo mi',
+  },
+  {
+    letter: 'ฝ',
+    phono: 'fo fan',
+  },
+  {
+    letter: 'ฟ',
+    phono: 'fo fa',
+  },
+  {
+    letter: 'ภ',
+    phono: 'pho phran',
+  },
+  {
+    letter: 'ฝ',
+    phono: 'fo fan',
+  },
+  {
+    letter: 'ส',
+    phono: 'so san',
+  },
+  {
+    letter: 'ศ',
+    phono: 'so si',
+  },
+  {
+    letter: 'ษ',
+    phono: 'so so',
+  },
+  {
+    letter: 'ส',
+    phono: 'so san',
+  },
+  {
+    letter: 'ห',
+    phono: 'ho hin',
+  },
+  {
+    letter: 'ฬ',
+    phono: 'lo ling',
+  },
+  {
+    letter: 'ฮ',
+    phono: 'ho ho',
+  },
+];
--- a/styles/thai.css
+++ b/styles/thai.css
@ -0,0 +1,49 @@
+.card {
+  position: absolute;
+  top: calc(50% - 22rem);
+  left: calc(50% - 9rem);
+  width: 18rem;
+  height: 26rem;
+  padding: 10px;
+  background-color: rgba(255, 255, 255, 0.15);
+  border-radius: 10px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-direction: column;
+  border-right: 1px solid color(srgb 0.3784 0.4042 0.43);
+  border-top: 1px solid color(srgb 0.3784 0.4042 0.43);
+}
+
+.card > div > p:first-of-type {
+  font-size: 8rem;
+  margin: 0;
+  color: #bfcedd;
+  text-shadow: -4px 3px 7px #121316;
+}
+
+.card > div > p {
+  margin: 0;
+  color: #bfcedd;
+  text-align: center;
+}
+
+.card > .buttons {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  gap: 2px;
+  font-size: 1.6rem;
+}
+
+.card > .buttons > button {
+  flex: 1;
+  margin: 0;
+}
+
+.card > .buttons > :first-child {
+  background: none;
+}