From 0777e2bbf977b6ed6194a901779a214ceff06b84 Mon Sep 17 00:00:00 2001
From: pd0a6847 <pd0a6847@posco.com>
Date: Mon, 24 Nov 2025 17:03:06 +0900
Subject: [PATCH] feat: enhance GameBoard component with improved filtering and
 layout adjustments

---
 src/lib/components/custom/GameBoard.svelte | 117 ++++++++++++++++-----
 1 file changed, 90 insertions(+), 27 deletions(-)

diff --git a/src/lib/components/custom/GameBoard.svelte b/src/lib/components/custom/GameBoard.svelte
index f00bae8..bcc952c 100644
--- a/src/lib/components/custom/GameBoard.svelte
+++ b/src/lib/components/custom/GameBoard.svelte
@@ -1,39 +1,102 @@
 <script lang="ts">
-	import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
-	import { game } from '$lib/data/gameBoard.ts';
+	import ScrollArea from '../ui/scroll-area/scroll-area.svelte';
+	import { game } from '../../data/gameBoard';
 	import * as ToggleGroup from '$lib/components/ui/toggle-group/index.js';
+	import { fly, fade } from 'svelte/transition';
+	import { flip } from 'svelte/animate';
+
+	let selectedCategories = $state<string[]>([]);
+	let selectedPayouts = $state<string[]>([]);
+
+	let filteredGame = $derived(
+		game.filter((item) => {
+			const categoryMatch =
+				selectedCategories.length === 0 || selectedCategories.includes(item.category);
+
+			const payoutMatch =
+				selectedPayouts.length === 0 ||
+				selectedPayouts.some((p) => {
+					const payoutValue = Number(p.replace('PO', ''));
+					return item.payout == payoutValue;
+				});
+
+			return categoryMatch && payoutMatch;
+		})
+	);
 </script>
 
-<footer class="border-border bg-background text-foreground">
-	<div class="mx-auto max-w-3xl px-5 lg:max-w-6xl lg:px-6">
-		<div class="relative flex flex-col justify-between border-x border-border p-4">
-			<div class="flex justify-start mb-3">
-				<ToggleGroup.Root variant="outline" type="multiple" class="pr-5">
-					<ToggleGroup.Item value="BS" aria-label="Toggle BS"><span class="text-xs">BS</span></ToggleGroup.Item>
-					<ToggleGroup.Item value="EO" aria-label="Toggle EO"><span class="text-xs">EO</span></ToggleGroup.Item>
-					<ToggleGroup.Item value="PAIR" aria-label="Toggle PAIR"><span class="text-xs">PR</span></ToggleGroup.Item>
-					<ToggleGroup.Item value="TRIPLE" aria-label="Toggle TRIPLE"><span class="text-xs">TRP</span></ToggleGroup.Item>
-					<ToggleGroup.Item value="TOTAL" aria-label="Toggle TOTAL"><span class="text-xs">TOT</span></ToggleGroup.Item>
-					<ToggleGroup.Item value="DOMINO" aria-label="Toggle DOMINO"><span class="text-xs">DOM</span></ToggleGroup.Item>
-					<ToggleGroup.Item value="SINGLE" aria-label="Toggle SINGLE"><span class="text-xs">SGL</span></ToggleGroup.Item>
+<footer class="min-h-[100dvh] flex flex-col border-border bg-background text-foreground">
+	<div class="mx-auto max-w-3xl px-5 lg:max-w-6xl lg:px-6 w-full">
+		<div class="relative flex-1 flex flex-col justify-between border-x border-border p-4">
+			<div class="mb-3 flex justify-start">
+				<ToggleGroup.Root
+					variant="outline"
+					type="multiple"
+					class="pr-5"
+					bind:value={selectedCategories}
+				>
+					<ToggleGroup.Item value="BS" aria-label="Toggle BS"
+						><span class="text-xs">BS</span></ToggleGroup.Item
+					>
+					<ToggleGroup.Item value="EO" aria-label="Toggle EO"
+						><span class="text-xs">EO</span></ToggleGroup.Item
+					>
+					<ToggleGroup.Item value="PAIR" aria-label="Toggle PAIR"
+						><span class="text-xs">PR</span></ToggleGroup.Item
+					>
+					<ToggleGroup.Item value="TRIPLE" aria-label="Toggle TRIPLE"
+						><span class="text-xs">TRP</span></ToggleGroup.Item
+					>
+					<ToggleGroup.Item value="TOTAL" aria-label="Toggle TOTAL"
+						><span class="text-xs">TOT</span></ToggleGroup.Item
+					>
+					<ToggleGroup.Item value="DOMINO" aria-label="Toggle DOMINO"
+						><span class="text-xs">DOM</span></ToggleGroup.Item
+					>
+					<ToggleGroup.Item value="SINGLE" aria-label="Toggle SINGLE"
+						><span class="text-xs">SGL</span></ToggleGroup.Item
+					>
 				</ToggleGroup.Root>
-				<ToggleGroup.Root variant="outline" type="multiple">
-					<ToggleGroup.Item value="PO1" aria-label="Toggle PO1"><span class="text-xs">1</span></ToggleGroup.Item>
-					<ToggleGroup.Item value="PO5" aria-label="Toggle PO5"><span class="text-xs">5</span></ToggleGroup.Item>
-					<ToggleGroup.Item value="PO6" aria-label="Toggle PO6"><span class="text-xs">6</span></ToggleGroup.Item>
-					<ToggleGroup.Item value="PO8" aria-label="Toggle PO8"><span class="text-xs">8</span></ToggleGroup.Item>
-					<ToggleGroup.Item value="PO12" aria-label="Toggle PO12"><span class="text-xs">12</span></ToggleGroup.Item>
-					<ToggleGroup.Item value="PO18" aria-label="Toggle PO18"><span class="text-xs">18</span></ToggleGroup.Item>
-					<ToggleGroup.Item value="PO24" aria-label="Toggle PO24"><span class="text-xs">24</span></ToggleGroup.Item>
-					<ToggleGroup.Item value="PO30" aria-label="Toggle PO30"><span class="text-xs">30</span></ToggleGroup.Item>
-					<ToggleGroup.Item value="PO50" aria-label="Toggle PO50"><span class="text-xs">50</span></ToggleGroup.Item>
-					<ToggleGroup.Item value="PO150" aria-label="Toggle PO150"><span class="text-xs">150</span></ToggleGroup.Item>
+				<ToggleGroup.Root variant="outline" type="multiple" bind:value={selectedPayouts}>
+					<ToggleGroup.Item value="PO1" aria-label="Toggle PO1"
+						><span class="text-xs">1</span></ToggleGroup.Item
+					>
+					<ToggleGroup.Item value="PO5" aria-label="Toggle PO5"
+						><span class="text-xs">5</span></ToggleGroup.Item
+					>
+					<ToggleGroup.Item value="PO6" aria-label="Toggle PO6"
+						><span class="text-xs">6</span></ToggleGroup.Item
+					>
+					<ToggleGroup.Item value="PO8" aria-label="Toggle PO8"
+						><span class="text-xs">8</span></ToggleGroup.Item
+					>
+					<ToggleGroup.Item value="PO12" aria-label="Toggle PO12"
+						><span class="text-xs">12</span></ToggleGroup.Item
+					>
+					<ToggleGroup.Item value="PO18" aria-label="Toggle PO18"
+						><span class="text-xs">18</span></ToggleGroup.Item
+					>
+					<ToggleGroup.Item value="PO24" aria-label="Toggle PO24"
+						><span class="text-xs">24</span></ToggleGroup.Item
+					>
+					<ToggleGroup.Item value="PO30" aria-label="Toggle PO30"
+						><span class="text-xs">30</span></ToggleGroup.Item
+					>
+					<ToggleGroup.Item value="PO50" aria-label="Toggle PO50"
+						><span class="text-xs">50</span></ToggleGroup.Item
+					>
+					<ToggleGroup.Item value="PO150" aria-label="Toggle PO150"
+						><span class="text-xs">150</span></ToggleGroup.Item
+					>
 				</ToggleGroup.Root>
 			</div>
 			<div class="grid grid-cols-7 gap-4">
-				{#each game as betSection}
+				{#each filteredGame as betSection (betSection.id)}
 					<div
-						class="flex h-[85px] w-full flex-col items-center justify-center gap-0.5 rounded-lg border p-1 text-[12px] leading-tight hover:border-black transition-colors"
+						animate:flip={{ duration: 400 }}
+						in:fly={{ y: 20, duration: 300, delay: 100 }}
+						out:fade={{ duration: 200 }}
+						class="hover:border-black flex h-[85px] w-full flex-col items-center justify-center gap-0.5 rounded-lg border p-1 text-[12px] leading-tight transition-colors"
 					>
 						<span class="font-semibold">{betSection.category}</span>
 						<span>{betSection.id}</span>