feat: some fixes to the ui, imlemented user and guest user, ans used the dahboard

resources/js/pages/rooms/Show.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Head, useForm, usePoll } from '@inertiajs/vue3';
+import { Head, Link, useForm, usePage, usePoll } from '@inertiajs/vue3';
 import {
     Check,
     CircleUserRound,
@@ -8,9 +8,11 @@ import {
     Eye,
     RotateCcw,
     Trash2,
+    X,
 } from '@lucide/vue';
 import { computed, ref, watch } from 'vue';
 
+import { login, register } from '@/routes';
 import { nextRound, reset as resetRound, reveal } from '@/routes/room';
 import { store as storeVote } from '@/routes/room/vote';
 import type { PokerCard, RoomPlayer, SeatStyle } from '@/types/room';
@@ -23,6 +25,10 @@ const props = defineProps<{
         current_round: number;
         revealed: boolean;
         state_version: number;
+        statistics: {
+            average: string | null;
+            median: string | null;
+        } | null;
         deck: {
             name: string;
             cards: PokerCard[];
@@ -37,6 +43,15 @@ const props = defineProps<{
     };
 }>();
 
+const page = usePage();
+const roomNotice = computed(
+    () =>
+        page.props.roomNotice as {
+            guest_retention_days: number;
+            account_retention_days: number;
+        } | null,
+);
+
 const voteForm = useForm({
     value: props.currentPlayer.current_vote ?? '',
 });
@@ -44,6 +59,7 @@ const revealForm = useForm<{ room?: string }>({});
 const nextRoundForm = useForm<{ room?: string }>({});
 const resetForm = useForm<{ room?: string }>({});
 const copied = ref(false);
+const roomNoticeDismissed = ref(false);
 
 usePoll(2_000, {
     only: ['room', 'currentPlayer'],
@@ -168,6 +184,44 @@ function playerVote(player: RoomPlayer): string | null {
     <main
         class="-m-6 min-h-[calc(100svh-4rem)] bg-slate-900 px-3 py-6 text-white sm:px-6 lg:px-10"
     >
+        <aside
+            v-if="roomNotice && !roomNoticeDismissed"
+            class="mx-auto mb-5 flex max-w-6xl flex-col gap-4 rounded-lg border border-dashed border-slate-500 bg-slate-800 p-4 text-sm text-slate-100 sm:flex-row sm:items-center"
+            role="status"
+        >
+            <div class="min-w-0 flex-1">
+                <p class="font-semibold">
+                    Speichere diesen Raum in deinem Konto
+                </p>
+                <p class="mt-1 text-slate-300">
+                    Als Gast wird der Raum nach
+                    {{ roomNotice.guest_retention_days }} Tagen Inaktivität
+                    geschlossen. Nach der Anmeldung bleibt er in deinem
+                    Dashboard gespeichert und die Frist beträgt
+                    {{ roomNotice.account_retention_days }} Tage.
+                </p>
+            </div>
+
+            <div
+                class="flex shrink-0 items-center gap-3 font-semibold sm:ml-auto"
+            >
+                <Link :href="login()" class="underline underline-offset-4">
+                    Anmelden
+                </Link>
+                <Link :href="register()" class="underline underline-offset-4">
+                    Registrieren
+                </Link>
+                <button
+                    type="button"
+                    class="ml-1 grid size-8 place-items-center rounded-md text-slate-300 transition hover:bg-slate-700 hover:text-white"
+                    aria-label="Hinweis schließen"
+                    @click="roomNoticeDismissed = true"
+                >
+                    <X class="size-4" />
+                </button>
+            </div>
+        </aside>
+
         <header
             class="mx-auto flex max-w-6xl flex-col gap-4 sm:flex-row sm:items-center sm:justify-between"
         >
@@ -213,12 +267,27 @@ function playerVote(player: RoomPlayer): string | null {
                             }}
                             von {{ room.players.length }} haben gewählt
                         </span>
-                        <span
+                        <div
                             v-else
-                            class="text-sm font-semibold text-amber-200"
+                            class="grid grid-cols-2 gap-8 text-emerald-50"
                         >
-                            Karten aufgedeckt
-                        </span>
+                            <div class="flex flex-col gap-1">
+                                <span class="text-xs text-emerald-100/65">
+                                    Durchschnitt
+                                </span>
+                                <strong class="text-xl">
+                                    {{ room.statistics?.average ?? '–' }}
+                                </strong>
+                            </div>
+                            <div class="flex flex-col gap-1">
+                                <span class="text-xs text-emerald-100/65">
+                                    Median
+                                </span>
+                                <strong class="text-xl">
+                                    {{ room.statistics?.median ?? '–' }}
+                                </strong>
+                            </div>
+                        </div>
                     </div>
                 </div>