mirror of
https://github.com/ericasch6/scrum-poker-internal.git
synced 2026-10-13 20:12:10 +00:00
fix: refactored the codebase
This commit is contained in:
@@ -0,0 +1,40 @@
|
||||
<script setup lang="ts">
|
||||
import { Link } from '@inertiajs/vue3';
|
||||
import { DoorOpen } from '@lucide/vue';
|
||||
|
||||
import DashboardRoomCard from '@/components/dashboard/DashboardRoomCard.vue';
|
||||
import { show } from '@/routes/room';
|
||||
import type { FavoriteRoomListProps } from '@/types/dashboard';
|
||||
|
||||
defineProps<FavoriteRoomListProps>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="flex flex-col gap-6">
|
||||
<div>
|
||||
<h2 class="text-2xl font-bold tracking-tight">Meine Favoriten</h2>
|
||||
<p class="mt-1 text-sm text-muted-foreground">
|
||||
Deine favorisierten Scrum-Poker-Räume auf einen Blick.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
||||
<DashboardRoomCard
|
||||
v-for="room in favoriteRooms"
|
||||
:key="room.id"
|
||||
:room="room"
|
||||
:show-actions="!room.closed_at"
|
||||
>
|
||||
<template #actions>
|
||||
<Link
|
||||
:href="show(room.id)"
|
||||
class="inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-semibold transition hover:bg-blue-500/80"
|
||||
>
|
||||
<DoorOpen class="size-4" />
|
||||
Raum beitreten
|
||||
</Link>
|
||||
</template>
|
||||
</DashboardRoomCard>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@@ -0,0 +1,168 @@
|
||||
<script setup lang="ts">
|
||||
import { Link, useForm } from '@inertiajs/vue3';
|
||||
import { DoorOpen, Plus, Trash2 } from '@lucide/vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
import DashboardRoomCard from '@/components/dashboard/DashboardRoomCard.vue';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import { create, destroy, reopen, show } from '@/routes/room';
|
||||
import type { DashboardRoom, OwnedRoomListProps } from '@/types/dashboard';
|
||||
|
||||
defineProps<OwnedRoomListProps>();
|
||||
|
||||
const selectedRoom = ref<DashboardRoom | null>(null);
|
||||
const deleteForm = useForm({});
|
||||
|
||||
function setDeleteDialogOpen(open: boolean): void {
|
||||
if (!open && !deleteForm.processing) {
|
||||
selectedRoom.value = null;
|
||||
}
|
||||
}
|
||||
|
||||
function deleteRoom(): void {
|
||||
if (selectedRoom.value === null || deleteForm.processing) {
|
||||
return;
|
||||
}
|
||||
|
||||
deleteForm.delete(destroy(selectedRoom.value.id).url, {
|
||||
preserveScroll: true,
|
||||
onSuccess: () => {
|
||||
selectedRoom.value = null;
|
||||
},
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="flex flex-col gap-6">
|
||||
<div
|
||||
class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between"
|
||||
>
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold tracking-tight">Meine Räume</h1>
|
||||
<p class="mt-1 text-sm text-muted-foreground">
|
||||
Deine erstellten Scrum-Poker-Räume auf einen Blick.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Link
|
||||
:href="create()"
|
||||
class="inline-flex w-fit items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground transition hover:bg-primary/90"
|
||||
>
|
||||
<Plus class="size-4" />
|
||||
Raum erstellen
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="rooms.length > 0"
|
||||
class="grid gap-4 md:grid-cols-2 xl:grid-cols-3"
|
||||
>
|
||||
<DashboardRoomCard
|
||||
v-for="room in rooms"
|
||||
:key="room.id"
|
||||
:room="room"
|
||||
show-actions
|
||||
>
|
||||
<template #actions>
|
||||
<Link
|
||||
v-if="!room.closed_at"
|
||||
:href="show(room.id)"
|
||||
class="inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-semibold transition hover:bg-blue-500/80"
|
||||
>
|
||||
<DoorOpen class="size-4" />
|
||||
Raum beitreten
|
||||
</Link>
|
||||
<Link
|
||||
v-else
|
||||
:href="reopen(room.id)"
|
||||
method="post"
|
||||
as="button"
|
||||
class="inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-semibold text-primary-foreground transition hover:bg-primary/90"
|
||||
>
|
||||
<DoorOpen class="size-4" />
|
||||
Raum öffnen
|
||||
</Link>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-semibold text-rose-300 transition hover:bg-rose-500/80"
|
||||
@click="selectedRoom = room"
|
||||
>
|
||||
<Trash2 class="size-4" />
|
||||
Raum löschen
|
||||
</button>
|
||||
</template>
|
||||
</DashboardRoomCard>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="grid min-h-72 place-items-center rounded-md border border-dashed border-sidebar-border p-8 text-center"
|
||||
>
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold">Noch keine eigenen Räume</h2>
|
||||
<p class="mt-2 max-w-md text-sm text-muted-foreground">
|
||||
Erstelle deinen ersten Raum. Er wird automatisch in diesem
|
||||
Dashboard gespeichert.
|
||||
</p>
|
||||
<Link
|
||||
:href="create()"
|
||||
class="mt-5 inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground"
|
||||
>
|
||||
<Plus class="size-4" />
|
||||
Ersten Raum erstellen
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Dialog
|
||||
:open="selectedRoom !== null"
|
||||
@update:open="setDeleteDialogOpen"
|
||||
>
|
||||
<DialogContent
|
||||
class="border-slate-700 bg-slate-800 text-slate-100 sm:max-w-md"
|
||||
>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Raum wirklich löschen?</DialogTitle>
|
||||
<DialogDescription class="text-slate-300">
|
||||
„{{ selectedRoom?.title ?? 'Scrum Poker' }}“ wird aus
|
||||
deinem Dashboard entfernt. Alle Spieler, die den Raum
|
||||
gerade geöffnet haben, werden automatisch
|
||||
hinausgeleitet.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<DialogFooter class="gap-6 space-x-4 sm:gap-0">
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-md border border-slate-600 px-4 py-2 text-sm font-semibold text-slate-200 transition hover:bg-slate-700"
|
||||
:disabled="deleteForm.processing"
|
||||
@click="selectedRoom = null"
|
||||
>
|
||||
Abbrechen
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-md bg-rose-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-rose-500 disabled:opacity-50"
|
||||
:disabled="deleteForm.processing"
|
||||
@click="deleteRoom"
|
||||
>
|
||||
{{
|
||||
deleteForm.processing
|
||||
? 'Wird gelöscht …'
|
||||
: 'Raum löschen'
|
||||
}}
|
||||
</button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</section>
|
||||
</template>
|
||||
@@ -0,0 +1,64 @@
|
||||
<script setup lang="ts">
|
||||
import { CalendarClock, Users } from '@lucide/vue';
|
||||
|
||||
import type { DashboardRoomCardProps } from '@/types/dashboard';
|
||||
|
||||
withDefaults(defineProps<DashboardRoomCardProps>(), {
|
||||
showActions: false,
|
||||
});
|
||||
|
||||
const dateFormatter = new Intl.DateTimeFormat('de-DE', {
|
||||
dateStyle: 'medium',
|
||||
timeStyle: 'short',
|
||||
});
|
||||
|
||||
function formatDate(value: string | null): string {
|
||||
return value ? dateFormatter.format(new Date(value)) : 'Keine Aktivität';
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<article
|
||||
class="flex flex-col rounded-md border border-slate-700 bg-slate-800 p-5 text-slate-100"
|
||||
>
|
||||
<div class="flex items-start justify-between gap-4">
|
||||
<div class="min-w-0">
|
||||
<h2 class="text-lg font-semibold break-words">
|
||||
{{ room.title ?? 'Scrum Poker' }}
|
||||
</h2>
|
||||
<p
|
||||
class="mt-1 font-mono text-sm tracking-[0.18em] text-muted-foreground"
|
||||
>
|
||||
{{ room.join_code }}
|
||||
</p>
|
||||
</div>
|
||||
<span
|
||||
class="shrink-0 text-sm font-semibold normal-case"
|
||||
:class="
|
||||
room.closed_at
|
||||
? 'text-muted-foreground'
|
||||
: 'text-emerald-600 dark:text-emerald-400'
|
||||
"
|
||||
>
|
||||
{{ room.closed_at ? 'Geschlossen' : 'Aktiv' }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="mt-5 grid grid-cols-2 gap-3 text-sm text-muted-foreground">
|
||||
<span class="inline-flex items-center gap-2">
|
||||
<Users class="size-4" />
|
||||
{{ room.players_count }} Spieler /
|
||||
{{ room.active_player_count }} aktiv
|
||||
</span>
|
||||
<span>Runde {{ room.current_round }}</span>
|
||||
<span class="col-span-2 inline-flex items-center gap-2">
|
||||
<CalendarClock class="size-4" />
|
||||
{{ formatDate(room.last_activity_at) }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div v-if="showActions" class="mt-6 flex flex-wrap items-center gap-3">
|
||||
<slot name="actions"></slot>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
@@ -0,0 +1,65 @@
|
||||
<script setup lang="ts">
|
||||
import { Link } from '@inertiajs/vue3';
|
||||
import { Check, Copy } from '@lucide/vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { favorite } from '@/routes/room';
|
||||
import type { RoomHeaderProps } from '@/types/room';
|
||||
|
||||
const props = defineProps<RoomHeaderProps>();
|
||||
|
||||
const copied = ref(false);
|
||||
|
||||
async function copyInviteLink(): Promise<void> {
|
||||
const inviteUrl = new URL('/room/join', window.location.origin);
|
||||
inviteUrl.searchParams.set('join_code', props.join_code);
|
||||
|
||||
await navigator.clipboard.writeText(inviteUrl.toString());
|
||||
copied.value = true;
|
||||
window.setTimeout(() => {
|
||||
copied.value = false;
|
||||
}, 1_800);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header
|
||||
class="mx-auto flex max-w-6xl flex-col gap-4 sm:flex-row sm:items-center sm:justify-between"
|
||||
>
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold sm:text-3xl">
|
||||
{{ title ?? 'Scrum Poker' }}
|
||||
</h1>
|
||||
|
||||
<Link
|
||||
v-if="canFavorite"
|
||||
:href="favorite(id)"
|
||||
method="post"
|
||||
as="button"
|
||||
class="mt-2 inline-flex items-center gap-2"
|
||||
>
|
||||
<span>Favorit</span>
|
||||
<span class="material-icons" aria-hidden="true">
|
||||
{{ is_favorite ? 'favorite' : 'favorite_border' }}
|
||||
</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="flex w-fit items-center gap-3 rounded-xl border border-slate-700 bg-slate-800 px-4 py-2.5 text-left transition hover:bg-slate-700"
|
||||
@click="copyInviteLink"
|
||||
>
|
||||
<span>
|
||||
<span class="block text-sm tracking-[0.18em] text-slate-400">
|
||||
Raumcode
|
||||
</span>
|
||||
<strong class="font-mono text-lg tracking-[0.2em]">
|
||||
{{ join_code }}
|
||||
</strong>
|
||||
</span>
|
||||
<Check v-if="copied" class="size-5 text-emerald-300" />
|
||||
<Copy v-else class="size-5 text-slate-300" />
|
||||
</button>
|
||||
</header>
|
||||
</template>
|
||||
@@ -0,0 +1,109 @@
|
||||
<script setup lang="ts">
|
||||
import { useForm } from '@inertiajs/vue3';
|
||||
import { Eye, RotateCcw, Trash2 } from '@lucide/vue';
|
||||
|
||||
import { nextRound, reset as resetRound, reveal } from '@/routes/room';
|
||||
import type { RoomModeratorControlsProps } from '@/types/room';
|
||||
|
||||
const props = defineProps<RoomModeratorControlsProps>();
|
||||
|
||||
const revealForm = useForm<{ room?: string }>({});
|
||||
const nextRoundForm = useForm<{ room?: string }>({});
|
||||
const resetForm = useForm<{ room?: string }>({});
|
||||
|
||||
function revealCards(): void {
|
||||
revealForm.submit(reveal(props.roomId), {
|
||||
preserveScroll: true,
|
||||
});
|
||||
}
|
||||
|
||||
function startNextRound(): void {
|
||||
nextRoundForm.submit(nextRound(props.roomId), {
|
||||
preserveScroll: true,
|
||||
});
|
||||
}
|
||||
|
||||
function resetVotes(): void {
|
||||
resetForm.submit(resetRound(props.roomId), {
|
||||
preserveScroll: true,
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="reset-controls">
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex items-center gap-2 rounded-xl border border-slate-600 bg-slate-800 px-4 py-2.5 font-semibold text-slate-200 transition hover:bg-slate-700 disabled:cursor-not-allowed disabled:opacity-40"
|
||||
:disabled="resetForm.processing || !hasVotes"
|
||||
@click="resetVotes"
|
||||
>
|
||||
<Trash2 class="size-4" />
|
||||
Votes zurücksetzen
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="moderator-controls">
|
||||
<p
|
||||
v-if="revealForm.errors.room || nextRoundForm.errors.room"
|
||||
class="max-w-64 rounded-lg bg-rose-950/90 px-3 py-2 text-right text-sm text-rose-200 shadow-lg"
|
||||
role="alert"
|
||||
>
|
||||
{{ revealForm.errors.room ?? nextRoundForm.errors.room }}
|
||||
</p>
|
||||
|
||||
<button
|
||||
v-if="!revealed"
|
||||
type="button"
|
||||
class="inline-flex items-center gap-2 rounded-xl border border-slate-300 bg-slate-100 px-5 py-2.5 font-semibold text-slate-900 transition hover:bg-white disabled:opacity-50"
|
||||
:disabled="revealForm.processing"
|
||||
@click="revealCards"
|
||||
>
|
||||
<Eye class="size-4" />
|
||||
Karten aufdecken
|
||||
</button>
|
||||
|
||||
<button
|
||||
v-else
|
||||
type="button"
|
||||
class="inline-flex items-center gap-2 rounded-xl border border-slate-300 bg-slate-100 px-5 py-2.5 font-semibold text-slate-900 transition hover:bg-white disabled:opacity-50"
|
||||
:disabled="nextRoundForm.processing"
|
||||
@click="startNextRound"
|
||||
>
|
||||
<RotateCcw class="size-4" />
|
||||
Nächste Runde
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.moderator-controls {
|
||||
position: absolute;
|
||||
right: 1.5rem;
|
||||
bottom: 1.5rem;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.reset-controls {
|
||||
position: absolute;
|
||||
bottom: 1.5rem;
|
||||
left: 1.5rem;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.moderator-controls {
|
||||
right: 1rem;
|
||||
bottom: 1rem;
|
||||
}
|
||||
|
||||
.reset-controls {
|
||||
bottom: 1rem;
|
||||
left: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,47 @@
|
||||
<script setup lang="ts">
|
||||
import { Link } from '@inertiajs/vue3';
|
||||
import { X } from '@lucide/vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { login, register } from '@/routes';
|
||||
import type { RoomRetentionNoticeProps } from '@/types/room';
|
||||
|
||||
defineProps<RoomRetentionNoticeProps>();
|
||||
|
||||
const dismissed = ref(false);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<aside
|
||||
v-if="!dismissed"
|
||||
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
|
||||
{{ notice.guest_retention_days }} Tagen Inaktivität geschlossen.
|
||||
Nach der Anmeldung bleibt er in deinem Dashboard gespeichert und
|
||||
die Frist beträgt {{ notice.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="dismissed = true"
|
||||
>
|
||||
<X class="size-4" />
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
</template>
|
||||
@@ -0,0 +1,325 @@
|
||||
<script setup lang="ts">
|
||||
import { CircleUserRound, Crown } from '@lucide/vue';
|
||||
|
||||
import type { RoomSeatProps } from '@/types/room';
|
||||
|
||||
const props = defineProps<RoomSeatProps>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
throwPaperBall: [playerId: number];
|
||||
}>();
|
||||
|
||||
function cardLabel(value: string | null): string {
|
||||
if (value === null) {
|
||||
return '–';
|
||||
}
|
||||
|
||||
return props.cards.find((card) => card.key === value)?.label ?? value;
|
||||
}
|
||||
|
||||
function isCurrentPlayer(): boolean {
|
||||
return props.player.id === props.currentPlayerId;
|
||||
}
|
||||
|
||||
function playerVote(): string | null {
|
||||
return isCurrentPlayer() ? props.currentVote : props.player.vote;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<article
|
||||
class="player-seat"
|
||||
:class="{ 'is-paper-ball-hit': isPaperBallHit }"
|
||||
:style="player.seatStyle"
|
||||
:data-player-id="player.id"
|
||||
>
|
||||
<div
|
||||
v-if="player.has_voted"
|
||||
class="seat-card"
|
||||
:aria-label="`${player.name} hat eine Karte gewählt`"
|
||||
>
|
||||
<div
|
||||
v-if="isCurrentPlayer()"
|
||||
class="own-vote-card"
|
||||
:class="{ 'is-revealed': revealed }"
|
||||
>
|
||||
{{ cardLabel(playerVote()) }}
|
||||
</div>
|
||||
|
||||
<div v-else class="flip-card" :class="{ 'is-revealed': revealed }">
|
||||
<div class="flip-card-inner">
|
||||
<div class="flip-card-face flip-card-back">
|
||||
<span>SP</span>
|
||||
</div>
|
||||
<div class="flip-card-face flip-card-front">
|
||||
{{ cardLabel(playerVote()) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="mx-auto grid size-12 place-items-center rounded-full border border-slate-600 bg-slate-800 text-slate-300 sm:size-14"
|
||||
:data-player-avatar="player.id"
|
||||
>
|
||||
<CircleUserRound
|
||||
class="size-7 sm:size-8"
|
||||
:stroke-width="1.7"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span class="sr-only">Profilbild von {{ player.name }}</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="player-details mt-2 flex flex-col items-center gap-1"
|
||||
:class="{ 'player-details-above': player.isTopSeat }"
|
||||
>
|
||||
<p
|
||||
class="player-name max-w-32 text-center text-sm leading-tight font-semibold text-slate-100"
|
||||
>
|
||||
{{ player.name }}
|
||||
</p>
|
||||
<div
|
||||
v-if="player.is_moderator || isCurrentPlayer()"
|
||||
class="flex flex-wrap items-center justify-center gap-x-2 gap-y-0.5 text-[11px]"
|
||||
>
|
||||
<span
|
||||
v-if="player.is_moderator"
|
||||
class="inline-flex items-center gap-1 text-amber-300"
|
||||
>
|
||||
<Crown class="size-3 fill-amber-300" aria-hidden="true" />
|
||||
Moderator
|
||||
</span>
|
||||
<span v-if="isCurrentPlayer()" class="text-cyan-300">Du</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
v-if="!isCurrentPlayer()"
|
||||
type="button"
|
||||
class="throw-paper-ball"
|
||||
:disabled="throwDisabled"
|
||||
:aria-label="`Papierknäuel auf ${player.name} werfen`"
|
||||
:title="`Papierknäuel auf ${player.name} werfen`"
|
||||
@click.stop="emit('throwPaperBall', player.id)"
|
||||
>
|
||||
<span class="paper-ball-mini" aria-hidden="true"></span>
|
||||
</button>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.player-seat {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
width: 8rem;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.player-name {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.player-details-above {
|
||||
transform: translateY(calc(-100% - 4.5rem));
|
||||
}
|
||||
|
||||
.throw-paper-ball {
|
||||
position: absolute;
|
||||
top: 0.65rem;
|
||||
right: 0.35rem;
|
||||
z-index: 8;
|
||||
display: grid;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
place-items: center;
|
||||
border: 1px solid #64748b;
|
||||
border-radius: 0.5rem;
|
||||
background: #334155;
|
||||
opacity: 0;
|
||||
transform: translateY(0.25rem) rotate(-8deg);
|
||||
pointer-events: none;
|
||||
transition:
|
||||
opacity 140ms ease,
|
||||
transform 140ms ease,
|
||||
background-color 140ms ease;
|
||||
}
|
||||
|
||||
.player-seat:hover .throw-paper-ball,
|
||||
.player-seat:focus-within .throw-paper-ball {
|
||||
opacity: 1;
|
||||
transform: translateY(0) rotate(-8deg);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.throw-paper-ball:hover:not(:disabled),
|
||||
.throw-paper-ball:focus-visible {
|
||||
background: #475569;
|
||||
transform: translateY(-0.1rem) rotate(4deg);
|
||||
}
|
||||
|
||||
.throw-paper-ball:focus-visible {
|
||||
outline: 2px solid #67e8f9;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.throw-paper-ball:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.paper-ball-mini {
|
||||
display: block;
|
||||
width: 0.95rem;
|
||||
height: 0.95rem;
|
||||
border: 1px solid rgb(100 116 139 / 65%);
|
||||
border-radius: 48% 42% 54% 39%;
|
||||
background:
|
||||
linear-gradient(
|
||||
35deg,
|
||||
transparent 44%,
|
||||
rgb(100 116 139 / 35%) 46% 51%,
|
||||
transparent 53%
|
||||
),
|
||||
linear-gradient(
|
||||
120deg,
|
||||
transparent 35%,
|
||||
rgb(148 163 184 / 45%) 37% 42%,
|
||||
transparent 44%
|
||||
),
|
||||
#e2e8f0;
|
||||
transform: rotate(18deg);
|
||||
}
|
||||
|
||||
.player-seat.is-paper-ball-hit [data-player-avatar] {
|
||||
animation: paper-ball-hit 380ms ease-out;
|
||||
}
|
||||
|
||||
@keyframes paper-ball-hit {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateX(0) rotate(0deg);
|
||||
}
|
||||
|
||||
28% {
|
||||
transform: translateX(-0.35rem) rotate(-7deg);
|
||||
}
|
||||
|
||||
62% {
|
||||
transform: translateX(0.25rem) rotate(5deg);
|
||||
}
|
||||
}
|
||||
|
||||
.seat-card {
|
||||
position: absolute;
|
||||
top: 1.75rem;
|
||||
left: 50%;
|
||||
width: 3.15rem;
|
||||
height: 4.35rem;
|
||||
transform: translate(-50%, -50%) translate(var(--card-x), var(--card-y));
|
||||
perspective: 800px;
|
||||
}
|
||||
|
||||
.own-vote-card,
|
||||
.flip-card-face {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 0.55rem;
|
||||
font-size: 1.15rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.own-vote-card {
|
||||
border: 2px solid #cbd5e1;
|
||||
background: #f8fafc;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.own-vote-card.is-revealed {
|
||||
border-color: rgb(252 211 77 / 90%);
|
||||
background: #fef3c7;
|
||||
}
|
||||
|
||||
.flip-card,
|
||||
.flip-card-inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.flip-card-inner {
|
||||
position: relative;
|
||||
transform-style: preserve-3d;
|
||||
transition: transform 520ms cubic-bezier(0.2, 0.75, 0.25, 1);
|
||||
}
|
||||
|
||||
.flip-card.is-revealed .flip-card-inner {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.flip-card-face {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.flip-card-back {
|
||||
border: 2px solid rgb(103 232 249 / 70%);
|
||||
background:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
transparent 42%,
|
||||
rgb(103 232 249 / 20%) 42% 48%,
|
||||
transparent 48% 92%,
|
||||
rgb(103 232 249 / 20%) 92%
|
||||
),
|
||||
#17324a;
|
||||
background-size: 1rem 1rem;
|
||||
color: rgb(207 250 254 / 78%);
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
.flip-card-front {
|
||||
transform: rotateY(180deg);
|
||||
border: 2px solid rgb(252 211 77 / 90%);
|
||||
background: #fffbeb;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.player-seat {
|
||||
width: 6.5rem;
|
||||
}
|
||||
|
||||
.player-details-above {
|
||||
transform: translateY(calc(-100% - 4rem));
|
||||
}
|
||||
|
||||
.seat-card {
|
||||
top: 1.5rem;
|
||||
width: 2.65rem;
|
||||
height: 3.65rem;
|
||||
transform: translate(-50%, -50%) translate(var(--card-x), var(--card-y))
|
||||
scale(0.86);
|
||||
}
|
||||
|
||||
.own-vote-card,
|
||||
.flip-card-face {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.flip-card-inner {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.player-seat.is-paper-ball-hit [data-player-avatar] {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,252 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
import RoomModeratorControls from '@/components/rooms/RoomModeratorControls.vue';
|
||||
import RoomSeat from '@/components/rooms/RoomSeat.vue';
|
||||
import { usePaperBallToss } from '@/composables/usePaperBallToss';
|
||||
import type {
|
||||
PositionedRoomPlayer,
|
||||
RoomTableProps,
|
||||
SeatStyle,
|
||||
} from '@/types/room';
|
||||
|
||||
const props = defineProps<RoomTableProps>();
|
||||
|
||||
const gameBoard = ref<HTMLElement | null>(null);
|
||||
const { activePaperBalls, hitPlayerIds, throwingAtPlayerId, throwPaperBall } =
|
||||
usePaperBallToss({
|
||||
roomId: () => props.room.id,
|
||||
currentPlayerId: () => props.currentPlayer.id,
|
||||
board: gameBoard,
|
||||
});
|
||||
|
||||
const positionedPlayers = computed<PositionedRoomPlayer[]>(() => {
|
||||
const currentPlayerIndex = props.room.players.findIndex(
|
||||
(player) => player.id === props.currentPlayer.id,
|
||||
);
|
||||
const orderedPlayers =
|
||||
currentPlayerIndex === -1
|
||||
? props.room.players
|
||||
: [
|
||||
...props.room.players.slice(currentPlayerIndex),
|
||||
...props.room.players.slice(0, currentPlayerIndex),
|
||||
];
|
||||
const playerCount = Math.max(orderedPlayers.length, 1);
|
||||
|
||||
return orderedPlayers.map((player, index) => {
|
||||
const angle = Math.PI / 2 + (index * Math.PI * 2) / playerCount;
|
||||
const horizontalRadius = 39;
|
||||
const verticalRadius = 40;
|
||||
const cardDistance = 96;
|
||||
|
||||
return {
|
||||
...player,
|
||||
isTopSeat: Math.sin(angle) < -0.25,
|
||||
seatStyle: {
|
||||
left: `${50 + Math.cos(angle) * horizontalRadius}%`,
|
||||
top: `${48 + Math.sin(angle) * verticalRadius}%`,
|
||||
'--card-x': `${-Math.cos(angle) * cardDistance}px`,
|
||||
'--card-y': `${-Math.sin(angle) * cardDistance}px`,
|
||||
} as SeatStyle,
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
const voteCount = computed(
|
||||
() => props.room.players.filter((player) => player.has_voted).length,
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="mt-5 w-full">
|
||||
<div ref="gameBoard" class="game-board" aria-label="Scrum-Poker-Tisch">
|
||||
<div class="poker-table" aria-hidden="true">
|
||||
<div class="table-highlight"></div>
|
||||
<div class="table-center">
|
||||
<span
|
||||
v-if="!room.revealed"
|
||||
class="text-sm font-medium text-emerald-50/75"
|
||||
>
|
||||
{{ voteCount }} von {{ room.players.length }} haben
|
||||
gewählt
|
||||
</span>
|
||||
<div v-else class="grid grid-cols-2 gap-8 text-emerald-50">
|
||||
<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>
|
||||
|
||||
<div
|
||||
v-for="paperBall in activePaperBalls"
|
||||
:key="paperBall.id"
|
||||
class="paper-ball-flight"
|
||||
:style="paperBall.style"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<span class="paper-ball"></span>
|
||||
</div>
|
||||
|
||||
<RoomSeat
|
||||
v-for="player in positionedPlayers"
|
||||
:key="player.id"
|
||||
:player="player"
|
||||
:current-player-id="currentPlayer.id"
|
||||
:current-vote="currentPlayer.current_vote"
|
||||
:cards="room.deck.cards"
|
||||
:revealed="room.revealed"
|
||||
:is-paper-ball-hit="hitPlayerIds.includes(player.id)"
|
||||
:throw-disabled="throwingAtPlayerId !== null"
|
||||
@throw-paper-ball="throwPaperBall"
|
||||
/>
|
||||
|
||||
<RoomModeratorControls
|
||||
v-if="currentPlayer.is_moderator"
|
||||
:room-id="room.id"
|
||||
:revealed="room.revealed"
|
||||
:has-votes="voteCount > 0"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.game-board {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: max(34rem, calc(100svh - 11rem));
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
.poker-table {
|
||||
position: absolute;
|
||||
inset: 20% 15% 21%;
|
||||
overflow: hidden;
|
||||
border: 0.65rem solid #513b2d;
|
||||
border-radius: 50%;
|
||||
background:
|
||||
radial-gradient(
|
||||
circle at 50% 42%,
|
||||
rgb(16 126 91 / 38%),
|
||||
transparent 45%
|
||||
),
|
||||
linear-gradient(145deg, #136c54, #074c3d);
|
||||
box-shadow:
|
||||
inset 0 0 0 0.2rem rgb(255 255 255 / 8%),
|
||||
inset 0 -1.5rem 3rem rgb(0 0 0 / 22%),
|
||||
0 1.5rem 3rem rgb(0 0 0 / 35%);
|
||||
}
|
||||
|
||||
.table-highlight {
|
||||
position: absolute;
|
||||
inset: 6%;
|
||||
border: 1px solid rgb(255 255 255 / 8%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.table-center {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.paper-ball-flight {
|
||||
position: absolute;
|
||||
z-index: 40;
|
||||
width: 1.65rem;
|
||||
height: 1.65rem;
|
||||
pointer-events: none;
|
||||
will-change: transform;
|
||||
animation: paper-ball-flight 780ms linear forwards;
|
||||
}
|
||||
|
||||
.paper-ball {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid rgb(100 116 139 / 65%);
|
||||
border-radius: 48% 42% 54% 39%;
|
||||
background:
|
||||
linear-gradient(
|
||||
35deg,
|
||||
transparent 44%,
|
||||
rgb(100 116 139 / 35%) 46% 51%,
|
||||
transparent 53%
|
||||
),
|
||||
linear-gradient(
|
||||
120deg,
|
||||
transparent 35%,
|
||||
rgb(148 163 184 / 45%) 37% 42%,
|
||||
transparent 44%
|
||||
),
|
||||
#e2e8f0;
|
||||
}
|
||||
|
||||
@keyframes paper-ball-flight {
|
||||
0% {
|
||||
transform: translate(-50%, -50%) translate(0, 0) rotate(0deg)
|
||||
scale(0.72);
|
||||
}
|
||||
|
||||
25% {
|
||||
transform: translate(-50%, -50%)
|
||||
translate(var(--travel-quarter-x), var(--travel-quarter-y))
|
||||
rotate(195deg) scale(0.92);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate(-50%, -50%)
|
||||
translate(var(--travel-mid-x), var(--travel-mid-y)) rotate(390deg)
|
||||
scale(1.08);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translate(-50%, -50%)
|
||||
translate(
|
||||
var(--travel-three-quarter-x),
|
||||
var(--travel-three-quarter-y)
|
||||
)
|
||||
rotate(585deg) scale(1);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(-50%, -50%)
|
||||
translate(var(--travel-x), var(--travel-y)) rotate(780deg)
|
||||
scale(0.82);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.game-board {
|
||||
min-height: max(28rem, calc(100svh - 10rem));
|
||||
}
|
||||
|
||||
.poker-table {
|
||||
inset: 24% 17% 23%;
|
||||
border-width: 0.45rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.paper-ball-flight {
|
||||
animation-duration: 1ms;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user