Commit 74564d82 authored by chechunchi's avatar chechunchi

update SelectCardsModal

parent 3d30aa6c
...@@ -36,7 +36,7 @@ export const SelectCardsModal: React.FC<SelectCardsModalProps> = ({ ...@@ -36,7 +36,7 @@ export const SelectCardsModal: React.FC<SelectCardsModalProps> = ({
min, min,
max, max,
single, single,
selecteds: _selecteds, selecteds,
selectables, selectables,
mustSelects, mustSelects,
cancelable, cancelable,
...@@ -131,6 +131,9 @@ export const SelectCardsModal: React.FC<SelectCardsModalProps> = ({ ...@@ -131,6 +131,9 @@ export const SelectCardsModal: React.FC<SelectCardsModalProps> = ({
direction="vertical" direction="vertical"
style={{ width: "100%", overflow: "hidden" }} style={{ width: "100%", overflow: "hidden" }}
> >
{selecteds.map((card, i) => (
<OptionCard key={i} {...card as Option} />
))}
<Selector <Selector
zoneOptions={zoneOptions} zoneOptions={zoneOptions}
selectedZone={selectedZone} selectedZone={selectedZone}
...@@ -153,40 +156,7 @@ export const SelectCardsModal: React.FC<SelectCardsModalProps> = ({ ...@@ -153,40 +156,7 @@ export const SelectCardsModal: React.FC<SelectCardsModalProps> = ({
}} }}
> >
{options[1].map((card, j) => ( {options[1].map((card, j) => (
<Tooltip <OptionCard key={j} {...(card as Option)} />
title={card.effectDesc}
placement="bottom"
key={j}
>
{/* 这儿必须有一个div,不然tooltip不生效 */}
<div>
<CheckCard
cover={
<YgoCard
code={card.meta.id}
style={{
width: "100%",
height: "100%",
position: "absolute",
left: 0,
top: 0,
}}
/>
}
style={{
width: 100,
aspectRatio: 5.9 / 8.6,
marginInlineEnd: 0,
marginBlockEnd: 0,
flexShrink: 0,
}}
value={card}
onClick={() => {
showCardModal(card);
}}
/>
</div>
</Tooltip>
))} ))}
</CheckCard.Group> </CheckCard.Group>
</div> </div>
...@@ -219,6 +189,42 @@ const Selector: React.FC<{ ...@@ -219,6 +189,42 @@ const Selector: React.FC<{
<></> <></>
); );
const OptionCard: React.FC<Option> = (props) => {
const { effectDesc, meta } = props;
return (
<Tooltip title={effectDesc} placement="bottom">
{/* 这儿必须有一个div,不然tooltip不生效 */}
<div>
<CheckCard
cover={
<YgoCard
code={meta.id}
style={{
width: "100%",
height: "100%",
position: "absolute",
left: 0,
top: 0,
}}
/>
}
style={{
width: 100,
aspectRatio: 5.9 / 8.6,
marginInlineEnd: 0,
marginBlockEnd: 0,
flexShrink: 0,
}}
value={props}
onClick={() => {
showCardModal(props);
}}
/>
</div>
</Tooltip>
);
};
export interface Option { export interface Option {
// card id // card id
meta: CardMeta; meta: CardMeta;
......
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