Commit 7573e743 authored by chechunchi's avatar chechunchi

optimize CardModal.tsx

parent a9f70fff
Pipeline #21502 passed with stages
in 16 minutes and 14 seconds
.card-modal {
position: fixed;
display: flex;
left: 5%;
top: 20%;
border-style: groove;
border-radius: 8px;
width: 200px;
flex-wrap: wrap;
background-color: #303030;
padding: 1%;
--visibility: hidden;
visibility: var(--visibility);
--opacity: 0;
opacity: var(--opacity);
transition:visibility 0.3s linear, opacity 0.3s linear;
}
.card-modal-container {
display: flex;
flex-direction: column;
gap: 5px;
}
.card-modal-name {
font-weight: bold;
}
.card-modal-attribute {
font-weight: bold;
}
.card-modal-atk {
font-weight: bold;
}
.card-modal-counter {
font-weight: bold;
}
.card-modal-effect {
font-weight: lighter;
text-align: left;
max-height: 200px;
overflow: auto;
}
.card-modal-btn {
margin: 1px 5px;
font-size: 80%;
border-color: yellow;
}
import Icon, { StarOutlined } from "@ant-design/icons";
import { Button, Card, Col, Modal, Row } from "antd";
import { ReactComponent as BattleSvg } from "neos-assets/battle-axe.svg";
import { ReactComponent as DefenceSvg } from "neos-assets/checked-shield.svg";
import "@/styles/card-modal.scss";
import classnames from "classnames";
import React from "react";
import { useSnapshot } from "valtio";
......@@ -19,105 +18,72 @@ import {
Type2StringCodeMap,
} from "../../../common";
const NeosConfig = useConfig();
const { Meta } = Card;
const CARD_WIDTH = 240;
const { cardModal } = messageStore;
const NeosConfig = useConfig();
const CARD_WIDTH = 200;
export const CardModal = () => {
const snapCardModal = useSnapshot(cardModal);
const snap = useSnapshot(cardModal);
const isOpen = snapCardModal.isOpen;
const meta = snapCardModal.meta;
const isOpen = snap.isOpen;
const meta = snap.meta;
const name = meta?.text.name;
const types = meta?.data.type;
const race = meta?.data.race;
const attribute = meta?.data.attribute;
const level = meta?.data.level;
const desc = meta?.text.desc;
const atk = meta?.data.atk;
const def = meta?.data.def;
// const counters = useAppSelector(selectCardModalCounters);
const counters = snapCardModal.counters;
const counters = snap.counters;
const imgUrl = meta?.id
? `${NeosConfig.cardImgUrl}/${meta.id}.jpg`
: undefined;
const interactivies = snapCardModal.interactivies;
const handleOkOrCancel = () => {
cardModal.isOpen = false;
};
const interactivies = snap.interactivies;
return (
<Modal open={isOpen} onOk={handleOkOrCancel} onCancel={handleOkOrCancel}>
<Card
hoverable
style={{ width: CARD_WIDTH }}
cover={<img alt={name} src={imgUrl} />}
>
<Meta title={name} />
<div
className={classnames("card-modal")}
style={
{
"--visibility": isOpen ? "visible" : "hidden",
"--opacity": isOpen ? 1 : 0,
} as any
}
>
<div className="card-modal-container">
<img src={imgUrl} width={CARD_WIDTH} />
<div className="card-modal-name">{name}</div>
<AttLine
types={extraCardTypes(types || 0)}
race={race}
attribute={attribute}
/>
<AtkLine level={level} atk={atk} def={def} />
<AtkLine atk={atk} def={def} />
<CounterLine counters={counters} />
<p>{desc}</p>
</Card>
{interactivies.map((interactive, idx) => {
return (
<Button
key={idx}
onClick={() => {
sendSelectIdleCmdResponse(interactive.response);
cardModal.isOpen = false;
clearAllIdleInteractivities(0);
clearAllIdleInteractivities(1);
}}
>
{interactive.desc}
</Button>
);
})}
</Modal>
<div className="card-modal-effect">{desc}</div>
{interactivies.map((interactive, idx) => {
return (
<button
key={idx}
className="card-modal-btn"
onClick={() => {
sendSelectIdleCmdResponse(interactive.response);
cardModal.isOpen = false;
clearAllIdleInteractivities(0);
clearAllIdleInteractivities(1);
}}
>
{interactive.desc}
</button>
);
})}
</div>
</div>
);
};
const AtkLine = (props: { level?: number; atk?: number; def?: number }) => (
<Row gutter={8}>
{props.level ? (
<Col>
<StarOutlined />
{props.level}
</Col>
) : (
<></>
)}
{props.atk ? (
<Col>
<Icon component={BattleSvg} />
<a>{props.atk}</a>
</Col>
) : (
<></>
)}
<Col>/</Col>
{props.def ? (
<Col>
<Icon component={DefenceSvg} />
<a>{props.def}</a>
</Col>
) : (
<></>
)}
</Row>
);
const AttLine = (props: {
types: number[];
race?: number;
......@@ -125,23 +91,24 @@ const AttLine = (props: {
}) => {
const race = props.race
? fetchStrings("!system", Race2StringCodeMap.get(props.race) || 0)
: undefined;
: "?";
const attribute = props.attribute
? fetchStrings("!system", Attribute2StringCodeMap.get(props.attribute) || 0)
: undefined;
: "?";
const types = props.types
.map((t) => fetchStrings("!system", Type2StringCodeMap.get(t) || 0))
.join("|");
return (
<Row gutter={8}>
<Col>{`[${types}]`}</Col>
{race ? <Col>{race}</Col> : <></>}
<Col>/</Col>
{attribute ? <Col>{attribute}</Col> : <></>}
</Row>
<div className="card-modal-attribute">{`【 ${race} / ${types} 】【 ${attribute} 】`}</div>
);
};
const AtkLine = (props: { atk?: number; def?: number }) => (
<div className="card-modal-atk">{`ATK/${
props.atk !== undefined ? props.atk : "?"
} DEF/${props.def !== undefined ? props.def : "?"}`}</div>
);
const CounterLine = (props: { counters: { [type: number]: number } }) => {
const counters = [];
for (const counterType in props.counters) {
......@@ -152,13 +119,11 @@ const CounterLine = (props: { counters: { [type: number]: number } }) => {
}
}
return counters.length > 0 ? (
<Row gutter={8}>
return (
<>
{counters.map((counter) => (
<Col>{counter}</Col>
<div className="card-modal-counter">{counter}</div>
))}
</Row>
) : (
<></>
</>
);
};
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