feat: enhance GameBoard component with improved filtering and layout adjustments
This commit is contained in:
pd0a6847
parent
b5e0115c21
commit
0777e2bbf9
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user