big shot

resources/js/components/rooms/RoomTable.vue

@@ -17,12 +17,17 @@ const hasCompactHeight = useMediaQuery(
 );
 
 const gameBoard = ref<HTMLElement | null>(null);
-const { activePaperBalls, hitPlayerIds, throwingAtPlayerId, throwPaperBall } =
-    usePaperBallToss({
-        roomId: () => props.room.id,
-        currentPlayerId: () => props.currentPlayer.id,
-        board: gameBoard,
-    });
+const {
+    activePaperBalls,
+    hitPlayerIds,
+    paperBallKnockbacks,
+    throwingAtPlayerId,
+    throwPaperBall,
+} = usePaperBallToss({
+    roomId: () => props.room.id,
+    currentPlayerId: () => props.currentPlayer.id,
+    board: gameBoard,
+});
 
 const positionedPlayers = computed<PositionedRoomPlayer[]>(() => {
     const currentPlayerIndex = props.room.players.findIndex(
@@ -99,6 +104,7 @@ const voteCount = computed(
                 v-for="paperBall in activePaperBalls"
                 :key="paperBall.id"
                 class="paper-ball-flight"
+                :class="`paper-ball-level-${paperBall.chargeLevel}`"
                 :style="paperBall.style"
                 aria-hidden="true"
             >
@@ -115,6 +121,9 @@ const voteCount = computed(
                 :revealed="room.revealed"
                 :presenter-mode="presenterMode"
                 :is-paper-ball-hit="hitPlayerIds.includes(player.id)"
+                :paper-ball-knockback="
+                    paperBallKnockbacks[player.id] ?? { x: 0, y: 0 }
+                "
                 :throw-disabled="throwingAtPlayerId !== null"
                 @throw-paper-ball="throwPaperBall"
             />
@@ -189,6 +198,21 @@ const voteCount = computed(
     animation: paper-ball-flight 780ms linear forwards;
 }
 
+.paper-ball-flight.paper-ball-level-1 {
+    width: 2.05rem;
+    height: 2.05rem;
+}
+
+.paper-ball-flight.paper-ball-level-2 {
+    width: 2.5rem;
+    height: 2.5rem;
+}
+
+.paper-ball-flight.paper-ball-level-3 {
+    width: 3rem;
+    height: 3rem;
+}
+
 .paper-ball {
     display: block;
     width: 100%;