fix: refactored the codebase

app/Data/Rooms/RoomPageData.php

@@ -0,0 +1,20 @@
+<?php
+
+namespace App\Data\Rooms;
+
+use App\Models\Player;
+use App\Models\Room;
+
+final readonly class RoomPageData
+{
+    /**
+     * @param  array{average: string|null, median: string|null}|null  $statistics
+     */
+    public function __construct(
+        public Room $room,
+        public Player $currentPlayer,
+        public bool $isFavorite,
+        public ?string $currentVote,
+        public ?array $statistics,
+    ) {}
+}

app/Http/Controllers/DashboardController.php

@@ -2,33 +2,32 @@
 
 namespace App\Http\Controllers;
 
-use App\Models\Room;
+use App\Http\Resources\DashboardRoomResource;
+use App\Models\User;
+use App\Services\Rooms\DashboardRoomService;
 use Illuminate\Http\Request;
 use Inertia\Inertia;
 use Inertia\Response;
 
 class DashboardController extends Controller
 {
+    public function __construct(
+        private readonly DashboardRoomService $dashboardRooms,
+    ) {}
+
     public function __invoke(Request $request): Response
     {
-        $rooms = $request->user()
+        $user = $request->user();
-            ->ownedRooms()
+
-            ->withCount('players')
+        abort_unless($user instanceof User, 403);
-            ->orderByRaw('closed_at IS NOT NULL')
+
-            ->orderByDesc('last_activity_at')
+        $rooms = $this->dashboardRooms->forUser($user);
-            ->get()
-            ->map(fn (Room $room) => [
-                'id' => $room->id,
-                'title' => $room->title,
-                'join_code' => $room->join_code,
-                'current_round' => $room->current_round,
-                'players_count' => $room->players_count,
-                'last_activity_at' => $room->last_activity_at?->toIso8601String(),
-                'closed_at' => $room->closed_at?->toIso8601String(),
-            ]);
 
         return Inertia::render('Dashboard', [
-            'rooms' => $rooms,
+            'rooms' => DashboardRoomResource::collection($rooms['owned'])
+                ->resolve($request),
+            'favoriteRooms' => DashboardRoomResource::collection($rooms['favorites'])
+                ->resolve($request),
         ]);
     }
 }

app/Http/Controllers/FavoriteRoomController.php

@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\Room;
+use App\Models\User;
+use App\Services\Rooms\FavoriteRoomService;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Http\Request;
+
+class FavoriteRoomController extends Controller
+{
+    public function __construct(
+        private readonly FavoriteRoomService $favoriteRooms,
+    ) {}
+
+    public function __invoke(Request $request, Room $room): RedirectResponse
+    {
+        abort_if($room->trashed(), 404);
+
+        $user = $request->user();
+
+        abort_unless($user instanceof User, 401);
+
+        $this->favoriteRooms->toggle($user, $room);
+
+        return back();
+    }
+}

app/Http/Controllers/RoomController.php

@@ -2,86 +2,44 @@
 
 namespace App\Http\Controllers;
 
-use App\Enums\RoomStateChange;
-use App\Events\RoomStateChanged;
 use App\Http\Requests\StoreRoomRequest;
-use App\Models\Deck;
+use App\Http\Resources\CurrentPlayerResource;
+use App\Http\Resources\DeckResource;
+use App\Http\Resources\RoomResource;
 use App\Models\Player;
 use App\Models\Room;
+use App\Services\Rooms\RoomCreationService;
+use App\Services\Rooms\RoomPageService;
 use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
-use Illuminate\Support\Facades\DB;
 use Inertia\Inertia;
 use Inertia\Response;
 
 class RoomController extends Controller
 {
+    public function __construct(
+        private readonly RoomCreationService $roomCreation,
+        private readonly RoomPageService $roomPage,
+    ) {}
+
     public function create(Request $request): Response
     {
-        $user = $request->user();
-
-        $decks = Deck::query()
-            ->where(function ($query) use ($user) {
-                $query->where('is_system', true);
-
-                if ($user !== null) {
-                    $query->orWhere('user_id', $user->id);
-                }
-            })
-            ->orderBy('name')
-            ->get([
-                'id',
-                'name',
-                'cards',
-            ]);
-
         return Inertia::render('rooms/Create', [
-            'decks' => $decks,
+            'decks' => DeckResource::collection(
-            'defaultPlayerName' => $user?->name,
+                $this->roomCreation->availableDecks($request->user()),
+            )->resolve($request),
+            'defaultPlayerName' => $request->user()?->name,
         ]);
     }
 
-    public function store(Request $request, StoreRoomRequest $roomStoreRequest): RedirectResponse
+    public function store(StoreRoomRequest $request): RedirectResponse
     {
-        $validated = $roomStoreRequest->validated();
+        /** @var array{deck_id: int, player_name: string, title?: string|null} $validated */
-        $user = $request->user();
+        $validated = $request->validated();
-
+        [$room, $player] = $this->roomCreation->create(
-        $deck = Deck::query()
-            ->whereKey($validated['deck_id'])
-            ->where(function ($query) use ($user) {
-                $query->where('is_system', true);
-
-                if ($user !== null) {
-                    $query->orWhere('user_id', $user->id);
-                }
-            })
-            ->firstOrFail();
-
-        [$room, $player] = DB::transaction(function () use (
             $validated,
-            $deck,
+            $request->user(),
-            $user,
+        );
-        ) {
-            $room = Room::create([
-                'owner_id' => $user?->id,
-                'title' => $validated['title'] ?? null,
-                'last_activity_at' => now(),
-                'deck_config' => [
-                    'id' => $deck->id,
-                    'name' => $deck->name,
-                    'cards' => $deck->cards,
-                ],
-            ]);
-
-            $player = $room->players()->create([
-                'user_id' => $user?->id,
-                'name' => $validated['player_name'],
-                'is_moderator' => true,
-                'last_seen_at' => now(),
-            ]);
-
-            return [$room, $player];
-        });
 
         $request->session()->put(
             "room_players.{$room->id}",
@@ -90,7 +48,7 @@ class RoomController extends Controller
 
         $redirect = to_route('room.show', $room);
 
-        if ($user === null) {
+        if ($request->user() === null) {
             $redirect->with('room_notice', [
                 'guest_retention_days' => config('rooms.guest_retention_days'),
                 'account_retention_days' => config('rooms.account_retention_days'),
@@ -106,197 +64,15 @@ class RoomController extends Controller
 
         abort_unless($currentPlayer instanceof Player, 403);
 
-        $room->load([
+        $pageData = $this->roomPage->prepare(
-            'players' => fn ($query) => $query
+            $room,
-                ->select(['id', 'room_id', 'name', 'is_moderator', 'created_at'])
+            $currentPlayer,
-                ->orderByDesc('is_moderator')
+            $request->user(),
-                ->orderBy('created_at'),
-            'players.votes' => fn ($query) => $query
-                ->where('room_id', $room->id)
-                ->where('round', $room->current_round),
-        ]);
-
-        $players = $room->players->map(function (Player $player) use ($room) {
-            $vote = $player->votes->first();
-
-            return [
-                'id' => $player->id,
-                'name' => $player->name,
-                'is_moderator' => $player->is_moderator,
-                'has_voted' => $vote !== null,
-                'vote' => $room->revealed_at !== null ? $vote?->value : null,
-            ];
-        });
-
-        $currentVote = $room->players
-            ->firstWhere('id', $currentPlayer->id)
-            ?->votes
-            ->first();
-        $statistics = $room->revealed_at !== null
-            ? $this->currentRoundStatistics($room)
-            : null;
-
-        return Inertia::render('rooms/Show', [
-            'room' => [
-                'id' => $room->id,
-                'title' => $room->title,
-                'join_code' => $room->join_code,
-                'current_round' => $room->current_round,
-                'revealed' => $room->revealed_at !== null,
-                'state_version' => $room->state_version,
-                'statistics' => $statistics,
-                'deck' => [
-                    'name' => $room->deck_config['name'],
-                    'cards' => $room->deck_config['cards'],
-                ],
-                'players' => $players,
-            ],
-            'currentPlayer' => [
-                'id' => $currentPlayer->id,
-                'name' => $currentPlayer->name,
-                'is_moderator' => $currentPlayer->is_moderator,
-                'current_vote' => $currentVote?->value,
-            ],
-        ]);
-    }
-
-    public function join(Request $request): Response
-    {
-        $joinCode = strtoupper(trim((string) $request->query('join_code')));
-        $room = $joinCode !== ''
-            ? Room::query()->where('join_code', $joinCode)->first()
-            : null;
-        $existingPlayer = $room !== null && $request->user() !== null
-            ? $room->players()->where('user_id', $request->user()->id)->first()
-            : null;
-
-        return Inertia::render('rooms/Join', [
-            'join_code' => $joinCode,
-            'defaultPlayerName' => $existingPlayer instanceof Player
-                ? $existingPlayer->name
-                : $request->user()?->name,
-            'closedRoom' => $room?->isClosed() ? [
-                'title' => $room->title,
-                'join_code' => $room->join_code,
-            ] : null,
-        ]);
-    }
-
-    public function reopen(Room $room, Request $request): RedirectResponse
-    {
-        $user = $request->user();
-
-        abort_if($room->trashed(), 404);
-        abort_unless($user !== null && $user->id === $room->owner_id, 403);
-
-        [$player, $stateVersion, $wasReopened] = DB::transaction(function () use ($room, $user): array {
-            $lockedRoom = Room::query()->lockForUpdate()->findOrFail($room->id);
-
-            abort_unless($user->id === $lockedRoom->owner_id, 403);
-
-            $wasReopened = $lockedRoom->isClosed();
-
-            if ($lockedRoom->isClosed()) {
-                $lockedRoom->update([
-                    'current_round' => $lockedRoom->current_round + 1,
-                    'revealed_at' => null,
-                    'closed_at' => null,
-                    'last_activity_at' => now(),
-                    'state_version' => $lockedRoom->state_version + 1,
-                ]);
-            }
-
-            return [
-                $lockedRoom->players()
-                    ->where('user_id', $user->id)
-                    ->firstOrFail(),
-                $lockedRoom->state_version,
-                $wasReopened,
-            ];
-        });
-
-        $request->session()->put("room_players.{$room->id}", $player->id);
-
-        if ($wasReopened) {
-            RoomStateChanged::dispatch(
-                $room->id,
-                $stateVersion,
-                RoomStateChange::RoomReopened,
-            );
-        }
-
-        return to_route('room.show', $room);
-    }
-
-    public function destroy(Room $room, Request $request): RedirectResponse
-    {
-        $user = $request->user();
-
-        abort_if($room->trashed(), 404);
-        abort_unless($user !== null && $user->id === $room->owner_id, 403);
-
-        $stateVersion = DB::transaction(function () use ($room, $user): int {
-            $lockedRoom = Room::withTrashed()
-                ->lockForUpdate()
-                ->findOrFail($room->id);
-
-            abort_if($lockedRoom->trashed(), 404);
-            abort_unless($user->id === $lockedRoom->owner_id, 403);
-
-            $lockedRoom->update([
-                'state_version' => $lockedRoom->state_version + 1,
-            ]);
-            $lockedRoom->delete();
-
-            return $lockedRoom->state_version;
-        });
-
-        $request->session()->forget("room_players.{$room->id}");
-
-        RoomStateChanged::dispatch(
-            $room->id,
-            $stateVersion,
-            RoomStateChange::RoomDeleted,
         );
 
-        Inertia::flash('toast', [
+        return Inertia::render('rooms/Show', [
-            'type' => 'success',
+            'room' => (new RoomResource($pageData))->resolve($request),
-            'message' => 'Der Raum wurde gelöscht.',
+            'currentPlayer' => (new CurrentPlayerResource($pageData))->resolve($request),
         ]);
-
-        return to_route('dashboard');
-    }
-
-    /**
-     * @return array{average: string|null, median: string|null}
-     */
-    private function currentRoundStatistics(Room $room): array
-    {
-        $values = [];
-
-        foreach ($room->players as $player) {
-            $vote = $player->votes->first();
-
-            if ($vote !== null && is_numeric($vote->value)) {
-                $values[] = (float) $vote->value;
-            }
-        }
-
-        sort($values, SORT_NUMERIC);
-        $count = count($values);
-
-        if ($count === 0) {
-            return ['average' => null, 'median' => null];
-        }
-
-        $middle = intdiv($count, 2);
-        $median = $count % 2 === 1
-            ? $values[$middle]
-            : ($values[$middle - 1] + $values[$middle]) / 2;
-
-        return [
-            'average' => number_format(array_sum($values) / $count, 2, ',', ''),
-            'median' => number_format($median, 2, ',', ''),
-        ];
     }
 }

app/Http/Controllers/RoomEmoteController.php

@@ -2,18 +2,19 @@
 
 namespace App\Http\Controllers;
 
-use App\Events\PaperBallThrown;
+use App\Http\Requests\ThrowPaperBallRequest;
 use App\Models\Player;
 use App\Models\Room;
-use Illuminate\Http\Request;
+use App\Services\Rooms\RoomEmoteService;
 use Illuminate\Http\Response;
-use Illuminate\Support\Facades\RateLimiter;
-use Illuminate\Support\Str;
-use Illuminate\Validation\ValidationException;
 
 class RoomEmoteController extends Controller
 {
-    public function store(Request $request, Room $room): Response
+    public function __construct(
+        private readonly RoomEmoteService $roomEmotes,
+    ) {}
+
+    public function store(ThrowPaperBallRequest $request, Room $room): Response
     {
         $player = $request->attributes->get('currentPlayer');
 
@@ -22,42 +23,10 @@ class RoomEmoteController extends Controller
             403,
         );
 
-        $validated = $request->validate([
+        $this->roomEmotes->throwPaperBall(
-            'target_player_id' => ['required', 'integer'],
+            $room,
-        ]);
+            $player,
-        $targetPlayerId = (int) $validated['target_player_id'];
+            (int) $request->validated('target_player_id'),
-
-        if ($targetPlayerId === $player->id) {
-            throw ValidationException::withMessages([
-                'target_player_id' => 'Du kannst dich nicht selbst abwerfen.',
-            ]);
-        }
-
-        $targetExists = $room->players()
-            ->whereKey($targetPlayerId)
-            ->exists();
-
-        if (! $targetExists) {
-            throw ValidationException::withMessages([
-                'target_player_id' => 'Dieser Spieler sitzt nicht an diesem Tisch.',
-            ]);
-        }
-
-        $rateLimitKey = "room-emote:{$room->id}:{$player->id}";
-
-        abort_if(
-            RateLimiter::tooManyAttempts($rateLimitKey, 10),
-            429,
-            'Bitte warte kurz, bevor du erneut wirfst.',
-        );
-
-        RateLimiter::hit($rateLimitKey, 10);
-
-        PaperBallThrown::dispatch(
-            Str::uuid()->toString(),
-            $room->id,
-            $player->id,
-            $targetPlayerId,
         );
 
         return response()->noContent();

app/Http/Controllers/RoomJoinController.php

@@ -0,0 +1,50 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Http\Resources\ClosedRoomResource;
+use App\Models\Player;
+use App\Services\Rooms\RoomParticipationService;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Http\Request;
+use Inertia\Inertia;
+use Inertia\Response;
+
+class RoomJoinController extends Controller
+{
+    public function __construct(
+        private readonly RoomParticipationService $roomParticipation,
+    ) {}
+
+    public function __invoke(Request $request): Response|RedirectResponse
+    {
+        $joinCode = strtoupper(trim((string) $request->query('join_code')));
+        $room = $this->roomParticipation->findByJoinCode($joinCode);
+        $existingPlayer = $room !== null
+            ? $this->roomParticipation->findExistingPlayer(
+                $room,
+                $request->user(),
+                $request->session()->get("room_players.{$room->id}"),
+            )
+            : null;
+
+        if (
+            $room !== null
+            && ! $room->isClosed()
+            && $existingPlayer instanceof Player
+            && $existingPlayer->inactive_at === null
+        ) {
+            return to_route('room.show', $room);
+        }
+
+        return Inertia::render('rooms/Join', [
+            'join_code' => $joinCode,
+            'defaultPlayerName' => $existingPlayer instanceof Player
+                ? $existingPlayer->name
+                : $request->user()?->name,
+            'closedRoom' => $room?->isClosed()
+                ? (new ClosedRoomResource($room))->resolve($request)
+                : null,
+        ]);
+    }
+}

app/Http/Controllers/RoomLifecycleController.php

@@ -0,0 +1,52 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\Room;
+use App\Models\User;
+use App\Services\Rooms\RoomLifecycleService;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Http\Request;
+use Inertia\Inertia;
+
+class RoomLifecycleController extends Controller
+{
+    public function __construct(
+        private readonly RoomLifecycleService $roomLifecycle,
+    ) {}
+
+    public function reopen(Room $room, Request $request): RedirectResponse
+    {
+        $user = $request->user();
+
+        abort_if($room->trashed(), 404);
+        abort_unless($user instanceof User && $user->id === $room->owner_id, 403);
+
+        $result = $this->roomLifecycle->reopen($room, $user);
+
+        $request->session()->put(
+            "room_players.{$room->id}",
+            $result['player']->id,
+        );
+
+        return to_route('room.show', $room);
+    }
+
+    public function destroy(Room $room, Request $request): RedirectResponse
+    {
+        $user = $request->user();
+
+        abort_if($room->trashed(), 404);
+        abort_unless($user instanceof User && $user->id === $room->owner_id, 403);
+
+        $this->roomLifecycle->delete($room, $user);
+        $request->session()->forget("room_players.{$room->id}");
+
+        Inertia::flash('toast', [
+            'type' => 'success',
+            'message' => 'Der Raum wurde gelöscht.',
+        ]);
+
+        return to_route('dashboard');
+    }
+}

app/Http/Controllers/RoomPlayerController.php

@@ -2,81 +2,33 @@
 
 namespace App\Http\Controllers;
 
-use App\Enums\RoomStateChange;
-use App\Events\RoomStateChanged;
 use App\Http\Requests\JoinRoomRequest;
-use App\Models\Player;
+use App\Services\Rooms\RoomParticipationService;
-use App\Models\Room;
 use Illuminate\Http\RedirectResponse;
-use Illuminate\Support\Facades\DB;
-use Illuminate\Validation\ValidationException;
 
 class RoomPlayerController extends Controller
 {
+    public function __construct(
+        private readonly RoomParticipationService $roomParticipation,
+    ) {}
+
     public function join(JoinRoomRequest $request): RedirectResponse
     {
+        /** @var array{join_code: string, player_name: string} $validated */
         $validated = $request->validated();
-        $user = $request->user();
+        $sessionPlayerIds = $request->session()->get('room_players', []);
 
-        [$room, $player] = DB::transaction(function () use ($request, $validated, $user): array {
+        [$room, $player] = $this->roomParticipation->join(
-            $room = Room::query()
+            $validated,
-                ->where('join_code', $validated['join_code'])
+            $request->user(),
-                ->lockForUpdate()
+            is_array($sessionPlayerIds) ? $sessionPlayerIds : [],
-                ->firstOrFail();
+        );
-
-            if ($room->isClosed()) {
-                throw ValidationException::withMessages([
-                    'join_code' => 'Dieser Raum ist geschlossen.',
-                ]);
-            }
-
-            $player = $this->existingPlayer($request, $room);
-
-            if ($player === null) {
-                $player = $room->players()->create([
-                    'user_id' => $user?->id,
-                    'name' => $validated['player_name'],
-                    'is_moderator' => false,
-                    'last_seen_at' => now(),
-                ]);
-            } else {
-                $player->update(['last_seen_at' => now()]);
-            }
-
-            $room->update([
-                'last_activity_at' => now(),
-                'state_version' => $room->state_version + 1,
-            ]);
-
-            return [$room, $player];
-        });
 
         $request->session()->put(
             "room_players.{$room->id}",
             $player->id,
         );
 
-        RoomStateChanged::dispatch(
-            $room->id,
-            $room->state_version,
-            RoomStateChange::PlayerJoined,
-        );
-
         return to_route('room.show', $room);
     }
-
-    private function existingPlayer(JoinRoomRequest $request, Room $room): ?Player
-    {
-        if ($request->user() !== null) {
-            return $room->players()
-                ->where('user_id', $request->user()->id)
-                ->first();
-        }
-
-        $playerId = $request->session()->get("room_players.{$room->id}");
-
-        return is_numeric($playerId)
-            ? $room->players()->find((int) $playerId)
-            : null;
-    }
 }

app/Http/Controllers/RoundController.php

@@ -2,156 +2,51 @@
 
 namespace App\Http\Controllers;
 
-use App\Enums\RoomStateChange;
-use App\Events\RoomStateChanged;
 use App\Models\Player;
 use App\Models\Room;
-use App\Models\Vote;
+use App\Services\Rooms\RoundService;
 use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
-use Illuminate\Support\Facades\DB;
-use Illuminate\Validation\ValidationException;
 
 class RoundController extends Controller
 {
-    public function reset(
+    public function __construct(
-        Request $request,
+        private readonly RoundService $rounds,
-        Room $room,
+    ) {}
-    ): RedirectResponse {
-        $player = $request->attributes->get('currentPlayer');
 
-        abort_unless(
+    public function reset(Request $request, Room $room): RedirectResponse
-            $player instanceof Player
-            && $player->room_id === $room->id
-            && $player->is_moderator,
-            403,
-        );
-
-        $stateVersion = DB::transaction(function () use ($room): int {
-            $lockedRoom = Room::query()
-                ->lockForUpdate()
-                ->findOrFail($room->id);
-
-            $this->ensureRoomIsOpen($lockedRoom);
-
-            Vote::query()
-                ->where('room_id', $lockedRoom->id)
-                ->where('round', $lockedRoom->current_round)
-                ->delete();
-
-            $lockedRoom->update([
-                'revealed_at' => null,
-                'last_activity_at' => now(),
-                'state_version' => $lockedRoom->state_version + 1,
-            ]);
-
-            return $lockedRoom->state_version;
-        });
-
-        RoomStateChanged::dispatch(
-            $room->id,
-            $stateVersion,
-            RoomStateChange::VotesReset,
-        );
-
-        return back();
-    }
-
-    public function reveal(
-        Request $request,
-        Room $room,
-    ): RedirectResponse {
-        $player = $request->attributes->get('currentPlayer');
-
-        abort_unless(
-            $player instanceof Player
-            && $player->room_id === $room->id
-            && $player->is_moderator,
-            403,
-        );
-
-        $stateVersion = DB::transaction(function () use ($room): int {
-            $lockedRoom = Room::query()
-                ->lockForUpdate()
-                ->findOrFail($room->id);
-
-            $this->ensureRoomIsOpen($lockedRoom);
-
-            if ($lockedRoom->revealed_at !== null) {
-                throw ValidationException::withMessages([
-                    'room' => 'Die Karten sind bereits aufgedeckt.',
-                ]);
-            }
-
-            $lockedRoom->update([
-                'revealed_at' => now(),
-                'last_activity_at' => now(),
-                'state_version' => $lockedRoom->state_version + 1,
-            ]);
-
-            return $lockedRoom->state_version;
-        });
-
-        RoomStateChanged::dispatch(
-            $room->id,
-            $stateVersion,
-            RoomStateChange::CardsRevealed,
-        );
-
-        return back();
-    }
-
-    public function nextRound(
-        Request $request,
-        Room $room,
-    ): RedirectResponse {
-        $player = $request->attributes->get('currentPlayer');
-
-        abort_unless(
-            $player instanceof Player
-            && $player->room_id === $room->id
-            && $player->is_moderator,
-            403,
-        );
-
-        $stateVersion = DB::transaction(function () use ($room): int {
-            $lockedRoom = Room::query()
-                ->lockForUpdate()
-                ->findOrFail($room->id);
-
-            $this->ensureRoomIsOpen($lockedRoom);
-
-            if ($lockedRoom->revealed_at === null) {
-                throw ValidationException::withMessages([
-                    'room' => 'Die aktuelle Runde muss zuerst aufgedeckt werden.',
-                ]);
-            }
-
-            $lockedRoom->update([
-                'current_round' => $lockedRoom->current_round + 1,
-                'revealed_at' => null,
-                'last_activity_at' => now(),
-                'state_version' => $lockedRoom->state_version + 1,
-            ]);
-
-            return $lockedRoom->state_version;
-        });
-
-        RoomStateChanged::dispatch(
-            $room->id,
-            $stateVersion,
-            RoomStateChange::NextRound,
-        );
-
-        return back();
-    }
-
-    private function ensureRoomIsOpen(Room $room): void
     {
-        if ($room->isClosed()) {
+        $this->ensureModerator($request, $room);
-            throw ValidationException::withMessages([
+        $this->rounds->reset($room);
-                'room' => 'Dieser Raum ist geschlossen.',
+
-            ]);
+        return back();
-        }
+    }
+
+    public function reveal(Request $request, Room $room): RedirectResponse
+    {
+        $this->ensureModerator($request, $room);
+        $this->rounds->reveal($room);
+
+        return back();
+    }
+
+    public function nextRound(Request $request, Room $room): RedirectResponse
+    {
+        $this->ensureModerator($request, $room);
+        $this->rounds->startNext($room);
+
+        return back();
+    }
+
+    private function ensureModerator(Request $request, Room $room): void
+    {
+        $player = $request->attributes->get('currentPlayer');
+
+        abort_unless(
+            $player instanceof Player
+            && $player->room_id === $room->id
+            && $player->is_moderator,
+            403,
+        );
     }
 }

app/Http/Controllers/Settings/SecurityController.php

@@ -5,6 +5,9 @@ namespace App\Http\Controllers\Settings;
 use App\Http\Controllers\Controller;
 use App\Http\Requests\Settings\PasswordUpdateRequest;
 use App\Http\Requests\Settings\TwoFactorAuthenticationRequest;
+use App\Http\Resources\PasskeyResource;
+use App\Models\User;
+use App\Services\Settings\SecuritySettingsService;
 use Illuminate\Http\RedirectResponse;
 use Illuminate\Validation\Rules\Password;
 use Inertia\Inertia;
@@ -13,37 +16,34 @@ use Laravel\Fortify\Features;
 
 class SecurityController extends Controller
 {
+    public function __construct(
+        private readonly SecuritySettingsService $securitySettings,
+    ) {}
+
     /**
      * Show the user's security settings page.
      */
     public function edit(TwoFactorAuthenticationRequest $request): Response
     {
+        $user = $request->user();
+
+        abort_unless($user instanceof User, 403);
+
+        $canManageTwoFactor = Features::canManageTwoFactorAuthentication();
+        $canManagePasskeys = Features::canManagePasskeys();
         $props = [
-            'canManageTwoFactor' => Features::canManageTwoFactorAuthentication(),
+            'canManageTwoFactor' => $canManageTwoFactor,
-            'canManagePasskeys' => Features::canManagePasskeys(),
+            'canManagePasskeys' => $canManagePasskeys,
-            'passkeys' => Features::canManagePasskeys()
+            'passkeys' => PasskeyResource::collection(
-                ? $request->user()
+                $this->securitySettings->passkeys($user, $canManagePasskeys),
-                    ->passkeys()
+            )->resolve($request),
-                    ->select(['id', 'name', 'credential', 'created_at', 'last_used_at'])
-                    ->latest()
-                    ->get()
-                    ->map(fn ($passkey) => [
-                        'id' => $passkey->id,
-                        'name' => $passkey->name,
-                        'authenticator' => $passkey->authenticator,
-                        'created_at_diff' => $passkey->created_at->diffForHumans(),
-                        'last_used_at_diff' => $passkey->last_used_at?->diffForHumans(),
-                    ])
-                    ->values()
-                    ->all()
-                : [],
             'passwordRules' => Password::defaults()->toPasswordRulesString(),
         ];
 
-        if (Features::canManageTwoFactorAuthentication()) {
+        if ($canManageTwoFactor) {
             $request->ensureStateIsValid();
 
-            $props['twoFactorEnabled'] = $request->user()->hasEnabledTwoFactorAuthentication();
+            $props['twoFactorEnabled'] = $user->hasEnabledTwoFactorAuthentication();
             $props['requiresConfirmation'] = Features::optionEnabled(Features::twoFactorAuthentication(), 'confirm');
         }
 

app/Http/Controllers/VoteController.php

@@ -2,18 +2,18 @@
 
 namespace App\Http\Controllers;
 
-use App\Enums\RoomStateChange;
-use App\Events\RoomStateChanged;
 use App\Http\Requests\SubmitVoteRequest;
 use App\Models\Player;
 use App\Models\Room;
-use App\Models\Vote;
+use App\Services\Rooms\VoteService;
 use Illuminate\Http\RedirectResponse;
-use Illuminate\Support\Facades\DB;
-use Illuminate\Validation\ValidationException;
 
 class VoteController extends Controller
 {
+    public function __construct(
+        private readonly VoteService $votes,
+    ) {}
+
     public function store(
         SubmitVoteRequest $request,
         Room $room,
@@ -26,48 +26,10 @@ class VoteController extends Controller
             403,
         );
 
-        $value = $request->validated('value');
+        $this->votes->submit(
-
+            $room,
-        $stateVersion = DB::transaction(function () use ($room, $player, $value): int {
+            $player,
-            $lockedRoom = Room::query()
+            $request->validated('value'),
-                ->lockForUpdate()
-                ->findOrFail($room->id);
-
-            if ($lockedRoom->isClosed()) {
-                throw ValidationException::withMessages([
-                    'value' => 'Dieser Raum ist geschlossen.',
-                ]);
-            }
-
-            if ($lockedRoom->revealed_at !== null) {
-                throw ValidationException::withMessages([
-                    'value' => 'Die Karten wurden bereits aufgedeckt.',
-                ]);
-            }
-
-            Vote::updateOrCreate(
-                [
-                    'room_id' => $lockedRoom->id,
-                    'player_id' => $player->id,
-                    'round' => $lockedRoom->current_round,
-                ],
-                [
-                    'value' => $value,
-                ],
-            );
-
-            $lockedRoom->update([
-                'last_activity_at' => now(),
-                'state_version' => $lockedRoom->state_version + 1,
-            ]);
-
-            return $lockedRoom->state_version;
-        });
-
-        RoomStateChanged::dispatch(
-            $room->id,
-            $stateVersion,
-            RoomStateChange::VoteChanged,
         );
 
         return back();

app/Http/Middleware/EnsureRoomParticipant.php

@@ -45,7 +45,9 @@ class EnsureRoomParticipant
 
         $playerId = $request->session()->get($sessionKey);
 
-        $player = $playerId ? $room->players()->find($playerId) : null;
+        $player = is_numeric($playerId)
+            ? $room->players()->find((int) $playerId)
+            : null;
 
         if ($player === null && $playerId) {
             $request->session()->forget($sessionKey);
@@ -69,6 +71,13 @@ class EnsureRoomParticipant
             ]);
         }
 
+        if ($player->inactive_at !== null) {
+            return to_route('room.join', [
+                'join_code' => $room->join_code,
+            ]);
+        }
+
+        $player->markAsSeen();
         $request->attributes->set('currentPlayer', $player);
 
         return $next($request);

app/Http/Requests/ThrowPaperBallRequest.php

@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Http\Requests;
+
+use Illuminate\Contracts\Validation\ValidationRule;
+use Illuminate\Foundation\Http\FormRequest;
+
+class ThrowPaperBallRequest extends FormRequest
+{
+    public function authorize(): bool
+    {
+        return true;
+    }
+
+    /**
+     * @return array<string, ValidationRule|array<mixed>|string>
+     */
+    public function rules(): array
+    {
+        return [
+            'target_player_id' => ['required', 'integer'],
+        ];
+    }
+}

app/Http/Resources/ClosedRoomResource.php

@@ -0,0 +1,20 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+
+class ClosedRoomResource extends JsonResource
+{
+    /**
+     * @return array<string, mixed>
+     */
+    public function toArray(Request $request): array
+    {
+        return [
+            'title' => $this->resource->title,
+            'join_code' => $this->resource->join_code,
+        ];
+    }
+}

app/Http/Resources/CurrentPlayerResource.php

@@ -0,0 +1,27 @@
+<?php
+
+namespace App\Http\Resources;
+
+use App\Data\Rooms\RoomPageData;
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+
+class CurrentPlayerResource extends JsonResource
+{
+    /**
+     * @return array<string, mixed>
+     */
+    public function toArray(Request $request): array
+    {
+        /** @var RoomPageData $pageData */
+        $pageData = $this->resource;
+        $player = $pageData->currentPlayer;
+
+        return [
+            'id' => $player->id,
+            'name' => $player->name,
+            'is_moderator' => $player->is_moderator,
+            'current_vote' => $pageData->currentVote,
+        ];
+    }
+}

app/Http/Resources/DashboardRoomResource.php

@@ -0,0 +1,26 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+
+class DashboardRoomResource extends JsonResource
+{
+    /**
+     * @return array<string, mixed>
+     */
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => $this->resource->id,
+            'title' => $this->resource->title,
+            'join_code' => $this->resource->join_code,
+            'current_round' => $this->resource->current_round,
+            'players_count' => $this->resource->players_count,
+            'active_player_count' => $this->resource->active_player_count,
+            'last_activity_at' => $this->resource->last_activity_at?->toIso8601String(),
+            'closed_at' => $this->resource->closed_at?->toIso8601String(),
+        ];
+    }
+}

app/Http/Resources/DeckResource.php

@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+
+class DeckResource extends JsonResource
+{
+    /**
+     * @return array<string, mixed>
+     */
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => $this->resource->id,
+            'name' => $this->resource->name,
+            'cards' => $this->resource->cards,
+        ];
+    }
+}

app/Http/Resources/PasskeyResource.php

@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+
+class PasskeyResource extends JsonResource
+{
+    /**
+     * @return array<string, mixed>
+     */
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => $this->resource->id,
+            'name' => $this->resource->name,
+            'authenticator' => $this->resource->authenticator,
+            'created_at_diff' => $this->resource->created_at->diffForHumans(),
+            'last_used_at_diff' => $this->resource->last_used_at?->diffForHumans(),
+        ];
+    }
+}

app/Http/Resources/RoomDeckResource.php

@@ -0,0 +1,20 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+
+class RoomDeckResource extends JsonResource
+{
+    /**
+     * @return array<string, mixed>
+     */
+    public function toArray(Request $request): array
+    {
+        return [
+            'name' => $this->resource['name'],
+            'cards' => $this->resource['cards'],
+        ];
+    }
+}

app/Http/Resources/RoomPlayerResource.php

@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Http\Resources;
+
+use App\Models\Player;
+use App\Models\Room;
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+
+class RoomPlayerResource extends JsonResource
+{
+    public function __construct(Player $resource, private readonly Room $room)
+    {
+        parent::__construct($resource);
+    }
+
+    /**
+     * @return array<string, mixed>
+     */
+    public function toArray(Request $request): array
+    {
+        $vote = $this->resource->votes->first();
+
+        return [
+            'id' => $this->resource->id,
+            'name' => $this->resource->name,
+            'is_moderator' => $this->resource->is_moderator,
+            'is_owner' => $this->resource->user_id === $this->room->owner_id,
+            'has_voted' => $vote !== null,
+            'vote' => $this->room->revealed_at !== null ? $vote?->value : null,
+        ];
+    }
+}

app/Http/Resources/RoomResource.php

@@ -0,0 +1,36 @@
+<?php
+
+namespace App\Http\Resources;
+
+use App\Data\Rooms\RoomPageData;
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+
+class RoomResource extends JsonResource
+{
+    /**
+     * @return array<string, mixed>
+     */
+    public function toArray(Request $request): array
+    {
+        /** @var RoomPageData $pageData */
+        $pageData = $this->resource;
+        $room = $pageData->room;
+
+        return [
+            'id' => $room->id,
+            'title' => $room->title,
+            'join_code' => $room->join_code,
+            'owner_id' => $room->owner_id,
+            'is_favorite' => $pageData->isFavorite,
+            'current_round' => $room->current_round,
+            'revealed' => $room->revealed_at !== null,
+            'state_version' => $room->state_version,
+            'statistics' => $pageData->statistics,
+            'deck' => (new RoomDeckResource($room->deck_config))->resolve($request),
+            'players' => $room->players
+                ->map(fn ($player) => (new RoomPlayerResource($player, $room))->resolve($request))
+                ->all(),
+        ];
+    }
+}

app/Jobs/MarkInactivePlayers.php

@@ -0,0 +1,22 @@
+<?php
+
+namespace App\Jobs;
+
+use App\Models\Player;
+use Illuminate\Contracts\Queue\ShouldQueue;
+use Illuminate\Foundation\Queue\Queueable;
+
+class MarkInactivePlayers implements ShouldQueue
+{
+    use Queueable;
+
+    public function handle(): void
+    {
+        Player::query()
+            ->whereNull('inactive_at')
+            ->where('last_seen_at', '<=', now()->subHour())
+            ->update([
+                'inactive_at' => now(),
+            ]);
+    }
+}

app/Models/Player.php

@@ -2,6 +2,7 @@
 
 namespace App\Models;
 
+use Illuminate\Database\Eloquent\Builder;
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
 use Illuminate\Database\Eloquent\Relations\HasMany;
@@ -14,6 +15,7 @@ use Illuminate\Support\Carbon;
  * @property string $name
  * @property bool $is_moderator
  * @property Carbon|null $last_seen_at
+ * @property Carbon|null $inactive_at
  * @property Carbon|null $created_at
  * @property Carbon|null $updated_at
  * @property-read Room $room
@@ -26,6 +28,7 @@ class Player extends Model
         'name',
         'is_moderator',
         'last_seen_at',
+        'inactive_at',
     ];
 
     protected function casts(): array
@@ -33,6 +36,7 @@ class Player extends Model
         return [
             'is_moderator' => 'boolean',
             'last_seen_at' => 'datetime',
+            'inactive_at' => 'datetime',
         ];
     }
 
@@ -79,4 +83,14 @@ class Player extends Model
             'last_seen_at' => now(),
         ]);
     }
+
+    /**
+     * @param  Builder<Player>  $query
+     * @return Builder<Player>
+     */
+    public function scopeActive(Builder $query): Builder
+    {
+        return $query->whereNull('inactive_at');
+
+    }
 }

app/Models/Room.php

@@ -6,6 +6,7 @@ use Carbon\CarbonImmutable;
 use Illuminate\Database\Eloquent\Concerns\HasUuids;
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
+use Illuminate\Database\Eloquent\Relations\BelongsToMany;
 use Illuminate\Database\Eloquent\Relations\HasMany;
 use Illuminate\Database\Eloquent\SoftDeletes;
 
@@ -81,6 +82,12 @@ class Room extends Model
 
     }
 
+    /** @return HasMany<Player, $this> */
+    public function activePlayers(): HasMany
+    {
+        return $this->hasMany(Player::class)->whereNull('inactive_at');
+    }
+
     /** @return BelongsTo<User, $this> */
     public function owner(): BelongsTo
     {
@@ -97,4 +104,10 @@ class Room extends Model
     {
         return $this->closed_at !== null;
     }
+
+    /** @return BelongsToMany<User, $this> */
+    public function favoritedBy(): BelongsToMany
+    {
+        return $this->belongsToMany(User::class, 'user_room_favorites')->withTimestamps();
+    }
 }

app/Models/User.php

@@ -7,6 +7,7 @@ use Database\Factories\UserFactory;
 use Illuminate\Database\Eloquent\Attributes\Fillable;
 use Illuminate\Database\Eloquent\Attributes\Hidden;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Relations\BelongsToMany;
 use Illuminate\Database\Eloquent\Relations\HasMany;
 use Illuminate\Foundation\Auth\User as Authenticatable;
 use Illuminate\Notifications\Notifiable;
@@ -66,4 +67,10 @@ class User extends Authenticatable implements PasskeyUser
     {
         return $this->hasMany(Room::class, 'owner_id');
     }
+
+    /** @return BelongsToMany<Room, $this> */
+    public function favoriteRooms(): BelongsToMany
+    {
+        return $this->belongsToMany(Room::class, 'user_room_favorites')->withTimestamps();
+    }
 }

app/Services/Rooms/DashboardRoomService.php

@@ -0,0 +1,37 @@
+<?php
+
+namespace App\Services\Rooms;
+
+use App\Models\Room;
+use App\Models\User;
+use Illuminate\Database\Eloquent\Collection;
+
+class DashboardRoomService
+{
+    /**
+     * @return array{owned: Collection<int, Room>, favorites: Collection<int, Room>}
+     */
+    public function forUser(User $user): array
+    {
+        $ownedRooms = $user
+            ->ownedRooms()
+            ->withCount('players')
+            ->withCount(['activePlayers as active_player_count'])
+            ->orderByRaw('closed_at IS NOT NULL')
+            ->orderByDesc('last_activity_at')
+            ->get();
+
+        $favoriteRooms = $user
+            ->favoriteRooms()
+            ->withCount('players')
+            ->withCount(['activePlayers as active_player_count'])
+            ->orderByRaw('closed_at IS NOT NULL')
+            ->orderByDesc('last_activity_at')
+            ->get();
+
+        return [
+            'owned' => $ownedRooms,
+            'favorites' => $favoriteRooms,
+        ];
+    }
+}

app/Services/Rooms/FavoriteRoomService.php

@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Services\Rooms;
+
+use App\Models\Room;
+use App\Models\User;
+use Symfony\Component\HttpKernel\Exception\ConflictHttpException;
+
+class FavoriteRoomService
+{
+    public function toggle(User $user, Room $room): void
+    {
+        if ($room->owner_id === $user->id) {
+            throw new ConflictHttpException('Lobby is already yours', null, 409);
+        }
+
+        $user->favoriteRooms()->toggle([$room->id]);
+    }
+}

app/Services/Rooms/RoomCreationService.php

@@ -0,0 +1,70 @@
+<?php
+
+namespace App\Services\Rooms;
+
+use App\Models\Deck;
+use App\Models\Player;
+use App\Models\Room;
+use App\Models\User;
+use Illuminate\Database\Eloquent\Collection;
+use Illuminate\Support\Facades\DB;
+
+class RoomCreationService
+{
+    /**
+     * @return Collection<int, Deck>
+     */
+    public function availableDecks(?User $user): Collection
+    {
+        return Deck::query()
+            ->where(function ($query) use ($user) {
+                $query->where('is_system', true);
+
+                if ($user !== null) {
+                    $query->orWhere('user_id', $user->id);
+                }
+            })
+            ->orderBy('name')
+            ->get(['id', 'name', 'cards']);
+    }
+
+    /**
+     * @param  array{deck_id: int, player_name: string, title?: string|null}  $data
+     * @return array{Room, Player}
+     */
+    public function create(array $data, ?User $user): array
+    {
+        $deck = Deck::query()
+            ->whereKey($data['deck_id'])
+            ->where(function ($query) use ($user) {
+                $query->where('is_system', true);
+
+                if ($user !== null) {
+                    $query->orWhere('user_id', $user->id);
+                }
+            })
+            ->firstOrFail();
+
+        return DB::transaction(function () use ($data, $deck, $user): array {
+            $room = Room::create([
+                'owner_id' => $user?->id,
+                'title' => $data['title'] ?? null,
+                'last_activity_at' => now(),
+                'deck_config' => [
+                    'id' => $deck->id,
+                    'name' => $deck->name,
+                    'cards' => $deck->cards,
+                ],
+            ]);
+
+            $player = $room->players()->create([
+                'user_id' => $user?->id,
+                'name' => $data['player_name'],
+                'is_moderator' => true,
+                'last_seen_at' => now(),
+            ]);
+
+            return [$room, $player];
+        });
+    }
+}

app/Services/Rooms/RoomEmoteService.php

@@ -0,0 +1,49 @@
+<?php
+
+namespace App\Services\Rooms;
+
+use App\Events\PaperBallThrown;
+use App\Models\Player;
+use App\Models\Room;
+use Illuminate\Support\Facades\RateLimiter;
+use Illuminate\Support\Str;
+use Illuminate\Validation\ValidationException;
+
+class RoomEmoteService
+{
+    public function throwPaperBall(Room $room, Player $player, int $targetPlayerId): void
+    {
+        if ($targetPlayerId === $player->id) {
+            throw ValidationException::withMessages([
+                'target_player_id' => 'Du kannst dich nicht selbst abwerfen.',
+            ]);
+        }
+
+        $targetExists = $room->players()
+            ->whereKey($targetPlayerId)
+            ->exists();
+
+        if (! $targetExists) {
+            throw ValidationException::withMessages([
+                'target_player_id' => 'Dieser Spieler sitzt nicht an diesem Tisch.',
+            ]);
+        }
+
+        $rateLimitKey = "room-emote:{$room->id}:{$player->id}";
+
+        abort_if(
+            RateLimiter::tooManyAttempts($rateLimitKey, 10),
+            429,
+            'Bitte warte kurz, bevor du erneut wirfst.',
+        );
+
+        RateLimiter::hit($rateLimitKey, 10);
+
+        PaperBallThrown::dispatch(
+            Str::uuid()->toString(),
+            $room->id,
+            $player->id,
+            $targetPlayerId,
+        );
+    }
+}

app/Services/Rooms/RoomLifecycleService.php

@@ -0,0 +1,85 @@
+<?php
+
+namespace App\Services\Rooms;
+
+use App\Enums\RoomStateChange;
+use App\Events\RoomStateChanged;
+use App\Models\Player;
+use App\Models\Room;
+use App\Models\User;
+use Illuminate\Support\Facades\DB;
+
+class RoomLifecycleService
+{
+    /**
+     * @return array{player: Player, was_reopened: bool}
+     */
+    public function reopen(Room $room, User $user): array
+    {
+        [$player, $stateVersion, $wasReopened] = DB::transaction(function () use ($room, $user): array {
+            $lockedRoom = Room::query()
+                ->lockForUpdate()
+                ->findOrFail($room->id);
+
+            abort_unless($user->id === $lockedRoom->owner_id, 403);
+
+            $wasReopened = $lockedRoom->isClosed();
+
+            if ($wasReopened) {
+                $lockedRoom->update([
+                    'current_round' => $lockedRoom->current_round + 1,
+                    'revealed_at' => null,
+                    'closed_at' => null,
+                    'last_activity_at' => now(),
+                    'state_version' => $lockedRoom->state_version + 1,
+                ]);
+            }
+
+            return [
+                $lockedRoom->players()
+                    ->where('user_id', $user->id)
+                    ->firstOrFail(),
+                $lockedRoom->state_version,
+                $wasReopened,
+            ];
+        });
+
+        if ($wasReopened) {
+            RoomStateChanged::dispatch(
+                $room->id,
+                $stateVersion,
+                RoomStateChange::RoomReopened,
+            );
+        }
+
+        return [
+            'player' => $player,
+            'was_reopened' => $wasReopened,
+        ];
+    }
+
+    public function delete(Room $room, User $user): void
+    {
+        $stateVersion = DB::transaction(function () use ($room, $user): int {
+            $lockedRoom = Room::withTrashed()
+                ->lockForUpdate()
+                ->findOrFail($room->id);
+
+            abort_if($lockedRoom->trashed(), 404);
+            abort_unless($user->id === $lockedRoom->owner_id, 403);
+
+            $lockedRoom->update([
+                'state_version' => $lockedRoom->state_version + 1,
+            ]);
+            $lockedRoom->delete();
+
+            return $lockedRoom->state_version;
+        });
+
+        RoomStateChanged::dispatch(
+            $room->id,
+            $stateVersion,
+            RoomStateChange::RoomDeleted,
+        );
+    }
+}

app/Services/Rooms/RoomPageService.php

@@ -0,0 +1,46 @@
+<?php
+
+namespace App\Services\Rooms;
+
+use App\Data\Rooms\RoomPageData;
+use App\Models\Player;
+use App\Models\Room;
+use App\Models\User;
+
+class RoomPageService
+{
+    public function __construct(
+        private readonly RoomStatisticsService $statistics,
+    ) {}
+
+    public function prepare(Room $room, Player $currentPlayer, ?User $user): RoomPageData
+    {
+        $isFavorite = $user !== null
+            && $user->favoriteRooms()->whereKey($room->id)->exists();
+
+        $room->load([
+            'players' => fn ($query) => $query
+                ->active()
+                ->select(['id', 'room_id', 'user_id', 'name', 'is_moderator', 'created_at'])
+                ->orderByDesc('is_moderator')
+                ->orderBy('created_at'),
+            'players.votes' => fn ($query) => $query
+                ->where('room_id', $room->id)
+                ->where('round', $room->current_round),
+        ]);
+
+        $currentVote = $room->players
+            ->firstWhere('id', $currentPlayer->id)
+            ?->votes
+            ->first()
+            ?->value;
+
+        return new RoomPageData(
+            room: $room,
+            currentPlayer: $currentPlayer,
+            isFavorite: $isFavorite,
+            currentVote: $currentVote,
+            statistics: $this->statistics->currentRound($room),
+        );
+    }
+}

app/Services/Rooms/RoomParticipationService.php

@@ -0,0 +1,99 @@
+<?php
+
+namespace App\Services\Rooms;
+
+use App\Enums\RoomStateChange;
+use App\Events\RoomStateChanged;
+use App\Models\Player;
+use App\Models\Room;
+use App\Models\User;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Validation\ValidationException;
+
+class RoomParticipationService
+{
+    public function findByJoinCode(string $joinCode): ?Room
+    {
+        if ($joinCode === '') {
+            return null;
+        }
+
+        return Room::query()
+            ->where('join_code', $joinCode)
+            ->first();
+    }
+
+    public function findExistingPlayer(
+        Room $room,
+        ?User $user,
+        mixed $sessionPlayerId,
+    ): ?Player {
+        if ($user !== null) {
+            return $room->players()
+                ->where('user_id', $user->id)
+                ->first();
+        }
+
+        if (! is_numeric($sessionPlayerId)) {
+            return null;
+        }
+
+        return $room->players()->find((int) $sessionPlayerId);
+    }
+
+    /**
+     * @param  array{join_code: string, player_name: string}  $data
+     * @param  array<string, mixed>  $sessionPlayerIds
+     * @return array{Room, Player}
+     */
+    public function join(array $data, ?User $user, array $sessionPlayerIds): array
+    {
+        [$room, $player] = DB::transaction(function () use ($data, $user, $sessionPlayerIds): array {
+            $room = Room::query()
+                ->where('join_code', $data['join_code'])
+                ->lockForUpdate()
+                ->firstOrFail();
+
+            if ($room->isClosed()) {
+                throw ValidationException::withMessages([
+                    'join_code' => 'Dieser Raum ist geschlossen.',
+                ]);
+            }
+
+            $player = $this->findExistingPlayer(
+                $room,
+                $user,
+                $sessionPlayerIds[$room->id] ?? null,
+            );
+
+            if ($player === null) {
+                $player = $room->players()->create([
+                    'user_id' => $user?->id,
+                    'name' => $data['player_name'],
+                    'is_moderator' => false,
+                    'last_seen_at' => now(),
+                ]);
+            } else {
+                $player->update([
+                    'last_seen_at' => now(),
+                    'inactive_at' => null,
+                ]);
+            }
+
+            $room->update([
+                'last_activity_at' => now(),
+                'state_version' => $room->state_version + 1,
+            ]);
+
+            return [$room, $player];
+        });
+
+        RoomStateChanged::dispatch(
+            $room->id,
+            $room->state_version,
+            RoomStateChange::PlayerJoined,
+        );
+
+        return [$room, $player];
+    }
+}

app/Services/Rooms/RoomStatisticsService.php

@@ -0,0 +1,45 @@
+<?php
+
+namespace App\Services\Rooms;
+
+use App\Models\Room;
+
+class RoomStatisticsService
+{
+    /**
+     * @return array{average: string|null, median: string|null}|null
+     */
+    public function currentRound(Room $room): ?array
+    {
+        if ($room->revealed_at === null) {
+            return null;
+        }
+
+        $values = [];
+
+        foreach ($room->players as $player) {
+            $vote = $player->votes->first();
+
+            if ($vote !== null && is_numeric($vote->value)) {
+                $values[] = (float) $vote->value;
+            }
+        }
+
+        sort($values, SORT_NUMERIC);
+        $count = count($values);
+
+        if ($count === 0) {
+            return ['average' => null, 'median' => null];
+        }
+
+        $middle = intdiv($count, 2);
+        $median = $count % 2 === 1
+            ? $values[$middle]
+            : ($values[$middle - 1] + $values[$middle]) / 2;
+
+        return [
+            'average' => number_format(array_sum($values) / $count, 2, ',', ''),
+            'median' => number_format($median, 2, ',', ''),
+        ];
+    }
+}

app/Services/Rooms/RoundService.php

@@ -0,0 +1,115 @@
+<?php
+
+namespace App\Services\Rooms;
+
+use App\Enums\RoomStateChange;
+use App\Events\RoomStateChanged;
+use App\Models\Room;
+use App\Models\Vote;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Validation\ValidationException;
+
+class RoundService
+{
+    public function reset(Room $room): void
+    {
+        $stateVersion = DB::transaction(function () use ($room): int {
+            $lockedRoom = Room::query()
+                ->lockForUpdate()
+                ->findOrFail($room->id);
+
+            $this->ensureRoomIsOpen($lockedRoom);
+
+            Vote::query()
+                ->where('room_id', $lockedRoom->id)
+                ->where('round', $lockedRoom->current_round)
+                ->delete();
+
+            $lockedRoom->update([
+                'revealed_at' => null,
+                'last_activity_at' => now(),
+                'state_version' => $lockedRoom->state_version + 1,
+            ]);
+
+            return $lockedRoom->state_version;
+        });
+
+        RoomStateChanged::dispatch(
+            $room->id,
+            $stateVersion,
+            RoomStateChange::VotesReset,
+        );
+    }
+
+    public function reveal(Room $room): void
+    {
+        $stateVersion = DB::transaction(function () use ($room): int {
+            $lockedRoom = Room::query()
+                ->lockForUpdate()
+                ->findOrFail($room->id);
+
+            $this->ensureRoomIsOpen($lockedRoom);
+
+            if ($lockedRoom->revealed_at !== null) {
+                throw ValidationException::withMessages([
+                    'room' => 'Die Karten sind bereits aufgedeckt.',
+                ]);
+            }
+
+            $lockedRoom->update([
+                'revealed_at' => now(),
+                'last_activity_at' => now(),
+                'state_version' => $lockedRoom->state_version + 1,
+            ]);
+
+            return $lockedRoom->state_version;
+        });
+
+        RoomStateChanged::dispatch(
+            $room->id,
+            $stateVersion,
+            RoomStateChange::CardsRevealed,
+        );
+    }
+
+    public function startNext(Room $room): void
+    {
+        $stateVersion = DB::transaction(function () use ($room): int {
+            $lockedRoom = Room::query()
+                ->lockForUpdate()
+                ->findOrFail($room->id);
+
+            $this->ensureRoomIsOpen($lockedRoom);
+
+            if ($lockedRoom->revealed_at === null) {
+                throw ValidationException::withMessages([
+                    'room' => 'Die aktuelle Runde muss zuerst aufgedeckt werden.',
+                ]);
+            }
+
+            $lockedRoom->update([
+                'current_round' => $lockedRoom->current_round + 1,
+                'revealed_at' => null,
+                'last_activity_at' => now(),
+                'state_version' => $lockedRoom->state_version + 1,
+            ]);
+
+            return $lockedRoom->state_version;
+        });
+
+        RoomStateChanged::dispatch(
+            $room->id,
+            $stateVersion,
+            RoomStateChange::NextRound,
+        );
+    }
+
+    private function ensureRoomIsOpen(Room $room): void
+    {
+        if ($room->isClosed()) {
+            throw ValidationException::withMessages([
+                'room' => 'Dieser Raum ist geschlossen.',
+            ]);
+        }
+    }
+}

app/Services/Rooms/VoteService.php

@@ -0,0 +1,57 @@
+<?php
+
+namespace App\Services\Rooms;
+
+use App\Enums\RoomStateChange;
+use App\Events\RoomStateChanged;
+use App\Models\Player;
+use App\Models\Room;
+use App\Models\Vote;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Validation\ValidationException;
+
+class VoteService
+{
+    public function submit(Room $room, Player $player, string $value): void
+    {
+        $stateVersion = DB::transaction(function () use ($room, $player, $value): int {
+            $lockedRoom = Room::query()
+                ->lockForUpdate()
+                ->findOrFail($room->id);
+
+            if ($lockedRoom->isClosed()) {
+                throw ValidationException::withMessages([
+                    'value' => 'Dieser Raum ist geschlossen.',
+                ]);
+            }
+
+            if ($lockedRoom->revealed_at !== null) {
+                throw ValidationException::withMessages([
+                    'value' => 'Die Karten wurden bereits aufgedeckt.',
+                ]);
+            }
+
+            Vote::updateOrCreate(
+                [
+                    'room_id' => $lockedRoom->id,
+                    'player_id' => $player->id,
+                    'round' => $lockedRoom->current_round,
+                ],
+                ['value' => $value],
+            );
+
+            $lockedRoom->update([
+                'last_activity_at' => now(),
+                'state_version' => $lockedRoom->state_version + 1,
+            ]);
+
+            return $lockedRoom->state_version;
+        });
+
+        RoomStateChanged::dispatch(
+            $room->id,
+            $stateVersion,
+            RoomStateChange::VoteChanged,
+        );
+    }
+}

app/Services/Settings/SecuritySettingsService.php

@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Services\Settings;
+
+use App\Models\User;
+use Illuminate\Database\Eloquent\Collection;
+use Laravel\Passkeys\Passkey;
+
+class SecuritySettingsService
+{
+    /**
+     * @return Collection<int, Passkey>
+     */
+    public function passkeys(User $user, bool $enabled): Collection
+    {
+        if (! $enabled) {
+            return new Collection;
+        }
+
+        return $user->passkeys()
+            ->select(['id', 'user_id', 'name', 'credential', 'created_at', 'last_used_at'])
+            ->latest()
+            ->get();
+    }
+}

database/migrations/2026_08_20_161538_add_inactive_to_user_table.php

@@ -0,0 +1,28 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('players', function (Blueprint $table) {
+            $table->timestamp('inactive_at')->nullable()->after('last_seen_at');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('players', function (Blueprint $table) {
+            $table->dropColumn('inactive_at');
+        });
+    }
+};

database/migrations/2026_08_20_165833_user_room_favorite.php

@@ -0,0 +1,29 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('user_room_favorites', function (Blueprint $table) {
+            $table->foreignUuid('room_id')->constrained()->cascadeOnDelete();
+            $table->foreignId('user_id')->constrained()->cascadeOnDelete();
+            $table->timestamps();
+            $table->unique(['room_id', 'user_id']);
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('user_room_favorites');
+    }
+};

package-lock.json

@@ -12,7 +12,10 @@
                 "@vueuse/core": "^12.8.2",
                 "class-variance-authority": "^0.7.1",
                 "clsx": "^2.1.1",
+                "laravel-echo": "^2.4.0",
                 "laravel-vite-plugin": "^3.0.0",
+                "material-icons": "^1.13.14",
+                "pusher-js": "^8.6.0",
                 "reka-ui": "^2.9.8",
                 "tailwind-merge": "^3.2.0",
                 "tailwindcss": "^4.1.1",
@@ -5022,6 +5025,27 @@
                 "json-buffer": "3.0.1"
             }
         },
+        "node_modules/laravel-echo": {
+            "version": "2.4.0",
+            "resolved": "https://registry.npmjs.org/laravel-echo/-/laravel-echo-2.4.0.tgz",
+            "integrity": "sha512-8w0fAGSNt6THfbNyqdKc29bhfeNpJg13CGx2fcLgoX0/f0mTJm/AIkYTTakmcr9pc42ZB68cSoE00j4/xNaFGQ==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=20"
+            },
+            "peerDependencies": {
+                "pusher-js": "*",
+                "socket.io-client": "*"
+            },
+            "peerDependenciesMeta": {
+                "pusher-js": {
+                    "optional": true
+                },
+                "socket.io-client": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/laravel-precognition": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/laravel-precognition/-/laravel-precognition-2.0.0.tgz",
@@ -5434,6 +5458,12 @@
                 "@jridgewell/sourcemap-codec": "^1.5.5"
             }
         },
+        "node_modules/material-icons": {
+            "version": "1.13.14",
+            "resolved": "https://registry.npmjs.org/material-icons/-/material-icons-1.13.14.tgz",
+            "integrity": "sha512-kZOfc7xCC0rAT8Q3DQixYAeT+tBqZnxkseQtp2bxBxz7q5pMAC+wmit7vJn1g/l7wRU+HEPq23gER4iPjGs5Cg==",
+            "license": "Apache-2.0"
+        },
         "node_modules/math-intrinsics": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -6068,6 +6098,15 @@
                 "node": ">=6"
             }
         },
+        "node_modules/pusher-js": {
+            "version": "8.6.0",
+            "resolved": "https://registry.npmjs.org/pusher-js/-/pusher-js-8.6.0.tgz",
+            "integrity": "sha512-wShJPfCS/kYkCBVzVW67wa9cnQIgHTszEK2XHNrFkOgGruuGw081aERAxfRjfdFU+WcIt8x6dvbwkTW4iZuQ8Q==",
+            "license": "MIT",
+            "dependencies": {
+                "tweetnacl": "^1.0.3"
+            }
+        },
         "node_modules/queue-microtask": {
             "version": "1.2.3",
             "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -6954,6 +6993,12 @@
                 "url": "https://github.com/sponsors/Wombosvideo"
             }
         },
+        "node_modules/tweetnacl": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-1.0.3.tgz",
+            "integrity": "sha512-6rt+RN7aOi1nGMyC4Xa5DdYiukl2UWCbcJft7YhxReBGQD7OAM8Pbxw6YMo4r2diNEA8FEmu32YOn9rhaiE5yw==",
+            "license": "Unlicense"
+        },
         "node_modules/type-check": {
             "version": "0.4.0",
             "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",

package.json

@@ -43,6 +43,7 @@
         "clsx": "^2.1.1",
         "laravel-echo": "^2.4.0",
         "laravel-vite-plugin": "^3.0.0",
+        "material-icons": "^1.13.14",
         "pusher-js": "^8.6.0",
         "reka-ui": "^2.9.8",
         "tailwind-merge": "^3.2.0",

resources/js/app.ts

@@ -2,6 +2,7 @@ import { createInertiaApp } from '@inertiajs/vue3';
 import { initializeTheme } from '@/composables/useAppearance';
 import { initializeFlashToast } from '@/lib/flashToast';
 import PublicLayout from './layouts/PublicLayout.vue';
+import 'material-icons/iconfont/material-icons.css';
 
 const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
 

resources/js/components/FavoriteRooms.vue

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

resources/js/components/MyRooms.vue

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

resources/js/components/dashboard/DashboardRoomCard.vue

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

resources/js/components/rooms/RoomHeader.vue

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

resources/js/components/rooms/RoomModeratorControls.vue

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

resources/js/components/rooms/RoomRetentionNotice.vue

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

resources/js/components/rooms/RoomSeat.vue

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

resources/js/components/rooms/RoomTable.vue

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

resources/js/components/rooms/RoomVoteDeck.vue

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

resources/js/pages/Dashboard.vue

@@ -1,27 +1,10 @@
 <script setup lang="ts">
-import { Head, Link, useForm } from '@inertiajs/vue3';
+import { Head } from '@inertiajs/vue3';
-import { CalendarClock, DoorOpen, Plus, Trash2, Users } from '@lucide/vue';
-import { ref } from 'vue';
-import {
-    Dialog,
-    DialogContent,
-    DialogDescription,
-    DialogFooter,
-    DialogHeader,
-    DialogTitle,
-} from '@/components/ui/dialog';
-import { dashboard } from '@/routes';
-import { create, destroy, reopen, show } from '@/routes/room';
 
-type OwnedRoom = {
+import FavoriteRooms from '@/components/FavoriteRooms.vue';
-    id: string;
+import MyRooms from '@/components/MyRooms.vue';
-    title: string | null;
+import { dashboard } from '@/routes';
-    join_code: string;
+import type { DashboardPageProps } from '@/types/dashboard';
-    current_round: number;
-    players_count: number;
-    last_activity_at: string | null;
-    closed_at: string | null;
-};
 
 defineOptions({
     layout: {
@@ -34,205 +17,20 @@ defineOptions({
     },
 });
 
-defineProps<{
+const props = defineProps<DashboardPageProps>();
-    rooms: OwnedRoom[];
-}>();
-
-const selectedRoom = ref<OwnedRoom | null>(null);
-const deleteForm = useForm({});
-
-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';
-}
-
-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>
     <Head title="Meine Räume" />
 
-    <div
+    <main
-        class="flex min-h-[calc(100svh-4rem)] flex-1 flex-col gap-6 overflow-x-auto bg-slate-900 p-4 text-slate-100"
+        class="flex min-h-[calc(100svh-4rem)] flex-1 flex-col gap-10 overflow-x-auto bg-slate-900 p-4 text-slate-100"
     >
-        <div
+        <MyRooms :rooms="props.rooms" />
-            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
+        <FavoriteRooms
-                :href="create()"
+            v-if="props.favoriteRooms.length > 0"
-                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"
+            :favorite-rooms="props.favoriteRooms"
-            >
+        />
-                <Plus class="size-4" />
+    </main>
-                Raum erstellen
-            </Link>
-        </div>
-
-        <div
-            v-if="rooms.length > 0"
-            class="grid gap-4 md:grid-cols-2 xl:grid-cols-3"
-        >
-            <article
-                v-for="room in rooms"
-                :key="room.id"
-                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
-                    </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 class="mt-6 flex flex-wrap items-center gap-3">
-                    <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>
-                </div>
-            </article>
-        </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>
-    </div>
 </template>

resources/js/pages/rooms/Create.vue

@@ -1,20 +1,10 @@
 <script setup lang="ts">
 import { Head, useForm } from '@inertiajs/vue3';
+
 import { store } from '@/routes/room';
+import type { CreateRoomPageProps } from '@/types/room';
 
-type Deck = {
+const props = defineProps<CreateRoomPageProps>();
-    id: number;
-    name: string;
-    cards: Array<{
-        key: string;
-        label: string;
-    }>;
-};
-
-const props = defineProps<{
-    decks: Deck[];
-    defaultPlayerName: string | null;
-}>();
 
 const form = useForm({
     title: '',

resources/js/pages/rooms/Join.vue

@@ -1,17 +1,12 @@
 <script setup lang="ts">
 import { Head, Link, useForm, usePage } from '@inertiajs/vue3';
 import { computed } from 'vue';
+
 import { dashboard } from '@/routes';
 import { code } from '@/routes/room';
+import type { JoinRoomPageProps } from '@/types/room';
 
-const props = defineProps<{
+const props = defineProps<JoinRoomPageProps>();
-    join_code?: string;
-    defaultPlayerName: string | null;
-    closedRoom: {
-        title: string | null;
-        join_code: string;
-    } | null;
-}>();
 
 const page = usePage();
 const isAuthenticated = computed(() => page.props.auth.user !== null);

resources/js/pages/rooms/Show.vue

@@ -1,75 +1,22 @@
 <script setup lang="ts">
-import { Head, Link, useForm, usePage, usePoll } from '@inertiajs/vue3';
+import { Head, usePage, usePoll } from '@inertiajs/vue3';
-import {
+import { computed } from 'vue';
-    Check,
-    CircleUserRound,
-    Copy,
-    Crown,
-    Eye,
-    RotateCcw,
-    Trash2,
-    X,
-} from '@lucide/vue';
-import { computed, ref, watch } from 'vue';
 
-import { usePaperBallToss } from '@/composables/usePaperBallToss';
+import RoomHeader from '@/components/rooms/RoomHeader.vue';
+import RoomRetentionNotice from '@/components/rooms/RoomRetentionNotice.vue';
+import RoomTable from '@/components/rooms/RoomTable.vue';
+import RoomVoteDeck from '@/components/rooms/RoomVoteDeck.vue';
 import { useRoomRealtime } from '@/composables/useRoomRealtime';
-import { login, register } from '@/routes';
+import type { RoomPageProps } from '@/types/room';
-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';
 
-const props = defineProps<{
+const props = defineProps<RoomPageProps>();
-    room: {
-        id: string;
-        title: string | null;
-        join_code: string;
-        current_round: number;
-        revealed: boolean;
-        state_version: number;
-        statistics: {
-            average: string | null;
-            median: string | null;
-        } | null;
-        deck: {
-            name: string;
-            cards: PokerCard[];
-        };
-        players: RoomPlayer[];
-    };
-    currentPlayer: {
-        id: number;
-        name: string;
-        is_moderator: boolean;
-        current_vote: string | null;
-    };
-}>();
 
 const page = usePage();
-const roomNotice = computed(
+const roomNotice = computed(() => page.props.roomNotice);
-    () =>
+const canFavorite = computed(
-        page.props.roomNotice as {
+    () => page.props.auth.user?.id != props.room.owner_id,
-            guest_retention_days: number;
-            account_retention_days: number;
-        } | null,
 );
 
-const voteForm = useForm({
-    value: props.currentPlayer.current_vote ?? '',
-});
-const revealForm = useForm<{ room?: string }>({});
-const nextRoundForm = useForm<{ room?: string }>({});
-const resetForm = useForm<{ room?: string }>({});
-const copied = ref(false);
-const roomNoticeDismissed = ref(false);
-const gameBoard = ref<HTMLElement | null>(null);
-const { activePaperBalls, hitPlayerIds, throwingAtPlayerId, throwPaperBall } =
-    usePaperBallToss({
-        roomId: () => props.room.id,
-        currentPlayerId: () => props.currentPlayer.id,
-        board: gameBoard,
-    });
-
 useRoomRealtime(
     () => props.room.id,
     () => props.room.state_version,
@@ -78,118 +25,6 @@ useRoomRealtime(
 usePoll(30_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 = 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,
-        };
-    });
-});
-
-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: RoomPlayer): boolean {
-    return player.id === props.currentPlayer.id;
-}
-
-function playerVote(player: RoomPlayer): string | null {
-    if (isCurrentPlayer(player)) {
-        return props.currentPlayer.current_vote;
-    }
-
-    return player.vote;
-}
 </script>
 
 <template>
@@ -198,733 +33,23 @@ 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
+        <RoomRetentionNotice v-if="roomNotice" :notice="roomNotice" />
-            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
+        <RoomHeader
-                class="flex shrink-0 items-center gap-3 font-semibold sm:ml-auto"
+            :id="room.id"
-            >
+            :title="room.title"
-                <Link :href="login()" class="underline underline-offset-4">
+            :join_code="room.join_code"
-                    Anmelden
+            :is_favorite="room.is_favorite"
-                </Link>
+            :can-favorite="canFavorite"
-                <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
+        <RoomTable :room="room" :current-player="currentPlayer" />
-            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">
-                    {{ room.title ?? 'Scrum Poker' }}
-                </h1>
-            </div>
 
-            <button
+        <RoomVoteDeck
-                type="button"
+            :room-id="room.id"
-                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"
+            :revealed="room.revealed"
-                @click="copyInviteLink"
+            :cards="room.deck.cards"
-            >
+            :current-vote="currentPlayer.current_vote"
-                <span>
+        />
-                    <span
-                        class="block text-sm tracking-[0.18em] text-slate-400"
-                    >
-                        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
-                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"
-                        >
-                            {{
-                                room.players.filter(
-                                    (player) => player.has_voted,
-                                ).length
-                            }}
-                            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>
-
-                <article
-                    v-for="player in positionedPlayers"
-                    :key="player.id"
-                    class="player-seat"
-                    :class="{
-                        'is-paper-ball-hit': hitPlayerIds.includes(player.id),
-                    }"
-                    :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(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"
-                        :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(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>
-
-                    <button
-                        v-if="!isCurrentPlayer(player)"
-                        type="button"
-                        class="throw-paper-ball"
-                        :class="{
-                            'is-throwing': throwingAtPlayerId === player.id,
-                        }"
-                        :disabled="throwingAtPlayerId !== null"
-                        :aria-label="`Papierknäuel auf ${player.name} werfen`"
-                        :title="`Papierknäuel auf ${player.name} werfen`"
-                        @click.stop="throwPaperBall(player.id)"
-                    >
-                        <span class="paper-ball-mini" aria-hidden="true"></span>
-                    </button>
-                </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;
-}
-
-.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.45;
-}
-
-.throw-paper-ball.is-throwing {
-    opacity: 1;
-}
-
-.paper-ball-mini,
-.paper-ball {
-    display: block;
-    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;
-}
-
-.paper-ball-mini {
-    width: 0.95rem;
-    height: 0.95rem;
-    transform: rotate(18deg);
-}
-
-.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 {
-    width: 100%;
-    height: 100%;
-}
-
-.player-seat.is-paper-ball-hit [data-player-avatar] {
-    animation: paper-ball-hit 380ms ease-out;
-}
-
-@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);
-    }
-}
-
-@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);
-    }
-}
-
-.player-details-above {
-    transform: translateY(calc(-100% - 4.5rem));
-}
-
-.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: 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;
-}
-
-.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;
-    }
-
-    .player-details-above {
-        transform: translateY(calc(-100% - 4rem));
-    }
-
-    .moderator-controls {
-        right: 1rem;
-        bottom: 1rem;
-    }
-
-    .reset-controls {
-        bottom: 1rem;
-        left: 1rem;
-    }
-
-    .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;
-    }
-
-    .deck-card {
-        width: 3.3rem;
-    }
-}
-
-@media (hover: none) {
-    .throw-paper-ball {
-        opacity: 0.85;
-        pointer-events: auto;
-    }
-}
-
-@media (prefers-reduced-motion: reduce) {
-    .flip-card-inner,
-    .deck-card {
-        transition: none;
-    }
-
-    .paper-ball-flight {
-        animation-duration: 1ms;
-    }
-
-    .player-seat.is-paper-ball-hit [data-player-avatar] {
-        animation: none;
-    }
-}
-</style>

resources/js/pages/settings/Security.vue

@@ -3,21 +3,15 @@ import { Form, Head } from '@inertiajs/vue3';
 import SecurityController from '@/actions/App/Http/Controllers/Settings/SecurityController';
 import Heading from '@/components/Heading.vue';
 import InputError from '@/components/InputError.vue';
-import type { Props as ManagePasskeysProps } from '@/components/ManagePasskeys.vue';
 import ManagePasskeys from '@/components/ManagePasskeys.vue';
-import type { Props as ManageTwoFactorProps } from '@/components/ManageTwoFactor.vue';
 import ManageTwoFactor from '@/components/ManageTwoFactor.vue';
 import PasswordInput from '@/components/PasswordInput.vue';
 import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
 import { edit } from '@/routes/security';
+import type { SecurityPageProps } from '@/types/settings';
 
-type Props = {
+const props = defineProps<SecurityPageProps>();
-    passwordRules: string;
-} & ManagePasskeysProps &
-    ManageTwoFactorProps;
-
-const props = defineProps<Props>();
 
 defineOptions({
     layout: {

resources/js/types/dashboard.ts

@@ -0,0 +1,28 @@
+export type DashboardRoom = {
+    id: string;
+    title: string | null;
+    join_code: string;
+    current_round: number;
+    players_count: number;
+    active_player_count: number;
+    last_activity_at: string | null;
+    closed_at: string | null;
+};
+
+export type DashboardPageProps = {
+    rooms: DashboardRoom[];
+    favoriteRooms: DashboardRoom[];
+};
+
+export type DashboardRoomCardProps = {
+    room: DashboardRoom;
+    showActions?: boolean;
+};
+
+export type OwnedRoomListProps = {
+    rooms: DashboardRoom[];
+};
+
+export type FavoriteRoomListProps = {
+    favoriteRooms: DashboardRoom[];
+};

resources/js/types/global.d.ts

@@ -1,4 +1,5 @@
 import type { Auth } from '@/types/auth';
+import type { RoomNotice } from '@/types/room';
 
 // Extend ImportMeta interface for Vite...
 declare module 'vite/client' {
@@ -18,10 +19,7 @@ declare module '@inertiajs/core' {
         sharedPageProps: {
             name: string;
             auth: Auth;
-            roomNotice: {
+            roomNotice: RoomNotice | null;
-                guest_retention_days: number;
-                account_retention_days: number;
-            } | null;
             sidebarOpen: boolean;
             [key: string]: unknown;
         };

resources/js/types/index.ts

@@ -1,4 +1,6 @@
 export * from './auth';
+export * from './dashboard';
 export * from './navigation';
 export * from './room';
+export * from './settings';
 export * from './ui';

resources/js/types/room.ts

@@ -5,14 +5,125 @@ export type PokerCard = {
     label: string;
 };
 
+export type RoomDeck = {
+    name: string;
+    cards: PokerCard[];
+};
+
+export type SelectableDeck = RoomDeck & {
+    id: number;
+};
+
+export type RoomStatistics = {
+    average: string | null;
+    median: string | null;
+};
+
 export type RoomPlayer = {
     id: number;
     name: string;
     is_moderator: boolean;
+    is_owner: boolean;
     has_voted: boolean;
     vote: string | null;
 };
 
+export type CurrentRoomPlayer = {
+    id: number;
+    name: string;
+    is_moderator: boolean;
+    current_vote: string | null;
+};
+
+export type PokerRoom = {
+    id: string;
+    title: string | null;
+    join_code: string;
+    owner_id: number | null;
+    is_favorite: boolean;
+    current_round: number;
+    revealed: boolean;
+    state_version: number;
+    statistics: RoomStatistics | null;
+    deck: RoomDeck;
+    players: RoomPlayer[];
+};
+
+export type ClosedRoom = {
+    title: string | null;
+    join_code: string;
+};
+
+export type RoomNotice = {
+    guest_retention_days: number;
+    account_retention_days: number;
+};
+
+export type RoomPageProps = {
+    room: PokerRoom;
+    currentPlayer: CurrentRoomPlayer;
+};
+
+export type CreateRoomPageProps = {
+    decks: SelectableDeck[];
+    defaultPlayerName: string | null;
+};
+
+export type JoinRoomPageProps = {
+    join_code?: string;
+    defaultPlayerName: string | null;
+    closedRoom: ClosedRoom | null;
+};
+
+export type SeatStyle = CSSProperties & {
+    '--card-x': string;
+    '--card-y': string;
+};
+
+export type PositionedRoomPlayer = RoomPlayer & {
+    isTopSeat: boolean;
+    seatStyle: SeatStyle;
+};
+
+export type RoomRetentionNoticeProps = {
+    notice: RoomNotice;
+};
+
+export type RoomHeaderProps = Pick<
+    PokerRoom,
+    'id' | 'title' | 'join_code' | 'is_favorite'
+> & {
+    canFavorite: boolean;
+};
+
+export type RoomTableProps = {
+    room: PokerRoom;
+    currentPlayer: CurrentRoomPlayer;
+};
+
+export type RoomSeatProps = {
+    player: PositionedRoomPlayer;
+    currentPlayerId: number;
+    currentVote: string | null;
+    cards: PokerCard[];
+    revealed: boolean;
+    isPaperBallHit: boolean;
+    throwDisabled: boolean;
+};
+
+export type RoomModeratorControlsProps = {
+    roomId: string;
+    revealed: boolean;
+    hasVotes: boolean;
+};
+
+export type RoomVoteDeckProps = {
+    roomId: string;
+    revealed: boolean;
+    cards: PokerCard[];
+    currentVote: string | null;
+};
+
 export type RoomStateChange =
     | 'player_joined'
     | 'vote_changed'
@@ -27,8 +138,3 @@ export type RoomStateChangedPayload = {
     version: number;
     change: RoomStateChange;
 };
-
-export type SeatStyle = CSSProperties & {
-    '--card-x': string;
-    '--card-y': string;
-};

resources/js/types/settings.ts

@@ -0,0 +1,10 @@
+import type { Passkey } from '@/types/auth';
+
+export type SecurityPageProps = {
+    canManageTwoFactor?: boolean;
+    requiresConfirmation?: boolean;
+    twoFactorEnabled?: boolean;
+    canManagePasskeys?: boolean;
+    passkeys?: Passkey[];
+    passwordRules: string;
+};

routes/console.php

@@ -1,6 +1,7 @@
 <?php
 
 use App\Jobs\CloseInactiveRooms;
+use App\Jobs\MarkInactivePlayers;
 use Illuminate\Foundation\Inspiring;
 use Illuminate\Support\Facades\Artisan;
 use Illuminate\Support\Facades\Schedule;
@@ -12,3 +13,7 @@ Artisan::command('inspire', function () {
 Schedule::job(new CloseInactiveRooms)
     ->weeklyOn(1, '02:00')
     ->withoutOverlapping();
+
+Schedule::job(new MarkInactivePlayers)
+    ->everyFiveMinutes()
+    ->withoutOverlapping();

routes/room.php

@@ -1,7 +1,10 @@
 <?php
 
+use App\Http\Controllers\FavoriteRoomController;
 use App\Http\Controllers\RoomController;
 use App\Http\Controllers\RoomEmoteController;
+use App\Http\Controllers\RoomJoinController;
+use App\Http\Controllers\RoomLifecycleController;
 use App\Http\Controllers\RoomPlayerController;
 use App\Http\Controllers\RoundController;
 use App\Http\Controllers\VoteController;
@@ -14,15 +17,17 @@ Route::bind(
 );
 
 Route::get('/room', [RoomController::class, 'create'])->name('room.create');
-Route::get('/room/join', [RoomController::class, 'join'])->name('room.join');
+Route::get('/room/join', RoomJoinController::class)->name('room.join');
 Route::post('room/join', [RoomPlayerController::class, 'join'])->name('room.code');
 Route::post('/room', [RoomController::class, 'store'])->name('room.store');
 
 Route::middleware(['auth', 'verified'])->group(function () {
-    Route::post('/rooms/{room}/reopen', [RoomController::class, 'reopen'])
+    Route::post('/rooms/{room}/reopen', [RoomLifecycleController::class, 'reopen'])
         ->name('room.reopen');
-    Route::delete('/rooms/{room}', [RoomController::class, 'destroy'])
+    Route::delete('/rooms/{room}', [RoomLifecycleController::class, 'destroy'])
         ->name('room.destroy');
+    Route::post('/rooms/{room}/favorite', FavoriteRoomController::class)
+        ->name('room.favorite');
 });
 
 Route::middleware('room.player')->group(function () {

tests/Feature/RoomFavoritesTest.php

@@ -0,0 +1,77 @@
+<?php
+
+use App\Models\Room;
+use App\Models\User;
+use Inertia\Testing\AssertableInertia as Assert;
+
+test('favorited rooms are presented on the dashboard with player counts', function () {
+    $owner = User::factory()->create();
+    $user = User::factory()->create();
+    $room = Room::create([
+        'owner_id' => $owner->id,
+        'title' => 'Favorite planning',
+        'deck_config' => [
+            'name' => 'Fibonacci',
+            'cards' => [['key' => '3', 'label' => '3']],
+        ],
+    ]);
+
+    $room->players()->create([
+        'name' => 'Active player',
+        'last_seen_at' => now(),
+    ]);
+    $room->players()->create([
+        'name' => 'Inactive player',
+        'last_seen_at' => now()->subHour(),
+        'inactive_at' => now(),
+    ]);
+
+    $this->actingAs($user)
+        ->post(route('room.favorite', $room))
+        ->assertRedirect();
+
+    $this->assertDatabaseHas('user_room_favorites', [
+        'user_id' => $user->id,
+        'room_id' => $room->id,
+    ]);
+
+    $this->get(route('dashboard'))
+        ->assertInertia(fn (Assert $page) => $page
+            ->has('favoriteRooms', 1)
+            ->where('favoriteRooms.0.id', $room->id)
+            ->where('favoriteRooms.0.players_count', 2)
+            ->where('favoriteRooms.0.active_player_count', 1));
+});
+
+test('the room resource exposes favorite and owner state', function () {
+    $owner = User::factory()->create();
+    $user = User::factory()->create();
+    $room = Room::create([
+        'owner_id' => $owner->id,
+        'title' => 'Resource planning',
+        'deck_config' => [
+            'name' => 'Fibonacci',
+            'cards' => [['key' => '3', 'label' => '3']],
+        ],
+    ]);
+    $ownerPlayer = $room->players()->create([
+        'user_id' => $owner->id,
+        'name' => 'Owner',
+        'is_moderator' => true,
+    ]);
+    $currentPlayer = $room->players()->create([
+        'user_id' => $user->id,
+        'name' => 'Participant',
+    ]);
+    $user->favoriteRooms()->attach($room);
+
+    $this->actingAs($user)
+        ->withSession(["room_players.{$room->id}" => $currentPlayer->id])
+        ->get(route('room.show', $room))
+        ->assertInertia(fn (Assert $page) => $page
+            ->where('room.is_favorite', true)
+            ->where('room.owner_id', $owner->id)
+            ->where('room.players.0.id', $ownerPlayer->id)
+            ->where('room.players.0.is_owner', true)
+            ->where('currentPlayer.id', $currentPlayer->id));
+});

tests/Feature/RoomLifecycleTest.php

@@ -171,6 +171,48 @@ test('an authenticated player can restore room access without the previous sessi
         ->assertSessionHas("room_players.{$room->id}", $moderator->id);
 });
 
+test('an active guest with a room session skips the join form', function () {
+    $room = createLifecycleRoom();
+    $player = $room->players()->create([
+        'name' => 'Guest',
+        'last_seen_at' => now(),
+    ]);
+
+    $this->withSession(["room_players.{$room->id}" => $player->id])
+        ->get(route('room.join', ['join_code' => $room->join_code]))
+        ->assertRedirect(route('room.show', $room));
+});
+
+test('an inactive guest is sent through join and reuses the existing player', function () {
+    $room = createLifecycleRoom();
+    $player = $room->players()->create([
+        'name' => 'Returning guest',
+        'last_seen_at' => now()->subHours(2),
+        'inactive_at' => now()->subHour(),
+    ]);
+    $session = ["room_players.{$room->id}" => $player->id];
+
+    $this->withSession($session)
+        ->get(route('room.show', $room))
+        ->assertRedirect(route('room.join', ['join_code' => $room->join_code]));
+
+    $this->withSession($session)
+        ->get(route('room.join', ['join_code' => $room->join_code]))
+        ->assertInertia(fn (Assert $page) => $page
+            ->component('rooms/Join')
+            ->where('defaultPlayerName', 'Returning guest'));
+
+    $this->withSession($session)
+        ->post(route('room.code'), [
+            'join_code' => $room->join_code,
+            'player_name' => 'Returning guest',
+        ])
+        ->assertRedirect(route('room.show', $room));
+
+    expect($room->players()->count())->toBe(1)
+        ->and($player->fresh()->inactive_at)->toBeNull();
+});
+
 test('showing or polling a room does not count as room activity', function () {
     $room = createLifecycleRoom(['last_activity_at' => now()->subDays(5)]);
     $moderator = $room->players()->create([