Merge branch 'fix/bugs-0709' into 'main'

Fix/bugs 0709

See merge request mycard/Neos!243

src/ui/Duel/Message/NeosModal/index.tsx

@@ -3,7 +3,7 @@ import "./index.scss";
 import { MinusOutlined, UpOutlined } from "@ant-design/icons";
 import { Modal, type ModalProps } from "antd";
 import classNames from "classnames";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 interface Props extends ModalProps {
   canBeMinimized?: boolean;
@@ -12,6 +12,12 @@ interface Props extends ModalProps {
 export const NeosModal: React.FC<Props> = (props) => {
   const { canBeMinimized = true } = props;
   const [mini, setMini] = useState(false);
+
+  // 为了修antd的bug，先让isOpen发生变化，再让它变回来
+  const [realOpen, setRealOpen] = useState(true);
+  useEffect(() => setRealOpen(false), []);
+  useEffect(() => setRealOpen(!!props.open), [props.open]);
+
   return (
     <Modal
       className={classNames("neos-modal", { "neos-modal-mini": mini })}
@@ -24,6 +30,7 @@ export const NeosModal: React.FC<Props> = (props) => {
       wrapClassName={classNames({ "neos-modal-wrap": mini })}
       closable={canBeMinimized}
       {...props}
+      open={realOpen}
     />
   );
 };

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

@@ -18,9 +18,7 @@ section#mat {
   .block {
     height: var(--block-height-m);
     width: var(--block-width);
-    // background-color: rgba(128, 128, 128, 0.447);
     background: radial-gradient(#1d1d1d, #222);
-    // box-shadow: 0 0 0 1px purple;
     position: relative;
     &.extra {
       margin-inline: calc(var(--block-width) / 2 + var(--col-gap) / 2);
@@ -29,8 +27,6 @@ section#mat {
       height: var(--block-height-s);
     }
     &.highlight {
-      // box-shadow: 0 0 0 1px #00b0ff, 0 0 13px 0px #0077ff,
-      //   0 0 11px 0 skyblue inset;
       background: #102639;
       cursor: pointer;
       // animation: blink 1s linear infinite alternate;
@@ -72,3 +68,32 @@ section#mat {
     }
   }
 }
+
+// 被禁用的样式
+.disabled-cross {
+  width: 100%;
+  height: 100%;
+  cursor: not-allowed;
+  background: linear-gradient(
+      to top right,
+      rgba(0, 0, 0, 0) 0%,
+      rgba(0, 0, 0, 0) calc(50% - 1.5px),
+      red 50%,
+      rgba(0, 0, 0, 0) calc(50% + 1.5px),
+      rgba(0, 0, 0, 0) 100%
+    ),
+    linear-gradient(
+      to bottom right,
+      rgba(0, 0, 0, 0) 0%,
+      rgba(0, 0, 0, 0) calc(50% - 1.5px),
+      red 50%,
+      rgba(0, 0, 0, 0) calc(50% + 1.5px),
+      rgba(0, 0, 0, 0) 100%
+    );
+  display: none;
+}
+.block.disabled {
+  .disabled-cross {
+    display: block;
+  }
+}

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

 import "./index.scss";
 
 import classnames from "classnames";
-import { type CSSProperties } from "react";
 import { type INTERNAL_Snapshot as Snapshot, useSnapshot } from "valtio";
 
 import { sendSelectPlaceResponse, ygopro } from "@/api";
@@ -12,25 +11,6 @@ import {
   placeStore,
 } from "@/stores";
 
-// Block被禁用的样式
-const BgDisabledStyle = {
-  background: `linear-gradient(
-      to top right,
-      rgba(0, 0, 0, 0) 0%,
-      rgba(0, 0, 0, 0) calc(50% - 1.5px),
-      red 50%,
-      rgba(0, 0, 0, 0) calc(50% + 1.5px),
-      rgba(0, 0, 0, 0) 100%
-    ), linear-gradient(
-      to bottom right,
-      rgba(0, 0, 0, 0) 0%,
-      rgba(0, 0, 0, 0) calc(50% - 1.5px),
-      red 50%,
-      rgba(0, 0, 0, 0) calc(50% + 1.5px),
-      rgba(0, 0, 0, 0) 100%
-    )`,
-};
-
 const BgExtraRow: React.FC<{
   meSnap: Snapshot<BlockState[]>;
   opSnap: Snapshot<BlockState[]>;
@@ -42,18 +22,15 @@ const BgExtraRow: React.FC<{
           key={i}
           className={classnames("block", "extra", {
             highlight: !!meSnap[i].interactivity || !!opSnap[i].interactivity,
+            disabled: meSnap[i].disabled || opSnap[i].disabled,
           })}
-          style={
-            meSnap[i].disabled || opSnap[i].disabled
-              ? (BgDisabledStyle as CSSProperties)
-              : {}
-          }
           onClick={() => {
             onBlockClick(meSnap[i].interactivity);
             onBlockClick(opSnap[i].interactivity);
           }}
         >
           {<DecoTriangles />}
+          {<DisabledCross />}
         </div>
       ))}
     </div>
@@ -72,11 +49,12 @@ const BgRow: React.FC<{
         className={classnames("block", {
           szone: isSzone,
           highlight: !!snap[i].interactivity,
+          disabled: snap[i].disabled,
         })}
-        style={snap[i].disabled ? (BgDisabledStyle as CSSProperties) : {}}
         onClick={() => onBlockClick(snap[i].interactivity)}
       >
         {<DecoTriangles />}
+        {<DisabledCross />}
       </div>
     ))}
   </div>
@@ -113,3 +91,5 @@ const DecoTriangles: React.FC = () => (
     ))}
   </>
 );
+
+const DisabledCross: React.FC = () => <div className="disabled-cross"></div>;

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

@@ -16,6 +16,7 @@ export const focus = async (props: { card: CardType; api: SpringApi }) => {
       y: current.y + (matStore.isMe(card.location.controller) ? -1 : 1) * 120, // TODO: 放到config之中
       ry: 0,
       rz: 0,
+      z: current.z + 50,
     });
     await asyncStart(api)({
       y: current.y,