add chaining hint

neos-assets/chaining.svg

+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg fill="#ffffff" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 31.891 31.891" xml:space="preserve">
+<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+<g id="SVGRepo_iconCarrier"> <g> <path d="M30.543,5.74l-4.078-4.035c-1.805-1.777-4.736-1.789-6.545-0.02l-4.525,4.414c-1.812,1.768-1.82,4.648-0.02,6.424 l2.586-2.484c-0.262-0.791,0.061-1.697,0.701-2.324l2.879-2.807c0.912-0.885,2.375-0.881,3.275,0.01l2.449,2.42 c0.9,0.891,0.896,2.326-0.01,3.213l-2.879,2.809c-0.609,0.594-1.609,0.92-2.385,0.711l-2.533,2.486 c1.803,1.781,4.732,1.789,6.545,0.02l4.52-4.41C32.34,10.396,32.346,7.519,30.543,5.74z"/> <path d="M13.975,21.894c0.215,0.773-0.129,1.773-0.752,2.381l-2.689,2.627c-0.922,0.9-2.414,0.895-3.332-0.012l-2.498-2.461 c-0.916-0.906-0.91-2.379,0.012-3.275l2.691-2.627c0.656-0.637,1.598-0.961,2.42-0.689l2.594-2.57 c-1.836-1.811-4.824-1.82-6.668-0.02l-4.363,4.26c-1.846,1.803-1.855,4.734-0.02,6.549l4.154,4.107 c1.834,1.809,4.82,1.818,6.668,0.018l4.363-4.26c1.844-1.805,1.852-4.734,0.02-6.547L13.975,21.894z"/> <path d="M11.139,20.722c0.611,0.617,1.611,0.623,2.234,0.008l7.455-7.416c0.621-0.617,0.625-1.615,0.008-2.234 c-0.613-0.615-1.611-0.619-2.23-0.006l-7.457,7.414C10.529,19.103,10.525,20.101,11.139,20.722z"/> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </g> </g>
+</svg>
\ No newline at end of file

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

@@ -6,6 +6,7 @@ import { ygopro } from "@/api";
 import { cardStore, CardType } from "@/stores";
 import { YgoCard } from "@/ui/Shared";
 
+import { isChaining } from "../../utils";
 import { showCardModal } from "../CardModal";
 
 const CARD_WIDTH = "6.25rem";
@@ -57,6 +58,7 @@ export const CardListModal = () => {
             code={card.code}
             key={card.uuid}
             targeted={card.targeted}
+            chaining={isChaining(card.location)}
             width={CARD_WIDTH}
             onClick={() => showCardModal(card)}
           />

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

@@ -9,7 +9,7 @@ import { fetchStrings } from "@/api";
 import { CardType, isMe, matStore } from "@/stores";
 import { ScrollableArea, YgoCard } from "@/ui/Shared";
 
-import { groupBy } from "../../utils";
+import { groupBy, isChaining } from "../../utils";
 import { showCardModal } from "../CardModal";
 import { NeosModal } from "../NeosModal";
 import styles from "./index.module.scss";
@@ -47,7 +47,7 @@ export const SelectCardsModal: React.FC<SelectCardsModalProps> = ({
   onCancel,
   onFinish,
 }) => {
-  const grouped = groupBy(selectables, (option) => option.location?.zone!);
+  const grouped = groupBy(selectables, (option) => option.location.zone);
   const [result, setResult] = useState<[ygopro.CardZone, Option[]][]>([]);
   const [submitable, setSubmitable] = useState(false);
 
@@ -181,12 +181,15 @@ export const SelectCardsModal: React.FC<SelectCardsModalProps> = ({
                               <YgoCard
                                 code={card.meta.id}
                                 targeted={card.targeted}
+                                chaining={isChaining(
+                                  card.location as ygopro.CardLocation,
+                                )}
                                 className={styles.card}
                               />
                             }
                             className={classnames(styles["check-card"], {
                               [styles.opponent]:
-                                card.location?.controller !== undefined &&
+                                card.location.controller !== undefined &&
                                 !isMe(card.location.controller),
                             })}
                             value={card}
@@ -221,6 +224,9 @@ export const SelectCardsModal: React.FC<SelectCardsModalProps> = ({
                     <YgoCard
                       code={card.meta.id}
                       targeted={card.targeted}
+                      chaining={isChaining(
+                        card.location as ygopro.CardLocation,
+                      )}
                       className={styles.card}
                     />
                   }
@@ -262,7 +268,7 @@ const Selector: React.FC<{
 export interface Option {
   // card id
   meta: CardMeta;
-  location?: ygopro.CardLocation;
+  location: ygopro.CardLocation;
   // 效果
   effectDesc?: string;
   // 作为素材的cost，比如同调召唤的星级

src/ui/Duel/utils/index.ts

@@ -2,4 +2,5 @@ export * from "./clearAllIdleInteractivities";
 export * from "./clearSelectInfo";
 export * from "./groupBy";
 export * from "./interactTypeToStringIcon";
+export * from "./isChaining";
 export * from "./zip";

src/ui/Duel/utils/isChaining.ts

+import { ygopro } from "@/api";
+import { matStore } from "@/stores";
+
+export function isChaining(location: ygopro.CardLocation): boolean {
+  return (
+    matStore.chains.find(
+      (chain) =>
+        location.controller === chain.controller &&
+        location.zone === chain.zone &&
+        location.sequence === chain.sequence,
+    ) !== undefined
+  );
+}

src/ui/Shared/YgoCard/index.module.scss

@@ -22,3 +22,12 @@
   z-index: 2;
   pointer-events: none;
 }
+
+.chaining {
+  position: relative;
+  width: 60%;
+  height: 60%;
+  justify-content: center;
+  z-index: 2;
+  pointer-events: none;
+}

src/ui/Shared/YgoCard/index.tsx

@@ -13,6 +13,7 @@ interface Props {
   isBack?: boolean;
   code?: number;
   targeted?: boolean;
+  chaining?: boolean;
   // cardName?: string;
   style?: CSSProperties;
   width?: number | string;
@@ -27,6 +28,7 @@ export const YgoCard: React.FC<Props> = (props) => {
     // cardName,
     isBack = false,
     targeted = false,
+    chaining = false,
     width,
     style,
     onClick,
@@ -56,6 +58,13 @@ export const YgoCard: React.FC<Props> = (props) => {
         ) : (
           <></>
         )}
+        {chaining ? (
+          <div className={styles.chaining}>
+            <img src={`${assetsPath}/chaining.svg`} />
+          </div>
+        ) : (
+          <></>
+        )}
       </div>
     ),
     [code],