From f13305d1161cc3b931c98fdde6f00c28ee2bb0b2 Mon Sep 17 00:00:00 2001 From: Chaoscaot Date: Sat, 20 Dec 2025 18:36:33 +0100 Subject: [PATCH] feat: Add Team info Sidebar --- components.json | 7 +- .../event/DoubleEleminationDisplay.svelte | 79 ++++++++++++++---- .../event/EleminationDisplay.svelte | 38 +++++++-- src/components/event/EventFightChip.svelte | 35 ++++++-- src/components/event/EventTeamChip.svelte | 66 ++++++++++----- src/components/event/GroupDisplay.svelte | 4 +- src/components/event/TeamInfo.svelte | 79 ++++++++++++++++++ src/components/event/TeamList.svelte | 20 +++-- src/components/event/team-hover.svelte.ts | 6 +- src/components/types/event.ts | 2 +- src/components/ui/sheet/index.ts | 72 +---------------- src/components/ui/sheet/sheet-content.svelte | 80 ++++++++++--------- .../ui/sheet/sheet-description.svelte | 17 ++-- src/components/ui/sheet/sheet-footer.svelte | 16 ++-- src/components/ui/sheet/sheet-header.svelte | 19 +++-- src/components/ui/sheet/sheet-overlay.svelte | 22 ++--- src/components/ui/sheet/sheet-portal.svelte | 13 --- src/components/ui/sheet/sheet-title.svelte | 16 ++-- src/pages/events/[slug].astro | 48 +++++++---- 19 files changed, 400 insertions(+), 239 deletions(-) create mode 100644 src/components/event/TeamInfo.svelte delete mode 100644 src/components/ui/sheet/sheet-portal.svelte diff --git a/components.json b/components.json index acbae89..8be68c8 100644 --- a/components.json +++ b/components.json @@ -1,8 +1,6 @@ { "$schema": "https://shadcn-svelte.com/schema.json", - "style": "default", "tailwind": { - "config": "tailwind.config.js", "css": "src\\styles\\app.css", "baseColor": "slate" }, @@ -10,8 +8,9 @@ "components": "$lib/components", "utils": "$lib/components/utils", "ui": "$lib/components/ui", - "hooks": "$lib/hooks" + "hooks": "$lib/hooks", + "lib": "$lib" }, "typescript": true, - "registry": "https://next.shadcn-svelte.com/registry" + "registry": "https://tw3.shadcn-svelte.com/registry/default" } diff --git a/src/components/event/DoubleEleminationDisplay.svelte b/src/components/event/DoubleEleminationDisplay.svelte index e9465f4..4076e73 100644 --- a/src/components/event/DoubleEleminationDisplay.svelte +++ b/src/components/event/DoubleEleminationDisplay.svelte @@ -1,12 +1,20 @@ {#if !grandFinal} -

Konfiguration unvollständig (Grand Final fehlt).

+

+ Konfiguration unvollständig (Grand Final fehlt). +

{:else} {#key winnersStages.length + ":" + losersStages.length} - {@const totalColumns = Math.max(winnersStages.length, losersStages.length + 1) + 1} -
+ {@const totalColumns = + Math.max(winnersStages.length, losersStages.length + 1) + 1} +

Winners Bracket

@@ -132,30 +159,50 @@
{#each stage as fight} - + {/each}
{/each} -
+
{#if grandFinal} - + {/if}
-

Losers Bracket

+

+ Losers Bracket +

{#each losersStages as stage, j}
{#each stage as fight} - + {/each}
diff --git a/src/components/event/EleminationDisplay.svelte b/src/components/event/EleminationDisplay.svelte index 1bbb9ab..36e14e7 100644 --- a/src/components/event/EleminationDisplay.svelte +++ b/src/components/event/EleminationDisplay.svelte @@ -1,12 +1,20 @@ - +{#if !disabled} + + + {#snippet child({ props })} + {@render teamButton({ props })} + {/snippet} + + + + + +{:else} + {@render teamButton({ props: {} })} +{/if} - +{#snippet teamButton({ props }: { props: StringAnyRecord })} + +{/snippet} diff --git a/src/components/event/GroupDisplay.svelte b/src/components/event/GroupDisplay.svelte index e7fbda6..fd5fd40 100644 --- a/src/components/event/GroupDisplay.svelte +++ b/src/components/event/GroupDisplay.svelte @@ -52,7 +52,7 @@ {#each Object.entries(group.points ?? {}).sort((v1, v2) => v2[1] - v1[1]) as points} {@const [teamId, point] = points} {@const team = event.teams.find((t) => t.id.toString() === teamId)!!} - + {/each} @@ -61,7 +61,7 @@
{#each round as fight} - + {/each}
diff --git a/src/components/event/TeamInfo.svelte b/src/components/event/TeamInfo.svelte new file mode 100644 index 0000000..f88d819 --- /dev/null +++ b/src/components/event/TeamInfo.svelte @@ -0,0 +1,79 @@ + + + + {team.name} + {team.kuerzel} + Statistiken des Teams + + +
+
+

Teammitglieder

+ {#await members} +

Lade Mitglieder...

+ {:then member} +
+ {#each member.entries as p (p.uuid)} +
+
+ {p.name.charAt(0)} +
+ {p.name} +
+ {/each} +
+ {/await} +
+ +
+

Letzte 5 Kämpfe

+ {#if recentFights.length > 0} +
+ {#each recentFights as fight} +
+ +
+ {/each} +
+ {:else} +

Keine beendeten Kämpfe in diesem Event.

+ {/if} +
+
diff --git a/src/components/event/TeamList.svelte b/src/components/event/TeamList.svelte index aee3aae..32436bc 100644 --- a/src/components/event/TeamList.svelte +++ b/src/components/event/TeamList.svelte @@ -38,17 +38,27 @@

Angemeldete Teams

-
+
{#each teams as team} -
- {team.kuerzel} +
+ {/each} {#if teams.length === 0} -

Keine Teams angemeldet.

+

+ Keine Teams angemeldet. +

{/if}
diff --git a/src/components/event/team-hover.svelte.ts b/src/components/event/team-hover.svelte.ts index d3b17db..4242396 100644 --- a/src/components/event/team-hover.svelte.ts +++ b/src/components/event/team-hover.svelte.ts @@ -5,14 +5,16 @@ class TeamHoverService { public currentHover = $state(undefined); private fightConnector = get(fightConnector); + public disableConnections = $state(false); + setHover(teamId: number): void { this.currentHover = teamId; - this.fightConnector.addTeamConnection(teamId); + if (!this.disableConnections) this.fightConnector.addTeamConnection(teamId); } clearHover(): void { this.currentHover = undefined; - this.fightConnector.clearConnections(); + if (!this.disableConnections) this.fightConnector.clearConnections(); } } diff --git a/src/components/types/event.ts b/src/components/types/event.ts index 5d81082..72776b1 100644 --- a/src/components/types/event.ts +++ b/src/components/types/event.ts @@ -93,7 +93,7 @@ export const ExtendedEventSchema = z.object({ teams: z.array(TeamSchema), groups: z.array(ResponseGroupsSchema), fights: z.array(EventFightSchema), - referees: z.array(ResponseUserSchema), + referees: z.array(PlayerSchema), relations: z.array(ResponseRelationSchema), }); diff --git a/src/components/ui/sheet/index.ts b/src/components/ui/sheet/index.ts index efad474..1cf1af1 100644 --- a/src/components/ui/sheet/index.ts +++ b/src/components/ui/sheet/index.ts @@ -1,7 +1,4 @@ import { Dialog as SheetPrimitive } from "bits-ui"; -import { type VariantProps, tv } from "tailwind-variants"; - -import Portal from "./sheet-portal.svelte"; import Overlay from "./sheet-overlay.svelte"; import Content from "./sheet-content.svelte"; import Header from "./sheet-header.svelte"; @@ -12,6 +9,7 @@ import Description from "./sheet-description.svelte"; const Root = SheetPrimitive.Root; const Close = SheetPrimitive.Close; const Trigger = SheetPrimitive.Trigger; +const Portal = SheetPrimitive.Portal; export { Root, @@ -36,71 +34,3 @@ export { Title as SheetTitle, Description as SheetDescription, }; - -export const sheetVariants = tv({ - base: "bg-background fixed z-50 gap-4 p-6 shadow-lg", - variants: { - side: { - top: "inset-x-0 top-0 border-b", - bottom: "inset-x-0 bottom-0 border-t", - left: "inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm", - right: "inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm", - }, - }, - defaultVariants: { - side: "right", - }, -}); - -export const sheetTransitions = { - top: { - in: { - y: "-100%", - duration: 500, - opacity: 1, - }, - out: { - y: "-100%", - duration: 300, - opacity: 1, - }, - }, - bottom: { - in: { - y: "100%", - duration: 500, - opacity: 1, - }, - out: { - y: "100%", - duration: 300, - opacity: 1, - }, - }, - left: { - in: { - x: "-100%", - duration: 500, - opacity: 1, - }, - out: { - x: "-100%", - duration: 300, - opacity: 1, - }, - }, - right: { - in: { - x: "100%", - duration: 500, - opacity: 1, - }, - out: { - x: "100%", - duration: 300, - opacity: 1, - }, - }, -}; - -export type Side = VariantProps["side"]; diff --git a/src/components/ui/sheet/sheet-content.svelte b/src/components/ui/sheet/sheet-content.svelte index 9a0329c..84641ed 100644 --- a/src/components/ui/sheet/sheet-content.svelte +++ b/src/components/ui/sheet/sheet-content.svelte @@ -1,47 +1,53 @@ - - + + + - - + + {@render children?.()} - + Close - + diff --git a/src/components/ui/sheet/sheet-description.svelte b/src/components/ui/sheet/sheet-description.svelte index 3d8d145..f2ca93b 100644 --- a/src/components/ui/sheet/sheet-description.svelte +++ b/src/components/ui/sheet/sheet-description.svelte @@ -2,12 +2,15 @@ import { Dialog as SheetPrimitive } from "bits-ui"; import { cn } from "$lib/components/utils.js"; - type $$Props = SheetPrimitive.DescriptionProps; - - let className: $$Props["class"] = undefined; - export { className as class }; + let { + ref = $bindable(null), + class: className, + ...restProps + }: SheetPrimitive.DescriptionProps = $props(); - - - + diff --git a/src/components/ui/sheet/sheet-footer.svelte b/src/components/ui/sheet/sheet-footer.svelte index c489a48..4029026 100644 --- a/src/components/ui/sheet/sheet-footer.svelte +++ b/src/components/ui/sheet/sheet-footer.svelte @@ -1,16 +1,20 @@
- + {@render children?.()}
diff --git a/src/components/ui/sheet/sheet-header.svelte b/src/components/ui/sheet/sheet-header.svelte index 67ae2e6..8d2dc12 100644 --- a/src/components/ui/sheet/sheet-header.svelte +++ b/src/components/ui/sheet/sheet-header.svelte @@ -1,13 +1,20 @@ -
- +
+ {@render children?.()}
diff --git a/src/components/ui/sheet/sheet-overlay.svelte b/src/components/ui/sheet/sheet-overlay.svelte index 05d662e..24ef0f5 100644 --- a/src/components/ui/sheet/sheet-overlay.svelte +++ b/src/components/ui/sheet/sheet-overlay.svelte @@ -1,21 +1,21 @@ diff --git a/src/components/ui/sheet/sheet-portal.svelte b/src/components/ui/sheet/sheet-portal.svelte deleted file mode 100644 index 4eae12d..0000000 --- a/src/components/ui/sheet/sheet-portal.svelte +++ /dev/null @@ -1,13 +0,0 @@ - - - - - diff --git a/src/components/ui/sheet/sheet-title.svelte b/src/components/ui/sheet/sheet-title.svelte index 00ad575..71efa80 100644 --- a/src/components/ui/sheet/sheet-title.svelte +++ b/src/components/ui/sheet/sheet-title.svelte @@ -2,15 +2,15 @@ import { Dialog as SheetPrimitive } from "bits-ui"; import { cn } from "$lib/components/utils.js"; - type $$Props = SheetPrimitive.TitleProps; - - let className: $$Props["class"] = undefined; - export { className as class }; + let { + ref = $bindable(null), + class: className, + ...restProps + }: SheetPrimitive.TitleProps = $props(); - - + {...restProps} +/> diff --git a/src/pages/events/[slug].astro b/src/pages/events/[slug].astro index f3f54df..914cc20 100644 --- a/src/pages/events/[slug].astro +++ b/src/pages/events/[slug].astro @@ -9,9 +9,13 @@ import TeamList from "@components/event/TeamList.svelte"; export const getStaticPaths = createGetStaticPaths(async () => { const events = await Promise.all( (await getCollection("events")).map(async (event) => ({ - event: (await fetch(import.meta.env.PUBLIC_API_SERVER + "/events/" + event.data.eventId).then((value) => value.json())) as ExtendedEvent, + event: (await fetch( + import.meta.env.PUBLIC_API_SERVER + + "/events/" + + event.data.eventId, + ).then((value) => value.json())) as ExtendedEvent, page: event, - })) + })), ); return events.map((event) => ({ @@ -25,7 +29,10 @@ export const getStaticPaths = createGetStaticPaths(async () => { })); }); -const { event, page } = Astro.props as { event: ExtendedEvent; page: CollectionEntry<"events"> }; +const { event, page } = Astro.props as { + event: ExtendedEvent; + page: CollectionEntry<"events">; +}; const { Content } = await page.render(); --- @@ -35,19 +42,26 @@ const { Content } = await page.render();

{event.event.name}

{ - new Date(event.event.start).toLocaleDateString(astroI18n.locale, { - year: "numeric", - month: "numeric", - day: "numeric", - }) + new Date(event.event.start).toLocaleDateString( + astroI18n.locale, + { + year: "numeric", + month: "numeric", + day: "numeric", + }, + ) } { - new Date(event.event.start).toDateString() !== new Date(event.event.end).toDateString() - ? ` - ${new Date(event.event.end).toLocaleDateString(astroI18n.locale, { - year: "numeric", - month: "numeric", - day: "numeric", - })}` + new Date(event.event.start).toDateString() !== + new Date(event.event.end).toDateString() + ? ` - ${new Date(event.event.end).toLocaleDateString( + astroI18n.locale, + { + year: "numeric", + month: "numeric", + day: "numeric", + }, + )}` : "" }

@@ -60,7 +74,11 @@ const { Content } = await page.render(); page.data.viewConfig && (

Kampfplan

- +
) }