Skip to content

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

Merge branch 'optimize/ui/checkcard' into 'main' 

Optimize/ui/checkcard

See merge request mycard/Neos!161
parents 2ce5bffb 9115bf9e
Hide whitespace changes
Inline Side-by-side
Showing with 244 additions and 302 deletions
src/reducers/duel/modal/checkCardModalSlice.ts
View file @ 7350658f
......@@ -6,7 +6,7 @@ import {
} from "@reduxjs/toolkit";
import { RootState } from "../../../store";
import { DuelState } from "../mod";
import { findCardByLocation, judgeSelf } from "../util";
import { cmpCardLocation, findCardByLocation, judgeSelf } from "../util";
import { fetchCard, getCardStr } from "../../../api/cards";
import { ygopro } from "../../../api/ocgcore/idl/ocgcore";
......@@ -65,17 +65,11 @@ export const fetchCheckCardMeta = createAsyncThunk(
}) => {
// FIXME: 这里如果传的`controler`如果是对手，对应的`code`会为零，这时候就无法更新对应的`Meta`信息了，后续需要修复。`fetchCheckCardMetaV2`和`fetchCheckCardMetaV3`同理
const meta = await fetchCard(param.option.code, true);
const effectDesc = param.option.effectDescCode
? getCardStr(meta, param.option.effectDescCode & 0xf)
: undefined;
const response = {
controler: param.option.location.controler,
tagName: param.tagName,
meta: {
code: meta.id,
name: meta.text.name,
desc: meta.text.desc,
effectDesc,
option: {
meta,
location: param.option.location.toObject(),
},
};
......@@ -91,6 +85,7 @@ export const checkCardModalCase = (
const code = action.meta.arg.option.code;
const location = action.meta.arg.option.location;
const controler = location.controler;
const effectDescCode = action.meta.arg.option.effectDescCode;
const response = action.meta.arg.option.response;
const combinedTagName = judgeSelf(controler, state)
......@@ -100,24 +95,28 @@ export const checkCardModalCase = (
const newID =
code != 0 ? code : findCardByLocation(state, location)?.occupant?.id || 0;
if (newID) {
for (const tag of state.modalState.checkCardModal.tags) {
if (tag.tagName === combinedTagName) {
tag.options.push({ code: newID, response });
return;
}
const newOption = {
meta: { id: newID, data: {}, text: {} },
location: location.toObject(),
effectDescCode,
response,
};
for (const tag of state.modalState.checkCardModal.tags) {
if (tag.tagName === combinedTagName) {
tag.options.push(newOption);
return;
}
state.modalState.checkCardModal.tags.push({
tagName: combinedTagName,
options: [{ code: newID, response }],
});
}
state.modalState.checkCardModal.tags.push({
tagName: combinedTagName,
options: [newOption],
});
});
builder.addCase(fetchCheckCardMeta.fulfilled, (state, action) => {
const controler = action.payload.controler;
const tagName = action.payload.tagName;
const meta = action.payload.meta;
const option = action.payload.option;
const controler = option.location.controler!;
const combinedTagName = judgeSelf(controler, state)
? `我方的${tagName}`
......@@ -125,11 +124,20 @@ export const checkCardModalCase = (
for (const tag of state.modalState.checkCardModal.tags) {
if (tag.tagName === combinedTagName) {
for (const option of tag.options) {
if (option.code == meta.code) {
option.name = meta.name;
option.desc = meta.desc;
option.effectDesc = meta.effectDesc;
for (const old of tag.options) {
if (
option.meta.id == old.meta.id &&
cmpCardLocation(option.location, old.location)
) {
const cardID = old.meta.id;
old.meta = option.meta;
old.meta.id = cardID;
const effectDescCode = old.effectDescCode;
const effectDesc = effectDescCode
? getCardStr(old.meta, effectDescCode & 0xf)
: undefined;
old.effectDesc = effectDesc;
}
}
}
......
src/reducers/duel/modal/mod.ts
View file @ 7350658f
import { CardMeta } from "../../../api/cards";
import { ygopro } from "../../../api/ocgcore/idl/ocgcore";
type CardLocation = ReturnType<typeof ygopro.CardLocation.prototype.toObject>;
export interface ModalState {
// 卡牌弹窗
......@@ -28,9 +29,9 @@ export interface ModalState {
tags: {
tagName: string;
options: {
code: number;
name?: string;
desc?: string;
meta: CardMeta;
location?: CardLocation;
effectDescCode?: number;
effectDesc?: string;
response: number;
}[];
......
src/reducers/duel/util.ts
View file @ 7350658f
......@@ -8,6 +8,10 @@ import { Draft } from "@reduxjs/toolkit";
import { ygopro } from "../../api/ocgcore/idl/ocgcore";
import { CardState } from "./generic";
type Location =
| ygopro.CardLocation
| ReturnType<typeof ygopro.CardLocation.prototype.toObject>;
/*
* 通过`player`和`selfType`判断是应该处理自己还是对手
* */
......@@ -29,9 +33,7 @@ export function judgeSelf(player: number, state: Draft<DuelState>): boolean {
* 通过`controler`,`zone`和`sequence`获取卡牌状态*/
export function findCardByLocation(
state: Draft<DuelState>,
location:
| ygopro.CardLocation
| ReturnType<typeof ygopro.CardLocation.prototype.toObject>
location: Location
): CardState | undefined {
const controler = location.controler!;
const zone = location.location;
......@@ -73,3 +75,19 @@ export function findCardByLocation(
}
}
}
export function cmpCardLocation(
left: Location,
right?: Location,
strict?: boolean
): boolean {
if (strict) {
return JSON.stringify(left) === JSON.stringify(right);
} else {
return (
left.controler === right?.controler &&
left.location === right?.location &&
left.sequence === right?.sequence
);
}
}
src/ui/Duel/checkCardModal.tsx
View file @ 7350658f
import React, { useRef, useState } from "react";
import React, { useState } from "react";
import { useAppSelector } from "../../hook";
import { store } from "../../store";
import {
......@@ -14,11 +14,12 @@ import {
setCheckCardModalIsOpen,
} from "../../reducers/duel/mod";
import { Button, Row, Col, Popover } from "antd";
import { CheckCard } from "@ant-design/pro-components";
import { CheckCard, CheckCardProps } from "@ant-design/pro-components";
import {
sendSelectCardResponse,
sendSelectChainResponse,
} from "../../api/ocgcore/ocgHelper";
import { ThunderboltOutlined } from "@ant-design/icons";
import NeosConfig from "../../../neos.config.json";
import DragModal from "./dragModal";
......@@ -32,18 +33,7 @@ const CheckCardModal = () => {
const cancelResponse = useAppSelector(selectCheckCardModalCacnelResponse);
const [response, setResponse] = useState<number[]>([]);
const defaultValue: number[] = [];
// Draggable 相关
const [draggable, setDraggable] = useState(false);
const draggleRef = useRef<HTMLDivElement>(null);
const onMouseOver = () => {
if (draggable) {
setDraggable(false);
}
};
const onMouseOut = () => {
setDraggable(true);
};
// TODO: 这里可以考虑更好地封装
const sendResponseHandler = (
handlerName: string | undefined,
......@@ -65,51 +55,43 @@ const CheckCardModal = () => {
return (
<DragModal
modalProps={{
title: `请选择${min}到${max}张卡片`,
open: isOpen,
closable: false,
footer: (
<>
title={`请选择${min}到${max}张卡片`}
open={isOpen}
closable={false}
footer={
<>
<Button
disabled={response.length < min || response.length > max}
onClick={() => {
sendResponseHandler(onSubmit, response);
dispatch(setCheckCardModalIsOpen(false));
dispatch(resetCheckCardModal());
}}
onFocus={() => {}}
onBlur={() => {}}
>
submit
</Button>
{cancelAble ? (
<Button
disabled={response.length < min || response.length > max}
onClick={() => {
sendResponseHandler(onSubmit, response);
if (cancelResponse) {
sendResponseHandler(onSubmit, [cancelResponse]);
}
dispatch(setCheckCardModalIsOpen(false));
dispatch(resetCheckCardModal());
}}
onMouseOver={onMouseOver}
onMouseOut={onMouseOut}
onFocus={() => {}}
onBlur={() => {}}
>
submit
cancel
</Button>
{cancelAble ? (
<Button
onClick={() => {
if (cancelResponse) {
sendResponseHandler(onSubmit, [cancelResponse]);
}
dispatch(setCheckCardModalIsOpen(false));
dispatch(resetCheckCardModal());
}}
onMouseOver={onMouseOver}
onMouseOut={onMouseOut}
onFocus={() => {}}
onBlur={() => {}}
>
cancel
</Button>
) : (
<></>
)}
</>
),
width: 800,
}}
dragRef={draggleRef}
draggable={draggable}
) : (
<></>
)}
</>
}
width={800}
>
<CheckCard.Group
multiple
......@@ -127,30 +109,24 @@ const CheckCardModal = () => {
{tab.options.map((option, idx) => {
return (
<Col span={4} key={idx}>
<Popover
content={
<div>
<p>{option.name}</p>
<p>{option.effectDesc}</p>
</div>
<HoverCheckCard
hoverContent={option.effectDesc}
title={option.meta.text.name}
description={option.meta.text.desc}
style={{ width: 120 }}
cover={
<img
alt={option.meta.id.toString()}
src={
option.meta.id
? `${NeosConfig.cardImgUrl}/${option.meta.id}.jpg`
: `${NeosConfig.assetsPath}/card_back.jpg`
}
style={{ width: 100 }}
/>
}
>
<CheckCard
title={option.name}
description={option.desc}
style={{ width: 120 }}
cover={
<img
alt={option.code.toString()}
src={`${NeosConfig.cardImgUrl}/${option.code}.jpg`}
style={{ width: 100 }}
/>
}
onMouseEnter={onMouseOver}
onMouseLeave={onMouseOut}
value={option.response}
/>
</Popover>
value={option.response}
/>
</Col>
);
})}
......@@ -162,4 +138,28 @@ const CheckCardModal = () => {
);
};
const HoverCheckCard = (props: CheckCardProps & { hoverContent?: string }) => {
const [hover, setHover] = useState(false);
const onMouseEnter = () => setHover(true);
const onMouseLeave = () => setHover(false);
return (
<>
<CheckCard {...props} />
{props.hoverContent ? (
<Popover content={<p>{props.hoverContent}</p>} open={hover}>
<Button
icon={<ThunderboltOutlined />}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
></Button>
</Popover>
) : (
<></>
)}
</>
);
};
export default CheckCardModal;
src/ui/Duel/checkCardModalV2.tsx
View file @ 7350658f
import React, { useRef, useState } from "react";
import React from "react";
import { useAppSelector } from "../../hook";
import { store } from "../../store";
import { Button, Card, Row, Col } from "antd";
......@@ -32,18 +32,7 @@ const CheckCardModalV2 = () => {
);
const selectedOptions = useAppSelector(selectCheckCardModalV2SelectedOptions);
const responseable = useAppSelector(selectCheckCardModalV2ResponseAble);
// Draggable 相关
const [draggable, setDraggable] = useState(false);
const draggleRef = useRef<HTMLDivElement>(null);
const onMouseOver = () => {
if (draggable) {
setDraggable(false);
}
};
const onMouseOut = () => {
setDraggable(true);
};
const onFinish = () => {
sendSelectUnselectCardResponse({ cancel_or_finish: true });
dispatch(setCheckCardModalV2IsOpen(false));
......@@ -57,34 +46,20 @@ const CheckCardModalV2 = () => {
return (
<DragModal
modalProps={{
title: `请选择未选择的卡片，最少${min}张，最多${max}张`,
open: isOpen,
closable: false,
footer: (
<>
<Button
disabled={!finishable || !responseable}
onClick={onFinish}
onMouseOver={onMouseOver}
onMouseOut={onMouseOut}
>
finish
</Button>
<Button
disabled={!cancelable || !responseable}
onClick={onCancel}
onMouseOver={onMouseOver}
onMouseOut={onMouseOut}
>
cancel
</Button>
</>
),
width: 800,
}}
dragRef={draggleRef}
draggable={draggable}
title={`请选择未选择的卡片，最少${min}张，最多${max}张`}
open={isOpen}
closable={false}
footer={
<>
<Button disabled={!finishable || !responseable} onClick={onFinish}>
finish
</Button>
<Button disabled={!cancelable || !responseable} onClick={onCancel}>
cancel
</Button>
</>
}
width={800}
>
<CheckCard.Group
bordered
......@@ -114,8 +89,6 @@ const CheckCardModalV2 = () => {
/>
}
value={option.response}
onMouseEnter={onMouseOver}
onMouseLeave={onMouseOut}
/>
</Col>
);
......
src/ui/Duel/checkCardModalV3.tsx
View file @ 7350658f
import React, { useRef, useState } from "react";
import React, { useState } from "react";
import { useAppSelector } from "../../hook";
import { store } from "../../store";
import { Button, Card, Row, Col } from "antd";
......@@ -32,18 +32,7 @@ const CheckCardModalV3 = () => {
.concat(selectedOptions)
.map((option) => option.level2)
.reduce((sum, current) => sum + current, 0);
// Draggable 相关
const [draggable, setDraggable] = useState(false);
const draggleRef = useRef<HTMLDivElement>(null);
const onMouseOver = () => {
if (draggable) {
setDraggable(false);
}
};
const onMouseOut = () => {
setDraggable(true);
};
const responseable =
(overflow
? Level1Sum >= LevelSum || Level2Sum >= LevelSum
......@@ -61,26 +50,17 @@ const CheckCardModalV3 = () => {
return (
<DragModal
modalProps={{
title: `请选择卡片，最少${min}张，最多${max}张`,
open: isOpen,
closable: false,
footer: (
<>
<Button
disabled={!responseable}
onClick={onFinish}
onMouseOver={onMouseOver}
onMouseOut={onMouseOut}
>
finish
</Button>
</>
),
width: 800,
}}
dragRef={draggleRef}
draggable={draggable}
title={`请选择卡片，最少${min}张，最多${max}张`}
open={isOpen}
closable={false}
footer={
<>
<Button disabled={!responseable} onClick={onFinish}>
finish
</Button>
</>
}
width={800}
>
<CheckCard.Group
bordered
......@@ -107,8 +87,6 @@ const CheckCardModalV3 = () => {
/>
}
value={option}
onMouseEnter={onMouseOver}
onMouseLeave={onMouseOut}
/>
</Col>
);
......
src/ui/Duel/checkCounterModal.tsx
View file @ 7350658f
import { Button, Row, Col, Card, InputNumber } from "antd";
import React, { useRef, useState } from "react";
import React, { useState } from "react";
import { sendSelectCounterResponse } from "../../api/ocgcore/ocgHelper";
import { fetchStrings } from "../../api/strings";
import { useAppSelector } from "../../hook";
......@@ -19,7 +19,6 @@ const CheckCounterModal = () => {
const [selected, setSelected] = useState(new Array(options.length));
const sum = selected.reduce((sum, current) => sum + current, 0);
const finishable = sum == min;
const draggleRef = useRef<HTMLDivElement>(null);
const onFinish = () => {
sendSelectCounterResponse(selected);
......@@ -28,18 +27,14 @@ const CheckCounterModal = () => {
return (
<DragModal
modalProps={{
title: `请移除${min}个${counterName}`,
open: isOpen,
closable: false,
footer: (
<Button disabled={!finishable} onClick={onFinish}>
finish
</Button>
),
}}
dragRef={draggleRef}
draggable={true}
title={`请移除${min}个${counterName}`}
open={isOpen}
closable={false}
footer={
<Button disabled={!finishable} onClick={onFinish}>
finish
</Button>
}
>
<Row>
{options.map((option, idx) => {
......
src/ui/Duel/dragModal.tsx
View file @ 7350658f
// 经过封装的可拖拽`Modal`
import React, { useState } from "react";
import React, { useRef, useState } from "react";
import type { DraggableData, DraggableEvent } from "react-draggable";
import Draggable from "react-draggable";
import { Modal, ModalProps } from "antd";
export interface DragModalProps {
modalProps: ModalProps;
dragRef: React.RefObject<HTMLDivElement>;
draggable: boolean;
children?: React.ReactNode;
}
export interface DragModalProps extends ModalProps {}
const DragModal = (props: DragModalProps) => {
const dragRef = useRef<HTMLDivElement>(null);
const [bounds, setBounds] = useState({
left: 0,
top: 0,
......@@ -20,7 +16,7 @@ const DragModal = (props: DragModalProps) => {
});
const onStart = (_event: DraggableEvent, uiData: DraggableData) => {
const { clientWidth, clientHeight } = window.document.documentElement;
const targetRect = props.dragRef.current?.getBoundingClientRect();
const targetRect = dragRef.current?.getBoundingClientRect();
if (!targetRect) {
return;
}
......@@ -34,14 +30,10 @@ const DragModal = (props: DragModalProps) => {
return (
<Modal
{...props.modalProps}
{...props}
modalRender={(modal) => (
<Draggable
disabled={!props.draggable}
bounds={bounds}
onStart={onStart}
>
<div ref={props.dragRef}>{modal}</div>
<Draggable bounds={bounds} onStart={onStart}>
<div ref={dragRef}>{modal}</div>
</Draggable>
)}
>
......
src/ui/Duel/optionModal.tsx
View file @ 7350658f
import React, { useRef, useState } from "react";
import React, { useState } from "react";
import { useAppSelector } from "../../hook";
import { store } from "../../store";
import { Button } from "antd";
......@@ -19,31 +19,26 @@ const OptionModal = () => {
const isOpen = useAppSelector(selectOptionModalIsOpen);
const options = useAppSelector(selectOptionModalOptions);
const [selected, setSelected] = useState<number | undefined>(undefined);
const draggleRef = useRef<HTMLDivElement>(null);
return (
<DragModal
modalProps={{
title: "请选择需要发动的效果",
open: isOpen,
closable: false,
footer: (
<Button
disabled={selected === undefined}
onClick={() => {
if (selected !== undefined) {
sendSelectOptionResponse(selected);
dispatch(setOptionModalIsOpen(false));
dispatch(resetOptionModal());
}
}}
>
submit
</Button>
),
}}
dragRef={draggleRef}
draggable={true}
title="请选择需要发动的效果"
open={isOpen}
closable={false}
footer={
<Button
disabled={selected === undefined}
onClick={() => {
if (selected !== undefined) {
sendSelectOptionResponse(selected);
dispatch(setOptionModalIsOpen(false));
dispatch(resetOptionModal());
}
}}
>
submit
</Button>
}
>
<CheckCard.Group
bordered
......
src/ui/Duel/positionModal.tsx
View file @ 7350658f
import React, { useRef, useState } from "react";
import React, { useState } from "react";
import { useAppSelector } from "../../hook";
import { store } from "../../store";
import { Button } from "antd";
......@@ -22,31 +22,26 @@ const PositionModal = () => {
const [selected, setSelected] = useState<ygopro.CardPosition | undefined>(
undefined
);
const draggleRef = useRef<HTMLDivElement>(null);
return (
<DragModal
modalProps={{
title: "请选择表示形式",
open: isOpen,
closable: false,
footer: (
<Button
disabled={selected === undefined}
onClick={() => {
if (selected !== undefined) {
sendSelectPositionResponse(selected);
dispatch(setPositionModalIsOpen(false));
dispatch(resetPositionModal());
}
}}
>
submit
</Button>
),
}}
dragRef={draggleRef}
draggable={true}
title="请选择表示形式"
open={isOpen}
closable={false}
footer={
<Button
disabled={selected === undefined}
onClick={() => {
if (selected !== undefined) {
sendSelectPositionResponse(selected);
dispatch(setPositionModalIsOpen(false));
dispatch(resetPositionModal());
}
}}
>
submit
</Button>
}
>
<CheckCard.Group
bordered
......
src/ui/Duel/sortCardModal.tsx
View file @ 7350658f
import React, { useEffect, useRef, useState } from "react";
import React, { useEffect, useState } from "react";
import {
DndContext,
closestCenter,
......@@ -21,8 +21,7 @@ import { selectSortCardModal } from "../../reducers/duel/modal/sortCardModalSlic
import { sendSortCardResponse } from "../../api/ocgcore/ocgHelper";
import { store } from "../../store";
import { resetSortCardModal } from "../../reducers/duel/mod";
import DragModal from "./dragModal";
import { Button, Card } from "antd";
import { Modal, Button, Card } from "antd";
import { CardMeta } from "../../api/cards";
import NeosConfig from "../../../neos.config.json";
......@@ -38,7 +37,6 @@ const SortCardModal = () => {
coordinateGetter: sortableKeyboardCoordinates,
})
);
const draggleRef = useRef<HTMLDivElement>(null);
const onFinish = () => {
sendSortCardResponse(items.map((item) => item.response));
......@@ -62,15 +60,11 @@ const SortCardModal = () => {
}, [options]);
return (
<DragModal
modalProps={{
title: "请为下列卡牌排序",
open: isOpen,
closable: false,
footer: <Button onClick={onFinish}>finish</Button>,
}}
dragRef={draggleRef}
draggable={false}
<Modal
title="请为下列卡牌排序"
open={isOpen}
closable={false}
footer={<Button onClick={onFinish}>finish</Button>}
>
<DndContext
sensors={sensors}
......@@ -90,7 +84,7 @@ const SortCardModal = () => {
))}
</SortableContext>
</DndContext>
</DragModal>
</Modal>
);
};
......
src/ui/Duel/status.tsx
View file @ 7350658f
......@@ -8,7 +8,6 @@ import {
selectMeInitInfo,
selectOpInitInfo,
} from "../../reducers/duel/initInfoSlice";
import { selectCurrentPlayerIsMe } from "../../reducers/duel/turnSlice";
import { selectWaiting } from "../../reducers/duel/mod";
const Config = NeosConfig.ui.status;
......
src/ui/Duel/yesNoModal.tsx
View file @ 7350658f
import React, { useRef } from "react";
import React from "react";
import { useAppSelector } from "../../hook";
import { store } from "../../store";
import { Button } from "antd";
......@@ -14,38 +14,32 @@ const YesNoModal = () => {
const dispatch = store.dispatch;
const isOpen = useAppSelector(selectYesNoModalIsOpen);
const msg = useAppSelector(selectYesNOModalMsg);
// Draggable 相关
const draggleRef = useRef<HTMLDivElement>(null);
return (
<DragModal
modalProps={{
title: msg,
open: isOpen,
closable: false,
footer: (
<>
<Button
onClick={() => {
sendSelectEffectYnResponse(true);
dispatch(setYesNoModalIsOpen(false));
}}
>
Yes
</Button>
<Button
onClick={() => {
sendSelectEffectYnResponse(false);
dispatch(setYesNoModalIsOpen(false));
}}
>
No
</Button>
</>
),
}}
dragRef={draggleRef}
draggable={true}
title={msg}
open={isOpen}
closable={false}
footer={
<>
<Button
onClick={() => {
sendSelectEffectYnResponse(true);
dispatch(setYesNoModalIsOpen(false));
}}
>
Yes
</Button>
<Button
onClick={() => {
sendSelectEffectYnResponse(false);
dispatch(setYesNoModalIsOpen(false));
}}
>
No
</Button>
</>
}
/>
);
};
......
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