scrum-poker-internal/resources/js/components/rooms/RoomVoteDeck.vue

<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>