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();
+    });
+}

resources/js/lib/echo.ts

@@ -0,0 +1,33 @@
+import Echo from 'laravel-echo';
+import Pusher from 'pusher-js';
+
+let echoClient: Echo<'reverb'> | null = null;
+
+function environmentString(key: string): string | undefined {
+    const value = import.meta.env[key];
+
+    return typeof value === 'string' && value !== '' ? value : undefined;
+}
+
+export function getEcho(): Echo<'reverb'> {
+    if (echoClient !== null) {
+        return echoClient;
+    }
+
+    const scheme = environmentString('VITE_REVERB_SCHEME') ?? 'http';
+    const forceTLS = scheme === 'https';
+
+    echoClient = new Echo<'reverb'>({
+        broadcaster: 'reverb',
+        Pusher,
+        key: environmentString('VITE_REVERB_APP_KEY') ?? 'local-key',
+        wsHost:
+            environmentString('VITE_REVERB_HOST') ?? window.location.hostname,
+        wsPort: Number(environmentString('VITE_REVERB_PORT') ?? 8080),
+        wssPort: Number(environmentString('VITE_REVERB_PORT') ?? 443),
+        forceTLS,
+        enabledTransports: ['ws', 'wss'],
+    });
+
+    return echoClient;
+}

resources/js/pages/rooms/Show.vue

@@ -12,6 +12,8 @@ import {
 } from '@lucide/vue';
 import { computed, ref, watch } from 'vue';
 
+import { usePaperBallToss } from '@/composables/usePaperBallToss';
+import { useRoomRealtime } from '@/composables/useRoomRealtime';
 import { login, register } from '@/routes';
 import { nextRound, reset as resetRound, reveal } from '@/routes/room';
 import { store as storeVote } from '@/routes/room/vote';
@@ -60,8 +62,20 @@ const nextRoundForm = useForm<{ room?: string }>({});
 const resetForm = useForm<{ room?: string }>({});
 const copied = ref(false);
 const roomNoticeDismissed = ref(false);
+const gameBoard = ref<HTMLElement | null>(null);
+const { activePaperBalls, hitPlayerIds, throwingAtPlayerId, throwPaperBall } =
+    usePaperBallToss({
+        roomId: () => props.room.id,
+        currentPlayerId: () => props.currentPlayer.id,
+        board: gameBoard,
+    });
 
-usePoll(2_000, {
+useRoomRealtime(
+    () => props.room.id,
+    () => props.room.state_version,
+);
+
+usePoll(30_000, {
     only: ['room', 'currentPlayer'],
 });
 
@@ -252,7 +266,11 @@ function playerVote(player: RoomPlayer): string | null {
         </header>
 
         <section class="mt-5 w-full">
-            <div class="game-board" aria-label="Scrum-Poker-Tisch">
+            <div
+                ref="gameBoard"
+                class="game-board"
+                aria-label="Scrum-Poker-Tisch"
+            >
                 <div class="poker-table" aria-hidden="true">
                     <div class="table-highlight"></div>
                     <div class="table-center">
@@ -291,11 +309,25 @@ function playerVote(player: RoomPlayer): string | null {
                     </div>
                 </div>
 
+                <div
+                    v-for="paperBall in activePaperBalls"
+                    :key="paperBall.id"
+                    class="paper-ball-flight"
+                    :style="paperBall.style"
+                    aria-hidden="true"
+                >
+                    <span class="paper-ball"></span>
+                </div>
+
                 <article
                     v-for="player in positionedPlayers"
                     :key="player.id"
                     class="player-seat"
+                    :class="{
+                        'is-paper-ball-hit': hitPlayerIds.includes(player.id),
+                    }"
                     :style="player.seatStyle"
+                    :data-player-id="player.id"
                 >
                     <div
                         v-if="player.has_voted"
@@ -328,6 +360,7 @@ function playerVote(player: RoomPlayer): string | null {
 
                     <div
                         class="mx-auto grid size-12 place-items-center rounded-full border border-slate-600 bg-slate-800 text-slate-300 sm:size-14"
+                        :data-player-avatar="player.id"
                     >
                         <CircleUserRound
                             class="size-7 sm:size-8"
@@ -374,6 +407,21 @@ function playerVote(player: RoomPlayer): string | null {
                             </span>
                         </div>
                     </div>
+
+                    <button
+                        v-if="!isCurrentPlayer(player)"
+                        type="button"
+                        class="throw-paper-ball"
+                        :class="{
+                            'is-throwing': throwingAtPlayerId === player.id,
+                        }"
+                        :disabled="throwingAtPlayerId !== null"
+                        :aria-label="`Papierknäuel auf ${player.name} werfen`"
+                        :title="`Papierknäuel auf ${player.name} werfen`"
+                        @click.stop="throwPaperBall(player.id)"
+                    >
+                        <span class="paper-ball-mini" aria-hidden="true"></span>
+                    </button>
                 </article>
 
                 <div v-if="currentPlayer.is_moderator" class="reset-controls">
@@ -528,6 +576,149 @@ function playerVote(player: RoomPlayer): string | null {
     overflow-wrap: anywhere;
 }
 
+.throw-paper-ball {
+    position: absolute;
+    top: 0.65rem;
+    right: 0.35rem;
+    z-index: 8;
+    display: grid;
+    width: 2rem;
+    height: 2rem;
+    place-items: center;
+    border: 1px solid #64748b;
+    border-radius: 0.5rem;
+    background: #334155;
+    opacity: 0;
+    transform: translateY(0.25rem) rotate(-8deg);
+    pointer-events: none;
+    transition:
+        opacity 140ms ease,
+        transform 140ms ease,
+        background-color 140ms ease;
+}
+
+.player-seat:hover .throw-paper-ball,
+.player-seat:focus-within .throw-paper-ball {
+    opacity: 1;
+    transform: translateY(0) rotate(-8deg);
+    pointer-events: auto;
+}
+
+.throw-paper-ball:hover:not(:disabled),
+.throw-paper-ball:focus-visible {
+    background: #475569;
+    transform: translateY(-0.1rem) rotate(4deg);
+}
+
+.throw-paper-ball:focus-visible {
+    outline: 2px solid #67e8f9;
+    outline-offset: 2px;
+}
+
+.throw-paper-ball:disabled {
+    cursor: not-allowed;
+    opacity: 0.45;
+}
+
+.throw-paper-ball.is-throwing {
+    opacity: 1;
+}
+
+.paper-ball-mini,
+.paper-ball {
+    display: block;
+    border: 1px solid rgb(100 116 139 / 65%);
+    border-radius: 48% 42% 54% 39%;
+    background:
+        linear-gradient(
+            35deg,
+            transparent 44%,
+            rgb(100 116 139 / 35%) 46% 51%,
+            transparent 53%
+        ),
+        linear-gradient(
+            120deg,
+            transparent 35%,
+            rgb(148 163 184 / 45%) 37% 42%,
+            transparent 44%
+        ),
+        #e2e8f0;
+}
+
+.paper-ball-mini {
+    width: 0.95rem;
+    height: 0.95rem;
+    transform: rotate(18deg);
+}
+
+.paper-ball-flight {
+    position: absolute;
+    z-index: 40;
+    width: 1.65rem;
+    height: 1.65rem;
+    pointer-events: none;
+    will-change: transform;
+    animation: paper-ball-flight 780ms linear forwards;
+}
+
+.paper-ball {
+    width: 100%;
+    height: 100%;
+}
+
+.player-seat.is-paper-ball-hit [data-player-avatar] {
+    animation: paper-ball-hit 380ms ease-out;
+}
+
+@keyframes paper-ball-flight {
+    0% {
+        transform: translate(-50%, -50%) translate(0, 0) rotate(0deg)
+            scale(0.72);
+    }
+
+    25% {
+        transform: translate(-50%, -50%)
+            translate(var(--travel-quarter-x), var(--travel-quarter-y))
+            rotate(195deg) scale(0.92);
+    }
+
+    50% {
+        transform: translate(-50%, -50%)
+            translate(var(--travel-mid-x), var(--travel-mid-y)) rotate(390deg)
+            scale(1.08);
+    }
+
+    75% {
+        transform: translate(-50%, -50%)
+            translate(
+                var(--travel-three-quarter-x),
+                var(--travel-three-quarter-y)
+            )
+            rotate(585deg) scale(1);
+    }
+
+    100% {
+        transform: translate(-50%, -50%)
+            translate(var(--travel-x), var(--travel-y)) rotate(780deg)
+            scale(0.82);
+    }
+}
+
+@keyframes paper-ball-hit {
+    0%,
+    100% {
+        transform: translateX(0) rotate(0deg);
+    }
+
+    28% {
+        transform: translateX(-0.35rem) rotate(-7deg);
+    }
+
+    62% {
+        transform: translateX(0.25rem) rotate(5deg);
+    }
+}
+
 .player-details-above {
     transform: translateY(calc(-100% - 4.5rem));
 }
@@ -715,10 +906,25 @@ function playerVote(player: RoomPlayer): string | null {
     }
 }
 
+@media (hover: none) {
+    .throw-paper-ball {
+        opacity: 0.85;
+        pointer-events: auto;
+    }
+}
+
 @media (prefers-reduced-motion: reduce) {
     .flip-card-inner,
     .deck-card {
         transition: none;
     }
+
+    .paper-ball-flight {
+        animation-duration: 1ms;
+    }
+
+    .player-seat.is-paper-ball-hit [data-player-avatar] {
+        animation: none;
+    }
 }
 </style>

resources/js/types/emote.ts

@@ -0,0 +1,34 @@
+import type { Ref, CSSProperties } from 'vue';
+
+export type PaperBallThrownPayload = {
+    id: string;
+    from_player_id: number;
+    target_player_id: number;
+};
+
+export type PaperBallFlightStyle = CSSProperties & {
+    '--travel-quarter-x': string;
+    '--travel-quarter-y': string;
+    '--travel-mid-x': string;
+    '--travel-mid-y': string;
+    '--travel-three-quarter-x': string;
+    '--travel-three-quarter-y': string;
+    '--travel-x': string;
+    '--travel-y': string;
+};
+
+export type PaperBallFlight = {
+    id: string;
+    style: PaperBallFlightStyle;
+};
+
+export type PaperBallTossOptions = {
+    roomId: () => string;
+    currentPlayerId: () => number;
+    board: Ref<HTMLElement | null>;
+};
+
+export type PaperBallThrowError = {
+    message?: string;
+    errors?: Record<string, string[]>;
+};

resources/js/types/room.ts

@@ -13,6 +13,21 @@ export type RoomPlayer = {
     vote: string | null;
 };
 
+export type RoomStateChange =
+    | 'player_joined'
+    | 'vote_changed'
+    | 'cards_revealed'
+    | 'votes_reset'
+    | 'next_round'
+    | 'room_reopened'
+    | 'room_closed'
+    | 'room_deleted';
+
+export type RoomStateChangedPayload = {
+    version: number;
+    change: RoomStateChange;
+};
+
 export type SeatStyle = CSSProperties & {
     '--card-x': string;
     '--card-y': string;