Merge pull request #5 from ericasch6/allow-other-control

allow anyone controll room option

app/Enums/RoomStateChange.php

@@ -9,6 +9,7 @@ enum RoomStateChange: string
     case CardsRevealed = 'cards_revealed';
     case VotesReset = 'votes_reset';
     case NextRound = 'next_round';
+    case PermissionsUpdated = 'permissions_updated';
     case RoomReopened = 'room_reopened';
     case RoomClosed = 'room_closed';
     case RoomDeleted = 'room_deleted';

app/Events/PaperBallThrown.php

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

app/Http/Controllers/RoomEmoteController.php

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

app/Http/Controllers/RoomPermissionController.php

@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Http\Requests\UpdateRoomPermissionsRequest;
+use App\Models\Room;
+use App\Services\Rooms\RoomPermissionService;
+use Illuminate\Http\Response;
+
+class RoomPermissionController extends Controller
+{
+    public function __construct(
+        private readonly RoomPermissionService $roomPermissions,
+    ) {}
+
+    public function __invoke(UpdateRoomPermissionsRequest $request, Room $room): Response
+    {
+        $this->roomPermissions->updateParticipantControls(
+            $room,
+            (bool) $request->validated('allow_participant_controls'),
+        );
+
+        return response()->noContent();
+    }
+}

app/Http/Controllers/RoundController.php

@@ -16,7 +16,7 @@ class RoundController extends Controller
 
     public function reset(Request $request, Room $room): Response
     {
-        $this->ensureModerator($request, $room);
+        $this->ensureCanControlRound($request, $room);
         $this->rounds->reset($room);
 
         return response()->noContent();
@@ -24,7 +24,7 @@ class RoundController extends Controller
 
     public function reveal(Request $request, Room $room): Response
     {
-        $this->ensureModerator($request, $room);
+        $this->ensureCanControlRound($request, $room);
         $this->rounds->reveal($room);
 
         return response()->noContent();
@@ -32,20 +32,20 @@ class RoundController extends Controller
 
     public function nextRound(Request $request, Room $room): Response
     {
-        $this->ensureModerator($request, $room);
+        $this->ensureCanControlRound($request, $room);
         $this->rounds->startNext($room);
 
         return response()->noContent();
     }
 
-    private function ensureModerator(Request $request, Room $room): void
+    private function ensureCanControlRound(Request $request, Room $room): void
     {
         $player = $request->attributes->get('currentPlayer');
 
         abort_unless(
             $player instanceof Player
             && $player->room_id === $room->id
-            && $player->is_moderator,
+            && ($player->is_moderator || $room->allow_participant_controls),
             403,
         );
     }

app/Http/Requests/ThrowPaperBallRequest.php

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

app/Http/Requests/UpdateRoomPermissionsRequest.php

@@ -0,0 +1,37 @@
+<?php
+
+namespace App\Http\Requests;
+
+use App\Models\Player;
+use App\Models\Room;
+use Illuminate\Contracts\Validation\ValidationRule;
+use Illuminate\Foundation\Http\FormRequest;
+
+class UpdateRoomPermissionsRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     */
+    public function authorize(): bool
+    {
+        $room = $this->route('room');
+        $player = $this->attributes->get('currentPlayer');
+
+        return $room instanceof Room
+            && $player instanceof Player
+            && $player->room_id === $room->id
+            && $player->is_moderator;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array<string, ValidationRule|array<mixed>|string>
+     */
+    public function rules(): array
+    {
+        return [
+            'allow_participant_controls' => ['required', 'boolean:strict'],
+        ];
+    }
+}

app/Http/Resources/RoomResource.php

@@ -26,6 +26,7 @@ class RoomResource extends JsonResource
             'current_round' => $room->current_round,
             'revealed' => $room->revealed_at !== null,
             'state_version' => $room->state_version,
+            'allow_participant_controls' => $room->allow_participant_controls,
             'statistics' => $pageData->statistics,
             'deck' => (new RoomDeckResource($room->deck_config))->resolve($request),
             'players' => $room->players

app/Models/Room.php

@@ -19,6 +19,7 @@ use Illuminate\Database\Eloquent\SoftDeletes;
  * @property int $current_round
  * @property CarbonImmutable|null $revealed_at
  * @property int $state_version
+ * @property bool $allow_participant_controls
  * @property CarbonImmutable|null $last_activity_at
  * @property CarbonImmutable|null $closed_at
  * @property CarbonImmutable|null $deleted_at
@@ -35,6 +36,7 @@ class Room extends Model
         'deck_config',
         'revealed_at',
         'state_version',
+        'allow_participant_controls',
         'last_activity_at',
         'closed_at',
     ];
@@ -44,6 +46,7 @@ class Room extends Model
         return [
             'current_round' => 'integer',
             'state_version' => 'integer',
+            'allow_participant_controls' => 'boolean',
             'revealed_at' => 'immutable_datetime',
             'last_activity_at' => 'immutable_datetime',
             'closed_at' => 'immutable_datetime',
@@ -51,6 +54,10 @@ class Room extends Model
         ];
     }
 
+    protected $attributes = [
+        'allow_participant_controls' => false,
+    ];
+
     protected static function booted(): void
     {
         static::creating(function (Room $room) {

app/Services/Rooms/RoomEmoteService.php

@@ -11,12 +11,8 @@ use Illuminate\Validation\ValidationException;
 
 class RoomEmoteService
 {
-    public function throwPaperBall(
+    public function throwPaperBall(Room $room, Player $player, int $targetPlayerId): void
-        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.',
@@ -43,19 +39,11 @@ 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/RoomPermissionService.php

@@ -0,0 +1,47 @@
+<?php
+
+namespace App\Services\Rooms;
+
+use App\Enums\RoomStateChange;
+use App\Events\RoomStateChanged;
+use App\Models\Room;
+use Illuminate\Support\Facades\DB;
+
+class RoomPermissionService
+{
+    public function __construct(
+        private readonly RoomRealtimeStateService $realtimeState,
+    ) {}
+
+    public function updateParticipantControls(Room $room, bool $allowParticipantControls): void
+    {
+        [$stateVersion, $wasChanged] = DB::transaction(function () use ($room, $allowParticipantControls): array {
+            $lockedRoom = Room::query()
+                ->lockForUpdate()
+                ->findOrFail($room->id);
+
+            if ($lockedRoom->allow_participant_controls === $allowParticipantControls) {
+                return [$lockedRoom->state_version, false];
+            }
+
+            $lockedRoom->update([
+                'allow_participant_controls' => $allowParticipantControls,
+                'last_activity_at' => now(),
+                'state_version' => $lockedRoom->state_version + 1,
+            ]);
+
+            return [$lockedRoom->state_version, true];
+        });
+
+        if (! $wasChanged) {
+            return;
+        }
+
+        RoomStateChanged::dispatch(
+            $room->id,
+            $stateVersion,
+            RoomStateChange::PermissionsUpdated,
+            $this->realtimeState->for($room),
+        );
+    }
+}

app/Services/Rooms/RoomRealtimeStateService.php

@@ -15,6 +15,7 @@ class RoomRealtimeStateService
      *     current_round: int,
      *     revealed: bool,
      *     state_version: int,
+     *     allow_participant_controls: bool,
      *     statistics: array{average: string|null, median: string|null}|null,
      *     players: array<int, array{
      *         id: int,
@@ -44,6 +45,7 @@ class RoomRealtimeStateService
             'current_round' => $room->current_round,
             'revealed' => $room->revealed_at !== null,
             'state_version' => $room->state_version,
+            'allow_participant_controls' => $room->allow_participant_controls,
             'statistics' => $this->statistics->currentRound($room),
             'players' => $room->players
                 ->map(function ($player) use ($room): array {

database/migrations/2026_08_27_133231_add_allow_participant_controls_to_rooms_table.php

@@ -0,0 +1,30 @@
+<?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('rooms', function (Blueprint $table) {
+            $table->boolean('allow_participant_controls')
+                ->default(false)
+                ->after('state_version');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('rooms', function (Blueprint $table) {
+            $table->dropColumn('allow_participant_controls');
+        });
+    }
+};

resources/js/components/rooms/RoomHeader.vue

@@ -1,16 +1,32 @@
 <script setup lang="ts">
-import { Link } from '@inertiajs/vue3';
+import { Link, useHttp } from '@inertiajs/vue3';
 import { Check, Copy } from '@lucide/vue';
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 
 import { Checkbox } from '@/components/ui/checkbox';
 import { favorite } from '@/routes/room';
+import { update as updatePermissions } from '@/routes/room/permissions';
 import type { RoomHeaderEmits, RoomHeaderProps } from '@/types/room';
 
 const props = defineProps<RoomHeaderProps>();
 const emit = defineEmits<RoomHeaderEmits>();
 
 const copied = ref(false);
+const allowParticipantControls = ref(props.allowParticipantControls);
+const permissionRequest = useHttp(() => updatePermissions(props.id), {
+    allow_participant_controls: props.allowParticipantControls,
+});
+
+watch(
+    () => props.allowParticipantControls,
+    (value) => {
+        allowParticipantControls.value = value;
+
+        if (!permissionRequest.processing) {
+            permissionRequest.allow_participant_controls = value;
+        }
+    },
+);
 
 async function copyInviteLink(): Promise<void> {
     const inviteUrl = new URL('/room/join', window.location.origin);
@@ -22,6 +38,24 @@ async function copyInviteLink(): Promise<void> {
         copied.value = false;
     }, 1_800);
 }
+
+function updateParticipantControls(value: boolean): void {
+    if (permissionRequest.processing) {
+        return;
+    }
+
+    const previousValue = allowParticipantControls.value;
+
+    allowParticipantControls.value = value;
+    permissionRequest.allow_participant_controls = value;
+
+    void permissionRequest.submit({
+        onError: () => {
+            allowParticipantControls.value = previousValue;
+            permissionRequest.allow_participant_controls = previousValue;
+        },
+    });
+}
 </script>
 
 <template>
@@ -67,6 +101,30 @@ async function copyInviteLink(): Promise<void> {
                 <Copy v-else class="size-5 text-slate-300" />
             </button>
 
+            <label
+                v-if="isModerator"
+                for="participant-controls"
+                class="flex cursor-pointer items-center gap-2 text-sm text-slate-300"
+            >
+                <Checkbox
+                    id="participant-controls"
+                    :model-value="allowParticipantControls"
+                    :disabled="permissionRequest.processing"
+                    @update:model-value="
+                        updateParticipantControls($event === true)
+                    "
+                />
+                <span>Alle dürfen die Runde steuern</span>
+            </label>
+
+            <p
+                v-if="permissionRequest.errors.allow_participant_controls"
+                class="max-w-xs text-right text-sm text-rose-300"
+                role="alert"
+            >
+                {{ permissionRequest.errors.allow_participant_controls }}
+            </p>
+
             <label
                 for="presenter-mode"
                 class="flex cursor-pointer items-center gap-2 text-sm text-slate-300"

resources/js/components/rooms/RoomSeat.vue

@@ -1,181 +1,14 @@
 <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, chargePercentage: number];
+    throwPaperBall: [playerId: 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 '–';
@@ -197,7 +30,7 @@ function playerVote(): string | null {
     <article
         class="player-seat"
         :class="{ 'is-paper-ball-hit': isPaperBallHit }"
-        :style="seatStyle"
+        :style="player.seatStyle"
         :data-player-id="player.id"
     >
         <div
@@ -265,52 +98,12 @@ 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 – gedrückt halten zum Aufladen${isCharging ? `, ${Math.floor(chargePercentage)} Prozent geladen` : ''}`"
+            :aria-label="`Papierknäuel auf ${player.name} werfen`"
-            :aria-pressed="isCharging"
+            :title="`Papierknäuel auf ${player.name} werfen`"
-            :title="`Papierknäuel auf ${player.name} werfen – gedrückt halten zum Aufladen`"
+            @click.stop="emit('throwPaperBall', player.id)"
-            @pointerdown.stop.prevent="startPointerCharge"
-            @pointerup.stop.prevent="finishPointerCharge"
-            @pointercancel="cancelPointerCharge"
-            @keydown="handleKeyDown"
-            @keyup="handleKeyUp"
-            @blur="cancelPointerCharge"
-            @click.stop.prevent="handleClick"
         >
-            <svg
+            <span class="paper-ball-mini" aria-hidden="true"></span>
-                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>
@@ -320,11 +113,7 @@ 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;
 }
 
@@ -338,22 +127,23 @@ function playerVote(): string | null {
 
 .throw-paper-ball {
     position: absolute;
-    top: 0.15rem;
+    top: 0.65rem;
-    right: -0.15rem;
+    right: 0.35rem;
     z-index: 8;
     display: grid;
-    width: 3rem;
+    width: 2rem;
-    height: 3rem;
+    height: 2rem;
     place-items: center;
-    border: 0;
+    border: 1px solid #64748b;
-    background: transparent;
+    border-radius: 0.5rem;
+    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,
@@ -363,14 +153,9 @@ 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);
 }
 
@@ -385,46 +170,6 @@ 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;

resources/js/components/rooms/RoomTable.vue

@@ -17,17 +17,12 @@ const hasCompactHeight = useMediaQuery(
 );
 
 const gameBoard = ref<HTMLElement | null>(null);
-const {
+const { activePaperBalls, hitPlayerIds, throwingAtPlayerId, throwPaperBall } =
-    activePaperBalls,
+    usePaperBallToss({
-    hitPlayerIds,
-    paperBallKnockbacks,
-    throwingAtPlayerId,
-    throwPaperBall,
-} = usePaperBallToss({
         roomId: () => props.room.id,
         currentPlayerId: () => props.currentPlayer.id,
         board: gameBoard,
-});
+    });
 
 const positionedPlayers = computed<PositionedRoomPlayer[]>(() => {
     const currentPlayerIndex = props.room.players.findIndex(
@@ -104,7 +99,6 @@ 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"
             >
@@ -121,15 +115,15 @@ const voteCount = computed(
                 :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"
             />
 
             <RoomModeratorControls
-                v-if="currentPlayer.is_moderator"
+                v-if="
+                    currentPlayer.is_moderator ||
+                    room.allow_participant_controls
+                "
                 :room-id="room.id"
                 :revealed="room.revealed"
                 :has-votes="voteCount > 0"
@@ -198,21 +192,6 @@ 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/composables/usePaperBallToss.ts

@@ -4,9 +4,7 @@ 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,
@@ -15,14 +13,6 @@ 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,
@@ -31,12 +21,9 @@ 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(() => {
@@ -47,87 +34,7 @@ export function usePaperBallToss({
         timers.add(timer);
     }
 
-    function animateKnockbacks(timestamp: number): void {
+    async function throwPaperBall(targetPlayerId: number): Promise<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
@@ -159,7 +66,6 @@ export function usePaperBallToss({
                 },
                 body: JSON.stringify({
                     target_player_id: targetPlayerId,
-                    charge_percentage: chargePercentage,
                 }),
             });
 
@@ -200,9 +106,6 @@ 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;
@@ -239,12 +142,9 @@ 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`,
@@ -263,13 +163,6 @@ 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(() => {
@@ -290,16 +183,11 @@ 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/pages/rooms/Show.vue

@@ -42,6 +42,10 @@ const {
             :join_code="realtimeRoom.join_code"
             :is_favorite="realtimeRoom.is_favorite"
             :can-favorite="canFavorite"
+            :is-moderator="realtimeCurrentPlayer.is_moderator"
+            :allow-participant-controls="
+                realtimeRoom.allow_participant_controls
+            "
             v-model:presenter-mode="presenterMode"
         />
 

resources/js/types/emote.ts

@@ -1,12 +1,9 @@
 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 & {
@@ -22,15 +19,9 @@ 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/room.ts

@@ -1,7 +1,5 @@
 import type { CSSProperties } from 'vue';
 
-import type { PaperBallKnockback } from '@/types/emote';
-
 export type PokerCard = {
     key: string;
     label: string;
@@ -46,6 +44,7 @@ export type PokerRoom = {
     current_round: number;
     revealed: boolean;
     state_version: number;
+    allow_participant_controls: boolean;
     statistics: RoomStatistics | null;
     deck: RoomDeck;
     players: RoomPlayer[];
@@ -96,6 +95,8 @@ export type RoomHeaderProps = Pick<
     'id' | 'title' | 'join_code' | 'is_favorite'
 > & {
     canFavorite: boolean;
+    isModerator: boolean;
+    allowParticipantControls: boolean;
     presenterMode: boolean;
 };
 
@@ -117,7 +118,6 @@ export type RoomSeatProps = {
     revealed: boolean;
     presenterMode: boolean;
     isPaperBallHit: boolean;
-    paperBallKnockback: PaperBallKnockback;
     throwDisabled: boolean;
 };
 
@@ -145,6 +145,7 @@ export type RoomStateChange =
     | 'cards_revealed'
     | 'votes_reset'
     | 'next_round'
+    | 'permissions_updated'
     | 'room_reopened'
     | 'room_closed'
     | 'room_deleted';
@@ -157,5 +158,10 @@ export type RoomStateChangedPayload = {
 
 export type RoomRealtimeState = Pick<
     PokerRoom,
-    'current_round' | 'revealed' | 'state_version' | 'statistics' | 'players'
+    | 'current_round'
+    | 'revealed'
+    | 'state_version'
+    | 'allow_participant_controls'
+    | 'statistics'
+    | 'players'
 >;

routes/room.php

@@ -5,6 +5,7 @@ use App\Http\Controllers\RoomController;
 use App\Http\Controllers\RoomEmoteController;
 use App\Http\Controllers\RoomJoinController;
 use App\Http\Controllers\RoomLifecycleController;
+use App\Http\Controllers\RoomPermissionController;
 use App\Http\Controllers\RoomPlayerController;
 use App\Http\Controllers\RoundController;
 use App\Http\Controllers\VoteController;
@@ -42,4 +43,6 @@ Route::middleware('room.player')->group(function () {
         ->name('room.reset');
     Route::post('/rooms/{room}/next-round', [RoundController::class, 'nextRound'])
         ->name('room.next-round');
+    Route::patch('/rooms/{room}/permissions', RoomPermissionController::class)
+        ->name('room.permissions.update');
 });

tests/Feature/RoomBroadcastingTest.php

@@ -69,6 +69,12 @@ test('voting and round actions broadcast their state changes', function () {
     ]);
     $session = ["room_players.{$room->id}" => $moderator->id];
 
+    $this->withSession($session)
+        ->patch(route('room.permissions.update', $room), [
+            'allow_participant_controls' => true,
+        ])
+        ->assertNoContent();
+
     $this->withSession($session)
         ->post(route('room.vote.store', $room), ['value' => '5'])
         ->assertNoContent();
@@ -94,6 +100,7 @@ test('voting and round actions broadcast their state changes', function () {
         RoomStateChange::CardsRevealed,
         RoomStateChange::NextRound,
         RoomStateChange::VotesReset,
+        RoomStateChange::PermissionsUpdated,
     ] as $change) {
         Event::assertDispatched(
             RoomStateChanged::class,
@@ -130,7 +137,14 @@ test('voting and round actions broadcast their state changes', function () {
         },
     );
 
-    Event::assertDispatchedTimes(RoomStateChanged::class, 5);
+    Event::assertDispatched(
+        RoomStateChanged::class,
+        fn (RoomStateChanged $event): bool => $event->change === RoomStateChange::PermissionsUpdated
+            && $event->state !== null
+            && $event->state['allow_participant_controls'] === true,
+    );
+
+    Event::assertDispatchedTimes(RoomStateChanged::class, 6);
 });
 
 test('failed room actions do not broadcast updates', function () {

tests/Feature/RoomEmoteTest.php

@@ -20,6 +20,7 @@ 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',
@@ -32,7 +33,6 @@ 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,14 +44,12 @@ 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',
             ];
     });
 
@@ -61,65 +59,6 @@ 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/RoomVotingTest.php

@@ -102,16 +102,96 @@ test('other votes stay hidden until the moderator reveals the round', function (
             ->where('room.players.1.vote', '8'));
 });
 
-test('only the moderator may reveal cards', function () {
+test('round controls remain moderator-only by default', function () {
     [$room, , $player] = createVotingRoom();
+    $session = ["room_players.{$room->id}" => $player->id];
 
-    $this->withSession(["room_players.{$room->id}" => $player->id])
+    $this->withSession($session)
         ->post(route('room.reveal', $room))
         ->assertForbidden();
 
+    $this->withSession($session)
+        ->post(route('room.next-round', $room))
+        ->assertForbidden();
+
+    $this->withSession($session)
+        ->post(route('room.reset', $room))
+        ->assertForbidden();
+
     expect($room->fresh()->revealed_at)->toBeNull();
 });
 
+test('the moderator can allow every participant to control the round', function () {
+    [$room, $moderator, $player] = createVotingRoom();
+    $room->refresh();
+    $initialStateVersion = $room->state_version;
+
+    $this->withSession(["room_players.{$room->id}" => $moderator->id])
+        ->patch(route('room.permissions.update', $room), [
+            'allow_participant_controls' => true,
+        ])
+        ->assertNoContent();
+
+    $room->refresh();
+
+    expect($room->allow_participant_controls)->toBeTrue()
+        ->and($room->state_version)->toBe($initialStateVersion + 1);
+
+    $session = ["room_players.{$room->id}" => $player->id];
+
+    $this->withSession($session)
+        ->get(route('room.show', $room))
+        ->assertInertia(fn (Assert $page) => $page
+            ->where('room.allow_participant_controls', true));
+
+    $this->withSession($session)
+        ->post(route('room.reveal', $room))
+        ->assertNoContent();
+
+    $this->withSession($session)
+        ->post(route('room.next-round', $room))
+        ->assertNoContent();
+
+    $this->withSession($session)
+        ->post(route('room.vote.store', $room), ['value' => '5'])
+        ->assertNoContent();
+
+    $this->withSession($session)
+        ->post(route('room.reset', $room))
+        ->assertNoContent();
+
+    expect($room->fresh()->current_round)->toBe(2);
+
+    $this->assertDatabaseMissing('votes', [
+        'room_id' => $room->id,
+        'round' => 2,
+    ]);
+});
+
+test('participants cannot change room permissions', function () {
+    [$room, , $player] = createVotingRoom();
+
+    $this->withSession(["room_players.{$room->id}" => $player->id])
+        ->patch(route('room.permissions.update', $room), [
+            'allow_participant_controls' => true,
+        ])
+        ->assertForbidden();
+
+    expect($room->fresh()->allow_participant_controls)->toBeFalse();
+});
+
+test('room permissions require a strict boolean value', function () {
+    [$room, $moderator] = createVotingRoom();
+
+    $this->withSession(["room_players.{$room->id}" => $moderator->id])
+        ->patchJson(route('room.permissions.update', $room), [
+            'allow_participant_controls' => 'true',
+        ])
+        ->assertJsonValidationErrors('allow_participant_controls');
+
+    expect($room->fresh()->allow_participant_controls)->toBeFalse();
+});
+
 test('starting the next round clears the revealed state', function () {
     [$room, $moderator] = createVotingRoom();