build the backend structure and the fe for the Game

This commit is contained in:
2026-08-15 22:37:53 +02:00
parent c5fd3f9d79
commit 4340ca9e12
37 changed files with 1611 additions and 56 deletions
+119
View File
@@ -0,0 +1,119 @@
<script setup lang="ts">
import { store } from '@/routes/room';
import { Head, useForm } from '@inertiajs/vue3';
type Deck = {
id: number,
name: string,
cards: Array<{
key: string,
label: string,
}>;
};
const props = defineProps<{
decks: Deck[];
defaultPlayerName: string | null;
}>()
const form = useForm({
title: '',
player_name: props.defaultPlayerName ?? '',
deck_id: props.decks[0]?.id ?? null,
});
function submit(): void {
form.submit(store());
}
</script>
<template>
<Head title="Raum erstellen" />
<main class="mx-auto max-w-lg p-6">
<h1 class="mb-6 text-2xl font-bold">
Scrum Poker Raum erstellen
</h1>
<form class="space-y-5" @submit.prevent="submit">
<div>
<label for="player_name" class="mb-1 block font-medium">
Dein Name
</label>
<input id="player_name" v-model="form.player_name" type="text" maxlength="50" required
class="w-full rounded border p-2" placeholder="Eric">
<p v-if="form.errors.player_name" class="mt-1 text-sm text-red-600">
{{ form.errors.player_name }}
</p>
</div>
<div>
<label for="title" class="mb-1 block font-medium">
Raumtitle
</label>
<input id="title" v-model="form.title" type="text" maxlength="100" class="w-full rounded border p-2"
placeholder="Sprint Planning" />
<p v-if="form.errors.title" class="mt-1 text-sm text-red-600">
{{ form.errors.title }}
</p>
</div>
<div>
<label for="deck_id" class="mb-1 block font-medium">
Kartendeck
</label>
<select id="deck_id" v-model.number="form.deck_id" required class="w-full rounded border p-2">
<option v-for="deck in decks" :key="deck.id" :value="deck.id">
{{ deck.name }}
</option>
</select>
<p v-if="form.errors.deck_id" class="mt-1 text-sm text-red-600">
{{ form.errors.deck_id }}
</p>
</div>
<div v-if="form.deck_id" class="rounded border p-3">
<p class="mb-2 text-sm font-medium">
Karten:
</p>
<div class="flex flex-wrap gap-2">
<template v-for="deck in decks" :key="deck.id">
<span v-for="card in deck.id === form.deck_id ? deck.cards : []" :key="card.key"
class="rounded border px-3 py-1">
{{ card.label }}
</span>
</template>
</div>
</div>
<button type="submit" :disabled="form.processing || decks.length === 0"
class="w-full rounded bg-blue-600 px-4 py-2 text-white disabled:opacity-50">
{{ form.processing ? 'Raum wird erstellt' : 'Raum erstellen' }}
</button>
</form>
<p v-if="decks.length === 0" class="mt-4 text-red-600">
Es wurden noch keine Kartendecks angelegt.
</p>
</main>
</template>
-7
View File
@@ -1,7 +0,0 @@
<script lang="ts">
</script>
<template>
<h1>Create a Room</h1>
</template>
+69
View File
@@ -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>
+663
View File
@@ -0,0 +1,663 @@
<script setup lang="ts">
import { Head, useForm, usePoll } from '@inertiajs/vue3';
import {
Check,
CircleUserRound,
Copy,
Crown,
Eye,
RotateCcw,
Trash2,
} from '@lucide/vue';
import { computed, ref, watch } from 'vue';
import type { CSSProperties } from 'vue';
import { nextRound, reset as resetRound, reveal } from '@/routes/room';
import { store as storeVote } from '@/routes/room/vote';
type PokerCard = {
key: string;
label: string;
};
type Player = {
id: number;
name: string;
is_moderator: boolean;
has_voted: boolean;
vote: string | null;
};
type SeatStyle = CSSProperties & {
'--card-x': string;
'--card-y': string;
};
const props = defineProps<{
room: {
id: string;
title: string | null;
join_code: string;
current_round: number;
revealed: boolean;
state_version: number;
deck: {
name: string;
cards: PokerCard[];
};
players: Player[];
};
currentPlayer: {
id: number;
name: string;
is_moderator: boolean;
current_vote: string | null;
};
}>();
const voteForm = useForm({
value: props.currentPlayer.current_vote ?? '',
});
const revealForm = useForm<{ room?: string }>({});
const nextRoundForm = useForm<{ room?: string }>({});
const resetForm = useForm({});
const copied = ref(false);
usePoll(2_000, {
only: ['room', 'currentPlayer'],
});
const positionedPlayers = computed(() => {
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 = 88;
return {
...player,
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,
};
});
});
watch(
() => props.currentPlayer.current_vote,
(value) => {
if (!voteForm.processing) {
voteForm.value = value ?? '';
}
},
);
function submitVote(value: string): void {
if (props.room.revealed || voteForm.processing) {
return;
}
voteForm.value = value;
voteForm.submit(storeVote(props.room.id), {
preserveScroll: true,
onError: () => {
voteForm.value = props.currentPlayer.current_vote ?? '';
},
});
}
function revealCards(): void {
revealForm.submit(reveal(props.room.id), {
preserveScroll: true,
});
}
function startNextRound(): void {
nextRoundForm.submit(nextRound(props.room.id), {
preserveScroll: true,
onSuccess: () => {
voteForm.value = '';
},
});
}
function resetVotes(): void {
resetForm.submit(resetRound(props.room.id), {
preserveScroll: true,
onSuccess: () => {
voteForm.value = '';
},
});
}
async function copyInviteLink(): Promise<void> {
const inviteUrl = new URL('/room/join', window.location.origin);
inviteUrl.searchParams.set('join_code', props.room.join_code);
await navigator.clipboard.writeText(inviteUrl.toString());
copied.value = true;
window.setTimeout(() => {
copied.value = false;
}, 1_800);
}
function cardLabel(value: string | null): string {
if (value === null) {
return '–';
}
return (
props.room.deck.cards.find((card) => card.key === value)?.label ?? value
);
}
function isCurrentPlayer(player: Player): boolean {
return player.id === props.currentPlayer.id;
}
function playerVote(player: Player): string | null {
if (isCurrentPlayer(player)) {
return props.currentPlayer.current_vote;
}
return player.vote;
}
</script>
<template>
<Head :title="room.title ?? 'Scrum Poker'" />
<main
class="-m-6 min-h-[calc(100svh-4rem)] bg-slate-900 px-3 py-6 text-white sm:px-6 lg:px-10"
>
<header
class="mx-auto flex max-w-6xl flex-col gap-4 sm:flex-row sm:items-center sm:justify-between"
>
<div>
<p
class="mb-1 text-xs font-semibold tracking-[0.22em] text-cyan-300 uppercase"
>
Runde {{ room.current_round }} · {{ room.deck.name }}
</p>
<h1 class="text-2xl font-bold tracking-tight sm:text-3xl">
{{ room.title ?? 'Scrum Poker' }}
</h1>
</div>
<button
type="button"
class="flex w-fit items-center gap-3 rounded-2xl 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-[10px] tracking-[0.18em] text-slate-400 uppercase"
>
Raumcode
</span>
<strong class="font-mono text-lg tracking-[0.2em]">
{{ room.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>
<section class="mt-5 w-full">
<div 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"
>
{{
room.players.filter(
(player) => player.has_voted,
).length
}}
von {{ room.players.length }} haben gewählt
</span>
<span
v-else
class="text-sm font-semibold text-amber-200"
>
Karten aufgedeckt
</span>
</div>
</div>
<article
v-for="player in positionedPlayers"
:key="player.id"
class="player-seat"
:style="player.seatStyle"
>
<div
v-if="player.has_voted"
class="seat-card"
:aria-label="`${player.name} hat eine Karte gewählt`"
>
<div
v-if="isCurrentPlayer(player)"
class="own-vote-card"
:class="{ 'is-revealed': room.revealed }"
>
{{ cardLabel(playerVote(player)) }}
</div>
<div
v-else
class="flip-card"
:class="{ 'is-revealed': room.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(player)) }}
</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"
>
<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="mt-2 flex flex-col items-center gap-1">
<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(player)
"
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(player)"
class="text-cyan-300"
>
Du
</span>
</div>
</div>
</article>
<div v-if="currentPlayer.is_moderator" 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 ||
!room.players.some((player) => player.has_voted)
"
@click="resetVotes"
>
<Trash2 class="size-4" />
Votes zurücksetzen
</button>
</div>
<div
v-if="currentPlayer.is_moderator"
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="!room.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>
</div>
</section>
<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"
>
{{ room.revealed ? 'Runde beendet' : 'Wähle deine Karte' }}
</h2>
<span class="h-px w-10 bg-white/10"></span>
</div>
<div
v-if="!room.revealed"
class="flex flex-wrap justify-center gap-2.5 sm:gap-3"
>
<button
v-for="card in room.deck.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>
</main>
</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;
}
.player-seat {
position: absolute;
z-index: 2;
width: 8rem;
transform: translate(-50%, -50%);
text-align: center;
}
.player-name {
overflow-wrap: anywhere;
}
.moderator-controls {
position: absolute;
right: 1.5rem;
bottom: 1.5rem;
top: auto;
left: auto;
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;
}
.seat-card {
position: absolute;
top: 50%;
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;
}
.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) {
.game-board {
min-height: max(28rem, calc(100svh - 10rem));
}
.poker-table {
inset: 24% 17% 23%;
border-width: 0.45rem;
}
.player-seat {
width: 6.5rem;
}
.moderator-controls {
right: 1rem;
bottom: 1rem;
}
.reset-controls {
bottom: 1rem;
left: 1rem;
}
.seat-card {
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;
}
.deck-card {
width: 3.3rem;
}
}
@media (prefers-reduced-motion: reduce) {
.flip-card-inner,
.deck-card {
transition: none;
}
}
</style>