Commit 5e5c59d2 authored by chechunchi's avatar chechunchi

add positionModal ui

parent 9da8e91c
...@@ -327,3 +327,7 @@ export const selectYesNoModalIsOpen = (state: RootState) => ...@@ -327,3 +327,7 @@ export const selectYesNoModalIsOpen = (state: RootState) =>
state.duel.modalState.yesNoModal.isOpen; state.duel.modalState.yesNoModal.isOpen;
export const selectYesNOModalMsg = (state: RootState) => export const selectYesNOModalMsg = (state: RootState) =>
state.duel.modalState.yesNoModal.msg; state.duel.modalState.yesNoModal.msg;
export const selectPositionModalIsOpen = (state: RootState) =>
state.duel.modalState.positionModal.isOpen;
export const selectPositionModalPositions = (state: RootState) =>
state.duel.modalState.positionModal.positions;
...@@ -15,6 +15,7 @@ import Cemeteries from "./cemetery"; ...@@ -15,6 +15,7 @@ import Cemeteries from "./cemetery";
import CardListModal from "./cardListModal"; import CardListModal from "./cardListModal";
import CheckCardModal from "./checkCardModal"; import CheckCardModal from "./checkCardModal";
import YesNoModal from "./yesNoModal"; import YesNoModal from "./yesNoModal";
import PositionModal from "./positionModal";
// Ref: https://github.com/brianzinn/react-babylonjs/issues/126 // Ref: https://github.com/brianzinn/react-babylonjs/issues/126
const NeosDuel = () => ( const NeosDuel = () => (
...@@ -44,6 +45,7 @@ const NeosDuel = () => ( ...@@ -44,6 +45,7 @@ const NeosDuel = () => (
<HintNotification /> <HintNotification />
<CheckCardModal /> <CheckCardModal />
<YesNoModal /> <YesNoModal />
<PositionModal />
</> </>
); );
......
import React, { useState } from "react";
import { useAppSelector } from "../../hook";
import { store } from "../../store";
import { Modal, Button } from "antd";
import { sendSelectPositionResponse } from "../../api/ocgcore/ocgHelper";
import {
selectPositionModalIsOpen,
selectPositionModalPositions,
} from "../../reducers/duel/modalSlice";
import { ygopro } from "../../api/ocgcore/idl/ocgcore";
import {
resetPositionModal,
setPositionModalIsOpen,
} from "../../reducers/duel/mod";
import { CheckCard } from "@ant-design/pro-components";
const PositionModal = () => {
const dispatch = store.dispatch;
const isOpen = useAppSelector(selectPositionModalIsOpen);
const positions = useAppSelector(selectPositionModalPositions);
const [selected, setSelected] = useState<ygopro.CardPosition | undefined>(
undefined
);
return (
<Modal
title="请选择表示形式"
open={isOpen}
closable={false}
footer={
<Button
disabled={selected === undefined}
onClick={() => {
if (selected) {
sendSelectPositionResponse(selected);
dispatch(setPositionModalIsOpen(false));
dispatch(resetPositionModal);
}
}}
>
submit
</Button>
}
>
<CheckCard.Group
bordered
size="small"
onChange={(value) => {
// @ts-ignore
setSelected(value);
}}
>
{positions.map((position, idx) => (
<CheckCard
key={idx}
title={cardPositionToChinese(position)}
value={position}
/>
))}
</CheckCard.Group>
</Modal>
);
};
function cardPositionToChinese(position: ygopro.CardPosition): string {
switch (position) {
case ygopro.CardPosition.FACEUP_ATTACK: {
return "正面攻击形式";
}
case ygopro.CardPosition.FACEUP_DEFENSE: {
return "正面防守形式";
}
case ygopro.CardPosition.FACEDOWN_ATTACK: {
return "背面攻击形式";
}
case ygopro.CardPosition.FACEDOWN_DEFENSE: {
return "背面防守形式";
}
default: {
return "[?]";
}
}
}
export default PositionModal;
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