build the backend structure and the fe for the Game

2026-10-13 15:52:09 +00:00 · 2026-08-15 22:37:53 +02:00
parent c5fd3f9d79
commit 4340ca9e12
37 changed files with 1611 additions and 56 deletions
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { store } from '@/routes/room';
+import { Head, useForm } from '@inertiajs/vue3';
+
+
+type Deck = {
+    id: number,
+    name: string,
+    cards: Array<{
+        key: string,
+        label: string,
+    }>;
+};
+
+const props = defineProps<{
+    decks: Deck[];
+    defaultPlayerName: string | null;
+}>()
+
+const form = useForm({
+    title: '',
+    player_name: props.defaultPlayerName ?? '',
+    deck_id: props.decks[0]?.id ?? null,
+});
+
+function submit(): void {
+    form.submit(store());
+}
+</script>
+
+<template>
+
+    <Head title="Raum erstellen" />
+    <main class="mx-auto max-w-lg p-6">
+        <h1 class="mb-6 text-2xl font-bold">
+            Scrum Poker Raum erstellen
+        </h1>
+        <form class="space-y-5" @submit.prevent="submit">
+            <div>
+                <label for="player_name" class="mb-1 block font-medium">
+                    Dein Name
+                </label>
+
+                <input id="player_name" v-model="form.player_name" type="text" maxlength="50" required
+                    class="w-full rounded border p-2" placeholder="Eric">
+
+                <p v-if="form.errors.player_name" class="mt-1 text-sm text-red-600">
+
+                    {{ form.errors.player_name }}
+                </p>
+
+            </div>
+
+            <div>
+                <label for="title" class="mb-1 block font-medium">
+                    Raumtitle
+                </label>
+
+                <input id="title" v-model="form.title" type="text" maxlength="100" class="w-full rounded border p-2"
+                    placeholder="Sprint Planning" />
+
+                <p v-if="form.errors.title" class="mt-1 text-sm text-red-600">
+
+                    {{ form.errors.title }}
+                </p>
+
+            </div>
+
+            <div>
+                <label for="deck_id" class="mb-1 block font-medium">
+                    Kartendeck
+                </label>
+
+                <select id="deck_id" v-model.number="form.deck_id" required class="w-full rounded border p-2">
+                    <option v-for="deck in decks" :key="deck.id" :value="deck.id">
+                        {{ deck.name }}
+
+                    </option>
+
+                </select>
+
+                <p v-if="form.errors.deck_id" class="mt-1 text-sm text-red-600">
+
+                    {{ form.errors.deck_id }}
+                </p>
+
+            </div>
+
+            <div v-if="form.deck_id" class="rounded border p-3">
+                <p class="mb-2 text-sm font-medium">
+                    Karten:
+                </p>
+
+                <div class="flex flex-wrap gap-2">
+                    <template v-for="deck in decks" :key="deck.id">
+                        <span v-for="card in deck.id === form.deck_id ? deck.cards : []" :key="card.key"
+                            class="rounded border px-3 py-1">
+                            {{ card.label }}
+                        </span>
+
+                    </template>
+
+                </div>
+
+            </div>
+
+            <button type="submit" :disabled="form.processing || decks.length === 0"
+                class="w-full rounded bg-blue-600 px-4 py-2 text-white disabled:opacity-50">
+                {{ form.processing ? 'Raum wird erstellt' : 'Raum erstellen' }}
+
+            </button>
+
+        </form>
+
+        <p v-if="decks.length === 0" class="mt-4 text-red-600">
+            Es wurden noch keine Kartendecks angelegt.
+        </p>
+    </main>
+</template>