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,117 +59,136 @@ 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;
+        }}
+        closeIcon={<MinusOutlined />}
+        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>
+            SCROLL UP
+          </button>
+        </div>
+      ) : (
+        <></>
+      )}
+    </>
   );
 };