feat: added laravel reverb and websocket, also emote throwing added

resources/js/composables/usePaperBallToss.ts

@@ -0,0 +1,194 @@
+import { nextTick, onScopeDispose, ref } from 'vue';
+import { toast } from 'vue-sonner';
+
+import { useRoomEmotes } from '@/composables/useRoomEmotes';
+import { store as throwPaperBallRoute } from '@/routes/room/emote/paper-ball';
+import type {
+    PaperBallFlight,
+    PaperBallThrowError,
+    PaperBallThrownPayload,
+    PaperBallTossOptions,
+} from '@/types/emote';
+
+const PAPER_BALL_FLIGHT_DURATION = 780;
+const SEEN_EVENT_RETENTION = 5_000;
+const THROW_BUTTON_COOLDOWN = 550;
+
+export function usePaperBallToss({
+    roomId,
+    currentPlayerId,
+    board,
+}: PaperBallTossOptions) {
+    const activePaperBalls = ref<PaperBallFlight[]>([]);
+    const hitPlayerIds = ref<number[]>([]);
+    const throwingAtPlayerId = ref<number | null>(null);
+    const seenPaperBallIds = new Set<string>();
+    const timers = new Set<number>();
+
+    function schedule(callback: () => void, delay: number): void {
+        const timer = window.setTimeout(() => {
+            timers.delete(timer);
+            callback();
+        }, delay);
+
+        timers.add(timer);
+    }
+
+    async function throwPaperBall(targetPlayerId: number): Promise<void> {
+        if (
+            targetPlayerId === currentPlayerId() ||
+            throwingAtPlayerId.value !== null
+        ) {
+            return;
+        }
+
+        const csrfToken = document
+            .querySelector<HTMLMetaElement>('meta[name="csrf-token"]')
+            ?.getAttribute('content');
+
+        if (!csrfToken) {
+            toast.error('Der Papierknäuel konnte nicht geworfen werden.');
+
+            return;
+        }
+
+        throwingAtPlayerId.value = targetPlayerId;
+
+        try {
+            const response = await fetch(throwPaperBallRoute(roomId()).url, {
+                method: 'POST',
+                credentials: 'same-origin',
+                headers: {
+                    Accept: 'application/json',
+                    'Content-Type': 'application/json',
+                    'X-CSRF-TOKEN': csrfToken,
+                    'X-Requested-With': 'XMLHttpRequest',
+                },
+                body: JSON.stringify({
+                    target_player_id: targetPlayerId,
+                }),
+            });
+
+            if (response.redirected) {
+                toast.error(
+                    'Bitte lade den Raum neu und versuche es noch einmal.',
+                );
+
+                return;
+            }
+
+            if (!response.ok) {
+                const error = (await response
+                    .json()
+                    .catch(() => null)) as PaperBallThrowError | null;
+                const message =
+                    error?.errors?.target_player_id?.[0] ??
+                    error?.message ??
+                    'Der Papierknäuel konnte nicht geworfen werden.';
+
+                toast.error(message);
+            }
+        } catch {
+            toast.error('Der Papierknäuel konnte nicht geworfen werden.');
+        } finally {
+            schedule(() => {
+                if (throwingAtPlayerId.value === targetPlayerId) {
+                    throwingAtPlayerId.value = null;
+                }
+            }, THROW_BUTTON_COOLDOWN);
+        }
+    }
+
+    async function animatePaperBall(
+        payload: PaperBallThrownPayload,
+    ): Promise<void> {
+        if (
+            typeof payload.id !== 'string' ||
+            !Number.isInteger(payload.from_player_id) ||
+            !Number.isInteger(payload.target_player_id) ||
+            seenPaperBallIds.has(payload.id)
+        ) {
+            return;
+        }
+
+        seenPaperBallIds.add(payload.id);
+        schedule(
+            () => seenPaperBallIds.delete(payload.id),
+            SEEN_EVENT_RETENTION,
+        );
+
+        await nextTick();
+
+        const gameBoard = board.value;
+        const fromAvatar = gameBoard?.querySelector<HTMLElement>(
+            `[data-player-avatar="${payload.from_player_id}"]`,
+        );
+        const targetAvatar = gameBoard?.querySelector<HTMLElement>(
+            `[data-player-avatar="${payload.target_player_id}"]`,
+        );
+
+        if (!gameBoard || !fromAvatar || !targetAvatar) {
+            return;
+        }
+
+        const boardRect = gameBoard.getBoundingClientRect();
+        const fromRect = fromAvatar.getBoundingClientRect();
+        const targetRect = targetAvatar.getBoundingClientRect();
+        const startX = fromRect.left + fromRect.width / 2 - boardRect.left;
+        const startY = fromRect.top + fromRect.height / 2 - boardRect.top;
+        const travelX =
+            targetRect.left + targetRect.width / 2 - boardRect.left - startX;
+        const travelY =
+            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));
+
+        activePaperBalls.value.push({
+            id: payload.id,
+            style: {
+                left: `${startX}px`,
+                top: `${startY}px`,
+                '--travel-quarter-x': `${travelX * 0.25}px`,
+                '--travel-quarter-y': `${travelY * 0.25 - arcHeight * 0.75}px`,
+                '--travel-mid-x': `${travelX * 0.5}px`,
+                '--travel-mid-y': `${travelY * 0.5 - arcHeight}px`,
+                '--travel-three-quarter-x': `${travelX * 0.75}px`,
+                '--travel-three-quarter-y': `${travelY * 0.75 - arcHeight * 0.75}px`,
+                '--travel-x': `${travelX}px`,
+                '--travel-y': `${travelY}px`,
+            },
+        });
+
+        schedule(() => {
+            if (!hitPlayerIds.value.includes(payload.target_player_id)) {
+                hitPlayerIds.value.push(payload.target_player_id);
+            }
+        }, PAPER_BALL_FLIGHT_DURATION - 80);
+
+        schedule(() => {
+            activePaperBalls.value = activePaperBalls.value.filter(
+                (paperBall) => paperBall.id !== payload.id,
+            );
+        }, PAPER_BALL_FLIGHT_DURATION + 40);
+
+        schedule(() => {
+            hitPlayerIds.value = hitPlayerIds.value.filter(
+                (playerId) => playerId !== payload.target_player_id,
+            );
+        }, PAPER_BALL_FLIGHT_DURATION + 420);
+    }
+
+    useRoomEmotes(roomId, animatePaperBall);
+
+    onScopeDispose(() => {
+        timers.forEach((timer) => window.clearTimeout(timer));
+        timers.clear();
+    });
+
+    return {
+        activePaperBalls,
+        hitPlayerIds,
+        throwingAtPlayerId,
+        throwPaperBall,
+    };
+}

resources/js/composables/useRoomEmotes.ts

@@ -0,0 +1,27 @@
+import { onScopeDispose, watch } from 'vue';
+
+import { getEcho } from '@/lib/echo';
+import type { PaperBallThrownPayload } from '@/types/emote';
+
+const PAPER_BALL_EVENT = '.room.emote.thrown';
+
+export function useRoomEmotes(
+    roomId: () => string,
+    onPaperBallThrown: (payload: PaperBallThrownPayload) => void,
+): void {
+    const stopWatchingRoom = watch(
+        roomId,
+        (nextRoomId, _previousRoomId, onCleanup) => {
+            const channel = getEcho().channel(`rooms.${nextRoomId}`);
+
+            channel.listen(PAPER_BALL_EVENT, onPaperBallThrown);
+
+            onCleanup(() => {
+                channel.stopListening(PAPER_BALL_EVENT, onPaperBallThrown);
+            });
+        },
+        { immediate: true },
+    );
+
+    onScopeDispose(stopWatchingRoom);
+}

resources/js/composables/useRoomRealtime.ts

@@ -0,0 +1,94 @@
+import { router } from '@inertiajs/vue3';
+import { onScopeDispose, watch } from 'vue';
+
+import { getEcho } from '@/lib/echo';
+import type { RoomStateChangedPayload } from '@/types/room';
+
+const ROOM_EVENT = '.room.state.changed';
+
+export function useRoomRealtime(
+    roomId: () => string,
+    stateVersion: () => number,
+): void {
+    let reloadInProgress = false;
+    let pendingVersion = 0;
+    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)
+        ) {
+            return;
+        }
+
+        pendingVersion = payload.version;
+
+        if (payload.change === 'room_deleted') {
+            router.visit('/', { replace: true });
+
+            return;
+        }
+
+        reloadRoom();
+    }
+
+    const stopWatchingRoom = watch(
+        roomId,
+        (nextRoomId, _previousRoomId, onCleanup) => {
+            const echo = getEcho();
+            const channelName = `rooms.${nextRoomId}`;
+
+            pendingVersion = stateVersion();
+            echo.channel(channelName).listen(ROOM_EVENT, handleRoomChange);
+
+            onCleanup(() => {
+                echo.leaveChannel(channelName);
+            });
+        },
+        { immediate: true },
+    );
+
+    const stopWatchingVersion = watch(
+        stateVersion,
+        (version) => {
+            if (!reloadInProgress) {
+                pendingVersion = Math.max(pendingVersion, version);
+            }
+        },
+        { flush: 'sync' },
+    );
+
+    onScopeDispose(() => {
+        disposed = true;
+        stopWatchingRoom();
+        stopWatchingVersion();
+    });
+}