fix: refactored the codebase

2026-10-17 02:23:49 +00:00 · 2026-08-20 23:00:47 +02:00
parent 6f47ed0674
commit a77f74911d
64 changed files with 2864 additions and 1739 deletions
@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import { useForm } from '@inertiajs/vue3';
+import { watch } from 'vue';
+
+import { store as storeVote } from '@/routes/room/vote';
+import type { RoomVoteDeckProps } from '@/types/room';
+
+const props = defineProps<RoomVoteDeckProps>();
+
+const voteForm = useForm({
+    value: props.currentVote ?? '',
+});
+
+watch(
+    () => props.currentVote,
+    (value) => {
+        if (!voteForm.processing) {
+            voteForm.value = value ?? '';
+        }
+    },
+);
+
+function submitVote(value: string): void {
+    if (props.revealed || voteForm.processing) {
+        return;
+    }
+
+    voteForm.value = value;
+    voteForm.submit(storeVote(props.roomId), {
+        preserveScroll: true,
+        onError: () => {
+            voteForm.value = props.currentVote ?? '';
+        },
+    });
+}
+</script>
+
+<template>
+    <section class="mx-auto mt-6 max-w-4xl text-center">
+        <div class="mb-3 flex items-center justify-center gap-3">
+            <span class="h-px w-10 bg-white/10"></span>
+            <h2
+                class="text-sm font-semibold tracking-[0.16em] text-slate-300 uppercase"
+            >
+                {{ revealed ? 'Runde beendet' : 'Wähle deine Karte' }}
+            </h2>
+            <span class="h-px w-10 bg-white/10"></span>
+        </div>
+
+        <div
+            v-if="!revealed"
+            class="flex flex-wrap justify-center gap-2.5 sm:gap-3"
+        >
+            <button
+                v-for="card in cards"
+                :key="card.key"
+                type="button"
+                class="deck-card"
+                :class="{ 'is-selected': voteForm.value === card.key }"
+                :disabled="voteForm.processing"
+                :aria-pressed="voteForm.value === card.key"
+                :aria-label="`Karte ${card.label} wählen`"
+                @click="submitVote(card.key)"
+            >
+                <span>{{ card.label }}</span>
+            </button>
+        </div>
+
+        <p
+            v-if="voteForm.errors.value"
+            class="mt-3 text-sm text-rose-300"
+            role="alert"
+        >
+            {{ voteForm.errors.value }}
+        </p>
+    </section>
+</template>
+
+<style scoped>
+.deck-card {
+    display: grid;
+    width: 3.75rem;
+    aspect-ratio: 3 / 4;
+    place-items: center;
+    border: 2px solid rgb(255 255 255 / 15%);
+    border-radius: 0.75rem;
+    background: #f8fafc;
+    color: #0f172a;
+    box-shadow: 0 0.3rem 0.7rem rgb(0 0 0 / 18%);
+    transition:
+        transform 160ms ease,
+        border-color 160ms ease,
+        background 160ms ease,
+        box-shadow 160ms ease;
+}
+
+.deck-card span {
+    font-size: 1.2rem;
+    font-weight: 800;
+}
+
+.deck-card:hover:not(:disabled) {
+    transform: translateY(-0.35rem);
+    border-color: rgb(103 232 249 / 80%);
+}
+
+.deck-card.is-selected {
+    transform: translateY(-0.5rem);
+    border-color: #fcd34d;
+    background: #fcd34d;
+    box-shadow: 0 0.35rem 0.8rem rgb(0 0 0 / 20%);
+}
+
+.deck-card:disabled {
+    cursor: wait;
+    opacity: 0.72;
+}
+
+@media (max-width: 640px) {
+    .deck-card {
+        width: 3.3rem;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .deck-card {
+        transition: none;
+    }
+}
+</style>