Skip to content

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

update selectActionModal

parent 6f35edc4
Hide whitespace changes
Inline Side-by-side
Showing with 163 additions and 108 deletions
src/service/duel/selectCard.ts
View file @ adadbc76
......@@ -20,5 +20,6 @@ export default (selectCard: MsgSelectCard) => {
response: card.response,
});
}
messageStore.selectCardActions.isValid = true;
messageStore.selectCardActions.isOpen = true;
};
src/service/duel/selectChain.ts
View file @ adadbc76
......@@ -73,6 +73,7 @@ export default (selectChain: MsgSelectChain) => {
fetchSelectHintMeta({
selectHintData: 203,
});
messageStore.selectCardActions.isValid = true;
messageStore.selectCardActions.isOpen = true;
break;
......
src/service/duel/selectSum.ts
View file @ adadbc76
......@@ -16,5 +16,6 @@ export default (selectSum: MsgSelectSum) => {
fetchCheckCardMeta(option);
}
messageStore.selectCardActions.isValid = true;
messageStore.selectCardActions.isOpen = true;
};
src/service/duel/selectTribute.ts
View file @ adadbc76
......@@ -14,5 +14,6 @@ export default (selectTribute: MsgSelectTribute) => {
fetchCheckCardMeta(option);
}
messageStore.selectCardActions.isValid = true;
messageStore.selectCardActions.isOpen = true;
};
src/service/duel/selectUnselectCard.ts
View file @ adadbc76
......@@ -11,12 +11,13 @@ export default ({
selectable_cards: selectableCards,
selected_cards: selectedCards,
}: MsgSelectUnselectCard) => {
messageStore.selectCardActions.isOpen = true;
messageStore.selectCardActions.finishAble = finishable;
messageStore.selectCardActions.cancelAble = cancelable;
messageStore.selectCardActions.min = min;
messageStore.selectCardActions.max = max;
messageStore.selectCardActions.single = true;
messageStore.selectCardActions.isValid = true;
messageStore.selectCardActions.isOpen = true;
for (const option of selectableCards) {
fetchCheckCardMeta(option);
......
src/stores/messageStore/methods/clearSelectActions.ts
View file @ adadbc76
......@@ -4,6 +4,7 @@ const { selectCardActions } = messageStore;
export const clearSelectActions = () => {
selectCardActions.isOpen = false;
selectCardActions.isValid = false;
selectCardActions.isChain = undefined;
selectCardActions.min = undefined;
selectCardActions.max = undefined;
......
src/stores/messageStore/store.ts
View file @ adadbc76
......@@ -7,6 +7,7 @@ export const messageStore = proxy<ModalState>({
cardListModal: { isOpen: false, list: [] },
selectCardActions: {
isOpen: false,
isValid: false,
cancelAble: false,
finishAble: false,
selecteds: [],
......
src/stores/messageStore/types.ts
View file @ adadbc76
......@@ -31,7 +31,10 @@ export interface ModalState {
};
// 卡牌选择状态
selectCardActions: {
// 是否打开
isOpen: boolean;
// 是否有效，当有`MSG_SELECT_xxx`到前端时为true，用户选择完成后设置为false
isValid: boolean;
// 如果是连锁，发response给后端的方式稍微有点不同，这里标记下
isChain?: boolean;
min?: number;
......
src/styles/select-modal.scss 0 → 100644
View file @ adadbc76
.select-modal {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 60px;
background: rgba(#333, 0.5);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: 0.4s;
&-button {
font-family: "Nunito", sans-serif;
font-size: 18px;
cursor: pointer;
border: 0;
outline: 0;
padding: 10px 40px;
border-radius: 30px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.16);
transition: 0.3s;
}
}
src/ui/Duel/Message/SelectActionsModal.tsx
View file @ adadbc76
import "@/styles/select-modal.scss";
import { ThunderboltOutlined } from "@ant-design/icons";
import { CheckCard, CheckCardProps } from "@ant-design/pro-components";
import { Button, Card, Col, Popover, Row } from "antd";
......@@ -23,6 +25,7 @@ const { selectCardActions } = messageStore;
export const SelectActionsModal = () => {
const snap = useSnapshot(selectCardActions);
const isOpen = snap.isOpen;
const isValid = snap.isValid;
const isChain = snap.isChain;
const min = snap.min ?? 0;
const max = snap.max ?? 0;
......@@ -56,117 +59,134 @@ export const SelectActionsModal = () => {
: response.length >= min && response.length <= max && levelMatched;
return (
<DragModal
title={`${preHintMsg} ${selectHintMsg} ${min}-${max} ${
single ? "每次选择一张" : ""
}`}
open={isOpen}
closable={false}
footer={
<>
<Button
disabled={!submitable}
onClick={() => {
const values = mustSelects
.concat(response)
.map((option) => option.response);
<>
<DragModal
title={`${preHintMsg} ${selectHintMsg} ${min}-${max} ${
single ? "每次选择一张" : ""
}`}
open={isOpen && isValid}
onCancel={() => {
selectCardActions.isOpen = false;
}}
footer={
<>
<button
disabled={!submitable}
onClick={() => {
const values = mustSelects
.concat(response)
.map((option) => option.response);
if (isChain) {
sendSelectSingleResponse(values[0]);
} else {
sendSelectMultiResponse(values);
}
clearSelectActions();
}}
onFocus={() => {}}
onBlur={() => {}}
>
{fetchStrings("!system", 1211)}
</Button>
<Button
disabled={!finishable}
onClick={() => {
sendSelectSingleResponse(FINISH_RESPONSE);
clearSelectActions();
}}
onFocus={() => {}}
onBlur={() => {}}
>
{fetchStrings("!system", 1296)}
</Button>
if (isChain) {
sendSelectSingleResponse(values[0]);
} else {
sendSelectMultiResponse(values);
}
clearSelectActions();
}}
onFocus={() => {}}
onBlur={() => {}}
>
{fetchStrings("!system", 1211)}
</button>
<button
disabled={!finishable}
onClick={() => {
sendSelectSingleResponse(FINISH_RESPONSE);
clearSelectActions();
}}
onFocus={() => {}}
onBlur={() => {}}
>
{fetchStrings("!system", 1296)}
</button>
<Button
disabled={!cancelable}
<button
disabled={!cancelable}
onClick={() => {
sendSelectSingleResponse(CANCEL_RESPONSE);
clearSelectActions();
}}
onFocus={() => {}}
onBlur={() => {}}
>
{fetchStrings("!system", 1295)}
</button>
</>
}
width={800}
>
<CheckCard.Group
multiple
bordered
size="small"
onChange={(value) => {
// @ts-ignore
setResponse(value);
}}
>
<Row>
{selectables.map((option, idx) => {
return (
<Col span={4} key={idx}>
<HoverCheckCard
hoverContent={option.effectDesc}
style={{ width: 120 }}
cover={
<img
alt={option.code.toString()}
src={
option.code
? `${NeosConfig.cardImgUrl}/${option.code}.jpg`
: `${NeosConfig.assetsPath}/card_back.jpg`
}
style={{ width: 100 }}
/>
}
value={option}
/>
</Col>
);
})}
</Row>
<p>{selecteds.length > 0 ? fetchStrings("!system", 212) : ""}</p>
<Row>
{selecteds.concat(mustSelects).map((option, idx) => {
return (
<Col span={4} key={idx}>
<Card
style={{ width: 120 }}
cover={
<img
alt={option.code.toString()}
src={
option.code
? `${NeosConfig.cardImgUrl}/${option.code}.jpg`
: `${NeosConfig.assetsPath}/card_back.jpg`
}
/>
}
/>
</Col>
);
})}
</Row>
</CheckCard.Group>
</DragModal>
{isValid && !isOpen ? (
<div className="select-modal">
<button
className="select-modal-button"
onClick={() => {
sendSelectSingleResponse(CANCEL_RESPONSE);
clearSelectActions();
selectCardActions.isOpen = true;
}}
onFocus={() => {}}
onBlur={() => {}}
>
{fetchStrings("!system", 1295)}
</Button>
</>
}
width={800}
>
<CheckCard.Group
multiple
bordered
size="small"
onChange={(value) => {
// @ts-ignore
setResponse(value);
}}
>
<Row>
{selectables.map((option, idx) => {
return (
<Col span={4} key={idx}>
<HoverCheckCard
hoverContent={option.effectDesc}
style={{ width: 120 }}
cover={
<img
alt={option.code.toString()}
src={
option.code
? `${NeosConfig.cardImgUrl}/${option.code}.jpg`
: `${NeosConfig.assetsPath}/card_back.jpg`
}
style={{ width: 100 }}
/>
}
value={option}
/>
</Col>
);
})}
</Row>
<p>{fetchStrings("!system", 212)}</p>
<Row>
{selecteds.concat(mustSelects).map((option, idx) => {
return (
<Col span={4} key={idx}>
<Card
style={{ width: 120 }}
cover={
<img
alt={option.code.toString()}
src={
option.code
? `${NeosConfig.cardImgUrl}/${option.code}.jpg`
: `${NeosConfig.assetsPath}/card_back.jpg`
}
/>
}
/>
</Col>
);
})}
</Row>
</CheckCard.Group>
</DragModal>
></button>
SCROLL UP
</div>
) : (
<></>
)}
</>
);
};
......
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