build the backend structure and the fe for the Game

2026-10-15 21:16: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,69 @@
+<script setup lang="ts">
+import { code} from '@/routes/room';
+import { useForm } from '@inertiajs/vue3';
+
+const props = defineProps <{
+    join_code?: string,
+}>()
+
+const form = useForm({
+    player_name: '',
+    join_code: props.join_code ?? '',
+});
+
+
+function submit(): void {
+    form.submit(code());
+}
+
+</script>
+
+<template>
+    <main>
+        <div class="flex flex-col gap-6 justify-start items-center min-h-screen">
+
+            <h1 class="text-4xl font-extrabold mt-10"> Tritt einer Runde bei </h1>
+
+            <div class="p-6 flex justify-center items-center flex-col gap-8">
+
+                <form class="space-y-5" @submit.prevent="submit">
+                    <div>
+                        <label for="player_name" class="mb-1 block font-medium">
+                            Player Name
+                        </label>
+
+                        <input id="title" v-model="form.player_name" type="text" maxlength="100"
+                            class="w-full rounded border p-2" placeholder="Max Mustermann" />
+
+                        <p v-if="form.errors.player_name" class="mt-1 text-sm text-red-600">
+
+                            {{ form.errors.player_name }}
+                        </p>
+
+                    </div>
+
+                    <div>
+                        <label for="join_code" class="mb-1 block font-medium">
+                            Raum Code
+                        </label>
+
+                        <input id="title" v-model="form.join_code" type="text" maxlength="100"
+                            class="w-full rounded border p-2" />
+
+                        <p v-if="form.errors.join_code" class="mt-1 text-sm text-red-600">
+
+                            {{ form.errors.join_code }}
+                        </p>
+
+                    </div>
+                    <button type="submit" :disabled="form.processing"
+                        class="w-full rounded bg-blue-600 px-4 py-2 text-white disabled:opacity-50">
+                        {{ form.processing ? 'Raum wird beigetreten' : 'Raum beitreten' }}
+
+                    </button>
+                </form>
+            </div>
+        </div>
+
+    </main>
+</template>