💄 UI update

Thaza-Kun · Apr 4, 2024 · 2dbab1f · 2dbab1f
1 parent 1fbcb8f
commit 2dbab1f
Show file tree

Hide file tree

Showing 8 changed files with 138 additions and 107 deletions.
diff --git a/src/app.pcss b/src/app.pcss
@@ -76,4 +76,12 @@
 	body {
 		@apply bg-background text-foreground;
 	}
+
+	h1 {
+		@apply text-3xl font-extrabold my-6;
+	}
+
+	dt {
+		@apply font-semibold;
+	}
 }
diff --git a/src/lib/components/ui/switch/index.ts b/src/lib/components/ui/switch/index.ts
@@ -0,0 +1,7 @@
+import Root from "./switch.svelte";
+
+export {
+	Root,
+	//
+	Root as Switch,
+};
diff --git a/src/lib/components/ui/switch/switch.svelte b/src/lib/components/ui/switch/switch.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { Switch as SwitchPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = SwitchPrimitive.Props;
+	type $$Events = SwitchPrimitive.Events;
+
+	let className: $$Props["class"] = undefined;
+	export let checked: $$Props["checked"] = undefined;
+	export { className as class };
+</script>
+
+<SwitchPrimitive.Root
+	bind:checked
+	class={cn(
+		"peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+		className
+	)}
+	{...$$restProps}
+	on:click
+	on:keydown
+>
+	<SwitchPrimitive.Thumb
+		class={cn(
+			"pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+		)}
+	/>
+</SwitchPrimitive.Root>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <header class="sticky top-0 flex h-10 items-center gap-4 border-b bg-background px-4 md:px-6">
-	<nav>
+	<nav class="mx-auto space-x-10 sm:space-x-24">
 		<a href="{base}/">Utama</a>
 		<a href="{base}/tatabunyi">Tatabunyi</a>
 		<a href="{base}/rajah">Rajah Bunyi</a>

diff --git a/src/routes/rajah/+layout.svelte b/src/routes/rajah/+layout.svelte
diff --git a/src/routes/rajah/+page.svelte b/src/routes/rajah/+page.svelte
@@ -2,92 +2,51 @@
 	import init from 'wasm-rs';
 	import { onMount } from 'svelte';
 	import { Bunyian, RantauBunyian, KaedahBunyian, JenisJawi, parse_bunyian_toml } from 'wasm-rs';
-	import * as Tabs from '$lib/components/ui/tabs/index.js';
+
+	import * as Tabs from '$lib/components/ui/tabs/index';
+	import * as PopOver from '$lib/components/ui/popover';
+	import { Badge } from '$lib/components/ui/badge';
 	import Table from './Table.svelte';
+	import { Switch } from '$lib/components/ui/switch/index';
 
 	export let data;
+	let nasalization: Boolean = false;
 	let items: Bunyian[] = [];
 	let phoneticTable: Map<string, Map<string, Bunyian | undefined>>;
-	type Enums = typeof RantauBunyian | typeof KaedahBunyian | typeof JenisJawi;
 
 	onMount(async () => {
 		await init(); // init initializes memory addresses needed by WASM and that will be used by JS/TS
 		items = parse_bunyian_toml(data.bunyian);
 		phoneticTable = data.table(items);
 	});
-
-	function enumKeys(items: Enums): string[] {
-		return Object.values(items).filter((v) => isNaN(Number(v))) as string[];
-	}
-
-	let rantau_bunyi_names = {
-		Dwibibir: 'dwibibir',
-		BibirGusi: 'bibir-gusi',
-		LelangitGusi: 'lelangit-gusi',
-		Lelangit: 'lelangit',
-		LelangitLembut: 'lelangit lembut',
-		AnakTekak: 'anak tekak',
-		Tekak: 'tekak'
-	};
-	let rantau_bunyi_shortnames = {
-		Dwibibir: 'DB',
-		BibirGusi: 'BG',
-		LelangitGusi: 'LG',
-		Lelangit: 'L',
-		LelangitLembut: 'LL',
-		AnakTekak: 'AT',
-		Tekak: 'T'
-	};
-	let kaedah_bunyi_names = {
-		Sengauan: 'sengauan',
-		LetusanBersuara: 'letusan bersuara',
-		LetusanTakBersuara: 'letusan tak bersuara',
-		GeseranBersuara: 'geseran bersuara',
-		GeseranTakBersuara: 'geseran tak bersuara',
-		MalaranTakGeser: 'malaran tak geser',
-		Getaran: 'getaran'
-	};
-	let kaedah_bunyi_shortnames = {
-		Sengauan: 'S',
-		LetusanBersuara: 'LB',
-		LetusanTakBersuara: 'LXB',
-		GeseranBersuara: 'GB',
-		GeseranTakBersuara: 'GXB',
-		MalaranTakGeser: 'MXG',
-		Getaran: 'G'
-	};
-
-	function getPhoneticKey(
-		table: Map<string, Map<string, Bunyian | undefined>>,
-		rantau: string,
-		kaedah: string
-	): Bunyian | undefined {
-		if (table != undefined) {
-			let r = table.get(rantau);
-			if (r != undefined) {
-				let b = r.get(kaedah);
-				return b;
-			}
-			return;
-		}
-		return;
-	}
 </script>
 
-<h1 class="h1 text-center">Fonologi Moden</h1>
-<Tabs.Root class="mx-auto max-w-7xl">
-	<Tabs.List class="mx-auto grid max-w-sm grid-flow-col justify-stretch">
-		<Tabs.Trigger value="jawi">Jawi</Tabs.Trigger>
-		<Tabs.Trigger value="rumi">Rumi</Tabs.Trigger>
-		<Tabs.Trigger value="ipa">IPA</Tabs.Trigger>
-	</Tabs.List>
-	<Tabs.Content value="jawi">
-		<Table field="jawi" {phoneticTable} />
-	</Tabs.Content>
-	<Tabs.Content value="rumi">
-		<Table field="rumi" {phoneticTable} />
-	</Tabs.Content>
-	<Tabs.Content value="ipa">
-		<Table field="ipa" {phoneticTable} />
-	</Tabs.Content>
-</Tabs.Root>
+<div class="mx-auto flex max-w-2xl flex-col place-items-center">
+	<h1>Rajah Bunyi</h1>
+	<Tabs.Root class="mx-auto flex max-w-7xl flex-col">
+		<Tabs.List class="mx-24 justify-around">
+			<Tabs.Trigger value="jawi">Jawi</Tabs.Trigger>
+			<Tabs.Trigger value="rumi">Rumi</Tabs.Trigger>
+			<Tabs.Trigger value="ipa">IPA</Tabs.Trigger>
+		</Tabs.List>
+		<div class="mx-auto flex place-content-center space-x-2 py-4">
+			<Switch bind:checked={nasalization} /><span> Sengaukan </span>
+			<PopOver.Root>
+				<PopOver.Trigger><Badge>?</Badge></PopOver.Trigger>
+				<PopOver.Content
+					>Penyegauan bunyi ialah perubahan bunyi apabila dipertemukan dengan unsur bunyi sengau
+					(seperti dalam imbuhan meN- dan peN-)</PopOver.Content
+				>
+			</PopOver.Root>
+		</div>
+		<Tabs.Content value="jawi">
+			<Table field="jawi" {phoneticTable} {nasalization} />
+		</Tabs.Content>
+		<Tabs.Content value="rumi">
+			<Table field="rumi" {phoneticTable} {nasalization} />
+		</Tabs.Content>
+		<Tabs.Content value="ipa">
+			<Table field="ipa" {phoneticTable} {nasalization} />
+		</Tabs.Content>
+	</Tabs.Root>
+</div>
diff --git a/src/routes/rajah/Table.svelte b/src/routes/rajah/Table.svelte
@@ -1,5 +1,8 @@
 <script lang="ts">
-	import { Bunyian, RantauBunyian, KaedahBunyian, JenisJawi } from 'wasm-rs';
+	import { Bunyian, RantauBunyian, KaedahBunyian, JenisJawi, JenisSengauan } from 'wasm-rs';
+	import { Switch } from '$lib/components/ui/switch/index';
+
+	export let nasalization: Boolean = false;
 	type Enums = typeof RantauBunyian | typeof KaedahBunyian | typeof JenisJawi;
 
 	export let field: string;
@@ -61,11 +64,11 @@
 	};
 </script>
 
-<table class="table">
+<table class="min-w-xl mx-auto table-fixed">
 	<thead>
 		<th scope="col"></th>
 		{#each enumKeys(RantauBunyian) as rantau}
-			<th scope="col" class="text-center"
+			<th scope="col" class="header"
 				><span class="hidden md:block">{rantau_bunyi_names[rantau]}</span>
 				<span class="visible md:hidden">{rantau_bunyi_shortnames[rantau]}</span></th
 			>
@@ -74,16 +77,26 @@
 	<tbody>
 		{#each enumKeys(KaedahBunyian) as kaedah}
 			<tr>
-				<th scope="row" class="text-center"
+				<th scope="row" class="header row-head"
 					><span class="hidden text-right md:block">{kaedah_bunyi_names[kaedah]}</span>
 					<span class="visible md:hidden">{kaedah_bunyi_shortnames[kaedah]}</span></th
 				>
 				{#each enumKeys(RantauBunyian) as rantau}
 					{@const bunyi = getPhoneticKey(phoneticTable, rantau, kaedah)}
 					{#if bunyi != undefined}
 						{#if field == 'jawi'}
-							<td class="cell jenis-{JenisJawi[bunyi.jenis_jawi]}">
-								{bunyi[field]}
+							{#if nasalization}
+								<td class="cell sengau-{JenisSengauan[bunyi.nasalization_type]}">
+									{bunyi.nasalized(field) ? bunyi.nasalized(field) : ''}
+								</td>
+							{:else}
+								<td class="cell jenis-{JenisJawi[bunyi.jenis_jawi]}">
+									{bunyi[field]}
+								</td>
+							{/if}
+						{:else if nasalization}
+							<td class="cell sengau-{JenisSengauan[bunyi.nasalization_type]}">
+								{bunyi.nasalized(field) ? bunyi.nasalized(field) : ''}
 							</td>
 						{:else}
 							<td class="cell">
@@ -99,14 +112,24 @@
 	</tbody>
 </table>
 
-{#if field == 'jawi'}
+{#if field == 'jawi' && !nasalization}
 	<div class="mx-auto my-4 flex max-w-2xl justify-evenly">
 		<div class="jenis-Kongsi rounded-xl px-2">Bunyi Melayu</div>
 		<div class="jenis-Arab rounded-xl px-2">Bunyi Arab</div>
 		<div class="jenis-Ciptaan rounded-xl px-2">Tulisan Ciptaan</div>
 	</div>
 {/if}
 
+{#if nasalization}
+	<div class="mx-auto my-4 flex max-w-2xl flex-wrap justify-evenly">
+		<div class="sengau-Mim rounded-xl px-2">Sengau mim</div>
+		<div class="sengau-Nun rounded-xl px-2">Sengau nun</div>
+		<div class="sengau-Nya rounded-xl px-2">Sengau nya</div>
+		<div class="sengau-Nga rounded-xl px-2">Sengau nga</div>
+		<div class="sengau-Unchanged rounded-xl px-2">Tiada perubahan</div>
+	</div>
+{/if}
+
 <div
 	class="visible m-4 mx-auto w-full max-w-2xl rounded-lg bg-white px-8 py-6 text-lg shadow-md dark:bg-gray-900 md:hidden"
 >
@@ -137,10 +160,17 @@
 </div>
 
 <style>
+	.header {
+		@apply px-2 text-center md:w-20;
+	}
+	.row-head {
+		@apply md:w-28;
+	}
 	.cell {
 		text-align: center;
 		@apply font-semibold;
 		@apply bg-primary;
+		@apply size-16 p-3 md:size-16;
 	}
 	.cell-empty {
 		@apply bg-muted;
@@ -154,4 +184,24 @@
 	.jenis-Ciptaan {
 		@apply bg-accent;
 	}
+	.sengau-Mim {
+		@apply bg-primary;
+	}
+	.sengau-Nun {
+		@apply bg-secondary;
+	}
+	.sengau-Nya {
+		@apply bg-accent;
+	}
+	.sengau-Nga {
+		@apply bg-muted;
+		@apply border-2 border-primary;
+	}
+	.sengau-Unchanged {
+		@apply bg-muted;
+		@apply border-2 border-accent;
+	}
+	.sengau-undefined {
+		@apply cell-empty;
+	}
 </style>
diff --git a/src/routes/tatabunyi/+page.svelte b/src/routes/tatabunyi/+page.svelte
@@ -57,8 +57,8 @@
 		class="flex w-full max-w-sm items-center space-x-4"
 		on:submit|preventDefault={() => updateText(input)}
 	>
-		<Input type="text" placeholder="word" bind:value={input} />
-		<Button type="submit" variant="default">Hantar</Button>
+		<Input type="text" placeholder="perkataan" bind:value={input} />
+		<Button type="submit" variant="secondary">Hantar</Button>
 	</form>
 
 	{#if submission != ''}