Merge branch 'fix/0815' into 'main'

fix: small

See merge request !264

src/common.ts

@@ -145,6 +145,11 @@ export function isLinkMonster(typeCode: number): boolean {
   return (typeCode & TYPE_LINK) > 0;
 }
 
+/** 判断是灵摆怪兽 */
+export function isPendulumMonster(typeCode: number): boolean {
+  return (typeCode & TYPE_PENDULUM) > 0;
+}
+
 // 属性
 // const ATTRIBUTE_ALL = 0x7f; //
 const ATTRIBUTE_EARTH = 0x01; //

src/styles/core.scss

 @charset "utf-8";
-@import url("https://fonts.font.im/css2?family=Electrolize&display=swap");
+@import url("https://fonts.font.im/css2?family=Electrolize&family=Noto+Serif+SC:wght@700&display=swap");
 
 body {
   color-scheme: dark;
@@ -16,6 +16,7 @@ body {
   right: 0;
   font-family: var(--theme-font);
   --theme-font: "Electrolize", sans-serif;
+  --nato-serif-font: "Noto Serif SC", serif;
   --header-height: 56px;
   #root {
     height: 100%;

src/ui/BuildDeck/CardDetail.module.scss

@@ -17,14 +17,21 @@
 
 .container {
   height: 100%;
-  background-color: hsla(0, 0%, 100%, 0.1);
-  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 0 30px 0 #ffffff54;
+  background: linear-gradient(
+    to bottom right,
+    hsla(0, 0%, 100%, 0.2),
+    hsla(0, 0%, 100%, 0)
+  );
+  box-shadow:
+    -1px 0 0 2px rgba(255, 255, 255, 0.15),
+    0 0 30px 0 #ffffff54;
   backdrop-filter: blur(20px);
   @include utils.noise-bg;
   padding: 15px;
   display: flex;
   flex-direction: column;
   position: relative;
+  border-radius: 8px;
 }
 
 .btn-close {
@@ -40,17 +47,23 @@
   flex-shrink: 0;
   border-radius: 4px;
   overflow: hidden;
-  box-shadow: 0px 14px 20px -5px rgba(0, 0, 0, 0.3);
-  transition: 0.2s;
+  box-shadow:
+    0 0px 0px -15px #5a627a,
+    0 0px 5px -30px #41485f;
+  transition: 0.3s;
+  cursor: pointer;
   &:hover {
-    --width: 220px;
-    box-shadow: 0px 20px 20px -5px rgb(0 0 0 / 60%);
+    --width: 200px;
+    filter: contrast(1.1);
+    box-shadow:
+      25px 0px 2px -15px #5a627a,
+      50px 0px 5px -30px #41485f;
   }
 }
 
 .title {
-  font-size: 16px;
-  font-family: var(--theme-font);
+  font-size: 20px;
+  font-family: var(--nato-serif-font);
   margin: 20px 0 15px;
   display: flex;
   justify-content: space-between;
@@ -58,6 +71,5 @@
 }
 
 .content {
-  // font-size: ;
   color: white;
 }

src/ui/BuildDeck/CardDetail.tsx

@@ -10,6 +10,7 @@ import {
   isMonster,
   Race2StringCodeMap,
   Type2StringCodeMap,
+  isPendulumMonster,
 } from "@/common";
 import { CardEffectText, IconFont, ScrollableArea, YgoCard } from "@/ui/Shared";
 
@@ -31,6 +32,14 @@ export const CardDetail: React.FC<{
         .join(" / "),
     [card?.data.type],
   );
+  const desc = useMemo(
+    () =>
+      isPendulumMonster(card?.data.type ?? 0)
+        ? processPendulumString(card?.text.desc ?? "")
+        : [card?.text.desc],
+    [card?.text.desc],
+  );
+
   return (
     <div className={classNames(styles.detail, { [styles.open]: open })}>
       <div className={styles.container}>
@@ -40,7 +49,9 @@ export const CardDetail: React.FC<{
           type="text"
           onClick={onClose}
         />
+        <a href={`https://ygocdb.com/card/${code}`} target="_blank">
           <YgoCard className={styles.card} code={code} />
+        </a>
         <div className={styles.title}>
           <span>{card?.text.name}</span>
           {/* <Avatar size={22}>光</Avatar> */}
@@ -87,12 +98,31 @@ export const CardDetail: React.FC<{
             )}
           </Descriptions>
           <Descriptions layout="vertical" size="small">
-            <Descriptions.Item label="卡片效果" span={3}>
-              <CardEffectText desc={card?.text.desc} />
+            {desc.filter(Boolean).map((d, i) => (
+              <Descriptions.Item
+                label={
+                  desc.length > 1 ? (i ? "怪兽效果" : "灵摆效果") : "卡片效果"
+                }
+                span={3}
+                key={i}
+              >
+                <CardEffectText desc={d} />
               </Descriptions.Item>
+            ))}
           </Descriptions>
         </ScrollableArea>
       </div>
     </div>
   );
 };
+
+function processPendulumString(input: string): string[] {
+  // 删除形如“← ... →”的结构
+  const withoutArrows = input.replace(/←.*?→/g, "");
+
+  // 以 "【怪兽效果】" 作为分隔符切割字符串
+  const splitStrings = withoutArrows.split("【怪兽效果】");
+
+  // 返回切割后的字符串列表
+  return splitStrings.map((s) => s.trim());
+}

src/ui/BuildDeck/index.module.scss

@@ -105,6 +105,10 @@
   position: relative;
   background-size: contain;
   content-visibility: auto;
+  transition: 0.1s;
+  &:hover {
+    filter: brightness(0.9);
+  }
   .cardname {
     font-size: 12px;
     position: absolute;
@@ -123,7 +127,6 @@
   }
   .cardcover {
     position: relative;
-    // z-index: 1;
   }
 }
 

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

@@ -3,10 +3,10 @@
   font-size: 14px;
   max-height: calc(100% - 237px);
   font-family: var(--theme-font);
+  white-space: pre-wrap;
 
   .maro-item {
     display: flex;
-    margin-top: 8px;
-    gap: 6px;
+    gap: 8px;
   }
 }

src/ui/Shared/CardEffectText/index.tsx

@@ -72,5 +72,3 @@ function addSpaces(str: string): string {
   const regex = /\d+/g;
   return str.replace(regex, (match) => ` ${match} `);
 }
-
-// function removePendulumPrefix(str: string): string {}