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

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>