Skip to content

N
Neos
Commit fde33120 authored by Chunchi Che's avatar Chunchi Che
Browse files
Options

Merge branch 'fix/overflow' into 'main' 

修复决斗界面中内容太多溢出屏幕的问题

See merge request !308
parents bc7e60c7 5dd65348
Hide whitespace changes
Inline Side-by-side
Showing with 93 additions and 76 deletions
src/service/duel/selectOption.ts
View file @ fde33120
...@@ -3,6 +3,10 @@ import { displayOptionModal } from "@/ui/Duel/Message"; ...@@ -3,6 +3,10 @@ import { displayOptionModal } from "@/ui/Duel/Message";
export default async (selectOption: ygopro.StocGameMessage.MsgSelectOption) => { export default async (selectOption: ygopro.StocGameMessage.MsgSelectOption) => {
const options = selectOption.options; const options = selectOption.options;
if (options.length === 0) {
console.warn("<MsgSelectOption>options is empty.");
return;
}
await displayOptionModal( await displayOptionModal(
fetchStrings(Region.System, 556), fetchStrings(Region.System, 556),
options.map(({ code, response }) => ({ options.map(({ code, response }) => ({
......
src/ui/Duel/Message/SelectCardsModal/index.tsx
View file @ fde33120
...@@ -7,7 +7,7 @@ import { INTERNAL_Snapshot as Snapshot, useSnapshot } from "valtio"; ...@@ -7,7 +7,7 @@ import { INTERNAL_Snapshot as Snapshot, useSnapshot } from "valtio";
import { type CardMeta, Region, type ygopro } from "@/api"; import { type CardMeta, Region, type ygopro } from "@/api";
import { fetchStrings } from "@/api"; import { fetchStrings } from "@/api";
import { CardType, isMe, matStore } from "@/stores"; import { CardType, isMe, matStore } from "@/stores";
import { YgoCard } from "@/ui/Shared"; import { ScrollableArea, YgoCard } from "@/ui/Shared";
import { groupBy } from "../../utils"; import { groupBy } from "../../utils";
import { showCardModal } from "../CardModal"; import { showCardModal } from "../CardModal";
...@@ -147,53 +147,59 @@ export const SelectCardsModal: React.FC<SelectCardsModalProps> = ({ ...@@ -147,53 +147,59 @@ export const SelectCardsModal: React.FC<SelectCardsModalProps> = ({
selectedZone={selectedZone} selectedZone={selectedZone}
onChange={setSelectedZone as any} onChange={setSelectedZone as any}
/> />
{grouped.map( <ScrollableArea maxHeight="50vh">
(options, i) => {grouped.map(
options[0] === selectedZone && ( (options, i) =>
<div className={styles["container"]} key={i}> options[0] === selectedZone && (
<CheckCard.Group <div className={styles["container"]} key={i}>
onChange={(res: any) => { <CheckCard.Group
const newRes: [ygopro.CardZone, Option[]][] = result.map( onChange={(res: any) => {
([k, v]) => [k, k === selectedZone ? res : v], const newRes: [ygopro.CardZone, Option[]][] = result.map(
); ([k, v]) => [k, k === selectedZone ? res : v],
setResult(newRes); );
}} setResult(newRes);
value={ }}
result.find(([k, _]) => k === selectedZone)?.[1] ?? value={
([] as any) result.find(([k, _]) => k === selectedZone)?.[1] ??
} ([] as any)
// TODO 考虑如何设置默认值，比如只有一个的，就直接选中 }
multiple // TODO 考虑如何设置默认值，比如只有一个的，就直接选中
className={styles["check-group"]} multiple
> className={styles["check-group"]}
{options[1].map((card, j) => ( >
<Tooltip title={card.effectDesc} placement="bottom" key={j}> {options[1].map((card, j) => (
{/* 这儿必须有一个div，不然tooltip不生效 */} <Tooltip
<div> title={card.effectDesc}
<CheckCard placement="bottom"
cover={ key={j}
<YgoCard >
code={card.meta.id} {/* 这儿必须有一个div，不然tooltip不生效 */}
className={styles.card} <div>
/> <CheckCard
} cover={
className={classnames(styles["check-card"], { <YgoCard
[styles.opponent]: code={card.meta.id}
card.location?.controller !== undefined && className={styles.card}
!isMe(card.location.controller), />
})} }
value={card} className={classnames(styles["check-card"], {
onClick={() => { [styles.opponent]:
showCardModal(card); card.location?.controller !== undefined &&
}} !isMe(card.location.controller),
/> })}
</div> value={card}
</Tooltip> onClick={() => {
))} showCardModal(card);
</CheckCard.Group> }}
</div> />
), </div>
)} </Tooltip>
))}
</CheckCard.Group>
</div>
),
)}
</ScrollableArea>
<p> <p>
<span> <span>
{/* TODO: 这里的字体可以调整下 */} {/* TODO: 这里的字体可以调整下 */}
......
src/ui/Shared/Scrollbar/index.tsx
View file @ fde33120
...@@ -16,33 +16,40 @@ export const ScrollableArea = forwardRef< ...@@ -16,33 +16,40 @@ export const ScrollableArea = forwardRef<
elementProps?: React.HTMLAttributes<HTMLElement>; elementProps?: React.HTMLAttributes<HTMLElement>;
className?: string; className?: string;
style?: React.CSSProperties; style?: React.CSSProperties;
maxHeight?: string; // 如果不指定，默认"100%"
}> }>
>(({ scrollProps = {}, elementProps, className, style, children }, ref) => { >(
const { options = {}, ...rest } = scrollProps; (
{ scrollProps = {}, elementProps, className, style, children, maxHeight },
ref,
) => {
const { options = {}, ...rest } = scrollProps;
return ( return (
<OverlayScrollbarsComponent <OverlayScrollbarsComponent
options={{ options={{
scrollbars: { scrollbars: {
autoHide: "scroll", autoHide: "scroll",
theme: "os-theme-light", theme: "os-theme-light",
}, },
overflow: { overflow: {
x: "hidden", x: "hidden",
y: "scroll", y: "scroll",
}, },
...options, ...options,
}} }}
defer defer
style={{ style={{
height: "100%", height: "100%",
}} maxHeight: maxHeight ?? "100%",
{...rest} }}
ref={ref} {...rest}
> ref={ref}
<div className={className} style={style} {...elementProps}> >
{children} <div className={className} style={style} {...elementProps}>
</div> {children}
</OverlayScrollbarsComponent> </div>
); </OverlayScrollbarsComponent>
}); );
},
);
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