Skip to content

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

Merge branch 'feat/dragmodal' into 'main' 

Feat/dragmodal

See merge request mycard/Neos!157
parents 40fa8d97 869449bf
Hide whitespace changes
Inline Side-by-side
Showing with 262 additions and 164 deletions
src/ui/Duel/checkCardModal.tsx
View file @ 9511809e
......@@ -13,15 +13,14 @@ import {
resetCheckCardModal,
setCheckCardModalIsOpen,
} from "../../reducers/duel/mod";
import { Modal, Button, Row, Col, Popover } from "antd";
import { Button, Row, Col, Popover } from "antd";
import { CheckCard } from "@ant-design/pro-components";
import {
sendSelectCardResponse,
sendSelectChainResponse,
} from "../../api/ocgcore/ocgHelper";
import type { DraggableData, DraggableEvent } from "react-draggable";
import Draggable from "react-draggable";
import NeosConfig from "../../../neos.config.json";
import DragModal from "./dragModal";
const CheckCardModal = () => {
const dispatch = store.dispatch;
......@@ -33,30 +32,10 @@ const CheckCardModal = () => {
const cancelResponse = useAppSelector(selectCheckCardModalCacnelResponse);
const [response, setResponse] = useState<number[]>([]);
const defaultValue: number[] = [];
// Draggable 相关
const [draggable, setDraggable] = useState(false);
const [bounds, setBounds] = useState({
left: 0,
top: 0,
bottom: 0,
right: 0,
});
const draggleRef = useRef<HTMLDivElement>(null);
const onStart = (_event: DraggableEvent, uiData: DraggableData) => {
const { clientWidth, clientHeight } = window.document.documentElement;
const targetRect = draggleRef.current?.getBoundingClientRect();
if (!targetRect) {
return;
}
setBounds({
left: -targetRect.left + uiData.x,
right: clientWidth - (targetRect.right - uiData.x),
top: -targetRect.top + uiData.y,
bottom: clientHeight - (targetRect.bottom - uiData.y),
});
};
const onMouseOver = () => {
if (draggable) {
setDraggable(false);
......@@ -65,7 +44,6 @@ const CheckCardModal = () => {
const onMouseOut = () => {
setDraggable(true);
};
// TODO: 这里可以考虑更好地封装
const sendResponseHandler = (
handlerName: string | undefined,
......@@ -86,32 +64,17 @@ const CheckCardModal = () => {
};
return (
<Modal
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());
}}
onMouseOver={onMouseOver}
onMouseOut={onMouseOut}
onFocus={() => {}}
onBlur={() => {}}
>
submit
</Button>
{cancelAble ? (
<DragModal
modalProps={{
title: `请选择${min}到${max}张卡片`,
open: isOpen,
closable: false,
footer: (
<>
<Button
disabled={response.length < min || response.length > max}
onClick={() => {
if (cancelResponse) {
sendResponseHandler(onSubmit, [cancelResponse]);
}
sendResponseHandler(onSubmit, response);
dispatch(setCheckCardModalIsOpen(false));
dispatch(resetCheckCardModal());
}}
......@@ -120,19 +83,33 @@ const CheckCardModal = () => {
onFocus={() => {}}
onBlur={() => {}}
>
cancel
submit
</Button>
) : (
<></>
)}
</>
}
modalRender={(modal) => (
<Draggable disabled={!draggable} bounds={bounds} onStart={onStart}>
<div ref={draggleRef}>{modal}</div>
</Draggable>
)}
width={800}
{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}
>
<CheckCard.Group
multiple
......@@ -181,7 +158,7 @@ const CheckCardModal = () => {
);
})}
</CheckCard.Group>
</Modal>
</DragModal>
);
};
......
src/ui/Duel/checkCardModalV2.tsx
View file @ 9511809e
import React from "react";
import React, { useRef, useState } from "react";
import { useAppSelector } from "../../hook";
import { store } from "../../store";
import { Modal, Button, Card, Row, Col } from "antd";
import { Button, Card, Row, Col } from "antd";
import { CheckCard } from "@ant-design/pro-components";
import {
selectCheckCardModalV2CancelAble,
......@@ -19,6 +19,7 @@ import {
setCheckCardModalV2ResponseAble,
} from "../../reducers/duel/mod";
import NeosConfig from "../../../neos.config.json";
import DragModal from "./dragModal";
const CheckCardModalV2 = () => {
const dispatch = store.dispatch;
......@@ -31,35 +32,59 @@ 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));
dispatch(resetCheckCardModalV2());
dispatch(setCheckCardModalV2ResponseAble(false));
};
const onCancel = () => {
sendSelectUnselectCardResponse({ cancel_or_finish: true });
dispatch(setCheckCardModalV2ResponseAble(false));
};
return (
<Modal
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}
<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}
>
<CheckCard.Group
bordered
......@@ -89,6 +114,8 @@ const CheckCardModalV2 = () => {
/>
}
value={option.response}
onMouseEnter={onMouseOver}
onMouseLeave={onMouseOut}
/>
</Col>
);
......@@ -114,7 +141,7 @@ const CheckCardModalV2 = () => {
);
})}
</Row>
</Modal>
</DragModal>
);
};
......
src/ui/Duel/checkCardModalV3.tsx
View file @ 9511809e
import React, { useState } from "react";
import React, { useRef, useState } from "react";
import { useAppSelector } from "../../hook";
import { store } from "../../store";
import { Modal, Button, Card, Row, Col } from "antd";
import { Button, Card, Row, Col } from "antd";
import { CheckCard } from "@ant-design/pro-components";
import { sendSelectCardResponse } from "../../api/ocgcore/ocgHelper";
import {
......@@ -11,6 +11,7 @@ import {
} from "../../reducers/duel/mod";
import NeosConfig from "../../../neos.config.json";
import { selectCheckCardModalV3 } from "../../reducers/duel/modal/checkCardModalV3Slice";
import DragModal from "./dragModal";
const CheckCardModalV3 = () => {
const dispatch = store.dispatch;
......@@ -31,14 +32,24 @@ 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
: Level1Sum == LevelSum || Level2Sum == LevelSum) &&
selectedOptions.length <= max &&
selectedOptions.length >= min;
const onFinish = () => {
sendSelectCardResponse(
mustSelectOptions.concat(selectedOptions).map((option) => option.response)
......@@ -49,18 +60,27 @@ const CheckCardModalV3 = () => {
};
return (
<Modal
title={`请选择卡片，最少${min}张，最多${max}张`}
open={isOpen}
closable={false}
footer={
<>
<Button disabled={!responseable} onClick={onFinish}>
finish
</Button>
</>
}
width={800}
<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}
>
<CheckCard.Group
bordered
......@@ -87,6 +107,8 @@ const CheckCardModalV3 = () => {
/>
}
value={option}
onMouseEnter={onMouseOver}
onMouseLeave={onMouseOut}
/>
</Col>
);
......@@ -112,7 +134,7 @@ const CheckCardModalV3 = () => {
);
})}
</Row>
</Modal>
</DragModal>
);
};
......
src/ui/Duel/dragModal.tsx 0 → 100644
View file @ 9511809e
// 经过封装的可拖拽`Modal`
import React, { 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;
}
const DragModal = (props: DragModalProps) => {
const [bounds, setBounds] = useState({
left: 0,
top: 0,
bottom: 0,
right: 0,
});
const onStart = (_event: DraggableEvent, uiData: DraggableData) => {
const { clientWidth, clientHeight } = window.document.documentElement;
const targetRect = props.dragRef.current?.getBoundingClientRect();
if (!targetRect) {
return;
}
setBounds({
left: -targetRect.left + uiData.x,
right: clientWidth - (targetRect.right - uiData.x),
top: -targetRect.top + uiData.y,
bottom: clientHeight - (targetRect.bottom - uiData.y),
});
};
return (
<Modal
{...props.modalProps}
modalRender={(modal) => (
<Draggable
disabled={!props.draggable}
bounds={bounds}
onStart={onStart}
>
<div ref={props.dragRef}>{modal}</div>
</Draggable>
)}
>
{props.children}
</Modal>
);
};
export default DragModal;
src/ui/Duel/optionModal.tsx
View file @ 9511809e
import React, { useState } from "react";
import React, { useRef, useState } from "react";
import { useAppSelector } from "../../hook";
import { store } from "../../store";
import { Modal, Button } from "antd";
import { Button } from "antd";
import { CheckCard } from "@ant-design/pro-components";
import {
selectOptionModalIsOpen,
......@@ -12,32 +12,38 @@ import {
resetOptionModal,
setOptionModalIsOpen,
} from "../../reducers/duel/mod";
import DragModal from "./dragModal";
const OptionModal = () => {
const dispatch = store.dispatch;
const isOpen = useAppSelector(selectOptionModalIsOpen);
const options = useAppSelector(selectOptionModalOptions);
const [selected, setSelected] = useState<number | undefined>(undefined);
const draggleRef = useRef<HTMLDivElement>(null);
return (
<Modal
title="请选择需要发动的效果"
open={isOpen}
closable={false}
footer={
<Button
disabled={selected === undefined}
onClick={() => {
if (selected !== undefined) {
sendSelectOptionResponse(selected);
dispatch(setOptionModalIsOpen(false));
dispatch(resetOptionModal());
}
}}
>
submit
</Button>
}
<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}
>
<CheckCard.Group
bordered
......@@ -51,7 +57,7 @@ const OptionModal = () => {
<CheckCard key={idx} title={option.msg} value={option.response} />
))}
</CheckCard.Group>
</Modal>
</DragModal>
);
};
......
src/ui/Duel/positionModal.tsx
View file @ 9511809e
import React, { useState } from "react";
import React, { useRef, useState } from "react";
import { useAppSelector } from "../../hook";
import { store } from "../../store";
import { Modal, Button } from "antd";
import { Button } from "antd";
import { sendSelectPositionResponse } from "../../api/ocgcore/ocgHelper";
import {
selectPositionModalIsOpen,
......@@ -13,6 +13,7 @@ import {
setPositionModalIsOpen,
} from "../../reducers/duel/mod";
import { CheckCard } from "@ant-design/pro-components";
import DragModal from "./dragModal";
const PositionModal = () => {
const dispatch = store.dispatch;
......@@ -21,26 +22,31 @@ const PositionModal = () => {
const [selected, setSelected] = useState<ygopro.CardPosition | undefined>(
undefined
);
const draggleRef = useRef<HTMLDivElement>(null);
return (
<Modal
title="请选择表示形式"
open={isOpen}
closable={false}
footer={
<Button
disabled={selected === undefined}
onClick={() => {
if (selected !== undefined) {
sendSelectPositionResponse(selected);
dispatch(setPositionModalIsOpen(false));
dispatch(resetPositionModal());
}
}}
>
submit
</Button>
}
<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}
>
<CheckCard.Group
bordered
......@@ -58,7 +64,7 @@ const PositionModal = () => {
/>
))}
</CheckCard.Group>
</Modal>
</DragModal>
);
};
......
src/ui/Duel/yesNoModal.tsx
View file @ 9511809e
import React from "react";
import React, { useRef } from "react";
import { useAppSelector } from "../../hook";
import { store } from "../../store";
import { Modal, Button } from "antd";
import { Button } from "antd";
import { sendSelectEffectYnResponse } from "../../api/ocgcore/ocgHelper";
import {
selectYesNoModalIsOpen,
selectYesNOModalMsg,
} from "../../reducers/duel/modal/mod";
import { setYesNoModalIsOpen } from "../../reducers/duel/mod";
import DragModal from "./dragModal";
const YesNoModal = () => {
const dispatch = store.dispatch;
const isOpen = useAppSelector(selectYesNoModalIsOpen);
const msg = useAppSelector(selectYesNOModalMsg);
// Draggable 相关
const draggleRef = useRef<HTMLDivElement>(null);
return (
<Modal
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>
</>
}
<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}
/>
);
};
......
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