Merge branch 'animation/attack' into 'main'

Animation/attack

See merge request mycard/Neos!219

src/infra/eventbus.ts

@@ -6,6 +6,7 @@ const eventEmitter = new EventEmitter();
 export enum Task {
   Move = "move",
   Focus = "focus",
+  Attack = "attack",
 }
 
 const getEnd = (task: Task) => `${task}-end`;

src/service/duel/attack.ts

 import { ygopro } from "@/api";
+import { eventbus, sleep, Task } from "@/infra";
 import { cardStore, fetchEsHintMeta } from "@/stores";
 
 export default async (attack: ygopro.StocGameMessage.MsgAttack) => {
@@ -15,21 +16,18 @@ export default async (attack: ygopro.StocGameMessage.MsgAttack) => {
 
   if (attacker) {
     if (attack.direct_attack) {
-      // TODO: 实现直接攻击的动画
+      await eventbus.call(Task.Attack, attacker.uuid, true);
     } else {
-      const target = cardStore.at(
-        attack.target_location.zone,
-        attack.target_location.controller,
-        attack.target_location.sequence
+      await eventbus.call(
+        Task.Attack,
+        attacker.uuid,
+        false,
+        attack.target_location
       );
-
-      if (target) {
-        // TODO: 实现攻击`target`的动画
-      } else {
-        console.warn(`<Attack>target from ${attack.target_location} is null`);
-      }
     }
   } else {
     console.warn(`<Attack>attacker from ${attack.attacker_location} is null`);
   }
+
+  await sleep(2000);
 };

src/service/duel/chaining.ts

@@ -32,7 +32,7 @@ export default async (chaining: ygopro.StocGameMessage.MsgChaining) => {
 
     // 临时办法，这里延迟500ms
     // 长期：需要实现动画序列，一个动画完成后才执行下一个动画
-    await sleep(500);
+    await sleep(1000);
   } else {
     console.warn(`<Chaining>target from ${location} is null`);
   }

src/ui/Duel/PlayMat/Card/index.tsx

@@ -12,6 +12,7 @@ import { cardStore, CardType, messageStore } from "@/stores";
 
 import { interactTypeToString } from "../../utils";
 import {
+  attack,
   focus,
   moveToDeck,
   moveToGround,
@@ -90,6 +91,21 @@ export const Card: FC<{ idx: number }> = React.memo(({ idx }) => {
       await addToAnimation(() => focus({ card: state, api }));
     }
   });
+
+  eventbus.register(
+    Task.Attack,
+    async (
+      uuid: string,
+      directAttack: boolean,
+      target?: ygopro.CardLocation
+    ) => {
+      if (uuid === state.uuid) {
+        await addToAnimation(() =>
+          attack({ card: state, api, target, directAttack })
+        );
+      }
+    }
+  );
   // <<< 动画 <<<
 
   useEffect(() => {

src/ui/Duel/PlayMat/Card/springs/attack.ts

+// 暂时先简单实现攻击动画，后面有时间再慢慢优化
+import { easings } from "@react-spring/web";
+
+import { ygopro } from "@/api";
+import { CardType, isMe } from "@/stores";
+
+import { matConfig } from "../../utils";
+import { SpringApi } from "./types";
+import { asyncStart } from "./utils";
+
+const { BLOCK_WIDTH, BLOCK_HEIGHT_M, BLOCK_HEIGHT_S, COL_GAP, ROW_GAP } =
+  matConfig;
+
+export const attack = async (props: {
+  card: CardType;
+  api: SpringApi;
+  directAttack: boolean;
+  target?: ygopro.CardLocation;
+}) => {
+  const { card, api, directAttack, target } = props;
+  const current = api.current[0].get();
+
+  let x = current.x;
+  let y = current.y;
+  if (directAttack) {
+    // 直接攻击
+    y = BLOCK_HEIGHT_M.value + BLOCK_HEIGHT_S.value;
+
+    if (isMe(card.location.controller)) {
+      y = -y;
+    }
+  } else if (target) {
+    // 攻击`target`
+    const { controller, sequence } = target;
+    if (sequence > 4) {
+      // 额外怪兽区
+      x = (sequence > 5 ? 1 : -1) * (BLOCK_WIDTH.value + COL_GAP.value);
+      y = 0;
+    } else {
+      x = (sequence - 2) * (BLOCK_WIDTH.value + COL_GAP.value);
+      y = BLOCK_HEIGHT_M.value + ROW_GAP.value;
+    }
+
+    // 往下偏移半个卡位
+    y -= BLOCK_HEIGHT_M.value / 2;
+
+    if (!isMe(controller)) {
+      x = -x;
+      y = -y;
+    }
+  } else {
+    console.error(`<Spring/Attack>directAttack is false and target is null.`);
+    return;
+  }
+
+  // 先浮空
+  await asyncStart(api)({
+    z: 200,
+  });
+  // 后撤半个卡位
+  await asyncStart(api)({
+    y:
+      current.y +
+      (BLOCK_HEIGHT_M.value / 2) * (isMe(card.location.controller) ? 1 : -1),
+  });
+  // 加速前冲
+  await asyncStart(api)({
+    x,
+    y,
+    config: {
+      easing: easings.easeInOutSine,
+    },
+  });
+  // 减速归位
+  await asyncStart(api)({
+    x: current.x,
+    y: current.y,
+    z: current.z,
+    config: {
+      easing: easings.easeInOutQuad,
+    },
+  });
+};

src/ui/Duel/PlayMat/Card/springs/index.ts

+export * from "./attack";
 export * from "./focus";
 export * from "./moveToDeck";
 export * from "./moveToGround";