Skip to content

N
Neos
Commit 88119219 authored by timel's avatar timel
Browse files
Options

refactor: 5%

parent 361c3398
Hide whitespace changes
Inline Side-by-side
Showing with 95 additions and 117 deletions
src/ui/Duel/Message/SelectCardsModal/index.scss → src/ui/Duel/Message/SelectCardsModal/index.module.scss
View file @ 88119219
.checkcard-container { .checkcard-container {
position: relative; position: relative;
// padding-left: 10px;
// &::after {
// position: absolute;
// width: 3px;
// height: 100%;
// content: "";
// z-index: 1;
// left: 0;
// top: 0;
// background-color: rgb(0, 54, 189);
// }
.btns { .btns {
width: 100%; width: 100%;
top: 50%; top: 50%;
...@@ -43,3 +32,25 @@ ...@@ -43,3 +32,25 @@
} }
} }
} }
.check-group {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
.check-card {
width: 100px;
aspect-ratio: var(--card-ratio);
margin-inline-end: 0;
margin-block-end: 0;
flex-shrink: 0;
}
.card {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
src/ui/Duel/Message/SelectCardsModal/index.tsx
View file @ 88119219
import "./index.scss";
import { CheckCard } from "@ant-design/pro-components"; import { CheckCard } from "@ant-design/pro-components";
import { Button, Card, Segmented, Space, Tooltip } from "antd"; import { Button, Card, Segmented, Space, Tooltip } from "antd";
import { CSSProperties, useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { INTERNAL_Snapshot as Snapshot, useSnapshot } from "valtio"; import { INTERNAL_Snapshot as Snapshot, useSnapshot } from "valtio";
import type { CardMeta, ygopro } from "@/api"; import type { CardMeta, ygopro } from "@/api";
...@@ -13,26 +11,7 @@ import { YgoCard } from "@/ui/Shared"; ...@@ -13,26 +11,7 @@ import { YgoCard } from "@/ui/Shared";
import { groupBy } from "../../utils"; import { groupBy } from "../../utils";
import { showCardModal } from "../CardModal"; import { showCardModal } from "../CardModal";
import { NeosModal } from "../NeosModal"; import { NeosModal } from "../NeosModal";
import styles from "./index.module.scss";
const YgoCardStyle = {
width: "100%",
height: "100%",
position: "absolute",
left: 0,
top: 0,
};
const CheckCardStyle = {
width: 100,
aspectRatio: 5.9 / 8.6,
marginInlineEnd: 0,
marginBlockEnd: 0,
flexShrink: 0,
};
const CheckGroupStyle = {
display: "grid",
gridTemplateColumns: "repeat(5, 1fr)",
gap: 10,
};
export interface SelectCardsModalProps { export interface SelectCardsModalProps {
isOpen: boolean; isOpen: boolean;
...@@ -148,88 +127,76 @@ export const SelectCardsModal: React.FC<SelectCardsModalProps> = ({ ...@@ -148,88 +127,76 @@ export const SelectCardsModal: React.FC<SelectCardsModalProps> = ({
</> </>
} }
> >
<div className="check-container"> <Space direction="vertical" style={{ width: "100%", overflow: "hidden" }}>
<Space <Selector
direction="vertical" zoneOptions={zoneOptions}
style={{ width: "100%", overflow: "hidden" }} selectedZone={selectedZone}
> onChange={setSelectedZone as any}
<Selector />
zoneOptions={zoneOptions} {grouped.map(
selectedZone={selectedZone} (options, i) =>
onChange={setSelectedZone as any} options[0] === selectedZone && (
/> <div className={styles["checkcard-container"]} key={i}>
{grouped.map( <CheckCard.Group
(options, i) => onChange={(res) => {
options[0] === selectedZone && ( setResult((isMultiple ? res : [res]) as any);
<div className="checkcard-container" key={i}> }}
<CheckCard.Group // TODO 考虑如何设置默认值，比如只有一个的，就直接选中
onChange={(res) => { multiple={isMultiple}
setResult((isMultiple ? res : [res]) as any); className={styles["check-group"]}
}} >
// TODO 考虑如何设置默认值，比如只有一个的，就直接选中 {options[1].map((card, j) => (
multiple={isMultiple} <Tooltip title={card.effectDesc} placement="bottom" key={j}>
style={CheckGroupStyle} {/* 这儿必须有一个div，不然tooltip不生效 */}
> <div>
{options[1].map((card, j) => ( <CheckCard
<Tooltip cover={
title={card.effectDesc} <YgoCard
placement="bottom" code={card.meta.id}
key={j} className={styles.card}
> />
{/* 这儿必须有一个div，不然tooltip不生效 */} }
<div> className={styles["check-card"]}
<CheckCard value={card}
cover={ onClick={() => {
<YgoCard showCardModal(card);
code={card.meta.id} }}
style={YgoCardStyle as CSSProperties} />
/> </div>
} </Tooltip>
style={CheckCardStyle} ))}
value={card} </CheckCard.Group>
onClick={() => { </div>
showCardModal(card); )
}} )}
/> <p>
</div> <span>
</Tooltip> {/* TODO: 这里的字体可以调整下 */}
))} {selecteds.length > 0 ? fetchStrings("!system", 212) : ""}
</CheckCard.Group> </span>
</div> </p>
) <div className={styles["check-group"]}>
)} {selecteds.map((card, i) => (
<p> <Tooltip
<span> title={card.effectDesc}
{/* TODO: 这里的字体可以调整下 */} placement="bottom"
{selecteds.length > 0 ? fetchStrings("!system", 212) : ""} key={grouped.length + i}
</span> >
</p> <div>
<div style={CheckGroupStyle}> <Card
{selecteds.map((card, i) => ( cover={
<Tooltip <YgoCard code={card.meta.id} className={styles.card} />
title={card.effectDesc} }
placement="bottom" className={styles["check-card"]}
key={grouped.length + i} onClick={() => {
> showCardModal(card);
<div> }}
<Card />
cover={ </div>
<YgoCard </Tooltip>
code={card.meta.id} ))}
style={YgoCardStyle as CSSProperties} </div>
/> </Space>
}
style={CheckCardStyle}
onClick={() => {
showCardModal(card);
}}
/>
</div>
</Tooltip>
))}
</div>
</Space>
</div>
</NeosModal> </NeosModal>
); );
}; };
......
src/ui/Shared/YgoCard/index.tsx
View file @ 88119219
...@@ -19,7 +19,7 @@ export const YgoCard: React.FC<Props> = (props) => { ...@@ -19,7 +19,7 @@ export const YgoCard: React.FC<Props> = (props) => {
className, className,
code = 0, code = 0,
isBack = false, isBack = false,
width = 80, width,
style, style,
onClick = () => {}, onClick = () => {},
} = props; } = props;
......
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