tristonarmstrong/XeNote
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add thai flash cards for consonant alphabet

Browse Source
This commit is contained in:
Triston Armstrong 2024-02-10 00:48:12 -06:00
parent b1f55fd898
commit 86cda450b3
3 changed files with 216 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
pages/_app.tsx
View File

@ -1,6 +1,7 @@
import '../styles/global.css' import '../styles/global.css'
import '../styles/prism.css' import '../styles/prism.css'
import '../components/portfolio/alien_styles.css' import '../components/portfolio/alien_styles.css'
import '../styles/thai.css'
import type { AppProps } from 'next/app' import type { AppProps } from 'next/app'
import type { HomeProps } from './notes' import type { HomeProps } from './notes'
import React from 'react' import React from 'react'

166
pages/thai/index.tsx Normal file
View File

@ -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',
},
];

49
styles/thai.css Normal file
View File

@ -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;
}