fix: bg css

src/ui/Duel/PlayMat/Bg/index.module.scss

@@ -5,7 +5,7 @@
   justify-content: center;
   align-items: center;
   background-color: transparent;
-  .bg-row {
+  .row {
     display: flex;
     column-gap: var(--col-gap);
     &.opponent {
@@ -28,7 +28,6 @@
   &.highlight {
     background: #102639;
     cursor: pointer;
-    // animation: blink 1s linear infinite alternate;
     .triangle {
       --color: #006eff;
       transform: scale(1.5);
@@ -67,6 +66,61 @@
   }
 }
 
+// 下面应该和moveToOutside、moveToGround对应
+.other-blocks {
+  width: 0;
+  height: 0;
+  &.op {
+    transform: rotate(180deg);
+  }
+  position: absolute;
+  --height: var(--card-height-o);
+  --width: calc(var(--height) * var(--card-ratio));
+  --left: calc(
+    var(--col-gap) * 2 + var(--block-width) * 2.5 +
+      var(--block-outside-offset-x) + var(--width) / 2
+  );
+  --top: calc(
+    var(--row-gap) + var(--block-height-m) +
+      (var(--block-height-m) - var(--height)) / 2
+  );
+
+  .banish,
+  .field,
+  .graveyard,
+  .deck,
+  .extra-deck {
+    position: absolute;
+    transform: translate(-50%, -50%);
+    height: var(--height);
+    width: var(--width);
+    top: var(--top);
+    left: var(--left);
+  }
+  .field {
+    left: calc(-1 * var(--left));
+  }
+  .banish {
+    top: calc(var(--top) - var(--row-gap) - var(--height));
+  }
+  .deck {
+    --left: calc(
+      var(--deck-offset-x) + 2 * (var(--block-width) + var(--col-gap))
+    );
+    left: var(--left);
+    top: calc(
+      var(--deck-offset-y) + 2 * var(--block-height-m) + 2 * var(--row-gap)
+    );
+    transform: translate(-50%, -50%) rotate(calc(-1 * var(--deck-rotate-z)));
+    height: var(--deck-card-height);
+    width: calc(var(--deck-card-height) * var(--card-ratio));
+    &.extra-deck {
+      left: calc(-1 * var(--left));
+      transform: translate(-50%, -50%) rotate(var(--deck-rotate-z));
+    }
+  }
+}
+
 // 被禁用的样式
 .disabled-cross {
   width: 100%;
@@ -90,8 +144,17 @@
     );
   display: none;
 }
-.block.disabled {
-  .disabled-cross {
-    display: block;
+
+.disabled-cross.show {
+  display: block;
+}
+
+.block.glowing {
+  --card-shadow-color: #13a1ff;
+  box-shadow: 0 0 3px 3px var(--card-shadow-color), 0 0 25px 2px #0099ff87;
+  background: var(--card-shadow-color);
+  border-radius: 2px;
+  .triangle {
+    display: none;
   }
 }

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

@@ -27,9 +27,9 @@ const BgBlock: React.FC<
 }) => (
   <div
     {...rest}
-    className={classnames("block", className, {
-      highlight,
-      glowing,
+    className={classnames(styles.block, className, {
+      [styles.highlight]: highlight,
+      [styles.glowing]: glowing,
     })}
   >
     {<DecoTriangles />}
@@ -42,11 +42,11 @@ const BgExtraRow: React.FC<{
   opSnap: Snapshot<BlockState[]>;
 }> = ({ meSnap, opSnap }) => {
   return (
-    <div className={classnames("bg-row")}>
+    <div className={classnames(styles.row)}>
       {Array.from({ length: 2 }).map((_, i) => (
         <BgBlock
           key={i}
-          className="extra"
+          className={styles.extra}
           onClick={() => {
             onBlockClick(meSnap[i].interactivity);
             onBlockClick(opSnap[i].interactivity);
@@ -64,11 +64,11 @@ const BgRow: React.FC<{
   opponent?: boolean;
   snap: Snapshot<BlockState[]>;
 }> = ({ szone = false, opponent = false, snap }) => (
-  <div className={classnames("bg-row", { opponent })}>
+  <div className={classnames(styles.row, { [styles.opponent]: opponent })}>
     {Array.from({ length: 5 }).map((_, i) => (
       <BgBlock
         key={i}
-        className={classnames({ szone })}
+        className={classnames({ [styles.szone]: szone })}
         onClick={() => onBlockClick(snap[i].interactivity)}
         disabled={snap[i].disabled}
         highlight={!!snap[i].interactivity}
@@ -77,7 +77,7 @@ const BgRow: React.FC<{
   </div>
 );
 
-const BgOtherBlocks: React.FC<{ me?: boolean }> = ({ me }) => {
+const BgOtherBlocks: React.FC<{ op?: boolean }> = ({ op }) => {
   useSnapshot(cardStore);
   const meController = isMe(0) ? 0 : 1;
   const judgeGlowing = (zone: ygopro.CardZone) =>
@@ -88,12 +88,15 @@ const BgOtherBlocks: React.FC<{ me?: boolean }> = ({ me }) => {
   const glowingGraveyard = judgeGlowing(ygopro.CardZone.GRAVE);
   const glowingBanish = judgeGlowing(ygopro.CardZone.REMOVED);
   return (
-    <div className={classnames("bg-other-blocks", { me, op: !me })}>
-      <BgBlock className="banish" glowing={me && glowingBanish} />
-      <BgBlock className="graveyard" glowing={me && glowingGraveyard} />
-      <BgBlock className="field" />
-      <BgBlock className="deck" />
-      <BgBlock className="deck extra-deck" glowing={me && glowingExtra} />
+    <div className={classnames(styles["other-blocks"], { [styles.op]: op })}>
+      <BgBlock className={styles.banish} glowing={!op && glowingBanish} />
+      <BgBlock className={styles.graveyard} glowing={!op && glowingGraveyard} />
+      <BgBlock className={styles.field} />
+      <BgBlock className={styles.deck} />
+      <BgBlock
+        className={classnames(styles.deck, styles["extra-deck"])}
+        glowing={!op && glowingExtra}
+      />
     </div>
   );
 };
@@ -101,7 +104,7 @@ const BgOtherBlocks: React.FC<{ me?: boolean }> = ({ me }) => {
 export const Bg: React.FC = () => {
   const snap = useSnapshot(placeStore.inner);
   return (
-    <div className="mat-bg">
+    <div className={styles["mat-bg"]}>
       <BgRow snap={snap[ygopro.CardZone.SZONE].op} szone opponent />
       <BgRow snap={snap[ygopro.CardZone.MZONE].op} opponent />
       <BgExtraRow
@@ -110,8 +113,8 @@ export const Bg: React.FC = () => {
       />
       <BgRow snap={snap[ygopro.CardZone.MZONE].me} />
       <BgRow snap={snap[ygopro.CardZone.SZONE].me} szone />
-      <BgOtherBlocks me />
       <BgOtherBlocks />
+      <BgOtherBlocks op />
     </div>
   );
 };
@@ -127,11 +130,15 @@ const onBlockClick = (placeInteractivity: PlaceInteractivity) => {
 const DecoTriangles: React.FC = () => (
   <>
     {Array.from({ length: 4 }).map((_, i) => (
-      <div className="triangle" key={i} />
+      <div className={styles.triangle} key={i} />
     ))}
   </>
 );
 
 const DisabledCross: React.FC<{ disabled: boolean }> = ({ disabled }) => (
-  <div className={classnames("disabled-cross", { show: disabled })}></div>
+  <div
+    className={classnames(styles["disabled-cross"], {
+      [styles.show]: disabled,
+    })}
+  ></div>
 );