feat: show current game mode

src/lib/Board.svelte

@@ -12,6 +12,7 @@
 	let selectedJ: number | undefined = undefined;
 	let status: 'incomplete' | 'error' | 'won' = 'incomplete';
 	let valueMode: 'Write' | 'Annotation' = 'Write';
+	let lastMode: Difficulty;
 
 	const onSelect = (i: number, j: number) => () => {
 		if (i === selectedI && j === selectedJ) {
@@ -47,7 +48,7 @@
 		}
 	};
 
-	const onGameCommand = (mode: string) => {
+	const onGameCommand = (mode: 'reset' | Difficulty) => {
 		if (mode === 'reset') {
 			board.reset();
 			board.grid = board.grid; // to trigger reload
@@ -56,20 +57,21 @@
 			if (mode === 'easy') board.prepare(Difficulty.Easy);
 			else if (mode === 'medium') board.prepare(Difficulty.Medium);
 			else if (mode === 'hard') board.prepare(Difficulty.Hard);
+			lastMode = mode;
 		}
 	};
 
 	let board: Board;
 	let jsConfetti: JSConfetti;
 
-	onGameCommand('easy');
+	onGameCommand(Difficulty.Medium);
 
 	onMount(() => {
 		jsConfetti = new JSConfetti();
 	});
 </script>
 
-<GameCommands onClick={onGameCommand} />
+<GameCommands {lastMode} onClick={onGameCommand} />
 <p class="py-4 text-center">STATUS: {status}</p>
 
 <div class="mx-auto grid max-w-xl grid-cols-[1fr_1fr_1fr_auto] gap-4">

src/lib/GameCommands.svelte

@@ -1,22 +1,13 @@
 <script lang="ts">
-	const { onClick } = $props();
+	const { lastMode, onClick }: { lastMode: string; onClick: (arg0: string) => void } = $props();
 </script>
 
 <div class="flex justify-center space-x-2">
-	<button
-		class="cursor-pointer rounded-full bg-cyan-500 px-4 py-2 text-sm text-white"
-		onclick={() => onClick('reset')}>Reset</button
-	>
-	<button
-		class="cursor-pointer rounded-full bg-cyan-500 px-4 py-2 text-sm text-white"
-		onclick={() => onClick('easy')}>Easy</button
-	>
-	<button
-		class="cursor-pointer rounded-full bg-cyan-500 px-4 py-2 text-sm text-white"
-		onclick={() => onClick('medium')}>Medium</button
-	>
-	<button
-		class="cursor-pointer rounded-full bg-cyan-500 px-4 py-2 text-sm text-white"
-		onclick={() => onClick('hard')}>Hard</button
-	>
+	{#each ['reset', 'easy', 'medium', 'hard'] as mode (mode)}
+		<button
+			class="cursor-pointer rounded-full bg-cyan-500 px-4 py-2 text-sm text-white capitalize"
+			class:bg-cyan-800={lastMode === mode}
+			onclick={() => onClick(mode)}>{mode}</button
+		>
+	{/each}
 </div>

src/lib/Switch.svelte

@@ -75,7 +75,7 @@
 	@reference "tailwindcss";
 
 	:root {
-		--accent-color: theme(colors.emerald.400);
+		--accent-color: theme(colors.emerald.300);
 		--gray: #ccc;
 	}
 	/* Inner Design Option */

src/lib/core/board.ts

@@ -1,9 +1,9 @@
 export enum Difficulty {
-	Easy,
-	Medium,
-	Hard,
-	Last,
-	Done
+	Easy = 'easy',
+	Medium = 'medium',
+	Hard = 'hard',
+	Last = 'last',
+	Done = 'done'
 }
 
 export type Case = number | undefined;
@@ -17,11 +17,11 @@ function shuffleArray<T>(array: Array<T>): void {
 
 function getNumberToKeepFromDifficulty(difficulty: Difficulty) {
 	const rules = {
-		0: 3,
-		1: 2,
-		2: 1,
-		3: 8,
-		4: 9
+		easy: 3,
+		medium: 2,
+		hard: 1,
+		last: 8,
+		done: 9
 	};
 	return rules[difficulty];
 }

src/routes/+page.svelte

@@ -2,6 +2,10 @@
 	import Board from '$lib/Board.svelte';
 </script>
 
+<svelte:head>
+	<title>FUBIKI</title>
+</svelte:head>
+
 <h1 class="mb-5 text-center text-6xl font-medium">Fubuki</h1>
 
 <div class="mx-2">