Commit cdb54980 authored by timel's avatar timel

fix: small

parent 3a9b2d64
......@@ -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; //
......
@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%;
......
......@@ -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;
}
......@@ -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}
/>
<YgoCard className={styles.card} code={code} />
<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} />
</Descriptions.Item>
{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());
}
......@@ -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;
}
}
......
......@@ -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;
}
}
......@@ -72,5 +72,3 @@ function addSpaces(str: string): string {
const regex = /\d+/g;
return str.replace(regex, (match) => ` ${match} `);
}
// function removePendulumPrefix(str: string): string {}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment