Skip to content

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

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

Optimize/ui/modal

See merge request mycard/Neos!180
parents 6f35edc4 4f6ecf36
Hide whitespace changes
Inline Side-by-side
Showing with 165 additions and 108 deletions
src/service/duel/selectCard.ts
View file @ 7ba1d28b
...@@ -20,5 +20,6 @@ export default (selectCard: MsgSelectCard) => { ...@@ -20,5 +20,6 @@ export default (selectCard: MsgSelectCard) => {
response: card.response, response: card.response,
}); });
} }
messageStore.selectCardActions.isValid = true;
messageStore.selectCardActions.isOpen = true; messageStore.selectCardActions.isOpen = true;
}; };
src/service/duel/selectChain.ts
View file @ 7ba1d28b
...@@ -73,6 +73,7 @@ export default (selectChain: MsgSelectChain) => { ...@@ -73,6 +73,7 @@ export default (selectChain: MsgSelectChain) => {
fetchSelectHintMeta({ fetchSelectHintMeta({
selectHintData: 203, selectHintData: 203,
}); });
messageStore.selectCardActions.isValid = true;
messageStore.selectCardActions.isOpen = true; messageStore.selectCardActions.isOpen = true;
break; break;
......
src/service/duel/selectSum.ts
View file @ 7ba1d28b
...@@ -16,5 +16,6 @@ export default (selectSum: MsgSelectSum) => { ...@@ -16,5 +16,6 @@ export default (selectSum: MsgSelectSum) => {
fetchCheckCardMeta(option); fetchCheckCardMeta(option);
} }
messageStore.selectCardActions.isValid = true;
messageStore.selectCardActions.isOpen = true; messageStore.selectCardActions.isOpen = true;
}; };
src/service/duel/selectTribute.ts
View file @ 7ba1d28b
...@@ -14,5 +14,6 @@ export default (selectTribute: MsgSelectTribute) => { ...@@ -14,5 +14,6 @@ export default (selectTribute: MsgSelectTribute) => {
fetchCheckCardMeta(option); fetchCheckCardMeta(option);
} }
messageStore.selectCardActions.isValid = true;
messageStore.selectCardActions.isOpen = true; messageStore.selectCardActions.isOpen = true;
}; };
src/service/duel/selectUnselectCard.ts
View file @ 7ba1d28b
...@@ -11,12 +11,13 @@ export default ({ ...@@ -11,12 +11,13 @@ export default ({
selectable_cards: selectableCards, selectable_cards: selectableCards,
selected_cards: selectedCards, selected_cards: selectedCards,
}: MsgSelectUnselectCard) => { }: MsgSelectUnselectCard) => {
messageStore.selectCardActions.isOpen = true;
messageStore.selectCardActions.finishAble = finishable; messageStore.selectCardActions.finishAble = finishable;
messageStore.selectCardActions.cancelAble = cancelable; messageStore.selectCardActions.cancelAble = cancelable;
messageStore.selectCardActions.min = min; messageStore.selectCardActions.min = min;
messageStore.selectCardActions.max = max; messageStore.selectCardActions.max = max;
messageStore.selectCardActions.single = true; messageStore.selectCardActions.single = true;
messageStore.selectCardActions.isValid = true;
messageStore.selectCardActions.isOpen = true;
for (const option of selectableCards) { for (const option of selectableCards) {
fetchCheckCardMeta(option); fetchCheckCardMeta(option);
......
src/stores/messageStore/methods/clearSelectActions.ts
View file @ 7ba1d28b
...@@ -4,6 +4,7 @@ const { selectCardActions } = messageStore; ...@@ -4,6 +4,7 @@ const { selectCardActions } = messageStore;
export const clearSelectActions = () => { export const clearSelectActions = () => {
selectCardActions.isOpen = false; selectCardActions.isOpen = false;
selectCardActions.isValid = false;
selectCardActions.isChain = undefined; selectCardActions.isChain = undefined;
selectCardActions.min = undefined; selectCardActions.min = undefined;
selectCardActions.max = undefined; selectCardActions.max = undefined;
......
src/stores/messageStore/store.ts
View file @ 7ba1d28b
...@@ -7,6 +7,7 @@ export const messageStore = proxy<ModalState>({ ...@@ -7,6 +7,7 @@ export const messageStore = proxy<ModalState>({
cardListModal: { isOpen: false, list: [] }, cardListModal: { isOpen: false, list: [] },
selectCardActions: { selectCardActions: {
isOpen: false, isOpen: false,
isValid: false,
cancelAble: false, cancelAble: false,
finishAble: false, finishAble: false,
selecteds: [], selecteds: [],
......
src/stores/messageStore/types.ts
View file @ 7ba1d28b
...@@ -31,7 +31,10 @@ export interface ModalState { ...@@ -31,7 +31,10 @@ export interface ModalState {
}; };
// 卡牌选择状态 // 卡牌选择状态
selectCardActions: { selectCardActions: {
// 是否打开
isOpen: boolean; isOpen: boolean;
// 是否有效，当有`MSG_SELECT_xxx`到前端时为true，用户选择完成后设置为false
isValid: boolean;
// 如果是连锁，发response给后端的方式稍微有点不同，这里标记下 // 如果是连锁，发response给后端的方式稍微有点不同，这里标记下
isChain?: boolean; isChain?: boolean;
min?: number; min?: number;
......
src/styles/select-modal.scss 0 → 100644
View file @ 7ba1d28b
.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 @ 7ba1d28b
import { ThunderboltOutlined } from "@ant-design/icons"; import "@/styles/select-modal.scss";
import { MinusOutlined, ThunderboltOutlined } from "@ant-design/icons";
import { CheckCard, CheckCardProps } from "@ant-design/pro-components"; import { CheckCard, CheckCardProps } from "@ant-design/pro-components";
import { Button, Card, Col, Popover, Row } from "antd"; import { Button, Card, Col, Popover, Row } from "antd";
import React, { useState } from "react"; import React, { useState } from "react";
...@@ -23,6 +25,7 @@ const { selectCardActions } = messageStore; ...@@ -23,6 +25,7 @@ const { selectCardActions } = messageStore;
export const SelectActionsModal = () => { export const SelectActionsModal = () => {
const snap = useSnapshot(selectCardActions); const snap = useSnapshot(selectCardActions);
const isOpen = snap.isOpen; const isOpen = snap.isOpen;
const isValid = snap.isValid;
const isChain = snap.isChain; const isChain = snap.isChain;
const min = snap.min ?? 0; const min = snap.min ?? 0;
const max = snap.max ?? 0; const max = snap.max ?? 0;
...@@ -56,117 +59,136 @@ export const SelectActionsModal = () => { ...@@ -56,117 +59,136 @@ export const SelectActionsModal = () => {
: response.length >= min && response.length <= max && levelMatched; : response.length >= min && response.length <= max && levelMatched;
return ( return (
<DragModal <>
title={`${preHintMsg} ${selectHintMsg} ${min}-${max} ${ <DragModal
single ? "每次选择一张" : "" title={`${preHintMsg} ${selectHintMsg} ${min}-${max} ${
}`} single ? "每次选择一张" : ""
open={isOpen} }`}
closable={false} open={isOpen && isValid}
footer={ onCancel={() => {
<> selectCardActions.isOpen = false;
<Button }}
disabled={!submitable} closeIcon={<MinusOutlined />}
onClick={() => { footer={
const values = mustSelects <>
.concat(response) <Button
.map((option) => option.response); disabled={!submitable}
onClick={() => {
const values = mustSelects
.concat(response)
.map((option) => option.response);
if (isChain) { if (isChain) {
sendSelectSingleResponse(values[0]); sendSelectSingleResponse(values[0]);
} else { } else {
sendSelectMultiResponse(values); sendSelectMultiResponse(values);
} }
clearSelectActions(); clearSelectActions();
}} }}
onFocus={() => {}} onFocus={() => {}}
onBlur={() => {}} onBlur={() => {}}
> >
{fetchStrings("!system", 1211)} {fetchStrings("!system", 1211)}
</Button> </Button>
<Button <Button
disabled={!finishable} disabled={!finishable}
onClick={() => { onClick={() => {
sendSelectSingleResponse(FINISH_RESPONSE); sendSelectSingleResponse(FINISH_RESPONSE);
clearSelectActions(); clearSelectActions();
}} }}
onFocus={() => {}} onFocus={() => {}}
onBlur={() => {}} onBlur={() => {}}
> >
{fetchStrings("!system", 1296)} {fetchStrings("!system", 1296)}
</Button> </Button>
<Button <Button
disabled={!cancelable} 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={() => { onClick={() => {
sendSelectSingleResponse(CANCEL_RESPONSE); selectCardActions.isOpen = true;
clearSelectActions();
}} }}
onFocus={() => {}}
onBlur={() => {}}
> >
{fetchStrings("!system", 1295)} SCROLL UP
</Button> </button>
</> </div>
} ) : (
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>
); );
}; };
......
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