big shot

resources/js/composables/usePaperBallToss.ts

@@ -4,7 +4,9 @@ import { toast } from 'vue-sonner';
 import { useRoomEmotes } from '@/composables/useRoomEmotes';
 import { store as throwPaperBallRoute } from '@/routes/room/emote/paper-ball';
 import type {
+    PaperBallChargeLevel,
     PaperBallFlight,
+    PaperBallKnockback,
     PaperBallThrowError,
     PaperBallThrownPayload,
     PaperBallTossOptions,
@@ -13,6 +15,14 @@ import type {
 const PAPER_BALL_FLIGHT_DURATION = 780;
 const SEEN_EVENT_RETENTION = 5_000;
 const THROW_BUTTON_COOLDOWN = 550;
+const MAX_KNOCKBACK_DISTANCE = 72;
+const KNOCKBACK_RETURN_SPEED = 58;
+const KNOCKBACK_FORCE: Record<PaperBallChargeLevel, number> = {
+    0: 0,
+    1: 18,
+    2: 32,
+    3: 48,
+};
 
 export function usePaperBallToss({
     roomId,
@@ -21,9 +31,12 @@ export function usePaperBallToss({
 }: PaperBallTossOptions) {
     const activePaperBalls = ref<PaperBallFlight[]>([]);
     const hitPlayerIds = ref<number[]>([]);
+    const paperBallKnockbacks = ref<Record<number, PaperBallKnockback>>({});
     const throwingAtPlayerId = ref<number | null>(null);
     const seenPaperBallIds = new Set<string>();
     const timers = new Set<number>();
+    let knockbackAnimationFrame: number | null = null;
+    let previousKnockbackFrameTime: number | null = null;
 
     function schedule(callback: () => void, delay: number): void {
         const timer = window.setTimeout(() => {
@@ -34,7 +47,87 @@ export function usePaperBallToss({
         timers.add(timer);
     }
 
-    async function throwPaperBall(targetPlayerId: number): Promise<void> {
+    function animateKnockbacks(timestamp: number): void {
+        const elapsed = Math.min(
+            timestamp - (previousKnockbackFrameTime ?? timestamp),
+            32,
+        );
+        const returnDistance = (KNOCKBACK_RETURN_SPEED * elapsed) / 1_000;
+        const nextKnockbacks: Record<number, PaperBallKnockback> = {};
+
+        Object.entries(paperBallKnockbacks.value).forEach(
+            ([playerId, knockback]) => {
+                const distance = Math.hypot(knockback.x, knockback.y);
+                const nextDistance = Math.max(0, distance - returnDistance);
+
+                if (nextDistance > 0.1) {
+                    const scale = nextDistance / distance;
+
+                    nextKnockbacks[Number(playerId)] = {
+                        x: knockback.x * scale,
+                        y: knockback.y * scale,
+                    };
+                }
+            },
+        );
+
+        paperBallKnockbacks.value = nextKnockbacks;
+        previousKnockbackFrameTime = timestamp;
+
+        if (Object.keys(nextKnockbacks).length > 0) {
+            knockbackAnimationFrame =
+                window.requestAnimationFrame(animateKnockbacks);
+
+            return;
+        }
+
+        knockbackAnimationFrame = null;
+        previousKnockbackFrameTime = null;
+    }
+
+    function applyKnockback(
+        playerId: number,
+        directionX: number,
+        directionY: number,
+        chargeLevel: PaperBallChargeLevel,
+    ): void {
+        const force = KNOCKBACK_FORCE[chargeLevel];
+
+        if (force === 0) {
+            return;
+        }
+
+        const currentKnockback = paperBallKnockbacks.value[playerId] ?? {
+            x: 0,
+            y: 0,
+        };
+        let nextX = currentKnockback.x + directionX * force;
+        let nextY = currentKnockback.y + directionY * force;
+        const nextDistance = Math.hypot(nextX, nextY);
+
+        if (nextDistance > MAX_KNOCKBACK_DISTANCE) {
+            const scale = MAX_KNOCKBACK_DISTANCE / nextDistance;
+
+            nextX *= scale;
+            nextY *= scale;
+        }
+
+        paperBallKnockbacks.value = {
+            ...paperBallKnockbacks.value,
+            [playerId]: { x: nextX, y: nextY },
+        };
+
+        if (knockbackAnimationFrame === null) {
+            previousKnockbackFrameTime = null;
+            knockbackAnimationFrame =
+                window.requestAnimationFrame(animateKnockbacks);
+        }
+    }
+
+    async function throwPaperBall(
+        targetPlayerId: number,
+        chargePercentage = 0,
+    ): Promise<void> {
         if (
             targetPlayerId === currentPlayerId() ||
             throwingAtPlayerId.value !== null
@@ -66,6 +159,7 @@ export function usePaperBallToss({
                 },
                 body: JSON.stringify({
                     target_player_id: targetPlayerId,
+                    charge_percentage: chargePercentage,
                 }),
             });
 
@@ -106,6 +200,9 @@ export function usePaperBallToss({
             typeof payload.id !== 'string' ||
             !Number.isInteger(payload.from_player_id) ||
             !Number.isInteger(payload.target_player_id) ||
+            !Number.isInteger(payload.charge_level) ||
+            payload.charge_level < 0 ||
+            payload.charge_level > 3 ||
             seenPaperBallIds.has(payload.id)
         ) {
             return;
@@ -142,9 +239,12 @@ export function usePaperBallToss({
             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));
+        const knockbackDirectionX = distance === 0 ? 1 : travelX / distance;
+        const knockbackDirectionY = distance === 0 ? 0 : travelY / distance;
 
         activePaperBalls.value.push({
             id: payload.id,
+            chargeLevel: payload.charge_level,
             style: {
                 left: `${startX}px`,
                 top: `${startY}px`,
@@ -163,6 +263,13 @@ export function usePaperBallToss({
             if (!hitPlayerIds.value.includes(payload.target_player_id)) {
                 hitPlayerIds.value.push(payload.target_player_id);
             }
+
+            applyKnockback(
+                payload.target_player_id,
+                knockbackDirectionX,
+                knockbackDirectionY,
+                payload.charge_level,
+            );
         }, PAPER_BALL_FLIGHT_DURATION - 80);
 
         schedule(() => {
@@ -183,11 +290,16 @@ export function usePaperBallToss({
     onScopeDispose(() => {
         timers.forEach((timer) => window.clearTimeout(timer));
         timers.clear();
+
+        if (knockbackAnimationFrame !== null) {
+            window.cancelAnimationFrame(knockbackAnimationFrame);
+        }
     });
 
     return {
         activePaperBalls,
         hitPlayerIds,
+        paperBallKnockbacks,
         throwingAtPlayerId,
         throwPaperBall,
     };