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

Optimize/ui/modal

See merge request !180

src/service/duel/selectCard.ts

@@ -20,5 +20,6 @@ export default (selectCard: MsgSelectCard) => {
       response: card.response,
     });
   }
+  messageStore.selectCardActions.isValid = true;
   messageStore.selectCardActions.isOpen = true;
 };

src/service/duel/selectChain.ts

@@ -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

@@ -16,5 +16,6 @@ export default (selectSum: MsgSelectSum) => {
     fetchCheckCardMeta(option);
   }
 
+  messageStore.selectCardActions.isValid = true;
   messageStore.selectCardActions.isOpen = true;
 };

src/service/duel/selectTribute.ts

@@ -14,5 +14,6 @@ export default (selectTribute: MsgSelectTribute) => {
     fetchCheckCardMeta(option);
   }
 
+  messageStore.selectCardActions.isValid = true;
   messageStore.selectCardActions.isOpen = true;
 };

src/service/duel/selectUnselectCard.ts

@@ -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

@@ -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

@@ -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

@@ -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

+.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

-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 { Button, Card, Col, Popover, Row } from "antd";
 import React, { useState } from "react";
@@ -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,12 +59,16 @@ export const SelectActionsModal = () => {
     : response.length >= min && response.length <= max && levelMatched;
 
   return (
+    <>
       <DragModal
         title={`${preHintMsg} ${selectHintMsg} ${min}-${max} ${
           single ? "每次选择一张" : ""
         }`}
-      open={isOpen}
-      closable={false}
+        open={isOpen && isValid}
+        onCancel={() => {
+          selectCardActions.isOpen = false;
+        }}
+        closeIcon={<MinusOutlined />}
         footer={
           <>
             <Button
@@ -143,7 +150,7 @@ export const SelectActionsModal = () => {
               );
             })}
           </Row>
-        <p>{fetchStrings("!system", 212)}</p>
+          <p>{selecteds.length > 0 ? fetchStrings("!system", 212) : ""}</p>
           <Row>
             {selecteds.concat(mustSelects).map((option, idx) => {
               return (
@@ -167,6 +174,21 @@ export const SelectActionsModal = () => {
           </Row>
         </CheckCard.Group>
       </DragModal>
+      {isValid && !isOpen ? (
+        <div className="select-modal">
+          <button
+            className="select-modal-button"
+            onClick={() => {
+              selectCardActions.isOpen = true;
+            }}
+          >
+            SCROLL UP
+          </button>
+        </div>
+      ) : (
+        <></>
+      )}
+    </>
   );
 };