Merge branch 'feat/animation/become_target' into 'main'

Feat/animation/become target

See merge request mycard/Neos!228

src/service/duel/becomeTarget.ts

@@ -10,7 +10,7 @@ export default (becomeTarget: ygopro.StocGameMessage.MsgBecomeTarget) => {
     );
     if (target) {
       console.info(`${target.meta.text.name} become target`);
-      // TODO: 动画
+      target.selected = true;
     } else {
       console.warn(`<BecomeTarget>target from ${location} is null`);
     }

src/service/duel/chainEnd.ts

@@ -15,4 +15,12 @@ export default (_chainEnd: ygopro.StocGameMessage.MsgChainEnd) => {
       console.warn(`<ChainEnd>target from ${chain} is null`);
     }
   }
+
+  // 目前selected字段只会涉及连锁过程某些卡成为效果对象，
+  // 因此在连锁结束的时候把selected标记清掉。
+  //
+  // TODO: 这里每次都要全部遍历一遍，后续可以优化下
+  for (const card of cardStore.inner) {
+    card.selected = false;
+  }
 };

src/service/duel/start.ts

@@ -63,6 +63,7 @@ export default async (start: ygopro.StocGameMessage.MsgStart) => {
             text: {},
           },
           isToken: !((i + 1) % 3),
+          selected: false,
         })
       )
     )

src/service/duel/updateData.ts

@@ -48,9 +48,6 @@ export default (updateData: MsgUpdateData) => {
           );
           console.info(field);
         }
-        if (target?.reload) {
-          target.reload = false;
-        }
       }
     });
   }

src/stores/cardStore.ts

@@ -20,11 +20,10 @@ export interface CardType {
     sequence: number;
   }>; // 选择位置状态下的互动信息
   counters: { [type: number]: number }; // 指示器
-  reload?: boolean; // 这个字段会在收到MSG_RELOAD_FIELD的时候设置成true，在收到MSG_UPDATE_DATE的时候设置成false
   isToken: boolean; // 是否是token
-
   chainIndex?: number /*连锁的序号，如果为空表示不在连锁
   TODO: 目前是妥协的设计，因为其实一张卡是可以在同一个连锁链中被连锁多次的，这里为了避免太过复杂只保存最后的连锁序号*/;
+  selected: boolean; // 当前卡是否被选择成为效果的对象
 }
 
 class CardStore {

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

@@ -10,8 +10,10 @@ section#mat {
     .card-img-wrap {
       transform-style: preserve-3d;
       position: relative;
-      height: 100%;
-      width: 100%;
+      margin: auto auto;
+      top: 2%;
+      height: 96%;
+      width: 96%;
       transform: translateZ(calc(var(--z) * 1px + 0.1px))
         rotateY(calc(var(--ry) * 1deg));
       .card-cover,
@@ -40,6 +42,38 @@ section#mat {
       // background-color: #0000005e;
       // filter: blur(2px);
     }
+    // ref: https://github.com/Mr-majifu/Animated-Profile-Card02/blob/master/style.css
+    .card-streamer {
+      position: absolute;
+      inset: 0;
+      background: #000;
+      overflow: hidden;
+    }
+    .card-streamer::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 400%;
+      height: 80%;
+      background: linear-gradient(transparent, #45f3ff,#45f3ff,#45f3ff,transparent);
+      animation: stream 2s linear infinite;
+    }
+    .card-streamer::after {
+      content: '';
+      position: absolute;
+      /* https://developer.mozilla.org/en-US/docs/Web/CSS/inset */
+      inset: 3px;
+      background: #292929;
+    }
+    @keyframes stream {
+      0% {
+        transform: translate(-50%, -50%) rotate(0deg);
+      }
+      100% {
+        transform: translate(-50%, -50%) rotate(360deg);
+      }
+    }
   }
 }
 

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

@@ -116,7 +116,7 @@ export const Card: FC<{ idx: number }> = React.memo(({ idx }) => {
 
   return (
     <animated.div
-      className={classnames("mat-card", { highlight })}
+      className="mat-card"
       style={
         {
           transform: to(
@@ -139,7 +139,7 @@ export const Card: FC<{ idx: number }> = React.memo(({ idx }) => {
       }}
     >
       <div className="card-shadow" />
-      <div className="card-img-wrap">
+      <div className={classnames("card-img-wrap", { highlight })}>
         <img
           className="card-cover"
           onError={() => {
@@ -149,6 +149,7 @@ export const Card: FC<{ idx: number }> = React.memo(({ idx }) => {
         />
         <img className="card-back" src={getCardImgUrl(0, true)} />
       </div>
+      {snap.selected ? <div className="card-streamer" /> : <></>}
     </animated.div>
   );
 });