big shot

Implement instant websocket room updates

.ai/rules/index.md

@@ -0,0 +1,7 @@
+# Project Rules Index
+
+Before planning or editing, find the row whose globs match the file's path and read that rule file.
+
+| Applies to | Rule file |
+| --- | --- |
+| {app/Events/**,app/Services/Rooms/**,resources/js/composables/**} | .ai/rules/js-composables.md |

.ai/rules/js-composables.md

@@ -0,0 +1,9 @@
+---
+paths:
+  - '{app/Events/**,app/Services/Rooms/**,resources/js/composables/**}'
+---
+
+# Js Composables
+
+## Never broadcast hidden room votes
+Room table updates are delivered as synchronous WebSocket state payloads without polling or Inertia reloads. Before a round is revealed, broadcast only has_voted and keep every player's vote null; actual vote values may enter the shared payload only after reveal. State-changing commands remain server-authorized HTTP requests.

.env.example

@@ -66,6 +66,7 @@ AWS_BUCKET=
 AWS_USE_PATH_STYLE_ENDPOINT=false
 
 VITE_APP_NAME="${APP_NAME}"
+VITE_APP_VERSION=local
 
 REVERB_APP_ID=local
 REVERB_APP_KEY=local-key

.github/workflows/ci_cd.yml

@@ -49,6 +49,9 @@ jobs:
               printf -v run_attempt '%03d' "${GITHUB_RUN_ATTEMPT}"
               tag="main-${GITHUB_RUN_NUMBER}-${run_attempt}-${GITHUB_SHA:0:12}"
               environment="staging"
+              vite_app_version="staging-${GITHUB_SHA:0:12}"
+              vite_reverb_app_key="1af96b48d2ef78983e4ef281eed3a48b"
+              vite_reverb_host="scrum-poker.twyco-staging.de"
               ;;
             refs/tags/*)
               tag="${GITHUB_REF#refs/tags/}"
@@ -66,6 +69,9 @@ jobs:
               fi
 
               environment="production"
+              vite_app_version="${tag}"
+              vite_reverb_app_key="cfd9d925ff339374c04997beb90fbc32"
+              vite_reverb_host="scrum-poker.petsch-studios.de"
               ;;
             *)
               echo "Unsupported ref: ${GITHUB_REF}" >&2
@@ -77,6 +83,9 @@ jobs:
             echo "image=${image}"
             echo "tag=${tag}"
             echo "environment=${environment}"
+            echo "vite_app_version=${vite_app_version}"
+            echo "vite_reverb_app_key=${vite_reverb_app_key}"
+            echo "vite_reverb_host=${vite_reverb_host}"
           } >> "${GITHUB_OUTPUT}"
 
       - name: Log in to private registry
@@ -104,6 +113,11 @@ jobs:
           IMAGE: ${{ steps.image.outputs.image }}
           IMAGE_TAG: ${{ steps.image.outputs.tag }}
           DEPLOYMENT_ENVIRONMENT: ${{ steps.image.outputs.environment }}
+          VITE_APP_VERSION: ${{ steps.image.outputs.vite_app_version }}
+          VITE_REVERB_APP_KEY: ${{ steps.image.outputs.vite_reverb_app_key }}
+          VITE_REVERB_HOST: ${{ steps.image.outputs.vite_reverb_host }}
+          VITE_REVERB_PORT: "443"
+          VITE_REVERB_SCHEME: https
         run: |
           set -Eeuo pipefail
 
@@ -116,6 +130,11 @@ jobs:
           docker buildx build \
             --file Dockerfile \
             --target runtime \
+            --build-arg "VITE_APP_VERSION=${VITE_APP_VERSION}" \
+            --build-arg "VITE_REVERB_APP_KEY=${VITE_REVERB_APP_KEY}" \
+            --build-arg "VITE_REVERB_HOST=${VITE_REVERB_HOST}" \
+            --build-arg "VITE_REVERB_PORT=${VITE_REVERB_PORT}" \
+            --build-arg "VITE_REVERB_SCHEME=${VITE_REVERB_SCHEME}" \
             --label "org.opencontainers.image.created=$(date -u +%Y-%m-%dT%H:%M:%SZ)" \
             --label "org.opencontainers.image.revision=${GITHUB_SHA}" \
             --label "org.opencontainers.image.source=${GITHUB_SERVER_URL}/${GITHUB_REPOSITORY}" \

Dockerfile

@@ -51,6 +51,18 @@ WORKDIR /var/www
 
 FROM php_base AS build
 
+ARG VITE_APP_VERSION=local
+ARG VITE_REVERB_APP_KEY
+ARG VITE_REVERB_HOST
+ARG VITE_REVERB_PORT
+ARG VITE_REVERB_SCHEME
+
+ENV VITE_APP_VERSION=${VITE_APP_VERSION} \
+    VITE_REVERB_APP_KEY=${VITE_REVERB_APP_KEY} \
+    VITE_REVERB_HOST=${VITE_REVERB_HOST} \
+    VITE_REVERB_PORT=${VITE_REVERB_PORT} \
+    VITE_REVERB_SCHEME=${VITE_REVERB_SCHEME}
+
 COPY --from=node_binary /usr/local/ /usr/local/
 COPY . /var/www
 

app/Events/PaperBallThrown.php

@@ -17,6 +17,7 @@ class PaperBallThrown implements ShouldBroadcastNow
         public readonly string $roomId,
         public readonly int $fromPlayerId,
         public readonly int $targetPlayerId,
+        public readonly int $chargeLevel,
     ) {}
 
     public function broadcastOn(): Channel
@@ -30,7 +31,7 @@ class PaperBallThrown implements ShouldBroadcastNow
     }
 
     /**
-     * @return array{id: string, from_player_id: int, target_player_id: int}
+     * @return array{id: string, from_player_id: int, target_player_id: int, charge_level: int}
      */
     public function broadcastWith(): array
     {
@@ -38,6 +39,7 @@ class PaperBallThrown implements ShouldBroadcastNow
             'id' => $this->id,
             'from_player_id' => $this->fromPlayerId,
             'target_player_id' => $this->targetPlayerId,
+            'charge_level' => $this->chargeLevel,
         ];
     }
 }

app/Events/RoomStateChanged.php

@@ -5,18 +5,22 @@ namespace App\Events;
 use App\Enums\RoomStateChange;
 use Illuminate\Broadcasting\Channel;
 use Illuminate\Broadcasting\InteractsWithSockets;
-use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
+use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow;
 use Illuminate\Foundation\Events\Dispatchable;
 use Illuminate\Queue\SerializesModels;
 
-class RoomStateChanged implements ShouldBroadcast
+class RoomStateChanged implements ShouldBroadcastNow
 {
     use Dispatchable, InteractsWithSockets, SerializesModels;
 
+    /**
+     * @param  array<string, mixed>|null  $state
+     */
     public function __construct(
         public readonly string $roomId,
         public readonly int $version,
         public readonly RoomStateChange $change,
+        public readonly ?array $state = null,
     ) {}
 
     public function broadcastOn(): Channel
@@ -30,13 +34,14 @@ class RoomStateChanged implements ShouldBroadcast
     }
 
     /**
-     * @return array{version: int, change: string}
+     * @return array{version: int, change: string, state: array<string, mixed>|null}
      */
     public function broadcastWith(): array
     {
         return [
             'version' => $this->version,
             'change' => $this->change->value,
+            'state' => $this->state,
         ];
     }
 }

app/Http/Controllers/RoomEmoteController.php

@@ -27,6 +27,7 @@ class RoomEmoteController extends Controller
             $room,
             $player,
             (int) $request->validated('target_player_id'),
+            (int) ($request->validated('charge_percentage') ?? 0),
         );
 
         return response()->noContent();

app/Http/Controllers/RoundController.php

@@ -5,8 +5,8 @@ namespace App\Http\Controllers;
 use App\Models\Player;
 use App\Models\Room;
 use App\Services\Rooms\RoundService;
-use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
+use Illuminate\Http\Response;
 
 class RoundController extends Controller
 {
@@ -14,28 +14,28 @@ class RoundController extends Controller
         private readonly RoundService $rounds,
     ) {}
 
-    public function reset(Request $request, Room $room): RedirectResponse
+    public function reset(Request $request, Room $room): Response
     {
         $this->ensureModerator($request, $room);
         $this->rounds->reset($room);
 
-        return back();
+        return response()->noContent();
     }
 
-    public function reveal(Request $request, Room $room): RedirectResponse
+    public function reveal(Request $request, Room $room): Response
     {
         $this->ensureModerator($request, $room);
         $this->rounds->reveal($room);
 
-        return back();
+        return response()->noContent();
     }
 
-    public function nextRound(Request $request, Room $room): RedirectResponse
+    public function nextRound(Request $request, Room $room): Response
     {
         $this->ensureModerator($request, $room);
         $this->rounds->startNext($room);
 
-        return back();
+        return response()->noContent();
     }
 
     private function ensureModerator(Request $request, Room $room): void

app/Http/Controllers/VoteController.php

@@ -6,7 +6,7 @@ use App\Http\Requests\SubmitVoteRequest;
 use App\Models\Player;
 use App\Models\Room;
 use App\Services\Rooms\VoteService;
-use Illuminate\Http\RedirectResponse;
+use Illuminate\Http\Response;
 
 class VoteController extends Controller
 {
@@ -17,7 +17,7 @@ class VoteController extends Controller
     public function store(
         SubmitVoteRequest $request,
         Room $room,
-    ): RedirectResponse {
+    ): Response {
         $player = $request->attributes->get('currentPlayer');
 
         abort_unless(
@@ -32,6 +32,6 @@ class VoteController extends Controller
             $request->validated('value'),
         );
 
-        return back();
+        return response()->noContent();
     }
 }

app/Http/Requests/ThrowPaperBallRequest.php

@@ -19,6 +19,7 @@ class ThrowPaperBallRequest extends FormRequest
     {
         return [
             'target_player_id' => ['required', 'integer'],
+            'charge_percentage' => ['sometimes', 'integer', 'between:0,300'],
         ];
     }
 }

app/Services/Rooms/RoomEmoteService.php

@@ -11,8 +11,12 @@ use Illuminate\Validation\ValidationException;
 
 class RoomEmoteService
 {
-    public function throwPaperBall(Room $room, Player $player, int $targetPlayerId): void
+    public function throwPaperBall(
-    {
+        Room $room,
+        Player $player,
+        int $targetPlayerId,
+        int $chargePercentage,
+    ): void {
         if ($targetPlayerId === $player->id) {
             throw ValidationException::withMessages([
                 'target_player_id' => 'Du kannst dich nicht selbst abwerfen.',
@@ -39,11 +43,19 @@ class RoomEmoteService
 
         RateLimiter::hit($rateLimitKey, 10);
 
+        $chargeLevel = match (true) {
+            $chargePercentage >= 300 => 3,
+            $chargePercentage >= 200 => 2,
+            $chargePercentage >= 100 => 1,
+            default => 0,
+        };
+
         PaperBallThrown::dispatch(
             Str::uuid()->toString(),
             $room->id,
             $player->id,
             $targetPlayerId,
+            $chargeLevel,
         );
     }
 }

app/Services/Rooms/RoomLifecycleService.php

@@ -11,6 +11,10 @@ use Illuminate\Support\Facades\DB;
 
 class RoomLifecycleService
 {
+    public function __construct(
+        private readonly RoomRealtimeStateService $realtimeState,
+    ) {}
+
     /**
      * @return array{player: Player, was_reopened: bool}
      */
@@ -49,6 +53,7 @@ class RoomLifecycleService
                 $room->id,
                 $stateVersion,
                 RoomStateChange::RoomReopened,
+                $this->realtimeState->for($room),
             );
         }
 

app/Services/Rooms/RoomParticipationService.php

@@ -12,6 +12,10 @@ use Illuminate\Validation\ValidationException;
 
 class RoomParticipationService
 {
+    public function __construct(
+        private readonly RoomRealtimeStateService $realtimeState,
+    ) {}
+
     public function findByJoinCode(string $joinCode): ?Room
     {
         if ($joinCode === '') {
@@ -92,6 +96,7 @@ class RoomParticipationService
             $room->id,
             $room->state_version,
             RoomStateChange::PlayerJoined,
+            $this->realtimeState->for($room),
         );
 
         return [$room, $player];

app/Services/Rooms/RoomRealtimeStateService.php

@@ -0,0 +1,64 @@
+<?php
+
+namespace App\Services\Rooms;
+
+use App\Models\Room;
+
+class RoomRealtimeStateService
+{
+    public function __construct(
+        private readonly RoomStatisticsService $statistics,
+    ) {}
+
+    /**
+     * @return array{
+     *     current_round: int,
+     *     revealed: bool,
+     *     state_version: int,
+     *     statistics: array{average: string|null, median: string|null}|null,
+     *     players: array<int, array{
+     *         id: int,
+     *         name: string,
+     *         is_moderator: bool,
+     *         is_owner: bool,
+     *         has_voted: bool,
+     *         vote: string|null
+     *     }>
+     * }
+     */
+    public function for(Room $room): array
+    {
+        $room->refresh();
+        $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),
+        ]);
+
+        return [
+            'current_round' => $room->current_round,
+            'revealed' => $room->revealed_at !== null,
+            'state_version' => $room->state_version,
+            'statistics' => $this->statistics->currentRound($room),
+            'players' => $room->players
+                ->map(function ($player) use ($room): array {
+                    $vote = $player->votes->first();
+
+                    return [
+                        'id' => $player->id,
+                        'name' => $player->name,
+                        'is_moderator' => $player->is_moderator,
+                        'is_owner' => $player->user_id === $room->owner_id,
+                        'has_voted' => $vote !== null,
+                        'vote' => $room->revealed_at !== null ? $vote?->value : null,
+                    ];
+                })
+                ->all(),
+        ];
+    }
+}

app/Services/Rooms/RoundService.php

@@ -11,6 +11,10 @@ use Illuminate\Validation\ValidationException;
 
 class RoundService
 {
+    public function __construct(
+        private readonly RoomRealtimeStateService $realtimeState,
+    ) {}
+
     public function reset(Room $room): void
     {
         $stateVersion = DB::transaction(function () use ($room): int {
@@ -38,6 +42,7 @@ class RoundService
             $room->id,
             $stateVersion,
             RoomStateChange::VotesReset,
+            $this->realtimeState->for($room),
         );
     }
 
@@ -69,6 +74,7 @@ class RoundService
             $room->id,
             $stateVersion,
             RoomStateChange::CardsRevealed,
+            $this->realtimeState->for($room),
         );
     }
 
@@ -101,6 +107,7 @@ class RoundService
             $room->id,
             $stateVersion,
             RoomStateChange::NextRound,
+            $this->realtimeState->for($room),
         );
     }
 

app/Services/Rooms/VoteService.php

@@ -12,6 +12,10 @@ use Illuminate\Validation\ValidationException;
 
 class VoteService
 {
+    public function __construct(
+        private readonly RoomRealtimeStateService $realtimeState,
+    ) {}
+
     public function submit(Room $room, Player $player, string $value): void
     {
         $stateVersion = DB::transaction(function () use ($room, $player, $value): int {
@@ -52,6 +56,7 @@ class VoteService
             $room->id,
             $stateVersion,
             RoomStateChange::VoteChanged,
+            $this->realtimeState->for($room),
         );
     }
 }

resources/js/components/AppVersion.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+const appVersion = import.meta.env.VITE_APP_VERSION?.trim() || 'local';
+</script>
+
+<template>
+    <span
+        class="pointer-events-none fixed bottom-2 left-2 z-50 font-mono text-[10px] text-slate-400/70 select-none"
+        :aria-label="`Version ${appVersion}`"
+    >
+        {{ appVersion }}
+    </span>
+</template>

resources/js/components/rooms/RoomHeader.vue

@@ -3,10 +3,12 @@ import { Link } from '@inertiajs/vue3';
 import { Check, Copy } from '@lucide/vue';
 import { ref } from 'vue';
 
+import { Checkbox } from '@/components/ui/checkbox';
 import { favorite } from '@/routes/room';
-import type { RoomHeaderProps } from '@/types/room';
+import type { RoomHeaderEmits, RoomHeaderProps } from '@/types/room';
 
 const props = defineProps<RoomHeaderProps>();
+const emit = defineEmits<RoomHeaderEmits>();
 
 const copied = ref(false);
 
@@ -24,7 +26,7 @@ async function copyInviteLink(): Promise<void> {
 
 <template>
     <header
-        class="mx-auto flex max-w-6xl flex-col gap-4 sm:flex-row sm:items-center sm:justify-between"
+        class="mx-auto flex w-full 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">
@@ -45,21 +47,39 @@ async function copyInviteLink(): Promise<void> {
             </Link>
         </div>
 
-        <button
+        <div class="flex flex-col items-end gap-2">
-            type="button"
+            <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"
+                type="button"
-            @click="copyInviteLink"
+                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 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cyan-300"
-        >
+                @click="copyInviteLink"
-            <span>
+            >
-                <span class="block text-sm tracking-[0.18em] text-slate-400">
+                <span>
-                    Raumcode
+                    <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>
-                <strong class="font-mono text-lg tracking-[0.2em]">
+                <Check v-if="copied" class="size-5 text-emerald-300" />
-                    {{ join_code }}
+                <Copy v-else class="size-5 text-slate-300" />
-                </strong>
+            </button>
-            </span>
+
-            <Check v-if="copied" class="size-5 text-emerald-300" />
+            <label
-            <Copy v-else class="size-5 text-slate-300" />
+                for="presenter-mode"
-        </button>
+                class="flex cursor-pointer items-center gap-2 text-sm text-slate-300"
+            >
+                <Checkbox
+                    id="presenter-mode"
+                    :model-value="presenterMode"
+                    @update:model-value="
+                        emit('update:presenterMode', $event === true)
+                    "
+                />
+                <span>Präsentatormodus</span>
+            </label>
+        </div>
     </header>
 </template>

resources/js/components/rooms/RoomModeratorControls.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useForm } from '@inertiajs/vue3';
+import { useHttp } from '@inertiajs/vue3';
 import { Eye, RotateCcw, Trash2 } from '@lucide/vue';
 
 import { nextRound, reset as resetRound, reveal } from '@/routes/room';
@@ -7,26 +7,29 @@ import type { RoomModeratorControlsProps } from '@/types/room';
 
 const props = defineProps<RoomModeratorControlsProps>();
 
-const revealForm = useForm<{ room?: string }>({});
+const revealRequest = useHttp<{ room?: string }>(
-const nextRoundForm = useForm<{ room?: string }>({});
+    () => reveal(props.roomId),
-const resetForm = useForm<{ room?: string }>({});
+    {},
+);
+const nextRoundRequest = useHttp<{ room?: string }>(
+    () => nextRound(props.roomId),
+    {},
+);
+const resetRequest = useHttp<{ room?: string }>(
+    () => resetRound(props.roomId),
+    {},
+);
 
 function revealCards(): void {
-    revealForm.submit(reveal(props.roomId), {
+    void revealRequest.submit();
-        preserveScroll: true,
-    });
 }
 
 function startNextRound(): void {
-    nextRoundForm.submit(nextRound(props.roomId), {
+    void nextRoundRequest.submit();
-        preserveScroll: true,
-    });
 }
 
 function resetVotes(): void {
-    resetForm.submit(resetRound(props.roomId), {
+    void resetRequest.submit();
-        preserveScroll: true,
-    });
 }
 </script>
 
@@ -35,7 +38,7 @@ function resetVotes(): void {
         <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"
+            :disabled="resetRequest.processing || !hasVotes"
             @click="resetVotes"
         >
             <Trash2 class="size-4" />
@@ -45,18 +48,18 @@ function resetVotes(): void {
 
     <div class="moderator-controls">
         <p
-            v-if="revealForm.errors.room || nextRoundForm.errors.room"
+            v-if="revealRequest.errors.room || nextRoundRequest.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 }}
+            {{ revealRequest.errors.room ?? nextRoundRequest.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"
+            :disabled="revealRequest.processing"
             @click="revealCards"
         >
             <Eye class="size-4" />
@@ -67,7 +70,7 @@ function resetVotes(): void {
             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"
+            :disabled="nextRoundRequest.processing"
             @click="startNextRound"
         >
             <RotateCcw class="size-4" />
@@ -106,4 +109,24 @@ function resetVotes(): void {
         left: 1rem;
     }
 }
+
+@media (min-width: 768px) and (max-height: 800px) {
+    .moderator-controls,
+    .reset-controls {
+        bottom: 0.75rem;
+    }
+
+    .moderator-controls {
+        right: 0.75rem;
+    }
+
+    .reset-controls {
+        left: 0.75rem;
+    }
+
+    button {
+        padding: 0.5rem 0.75rem;
+        font-size: 0.875rem;
+    }
+}
 </style>

resources/js/components/rooms/RoomSeat.vue

@@ -1,14 +1,181 @@
 <script setup lang="ts">
 import { CircleUserRound, Crown } from '@lucide/vue';
+import { computed, onBeforeUnmount, ref } from 'vue';
+import type { CSSProperties } from 'vue';
 
 import type { RoomSeatProps } from '@/types/room';
 
 const props = defineProps<RoomSeatProps>();
 
 const emit = defineEmits<{
-    throwPaperBall: [playerId: number];
+    throwPaperBall: [playerId: number, chargePercentage: number];
 }>();
 
+const MAX_CHARGE_PERCENTAGE = 300;
+const CHARGE_DURATION = 3_000;
+const chargePercentage = ref(0);
+const chargeStartedAt = ref<number | null>(null);
+let chargeAnimationFrame: number | null = null;
+let ignoreClickTimer: number | null = null;
+let ignoreNextClick = false;
+
+const isCharging = computed(() => chargeStartedAt.value !== null);
+const seatStyle = computed<CSSProperties>(() => ({
+    ...props.player.seatStyle,
+    '--paper-ball-knockback-x': `${props.paperBallKnockback.x}px`,
+    '--paper-ball-knockback-y': `${props.paperBallKnockback.y}px`,
+}));
+
+function updateCharge(timestamp: number): void {
+    if (chargeStartedAt.value === null) {
+        return;
+    }
+
+    chargePercentage.value = Math.min(
+        MAX_CHARGE_PERCENTAGE,
+        ((timestamp - chargeStartedAt.value) / CHARGE_DURATION) *
+            MAX_CHARGE_PERCENTAGE,
+    );
+
+    if (chargePercentage.value < MAX_CHARGE_PERCENTAGE) {
+        chargeAnimationFrame = window.requestAnimationFrame(updateCharge);
+    } else {
+        chargeAnimationFrame = null;
+    }
+}
+
+function startCharging(): void {
+    if (props.throwDisabled || chargeStartedAt.value !== null) {
+        return;
+    }
+
+    chargePercentage.value = 0;
+    chargeStartedAt.value = performance.now();
+    chargeAnimationFrame = window.requestAnimationFrame(updateCharge);
+}
+
+function stopChargeAnimation(): void {
+    if (chargeAnimationFrame !== null) {
+        window.cancelAnimationFrame(chargeAnimationFrame);
+        chargeAnimationFrame = null;
+    }
+}
+
+function resetCharge(): void {
+    stopChargeAnimation();
+    chargeStartedAt.value = null;
+    chargePercentage.value = 0;
+}
+
+function finishCharging(): void {
+    if (chargeStartedAt.value === null) {
+        return;
+    }
+
+    updateCharge(performance.now());
+
+    const releasedChargePercentage = Math.min(
+        MAX_CHARGE_PERCENTAGE,
+        Math.floor(chargePercentage.value),
+    );
+
+    resetCharge();
+    emit('throwPaperBall', props.player.id, releasedChargePercentage);
+
+    ignoreNextClick = true;
+
+    if (ignoreClickTimer !== null) {
+        window.clearTimeout(ignoreClickTimer);
+    }
+
+    ignoreClickTimer = window.setTimeout(() => {
+        ignoreNextClick = false;
+        ignoreClickTimer = null;
+    });
+}
+
+function startPointerCharge(event: PointerEvent): void {
+    if (event.button !== 0) {
+        return;
+    }
+
+    (event.currentTarget as HTMLButtonElement).setPointerCapture(
+        event.pointerId,
+    );
+    startCharging();
+}
+
+function finishPointerCharge(event: PointerEvent): void {
+    const button = event.currentTarget as HTMLButtonElement;
+
+    if (button.hasPointerCapture(event.pointerId)) {
+        button.releasePointerCapture(event.pointerId);
+    }
+
+    finishCharging();
+}
+
+function cancelPointerCharge(): void {
+    resetCharge();
+}
+
+function handleKeyDown(event: KeyboardEvent): void {
+    if (!['Enter', ' '].includes(event.key)) {
+        return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (!event.repeat) {
+        startCharging();
+    }
+}
+
+function handleKeyUp(event: KeyboardEvent): void {
+    if (!['Enter', ' '].includes(event.key)) {
+        return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+    finishCharging();
+}
+
+function handleClick(): void {
+    if (ignoreNextClick) {
+        ignoreNextClick = false;
+
+        return;
+    }
+
+    emit('throwPaperBall', props.player.id, 0);
+}
+
+function chargeSegmentProgress(segment: number): number {
+    return Math.min(100, Math.max(0, chargePercentage.value - segment * 100));
+}
+
+function chargeColor(): string {
+    if (chargePercentage.value > 200) {
+        return '#ef4444';
+    }
+
+    if (chargePercentage.value > 100) {
+        return '#f97316';
+    }
+
+    return '#22c55e';
+}
+
+onBeforeUnmount(() => {
+    stopChargeAnimation();
+
+    if (ignoreClickTimer !== null) {
+        window.clearTimeout(ignoreClickTimer);
+    }
+});
+
 function cardLabel(value: string | null): string {
     if (value === null) {
         return '–';
@@ -30,7 +197,7 @@ function playerVote(): string | null {
     <article
         class="player-seat"
         :class="{ 'is-paper-ball-hit': isPaperBallHit }"
-        :style="player.seatStyle"
+        :style="seatStyle"
         :data-player-id="player.id"
     >
         <div
@@ -39,7 +206,7 @@ function playerVote(): string | null {
             :aria-label="`${player.name} hat eine Karte gewählt`"
         >
             <div
-                v-if="isCurrentPlayer()"
+                v-if="isCurrentPlayer() && !presenterMode"
                 class="own-vote-card"
                 :class="{ 'is-revealed': revealed }"
             >
@@ -98,12 +265,52 @@ function playerVote(): string | null {
             v-if="!isCurrentPlayer()"
             type="button"
             class="throw-paper-ball"
+            :class="{ 'is-charging': isCharging }"
             :disabled="throwDisabled"
-            :aria-label="`Papierknäuel auf ${player.name} werfen`"
+            :aria-label="`Papierknäuel auf ${player.name} werfen – gedrückt halten zum Aufladen${isCharging ? `, ${Math.floor(chargePercentage)} Prozent geladen` : ''}`"
-            :title="`Papierknäuel auf ${player.name} werfen`"
+            :aria-pressed="isCharging"
-            @click.stop="emit('throwPaperBall', player.id)"
+            :title="`Papierknäuel auf ${player.name} werfen – gedrückt halten zum Aufladen`"
+            @pointerdown.stop.prevent="startPointerCharge"
+            @pointerup.stop.prevent="finishPointerCharge"
+            @pointercancel="cancelPointerCharge"
+            @keydown="handleKeyDown"
+            @keyup="handleKeyUp"
+            @blur="cancelPointerCharge"
+            @click.stop.prevent="handleClick"
         >
-            <span class="paper-ball-mini" aria-hidden="true"></span>
+            <svg
+                v-if="isCharging"
+                class="charge-rings"
+                viewBox="0 0 48 48"
+                aria-hidden="true"
+            >
+                <g
+                    v-for="segment in 3"
+                    v-show="chargePercentage > (segment - 1) * 100"
+                    :key="segment"
+                >
+                    <circle
+                        class="charge-ring-track"
+                        cx="24"
+                        cy="24"
+                        :r="8 + segment * 4"
+                    />
+                    <circle
+                        class="charge-ring"
+                        cx="24"
+                        cy="24"
+                        :r="8 + segment * 4"
+                        pathLength="100"
+                        :stroke="chargeColor()"
+                        :stroke-dashoffset="
+                            100 - chargeSegmentProgress(segment - 1)
+                        "
+                    />
+                </g>
+            </svg>
+            <span class="throw-paper-ball-surface" aria-hidden="true">
+                <span class="paper-ball-mini"></span>
+            </span>
         </button>
     </article>
 </template>
@@ -113,7 +320,11 @@ function playerVote(): string | null {
     position: absolute;
     z-index: 2;
     width: 8rem;
-    transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%)
+        translate(
+            var(--paper-ball-knockback-x, 0),
+            var(--paper-ball-knockback-y, 0)
+        );
     text-align: center;
 }
 
@@ -127,23 +338,22 @@ function playerVote(): string | null {
 
 .throw-paper-ball {
     position: absolute;
-    top: 0.65rem;
+    top: 0.15rem;
-    right: 0.35rem;
+    right: -0.15rem;
     z-index: 8;
     display: grid;
-    width: 2rem;
+    width: 3rem;
-    height: 2rem;
+    height: 3rem;
     place-items: center;
-    border: 1px solid #64748b;
+    border: 0;
-    border-radius: 0.5rem;
+    background: transparent;
-    background: #334155;
     opacity: 0;
     transform: translateY(0.25rem) rotate(-8deg);
     pointer-events: none;
+    touch-action: none;
     transition:
         opacity 140ms ease,
-        transform 140ms ease,
+        transform 140ms ease;
-        background-color 140ms ease;
 }
 
 .player-seat:hover .throw-paper-ball,
@@ -153,9 +363,14 @@ function playerVote(): string | null {
     pointer-events: auto;
 }
 
+.throw-paper-ball:hover:not(:disabled) .throw-paper-ball-surface,
+.throw-paper-ball:focus-visible .throw-paper-ball-surface,
+.throw-paper-ball.is-charging .throw-paper-ball-surface {
+    background: #475569;
+}
+
 .throw-paper-ball:hover:not(:disabled),
 .throw-paper-ball:focus-visible {
-    background: #475569;
     transform: translateY(-0.1rem) rotate(4deg);
 }
 
@@ -170,6 +385,46 @@ function playerVote(): string | null {
     pointer-events: none;
 }
 
+.throw-paper-ball-surface {
+    position: relative;
+    z-index: 1;
+    display: grid;
+    width: 2rem;
+    height: 2rem;
+    place-items: center;
+    border: 1px solid #64748b;
+    border-radius: 0.5rem;
+    background: #334155;
+    transition: background-color 140ms ease;
+}
+
+.charge-rings {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+    filter: drop-shadow(0 0 0.2rem rgb(15 23 42 / 75%));
+}
+
+.charge-ring-track,
+.charge-ring {
+    fill: none;
+    stroke-width: 2.25;
+}
+
+.charge-ring-track {
+    stroke: rgb(148 163 184 / 32%);
+}
+
+.charge-ring {
+    transform: rotate(-90deg);
+    transform-origin: 24px 24px;
+    stroke-linecap: round;
+    stroke-dasharray: 100;
+    transition: stroke 100ms linear;
+}
+
 .paper-ball-mini {
     display: block;
     width: 0.95rem;
@@ -313,6 +568,27 @@ function playerVote(): string | null {
     }
 }
 
+@media (min-width: 768px) and (max-height: 800px) {
+    .player-seat {
+        width: 7rem;
+    }
+
+    .player-details {
+        margin-top: 0.25rem;
+    }
+
+    .seat-card {
+        top: 1.5rem;
+        width: 2.75rem;
+        height: 3.8rem;
+    }
+
+    .own-vote-card,
+    .flip-card-face {
+        font-size: 1rem;
+    }
+}
+
 @media (prefers-reduced-motion: reduce) {
     .flip-card-inner {
         transition: none;

resources/js/components/rooms/RoomTable.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useMediaQuery } from '@vueuse/core';
 import { computed, ref } from 'vue';
 
 import RoomModeratorControls from '@/components/rooms/RoomModeratorControls.vue';
@@ -11,14 +12,22 @@ import type {
 } from '@/types/room';
 
 const props = defineProps<RoomTableProps>();
+const hasCompactHeight = useMediaQuery(
+    '(min-width: 768px) and (max-height: 800px)',
+);
 
 const gameBoard = ref<HTMLElement | null>(null);
-const { activePaperBalls, hitPlayerIds, throwingAtPlayerId, throwPaperBall } =
+const {
-    usePaperBallToss({
+    activePaperBalls,
-        roomId: () => props.room.id,
+    hitPlayerIds,
-        currentPlayerId: () => props.currentPlayer.id,
+    paperBallKnockbacks,
-        board: gameBoard,
+    throwingAtPlayerId,
-    });
+    throwPaperBall,
+} = usePaperBallToss({
+    roomId: () => props.room.id,
+    currentPlayerId: () => props.currentPlayer.id,
+    board: gameBoard,
+});
 
 const positionedPlayers = computed<PositionedRoomPlayer[]>(() => {
     const currentPlayerIndex = props.room.players.findIndex(
@@ -36,8 +45,8 @@ const positionedPlayers = computed<PositionedRoomPlayer[]>(() => {
     return orderedPlayers.map((player, index) => {
         const angle = Math.PI / 2 + (index * Math.PI * 2) / playerCount;
         const horizontalRadius = 39;
-        const verticalRadius = 40;
+        const verticalRadius = hasCompactHeight.value ? 34 : 40;
-        const cardDistance = 96;
+        const cardDistance = hasCompactHeight.value ? 72 : 96;
 
         return {
             ...player,
@@ -58,7 +67,7 @@ const voteCount = computed(
 </script>
 
 <template>
-    <section class="mt-5 w-full">
+    <section class="mt-5 w-full md:mt-3 md:min-h-0 md:flex-1">
         <div ref="gameBoard" class="game-board" aria-label="Scrum-Poker-Tisch">
             <div class="poker-table" aria-hidden="true">
                 <div class="table-highlight"></div>
@@ -95,6 +104,7 @@ const voteCount = computed(
                 v-for="paperBall in activePaperBalls"
                 :key="paperBall.id"
                 class="paper-ball-flight"
+                :class="`paper-ball-level-${paperBall.chargeLevel}`"
                 :style="paperBall.style"
                 aria-hidden="true"
             >
@@ -109,7 +119,11 @@ const voteCount = computed(
                 :current-vote="currentPlayer.current_vote"
                 :cards="room.deck.cards"
                 :revealed="room.revealed"
+                :presenter-mode="presenterMode"
                 :is-paper-ball-hit="hitPlayerIds.includes(player.id)"
+                :paper-ball-knockback="
+                    paperBallKnockbacks[player.id] ?? { x: 0, y: 0 }
+                "
                 :throw-disabled="throwingAtPlayerId !== null"
                 @throw-paper-ball="throwPaperBall"
             />
@@ -132,6 +146,13 @@ const voteCount = computed(
     isolation: isolate;
 }
 
+@media (min-width: 768px) {
+    .game-board {
+        height: 100%;
+        min-height: 0;
+    }
+}
+
 .poker-table {
     position: absolute;
     inset: 20% 15% 21%;
@@ -177,6 +198,21 @@ const voteCount = computed(
     animation: paper-ball-flight 780ms linear forwards;
 }
 
+.paper-ball-flight.paper-ball-level-1 {
+    width: 2.05rem;
+    height: 2.05rem;
+}
+
+.paper-ball-flight.paper-ball-level-2 {
+    width: 2.5rem;
+    height: 2.5rem;
+}
+
+.paper-ball-flight.paper-ball-level-3 {
+    width: 3rem;
+    height: 3rem;
+}
+
 .paper-ball {
     display: block;
     width: 100%;

resources/js/components/rooms/RoomVoteDeck.vue

@@ -1,42 +1,106 @@
 <script setup lang="ts">
-import { useForm } from '@inertiajs/vue3';
+import { useHttp } from '@inertiajs/vue3';
+import { Keyboard } from '@lucide/vue';
+import { useEventListener } from '@vueuse/core';
 import { watch } from 'vue';
 
 import { store as storeVote } from '@/routes/room/vote';
-import type { RoomVoteDeckProps } from '@/types/room';
+import type { RoomVoteDeckEmits, RoomVoteDeckProps } from '@/types/room';
 
 const props = defineProps<RoomVoteDeckProps>();
+const emit = defineEmits<RoomVoteDeckEmits>();
 
-const voteForm = useForm({
+const cardShortcuts = [
+    '1',
+    '2',
+    '3',
+    '4',
+    '5',
+    '6',
+    '7',
+    '8',
+    '9',
+    '0',
+    ...Array.from({ length: 24 }, (_, index) =>
+        String.fromCharCode('a'.charCodeAt(0) + index),
+    ),
+];
+
+const voteRequest = useHttp(() => storeVote(props.roomId), {
     value: props.currentVote ?? '',
 });
 
 watch(
     () => props.currentVote,
     (value) => {
-        if (!voteForm.processing) {
+        if (!voteRequest.processing) {
-            voteForm.value = value ?? '';
+            voteRequest.value = value ?? '';
         }
     },
 );
 
 function submitVote(value: string): void {
-    if (props.revealed || voteForm.processing) {
+    if (props.revealed || voteRequest.processing) {
         return;
     }
 
-    voteForm.value = value;
+    const previousVote = props.currentVote;
-    voteForm.submit(storeVote(props.roomId), {
+
-        preserveScroll: true,
+    voteRequest.value = value;
+    emit('vote-changed', value);
+    void voteRequest.submit({
         onError: () => {
-            voteForm.value = props.currentVote ?? '';
+            voteRequest.value = previousVote ?? '';
+            emit('vote-changed', previousVote);
         },
     });
 }
+
+function shortcutForCard(index: number): string | null {
+    return cardShortcuts[index] ?? null;
+}
+
+function isEditableTarget(target: EventTarget | null): boolean {
+    if (!(target instanceof HTMLElement)) {
+        return false;
+    }
+
+    return (
+        target.isContentEditable ||
+        ['INPUT', 'SELECT', 'TEXTAREA'].includes(target.tagName)
+    );
+}
+
+function handleKeyboardVote(event: KeyboardEvent): void {
+    if (
+        !props.presenterMode ||
+        props.revealed ||
+        voteRequest.processing ||
+        event.repeat ||
+        event.altKey ||
+        event.ctrlKey ||
+        event.metaKey ||
+        isEditableTarget(event.target)
+    ) {
+        return;
+    }
+
+    const cardIndex = cardShortcuts.indexOf(event.key.toLowerCase());
+    const card = props.cards[cardIndex];
+
+    if (card === undefined) {
+        return;
+    }
+
+    event.preventDefault();
+    submitVote(card.key);
+}
+
+useEventListener('keydown', handleKeyboardVote);
 </script>
 
 <template>
-    <section class="mx-auto mt-6 max-w-4xl text-center">
+    <section class="mx-auto mt-6 max-w-4xl text-center md:mt-3 md:shrink-0">
         <div class="mb-3 flex items-center justify-center gap-3">
             <span class="h-px w-10 bg-white/10"></span>
             <h2
@@ -52,32 +116,44 @@ function submitVote(value: string): void {
             class="flex flex-wrap justify-center gap-2.5 sm:gap-3"
         >
             <button
-                v-for="card in cards"
+                v-for="(card, index) in cards"
                 :key="card.key"
                 type="button"
                 class="deck-card"
-                :class="{ 'is-selected': voteForm.value === card.key }"
+                :class="{
-                :disabled="voteForm.processing"
+                    'is-selected':
-                :aria-pressed="voteForm.value === card.key"
+                        !presenterMode && voteRequest.value === card.key,
+                }"
+                :disabled="voteRequest.processing"
+                :aria-pressed="voteRequest.value === card.key"
                 :aria-label="`Karte ${card.label} wählen`"
                 @click="submitVote(card.key)"
             >
-                <span>{{ card.label }}</span>
+                <span class="card-label">{{ card.label }}</span>
+                <span
+                    v-if="presenterMode && shortcutForCard(index)"
+                    class="card-shortcut"
+                    aria-hidden="true"
+                >
+                    <Keyboard class="size-3" />
+                    <kbd>{{ shortcutForCard(index) }}</kbd>
+                </span>
             </button>
         </div>
 
         <p
-            v-if="voteForm.errors.value"
+            v-if="voteRequest.errors.value"
             class="mt-3 text-sm text-rose-300"
             role="alert"
         >
-            {{ voteForm.errors.value }}
+            {{ voteRequest.errors.value }}
         </p>
     </section>
 </template>
 
 <style scoped>
 .deck-card {
+    position: relative;
     display: grid;
     width: 3.75rem;
     aspect-ratio: 3 / 4;
@@ -94,11 +170,30 @@ function submitVote(value: string): void {
         box-shadow 160ms ease;
 }
 
-.deck-card span {
+.deck-card > .card-label {
     font-size: 1.2rem;
     font-weight: 800;
 }
 
+.card-shortcut {
+    position: absolute;
+    bottom: 0.25rem;
+    left: 50%;
+    display: flex;
+    align-items: center;
+    gap: 0.2rem;
+    color: #64748b;
+    font-size: 0.6rem;
+    font-weight: 700;
+    line-height: 1;
+    transform: translateX(-50%);
+}
+
+.card-shortcut kbd {
+    font: inherit;
+    text-transform: uppercase;
+}
+
 .deck-card:hover:not(:disabled) {
     transform: translateY(-0.35rem);
     border-color: rgb(103 232 249 / 80%);
@@ -122,6 +217,12 @@ function submitVote(value: string): void {
     }
 }
 
+@media (min-width: 768px) and (max-height: 800px) {
+    .deck-card {
+        width: 3.25rem;
+    }
+}
+
 @media (prefers-reduced-motion: reduce) {
     .deck-card {
         transition: none;

resources/js/composables/usePaperBallToss.ts

@@ -4,7 +4,9 @@ import { toast } from 'vue-sonner';
 import { useRoomEmotes } from '@/composables/useRoomEmotes';
 import { store as throwPaperBallRoute } from '@/routes/room/emote/paper-ball';
 import type {
+    PaperBallChargeLevel,
     PaperBallFlight,
+    PaperBallKnockback,
     PaperBallThrowError,
     PaperBallThrownPayload,
     PaperBallTossOptions,
@@ -13,6 +15,14 @@ import type {
 const PAPER_BALL_FLIGHT_DURATION = 780;
 const SEEN_EVENT_RETENTION = 5_000;
 const THROW_BUTTON_COOLDOWN = 550;
+const MAX_KNOCKBACK_DISTANCE = 72;
+const KNOCKBACK_RETURN_SPEED = 58;
+const KNOCKBACK_FORCE: Record<PaperBallChargeLevel, number> = {
+    0: 0,
+    1: 18,
+    2: 32,
+    3: 48,
+};
 
 export function usePaperBallToss({
     roomId,
@@ -21,9 +31,12 @@ export function usePaperBallToss({
 }: PaperBallTossOptions) {
     const activePaperBalls = ref<PaperBallFlight[]>([]);
     const hitPlayerIds = ref<number[]>([]);
+    const paperBallKnockbacks = ref<Record<number, PaperBallKnockback>>({});
     const throwingAtPlayerId = ref<number | null>(null);
     const seenPaperBallIds = new Set<string>();
     const timers = new Set<number>();
+    let knockbackAnimationFrame: number | null = null;
+    let previousKnockbackFrameTime: number | null = null;
 
     function schedule(callback: () => void, delay: number): void {
         const timer = window.setTimeout(() => {
@@ -34,7 +47,87 @@ export function usePaperBallToss({
         timers.add(timer);
     }
 
-    async function throwPaperBall(targetPlayerId: number): Promise<void> {
+    function animateKnockbacks(timestamp: number): void {
+        const elapsed = Math.min(
+            timestamp - (previousKnockbackFrameTime ?? timestamp),
+            32,
+        );
+        const returnDistance = (KNOCKBACK_RETURN_SPEED * elapsed) / 1_000;
+        const nextKnockbacks: Record<number, PaperBallKnockback> = {};
+
+        Object.entries(paperBallKnockbacks.value).forEach(
+            ([playerId, knockback]) => {
+                const distance = Math.hypot(knockback.x, knockback.y);
+                const nextDistance = Math.max(0, distance - returnDistance);
+
+                if (nextDistance > 0.1) {
+                    const scale = nextDistance / distance;
+
+                    nextKnockbacks[Number(playerId)] = {
+                        x: knockback.x * scale,
+                        y: knockback.y * scale,
+                    };
+                }
+            },
+        );
+
+        paperBallKnockbacks.value = nextKnockbacks;
+        previousKnockbackFrameTime = timestamp;
+
+        if (Object.keys(nextKnockbacks).length > 0) {
+            knockbackAnimationFrame =
+                window.requestAnimationFrame(animateKnockbacks);
+
+            return;
+        }
+
+        knockbackAnimationFrame = null;
+        previousKnockbackFrameTime = null;
+    }
+
+    function applyKnockback(
+        playerId: number,
+        directionX: number,
+        directionY: number,
+        chargeLevel: PaperBallChargeLevel,
+    ): void {
+        const force = KNOCKBACK_FORCE[chargeLevel];
+
+        if (force === 0) {
+            return;
+        }
+
+        const currentKnockback = paperBallKnockbacks.value[playerId] ?? {
+            x: 0,
+            y: 0,
+        };
+        let nextX = currentKnockback.x + directionX * force;
+        let nextY = currentKnockback.y + directionY * force;
+        const nextDistance = Math.hypot(nextX, nextY);
+
+        if (nextDistance > MAX_KNOCKBACK_DISTANCE) {
+            const scale = MAX_KNOCKBACK_DISTANCE / nextDistance;
+
+            nextX *= scale;
+            nextY *= scale;
+        }
+
+        paperBallKnockbacks.value = {
+            ...paperBallKnockbacks.value,
+            [playerId]: { x: nextX, y: nextY },
+        };
+
+        if (knockbackAnimationFrame === null) {
+            previousKnockbackFrameTime = null;
+            knockbackAnimationFrame =
+                window.requestAnimationFrame(animateKnockbacks);
+        }
+    }
+
+    async function throwPaperBall(
+        targetPlayerId: number,
+        chargePercentage = 0,
+    ): Promise<void> {
         if (
             targetPlayerId === currentPlayerId() ||
             throwingAtPlayerId.value !== null
@@ -66,6 +159,7 @@ export function usePaperBallToss({
                 },
                 body: JSON.stringify({
                     target_player_id: targetPlayerId,
+                    charge_percentage: chargePercentage,
                 }),
             });
 
@@ -106,6 +200,9 @@ export function usePaperBallToss({
             typeof payload.id !== 'string' ||
             !Number.isInteger(payload.from_player_id) ||
             !Number.isInteger(payload.target_player_id) ||
+            !Number.isInteger(payload.charge_level) ||
+            payload.charge_level < 0 ||
+            payload.charge_level > 3 ||
             seenPaperBallIds.has(payload.id)
         ) {
             return;
@@ -142,9 +239,12 @@ export function usePaperBallToss({
             targetRect.top + targetRect.height / 2 - boardRect.top - startY;
         const distance = Math.hypot(travelX, travelY);
         const arcHeight = Math.min(130, Math.max(55, distance * 0.22));
+        const knockbackDirectionX = distance === 0 ? 1 : travelX / distance;
+        const knockbackDirectionY = distance === 0 ? 0 : travelY / distance;
 
         activePaperBalls.value.push({
             id: payload.id,
+            chargeLevel: payload.charge_level,
             style: {
                 left: `${startX}px`,
                 top: `${startY}px`,
@@ -163,6 +263,13 @@ export function usePaperBallToss({
             if (!hitPlayerIds.value.includes(payload.target_player_id)) {
                 hitPlayerIds.value.push(payload.target_player_id);
             }
+
+            applyKnockback(
+                payload.target_player_id,
+                knockbackDirectionX,
+                knockbackDirectionY,
+                payload.charge_level,
+            );
         }, PAPER_BALL_FLIGHT_DURATION - 80);
 
         schedule(() => {
@@ -183,11 +290,16 @@ export function usePaperBallToss({
     onScopeDispose(() => {
         timers.forEach((timer) => window.clearTimeout(timer));
         timers.clear();
+
+        if (knockbackAnimationFrame !== null) {
+            window.cancelAnimationFrame(knockbackAnimationFrame);
+        }
     });
 
     return {
         activePaperBalls,
         hitPlayerIds,
+        paperBallKnockbacks,
         throwingAtPlayerId,
         throwPaperBall,
     };

resources/js/composables/useRoomRealtime.ts

@@ -1,72 +1,73 @@
 import { router } from '@inertiajs/vue3';
-import { onScopeDispose, watch } from 'vue';
+import { onScopeDispose, ref, shallowReadonly, watch } from 'vue';
 
 import { getEcho } from '@/lib/echo';
-import type { RoomStateChangedPayload } from '@/types/room';
+import { home } from '@/routes';
+import { join } from '@/routes/room';
+import type {
+    CurrentRoomPlayer,
+    PokerRoom,
+    RoomStateChangedPayload,
+} from '@/types/room';
 
 const ROOM_EVENT = '.room.state.changed';
 
 export function useRoomRealtime(
-    roomId: () => string,
+    initialRoom: () => PokerRoom,
-    stateVersion: () => number,
+    initialCurrentPlayer: () => CurrentRoomPlayer,
-): void {
+) {
-    let reloadInProgress = false;
+    const room = ref<PokerRoom>({ ...initialRoom() });
-    let pendingVersion = 0;
+    const currentPlayer = ref<CurrentRoomPlayer>({ ...initialCurrentPlayer() });
-    let disposed = false;
-
-    function reloadRoom(): void {
-        if (reloadInProgress || disposed) {
-            return;
-        }
-
-        reloadInProgress = true;
-
-        router.reload({
-            only: ['room', 'currentPlayer'],
-            onFinish: () => {
-                reloadInProgress = false;
-
-                if (disposed) {
-                    return;
-                }
-
-                if (pendingVersion > stateVersion()) {
-                    reloadRoom();
-
-                    return;
-                }
-
-                pendingVersion = stateVersion();
-            },
-        });
-    }
 
     function handleRoomChange(payload: RoomStateChangedPayload): void {
         if (
             typeof payload.version !== 'number' ||
-            payload.version <= Math.max(stateVersion(), pendingVersion)
+            payload.version <= room.value.state_version
         ) {
             return;
         }
 
-        pendingVersion = payload.version;
-
         if (payload.change === 'room_deleted') {
-            router.visit('/', { replace: true });
+            router.visit(home().url, { replace: true });
 
             return;
         }
 
-        reloadRoom();
+        if (payload.change === 'room_closed') {
+            router.visit(
+                join({ query: { join_code: room.value.join_code } }).url,
+                { replace: true },
+            );
+
+            return;
+        }
+
+        if (payload.state === null || payload.state === undefined) {
+            return;
+        }
+
+        room.value = {
+            ...room.value,
+            ...payload.state,
+        };
+
+        if (
+            payload.change === 'votes_reset' ||
+            payload.change === 'next_round'
+        ) {
+            currentPlayer.value = {
+                ...currentPlayer.value,
+                current_vote: null,
+            };
+        }
     }
 
     const stopWatchingRoom = watch(
-        roomId,
+        () => initialRoom().id,
         (nextRoomId, _previousRoomId, onCleanup) => {
             const echo = getEcho();
             const channelName = `rooms.${nextRoomId}`;
 
-            pendingVersion = stateVersion();
             echo.channel(channelName).listen(ROOM_EVENT, handleRoomChange);
 
             onCleanup(() => {
@@ -76,19 +77,30 @@ export function useRoomRealtime(
         { immediate: true },
     );
 
-    const stopWatchingVersion = watch(
+    const stopWatchingInitialState = watch(
-        stateVersion,
+        [initialRoom, initialCurrentPlayer],
-        (version) => {
+        ([nextRoom, nextCurrentPlayer]) => {
-            if (!reloadInProgress) {
+            room.value = { ...nextRoom };
-                pendingVersion = Math.max(pendingVersion, version);
+            currentPlayer.value = { ...nextCurrentPlayer };
-            }
         },
-        { flush: 'sync' },
+        { deep: true },
     );
 
     onScopeDispose(() => {
-        disposed = true;
         stopWatchingRoom();
-        stopWatchingVersion();
+        stopWatchingInitialState();
     });
+
+    function setCurrentVote(value: string | null): void {
+        currentPlayer.value = {
+            ...currentPlayer.value,
+            current_vote: value,
+        };
+    }
+
+    return {
+        room: shallowReadonly(room),
+        currentPlayer: shallowReadonly(currentPlayer),
+        setCurrentVote,
+    };
 }

resources/js/layouts/PublicLayout.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { Link, usePage } from '@inertiajs/vue3';
 import { computed } from 'vue';
+
+import AppVersion from '@/components/AppVersion.vue';
 import { dashboard, home, login, logout, register } from '@/routes';
 
 const page = usePage();
@@ -57,5 +59,7 @@ const user = computed(() => page.props.auth.user);
         <main class="p-6">
             <slot />
         </main>
+
+        <AppVersion />
     </div>
 </template>

resources/js/pages/rooms/Show.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Head, usePage, usePoll } from '@inertiajs/vue3';
+import { Head, usePage } from '@inertiajs/vue3';
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 
 import RoomHeader from '@/components/rooms/RoomHeader.vue';
 import RoomRetentionNotice from '@/components/rooms/RoomRetentionNotice.vue';
@@ -12,44 +12,52 @@ import type { RoomPageProps } from '@/types/room';
 const props = defineProps<RoomPageProps>();
 
 const page = usePage();
+const presenterMode = ref(false);
 const roomNotice = computed(() => page.props.roomNotice);
 const canFavorite = computed(
     () => page.props.auth.user?.id != props.room.owner_id,
 );
 
-useRoomRealtime(
+const {
-    () => props.room.id,
+    room: realtimeRoom,
-    () => props.room.state_version,
+    currentPlayer: realtimeCurrentPlayer,
+    setCurrentVote,
+} = useRoomRealtime(
+    () => props.room,
+    () => props.currentPlayer,
 );
-
-usePoll(30_000, {
-    only: ['room', 'currentPlayer'],
-});
 </script>
 
 <template>
-    <Head :title="room.title ?? 'Scrum Poker'" />
+    <Head :title="realtimeRoom.title ?? 'Scrum Poker'" />
 
     <main
-        class="-m-6 min-h-[calc(100svh-4rem)] bg-slate-900 px-3 py-6 text-white sm:px-6 lg:px-10"
+        class="-m-6 min-h-[calc(100svh-4rem)] bg-slate-900 px-3 py-6 text-white sm:px-6 md:flex md:h-[calc(100dvh-4rem-1px)] md:min-h-0 md:flex-col md:overflow-hidden lg:px-10"
     >
         <RoomRetentionNotice v-if="roomNotice" :notice="roomNotice" />
 
         <RoomHeader
-            :id="room.id"
+            :id="realtimeRoom.id"
-            :title="room.title"
+            :title="realtimeRoom.title"
-            :join_code="room.join_code"
+            :join_code="realtimeRoom.join_code"
-            :is_favorite="room.is_favorite"
+            :is_favorite="realtimeRoom.is_favorite"
             :can-favorite="canFavorite"
+            v-model:presenter-mode="presenterMode"
         />
 
-        <RoomTable :room="room" :current-player="currentPlayer" />
+        <RoomTable
+            :room="realtimeRoom"
+            :current-player="realtimeCurrentPlayer"
+            :presenter-mode="presenterMode"
+        />
 
         <RoomVoteDeck
-            :room-id="room.id"
+            :room-id="realtimeRoom.id"
-            :revealed="room.revealed"
+            :revealed="realtimeRoom.revealed"
-            :cards="room.deck.cards"
+            :cards="realtimeRoom.deck.cards"
-            :current-vote="currentPlayer.current_vote"
+            :current-vote="realtimeCurrentPlayer.current_vote"
+            :presenter-mode="presenterMode"
+            @vote-changed="setCurrentVote"
         />
     </main>
 </template>

resources/js/types/emote.ts

@@ -1,9 +1,12 @@
 import type { Ref, CSSProperties } from 'vue';
 
+export type PaperBallChargeLevel = 0 | 1 | 2 | 3;
+
 export type PaperBallThrownPayload = {
     id: string;
     from_player_id: number;
     target_player_id: number;
+    charge_level: PaperBallChargeLevel;
 };
 
 export type PaperBallFlightStyle = CSSProperties & {
@@ -19,9 +22,15 @@ export type PaperBallFlightStyle = CSSProperties & {
 
 export type PaperBallFlight = {
     id: string;
+    chargeLevel: PaperBallChargeLevel;
     style: PaperBallFlightStyle;
 };
 
+export type PaperBallKnockback = {
+    x: number;
+    y: number;
+};
+
 export type PaperBallTossOptions = {
     roomId: () => string;
     currentPlayerId: () => number;

resources/js/types/global.d.ts

@@ -5,6 +5,7 @@ import type { RoomNotice } from '@/types/room';
 declare module 'vite/client' {
     interface ImportMetaEnv {
         readonly VITE_APP_NAME: string;
+        readonly VITE_APP_VERSION?: string;
         [key: string]: string | boolean | undefined;
     }
 

resources/js/types/room.ts

@@ -1,5 +1,7 @@
 import type { CSSProperties } from 'vue';
 
+import type { PaperBallKnockback } from '@/types/emote';
+
 export type PokerCard = {
     key: string;
     label: string;
@@ -94,11 +96,17 @@ export type RoomHeaderProps = Pick<
     'id' | 'title' | 'join_code' | 'is_favorite'
 > & {
     canFavorite: boolean;
+    presenterMode: boolean;
+};
+
+export type RoomHeaderEmits = {
+    'update:presenterMode': [value: boolean];
 };
 
 export type RoomTableProps = {
     room: PokerRoom;
     currentPlayer: CurrentRoomPlayer;
+    presenterMode: boolean;
 };
 
 export type RoomSeatProps = {
@@ -107,7 +115,9 @@ export type RoomSeatProps = {
     currentVote: string | null;
     cards: PokerCard[];
     revealed: boolean;
+    presenterMode: boolean;
     isPaperBallHit: boolean;
+    paperBallKnockback: PaperBallKnockback;
     throwDisabled: boolean;
 };
 
@@ -122,6 +132,11 @@ export type RoomVoteDeckProps = {
     revealed: boolean;
     cards: PokerCard[];
     currentVote: string | null;
+    presenterMode: boolean;
+};
+
+export type RoomVoteDeckEmits = {
+    'vote-changed': [value: string | null];
 };
 
 export type RoomStateChange =
@@ -137,4 +152,10 @@ export type RoomStateChange =
 export type RoomStateChangedPayload = {
     version: number;
     change: RoomStateChange;
+    state: RoomRealtimeState | null;
 };
+
+export type RoomRealtimeState = Pick<
+    PokerRoom,
+    'current_round' | 'revealed' | 'state_version' | 'statistics' | 'players'
+>;

tests/Feature/RoomBroadcastingTest.php

@@ -5,6 +5,7 @@ use App\Events\RoomStateChanged;
 use App\Jobs\CloseInactiveRooms;
 use App\Models\Room;
 use App\Models\User;
+use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow;
 use Illuminate\Support\Carbon;
 use Illuminate\Support\Facades\Event;
 
@@ -23,18 +24,20 @@ function createBroadcastRoom(array $attributes = []): Room
     ]);
 }
 
-test('room state broadcasts expose only invalidation metadata', function () {
+test('room state broadcasts synchronously expose sanitized state', function () {
     $event = new RoomStateChanged(
         '019b8f80-37c4-71a3-b415-5f2697332c16',
         7,
         RoomStateChange::VoteChanged,
     );
 
-    expect($event->broadcastAs())->toBe('room.state.changed')
+    expect($event)->toBeInstanceOf(ShouldBroadcastNow::class)
+        ->and($event->broadcastAs())->toBe('room.state.changed')
         ->and($event->broadcastOn()->name)->toBe('rooms.019b8f80-37c4-71a3-b415-5f2697332c16')
         ->and($event->broadcastWith())->toBe([
             'version' => 7,
             'change' => 'vote_changed',
+            'state' => null,
         ])
         ->and($event->broadcastWith())->not->toHaveKeys([
             'player_name',
@@ -68,23 +71,23 @@ test('voting and round actions broadcast their state changes', function () {
 
     $this->withSession($session)
         ->post(route('room.vote.store', $room), ['value' => '5'])
-        ->assertRedirect();
+        ->assertNoContent();
 
     $this->withSession($session)
         ->post(route('room.reveal', $room))
-        ->assertRedirect();
+        ->assertNoContent();
 
     $this->withSession($session)
         ->post(route('room.next-round', $room))
-        ->assertRedirect();
+        ->assertNoContent();
 
     $this->withSession($session)
         ->post(route('room.vote.store', $room), ['value' => '3'])
-        ->assertRedirect();
+        ->assertNoContent();
 
     $this->withSession($session)
         ->post(route('room.reset', $room))
-        ->assertRedirect();
+        ->assertNoContent();
 
     foreach ([
         RoomStateChange::VoteChanged,
@@ -98,6 +101,35 @@ test('voting and round actions broadcast their state changes', function () {
         );
     }
 
+    Event::assertDispatched(
+        RoomStateChanged::class,
+        function (RoomStateChanged $event) use ($moderator): bool {
+            if ($event->change !== RoomStateChange::VoteChanged || $event->state === null) {
+                return false;
+            }
+
+            $player = collect($event->state['players'])->firstWhere('id', $moderator->id);
+
+            return $event->state['revealed'] === false
+                && $player['has_voted'] === true
+                && $player['vote'] === null;
+        },
+    );
+
+    Event::assertDispatched(
+        RoomStateChanged::class,
+        function (RoomStateChanged $event) use ($moderator): bool {
+            if ($event->change !== RoomStateChange::CardsRevealed || $event->state === null) {
+                return false;
+            }
+
+            $player = collect($event->state['players'])->firstWhere('id', $moderator->id);
+
+            return $event->state['revealed'] === true
+                && $player['vote'] === '5';
+        },
+    );
+
     Event::assertDispatchedTimes(RoomStateChanged::class, 5);
 });
 

tests/Feature/RoomEmoteTest.php

@@ -20,7 +20,6 @@ function createEmoteRoom(array $attributes = []): Room
 }
 
 test('a participant can throw a realtime paper ball at another player', function () {
-    Event::fake([PaperBallThrown::class]);
     $room = createEmoteRoom(['last_activity_at' => now()->subDay()]);
     $sender = $room->players()->create([
         'name' => 'Eric',
@@ -33,6 +32,7 @@ test('a participant can throw a realtime paper ball at another player', function
     $room->refresh();
     $activity = $room->last_activity_at;
     $stateVersion = $room->state_version;
+    Event::fake([PaperBallThrown::class]);
 
     $this->withSession(["room_players.{$room->id}" => $sender->id])
         ->postJson(route('room.emote.paper-ball.store', $room), [
@@ -44,12 +44,14 @@ test('a participant can throw a realtime paper ball at another player', function
         return $event->roomId === $room->id
             && $event->fromPlayerId === $sender->id
             && $event->targetPlayerId === $target->id
+            && $event->chargeLevel === 0
             && $event->broadcastOn()->name === "rooms.{$room->id}"
             && $event->broadcastAs() === 'room.emote.thrown'
             && array_keys($event->broadcastWith()) === [
                 'id',
                 'from_player_id',
                 'target_player_id',
+                'charge_level',
             ];
     });
 
@@ -59,6 +61,65 @@ test('a participant can throw a realtime paper ball at another player', function
         ->and($room->state_version)->toBe($stateVersion);
 });
 
+test('paper ball charge percentages map to the expected level', function (int $chargePercentage, int $expectedLevel) {
+    $room = createEmoteRoom();
+    $sender = $room->players()->create([
+        'name' => 'Eric',
+        'is_moderator' => true,
+    ]);
+    $target = $room->players()->create([
+        'name' => 'Anna',
+        'is_moderator' => false,
+    ]);
+    Event::fake([PaperBallThrown::class]);
+
+    $this->withSession(["room_players.{$room->id}" => $sender->id])
+        ->postJson(route('room.emote.paper-ball.store', $room), [
+            'target_player_id' => $target->id,
+            'charge_percentage' => $chargePercentage,
+        ])
+        ->assertNoContent();
+
+    Event::assertDispatched(
+        PaperBallThrown::class,
+        fn (PaperBallThrown $event): bool => $event->chargeLevel === $expectedLevel,
+    );
+})->with([
+    'uncharged' => [0, 0],
+    'just below level one' => [99, 0],
+    'level one threshold' => [100, 1],
+    'top of level one' => [199, 1],
+    'level two threshold' => [200, 2],
+    'top of level two' => [299, 2],
+    'level three threshold and cap' => [300, 3],
+]);
+
+test('paper ball charge percentages outside the supported range are rejected', function (int $chargePercentage) {
+    $room = createEmoteRoom();
+    $sender = $room->players()->create([
+        'name' => 'Eric',
+        'is_moderator' => true,
+    ]);
+    $target = $room->players()->create([
+        'name' => 'Anna',
+        'is_moderator' => false,
+    ]);
+    Event::fake([PaperBallThrown::class]);
+
+    $this->withSession(["room_players.{$room->id}" => $sender->id])
+        ->postJson(route('room.emote.paper-ball.store', $room), [
+            'target_player_id' => $target->id,
+            'charge_percentage' => $chargePercentage,
+        ])
+        ->assertUnprocessable()
+        ->assertJsonValidationErrors('charge_percentage');
+
+    Event::assertNotDispatched(PaperBallThrown::class);
+})->with([
+    'below zero' => -1,
+    'above the cap' => 301,
+]);
+
 test('a participant cannot throw a paper ball at themselves', function () {
     Event::fake([PaperBallThrown::class]);
     $room = createEmoteRoom();

tests/Feature/RoomLifecycleTest.php

@@ -238,7 +238,7 @@ test('meaningful game actions update the explicit activity timestamp', function
 
     $this->withSession(["room_players.{$room->id}" => $moderator->id])
         ->post(route('room.vote.store', $room), ['value' => '5'])
-        ->assertRedirect();
+        ->assertNoContent();
 
     expect($room->fresh()->last_activity_at->equalTo(now()))->toBeTrue();
 });

tests/Feature/RoomVotingTest.php

@@ -40,7 +40,7 @@ test('a participant can vote and change their vote in the current round', functi
 
     $this->withSession($session)
         ->post(route('room.vote.store', $room), ['value' => '5'])
-        ->assertRedirect();
+        ->assertNoContent();
 
     $this->assertDatabaseHas('votes', [
         'room_id' => $room->id,
@@ -51,7 +51,7 @@ test('a participant can vote and change their vote in the current round', functi
 
     $this->withSession($session)
         ->post(route('room.vote.store', $room), ['value' => '8'])
-        ->assertRedirect();
+        ->assertNoContent();
 
     expect(Vote::query()->count())->toBe(1);
     expect(Vote::query()->value('value'))->toBe('8')
@@ -91,7 +91,7 @@ test('other votes stay hidden until the moderator reveals the round', function (
 
     $this->withSession($session)
         ->post(route('room.reveal', $room))
-        ->assertRedirect();
+        ->assertNoContent();
 
     expect($room->fresh()->last_activity_at->greaterThan($previousActivity))->toBeTrue();
 
@@ -123,7 +123,7 @@ test('starting the next round clears the revealed state', function () {
 
     $this->withSession(["room_players.{$room->id}" => $moderator->id])
         ->post(route('room.next-round', $room))
-        ->assertRedirect();
+        ->assertNoContent();
 
     $room->refresh();
 
@@ -156,7 +156,7 @@ test('the moderator can reset only the votes from the current round', function (
 
     $this->withSession(["room_players.{$room->id}" => $moderator->id])
         ->post(route('room.reset', $room))
-        ->assertRedirect();
+        ->assertNoContent();
 
     $this->assertDatabaseHas('votes', [
         'room_id' => $room->id,