Implement instant websocket room updates

resources/js/pages/rooms/Show.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Head, usePage, usePoll } from '@inertiajs/vue3';
+import { Head, usePage } from '@inertiajs/vue3';
 import { computed, ref } from 'vue';
 
 import RoomHeader from '@/components/rooms/RoomHeader.vue';
@@ -18,18 +18,18 @@ const canFavorite = computed(
     () => page.props.auth.user?.id != props.room.owner_id,
 );
 
-useRoomRealtime(
-    () => props.room.id,
-    () => props.room.state_version,
+const {
+    room: realtimeRoom,
+    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 md:flex md:h-[calc(100dvh-4rem-1px)] md:min-h-0 md:flex-col md:overflow-hidden lg:px-10"
@@ -37,26 +37,27 @@ usePoll(30_000, {
         <RoomRetentionNotice v-if="roomNotice" :notice="roomNotice" />
 
         <RoomHeader
-            :id="room.id"
-            :title="room.title"
-            :join_code="room.join_code"
-            :is_favorite="room.is_favorite"
+            :id="realtimeRoom.id"
+            :title="realtimeRoom.title"
+            :join_code="realtimeRoom.join_code"
+            :is_favorite="realtimeRoom.is_favorite"
             :can-favorite="canFavorite"
             v-model:presenter-mode="presenterMode"
         />
 
         <RoomTable
-            :room="room"
-            :current-player="currentPlayer"
+            :room="realtimeRoom"
+            :current-player="realtimeCurrentPlayer"
             :presenter-mode="presenterMode"
         />
 
         <RoomVoteDeck
-            :room-id="room.id"
-            :revealed="room.revealed"
-            :cards="room.deck.cards"
-            :current-vote="currentPlayer.current_vote"
+            :room-id="realtimeRoom.id"
+            :revealed="realtimeRoom.revealed"
+            :cards="realtimeRoom.deck.cards"
+            :current-vote="realtimeCurrentPlayer.current_vote"
             :presenter-mode="presenterMode"
+            @vote-changed="setCurrentVote"
         />
     </main>
 </template>