allow anyone controll room option

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/RoomTable.vue

@@ -120,7 +120,10 @@ const voteCount = computed(
             />
 
             <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"

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/room.ts

@@ -44,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[];
@@ -94,6 +95,8 @@ export type RoomHeaderProps = Pick<
     'id' | 'title' | 'join_code' | 'is_favorite'
 > & {
     canFavorite: boolean;
+    isModerator: boolean;
+    allowParticipantControls: boolean;
     presenterMode: boolean;
 };
 
@@ -142,6 +145,7 @@ export type RoomStateChange =
     | 'cards_revealed'
     | 'votes_reset'
     | 'next_round'
+    | 'permissions_updated'
     | 'room_reopened'
     | 'room_closed'
     | 'room_deleted';
@@ -157,6 +161,7 @@ export type RoomRealtimeState = Pick<
     | 'current_round'
     | 'revealed'
     | 'state_version'
+    | 'allow_participant_controls'
     | 'statistics'
     | 'players'
 >;