create rounds

src/lib/components/rounds/create-round.svelte

@@ -1,41 +1,61 @@
 <script lang="ts">
-	import { superForm, type Infer, type SuperValidated } from 'sveltekit-superforms';
-	import { FormControl } from '../ui/form';
-	import FormDescription from '../ui/form/form-description.svelte';
-	import FormFieldErrors from '../ui/form/form-field-errors.svelte';
-	import FormField from '../ui/form/form-field.svelte';
-	import FormLabel from '../ui/form/form-label.svelte';
-	import { formSchema, type FormSchema } from './create-schema';
-	import { zodClient } from 'sveltekit-superforms/adapters';
-	import RadioGroup from '../ui/radio-group/radio-group.svelte';
-	import RadioGroupItem from '../ui/radio-group/radio-group-item.svelte';
+	import { FormControl } from '$ui/form';
+	import FormDescription from '$ui/form/form-description.svelte';
+	import FormFieldErrors from '$ui/form/form-field-errors.svelte';
+	import FormField from '$ui/form/form-field.svelte';
+	import FormLabel from '$ui/form/form-label.svelte';
+	import RadioGroup from '$ui/radio-group/radio-group.svelte';
+	import RadioGroupItem from '$ui/radio-group/radio-group-item.svelte';
 	import { SchedulingMode } from '@/types';
+	import { cn } from '@/lib/utils';
+	import Label from '$ui/label/label.svelte';
+	import Card from '$ui/card/card.svelte';
+	import CardContent from '$ui/card/card-content.svelte';
+	import CardHeader from '$ui/card/card-header.svelte';
+	import { _ } from 'svelte-i18n';
+	import Button from '$ui/button/button.svelte';
+	import { ArrowRightIcon } from 'lucide-svelte';
 
-	let { data }: { data: { form: SuperValidated<Infer<FormSchema>> } } = $props();
+	let { competitionId }: { competitionId: number } = $props();
 
-	const form = superForm(data.form, {
-		validators: zodClient(formSchema)
-	});
+	let schedulingMode: SchedulingMode = $state(SchedulingMode.single);
 
-	const { form: formData, enhance } = form;
+	async function submit() {
+		const response = await fetch(`/api/competitions/${competitionId}`, {
+			method: 'POST',
+			credentials: 'include',
+			body: JSON.stringify({ scheduling_mode: schedulingMode })
+		});
+	}
 </script>
 
-<form method="post" use:enhance>
-	<FormField {form} name="scheduling_mode">
-		<RadioGroup required bind:value={$formData.scheduling_mode} name="scheduling_mode">
-			{#each Object.values(SchedulingMode) as mode}
-				<div class="flex items-center gap-4">
-					<FormControl>
-						{#snippet children({ props })}
-							<RadioGroupItem value={mode} {...props} />
-							<FormLabel>{mode}</FormLabel>
-						{/snippet}
-					</FormControl>
-				</div>
-			{/each}
-		</RadioGroup>
-
-		<FormDescription />
-		<FormFieldErrors />
-	</FormField>
-</form>
+<div class="flex flex-col gap-4">
+	<RadioGroup
+		required
+		bind:value={() => schedulingMode, (t: SchedulingMode) => {}}
+		name="scheduling_mode"
+	>
+		{#each Object.values(SchedulingMode) as mode}
+			<button
+				class={cn(
+					'flex h-full w-full items-center gap-4 rounded-xl border',
+					schedulingMode === mode && ' border-green-500'
+				)}
+				onclick={() => (schedulingMode = mode)}
+			>
+				<Card class="w-full">
+					<CardHeader class="flex justify-between">
+						<Label class="text-start">{$_(mode)}</Label>
+					</CardHeader>
+					<CardContent>
+						<RadioGroupItem hidden value={mode} />
+						<Label class="text-start">{$_(`${mode}.description`)}</Label>
+					</CardContent>
+				</Card>
+			</button>
+		{/each}
+	</RadioGroup>
+	<div class="flex w-full justify-end">
+		<Button onclick={submit}>Add Round<ArrowRightIcon /></Button>
+	</div>
+</div>

src/lib/components/rounds/rounds.svelte

@@ -4,7 +4,4 @@
 	let { rounds, createForm } = $props();
 </script>
 
-{JSON.stringify(rounds)}
-<div></div>
-
 <CreateRound data={{ form: createForm }} />

src/lib/i18n/locales/en.json

@@ -0,0 +1,12 @@
+{
+	"single": "Single",
+	"single.description": "In a single elimination format, a participant is eliminated after one loss. The last undefeated player is the winner.",
+	"double": "Double",
+	"double.description": "In a double elimination format, a participant must lose twice before being eliminated. It includes a winners bracket and a losers bracket.",
+	"swiss": "Swiss",
+	"swiss.description": "The Swiss system pairs players with similar win records over a fixed number of rounds. No one is eliminated, and standings are based on overall performance.",
+	"round_robin": "Round Robin",
+	"round_robin.description": "In a round robin format, each participant plays against every other participant once. Rankings are determined by total wins or points.",
+	"double_round_robin": "Double Round Robin",
+	"double_round_robin.description": "A double round robin has each participant play every other twice—once at 'home' and once 'away'. It provides a balanced and fair comparison across all competitors."
+}

src/lib/i18n/locales/fr.json

@@ -0,0 +1 @@
+{}

src/routes/api/competitions/[id]/+server.ts

@@ -0,0 +1,3 @@
+import type { RequestHandler } from '../../../competitions/[id]/$types';
+
+export const POST: RequestHandler = () => {};

src/types.ts

@@ -14,7 +14,7 @@ export interface NavItem {
 }
 
 export enum SchedulingMode {
-	single = 'signle',
+	single = 'single',
 	double = 'double',
 	swiss = 'swiss',
 	round_robin = 'round_robin',

svelte.config.js

@@ -9,7 +9,8 @@ const config = {
 	kit: {
 		adapter: adapter(),
 		alias: {
-			'@/*': './src/*'
+			'@/*': './src/*',
+			'$ui/*': './src/lib/components/ui/*'
 		}
 	}
 };