Merge branch 'feat/targeted' into 'main'

添加被取对象提示

See merge request !376

neos-assets/targeted.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 width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+<g id="SVGRepo_iconCarrier"> <path opacity="0.5" d="M17 9.00195C19.175 9.01406 20.3529 9.11051 21.1213 9.8789C22 10.7576 22 12.1718 22 15.0002V16.0002C22 18.8286 22 20.2429 21.1213 21.1215C20.2426 22.0002 18.8284 22.0002 16 22.0002H8C5.17157 22.0002 3.75736 22.0002 2.87868 21.1215C2 20.2429 2 18.8286 2 16.0002L2 15.0002C2 12.1718 2 10.7576 2.87868 9.87889C3.64706 9.11051 4.82497 9.01406 7 9.00195" stroke="#d9d9d9" stroke-width="1.5" stroke-linecap="round"/> <path d="M12 2L12 15M12 15L9 11.5M12 15L15 11.5" stroke="#d9d9d9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </g>
+</svg>
\ No newline at end of file

src/api/cards.ts

+import { useConfig } from "@/config";
 import sqliteMiddleWare, { sqliteCmd } from "@/middleware/sqlite";
 import { FtsParams } from "@/middleware/sqlite/fts";
 
+import { isSuperReleaseCard } from "./superPreRelease";
+
+const NeosConfig = useConfig();
+
 export interface CardMeta {
   id: number;
   data: CardData;
@@ -71,3 +76,19 @@ export function getCardStr(meta: CardMeta, idx: number): string | undefined {
   const str = `str${idx + 1}` as CardStrRange;
   return meta.text[str];
 }
+
+export function getCardImgUrl(code: number, back = false) {
+  const ASSETS_BASE =
+    import.meta.env.BASE_URL === "/"
+      ? NeosConfig.assetsPath
+      : `${import.meta.env.BASE_URL}${NeosConfig.assetsPath}`;
+  if (back || code === 0) {
+    return `${ASSETS_BASE}/card_back.jpg`;
+  }
+
+  if (isSuperReleaseCard(code)) {
+    return `${NeosConfig.preReleaseImgUrl}/${code}.jpg`;
+  } else {
+    return `${NeosConfig.releaseImgUrl}/${code}.jpg`;
+  }
+}

src/service/utils/fetchCheckCardMeta.ts

@@ -50,6 +50,7 @@ const helper = async (
     level2,
     effectDesc,
     response,
+    targeted: target?.targeted,
   };
 
   if (selected) {

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

@@ -3,10 +3,14 @@ import { Avatar, Button, Checkbox, Input, List } from "antd";
 import React, { useState } from "react";
 import { proxy, useSnapshot } from "valtio";
 
-import { CardMeta, searchCards, sendSelectOptionResponse } from "@/api";
+import {
+  CardMeta,
+  getCardImgUrl,
+  searchCards,
+  sendSelectOptionResponse,
+} from "@/api";
 import { isDeclarable, isToken } from "@/common";
 import { emptySearchConditions } from "@/middleware/sqlite/fts";
-import { getCardImgUrl } from "@/ui/Shared";
 
 import { NeosModal } from "../NeosModal";
 import styles from "./index.module.scss";

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

@@ -56,6 +56,7 @@ export const CardListModal = () => {
           <YgoCard
             code={card.code}
             key={card.uuid}
+            targeted={card.targeted}
             width={CARD_WIDTH}
             onClick={() => showCardModal(card)}
           />

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

@@ -180,6 +180,7 @@ export const SelectCardsModal: React.FC<SelectCardsModalProps> = ({
                             cover={
                               <YgoCard
                                 code={card.meta.id}
+                                targeted={card.targeted}
                                 className={styles.card}
                               />
                             }
@@ -217,7 +218,11 @@ export const SelectCardsModal: React.FC<SelectCardsModalProps> = ({
               <div>
                 <Card
                   cover={
-                    <YgoCard code={card.meta.id} className={styles.card} />
+                    <YgoCard
+                      code={card.meta.id}
+                      targeted={card.targeted}
+                      className={styles.card}
+                    />
                   }
                   className={styles["check-card"]}
                   onClick={() => {
@@ -264,6 +269,9 @@ export interface Option {
   level1?: number;
   level2?: number;
   response?: number;
+  targeted?: boolean;
   // 便于直接返回这个信息
+  //
+  // 尽量不要用这个字段
   card?: CardType;
 }

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

@@ -21,8 +21,7 @@ import React, { useEffect, useState } from "react";
 import { proxy, useSnapshot } from "valtio";
 
 import { sendSortCardResponse } from "@/api";
-import { CardMeta } from "@/api/cards";
-import { getCardImgUrl } from "@/ui/Shared";
+import { CardMeta, getCardImgUrl } from "@/api/cards";
 
 import { NeosModal } from "../NeosModal";
 

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

@@ -13,3 +13,12 @@
   background-size: contain;
   text-align: center;
 }
+
+.targeted {
+  position: relative;
+  width: 80%;
+  height: 80%;
+  justify-content: center;
+  z-index: 2;
+  pointer-events: none;
+}

src/ui/Shared/YgoCard/index.tsx

 import classNames from "classnames";
 import { CSSProperties, useMemo } from "react";
 
-import { isSuperReleaseCard } from "@/api";
+import { getCardImgUrl } from "@/api";
 import { useConfig } from "@/config";
 
 import styles from "./index.module.scss";
 
+const { assetsPath } = useConfig();
+
 interface Props {
   className?: string;
   isBack?: boolean;
   code?: number;
+  targeted?: boolean;
   // cardName?: string;
   style?: CSSProperties;
   width?: number | string;
@@ -23,6 +26,7 @@ export const YgoCard: React.FC<Props> = (props) => {
     code = 0,
     // cardName,
     isBack = false,
+    targeted = false,
     width,
     style,
     onClick,
@@ -45,27 +49,15 @@ export const YgoCard: React.FC<Props> = (props) => {
       >
         {/* 暂时不能这么写...但如果用onload的话来判断可能又很消耗性能，再看看吧 */}
         {/* {cardName} */}
+        {targeted ? (
+          <div className={styles.targeted}>
+            <img src={`${assetsPath}/targeted.svg`} />
+          </div>
+        ) : (
+          <></>
+        )}
       </div>
     ),
     [code],
   );
 };
-
-const NeosConfig = useConfig();
-
-// TODO: 这个函数应该从这个文件抽离出来作为公共的函数使用
-export function getCardImgUrl(code: number, back = false) {
-  const ASSETS_BASE =
-    import.meta.env.BASE_URL === "/"
-      ? NeosConfig.assetsPath
-      : `${import.meta.env.BASE_URL}${NeosConfig.assetsPath}`;
-  if (back || code === 0) {
-    return `${ASSETS_BASE}/card_back.jpg`;
-  }
-
-  if (isSuperReleaseCard(code)) {
-    return `${NeosConfig.preReleaseImgUrl}/${code}.jpg`;
-  } else {
-    return `${NeosConfig.releaseImgUrl}/${code}.jpg`;
-  }
-}