feat: basic logic

src/env.d.ts

@@ -13,9 +13,11 @@ interface ImportMeta {
 }
 
 /* eslint @typescript-eslint/no-unused-vars: 0 */
+import type { MessageInstance } from "antd/es/message/interface";
+import type { ModalStaticFunctions } from "antd/es/modal/confirm";
+import type { NotificationInstance } from "antd/es/notification/interface";
 import { EventEmitter } from "eventemitter3";
 
-/* eslint no-var: 0 */
 declare global {
   var myExtraDeckCodes: number[] = [];
   interface Console {
@@ -24,6 +26,9 @@ declare global {
       backgroundColor?: string,
     ) => (...args: Parameters<console.log>) => void;
   }
+  var message: MessageInstance;
+  var notification: NotificationInstance;
+  var modal: ModalStaticFunctions;
 }
 
 declare module "react-router-dom" {

src/main.tsx

@@ -28,6 +28,7 @@ import ReactDOM from "react-dom/client";
 import { theme } from "@/ui/theme";
 
 import { NeosRouter } from "./ui/NeosRouter";
+import { ModalContext } from "./ui/Shared";
 
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement,
@@ -38,6 +39,7 @@ root.render(
     <App>
       <ProConfigProvider dark>
         <NeosRouter />
+        <ModalContext />
       </ProConfigProvider>
     </App>
   </ConfigProvider>,

src/ui/BuildDeck/CardDetail.module.scss

@@ -27,7 +27,7 @@
     0 0 30px 0 #ffffff54;
   backdrop-filter: blur(20px);
   @include utils.noise-bg;
-  padding: 15px;
+  padding: 18px 16px;
   display: flex;
   flex-direction: column;
   position: relative;

src/ui/Duel/Message/NewYesNoModal/index.tsx

+import { Button } from "antd";
+import { useSnapshot } from "valtio";
+
+import { matStore } from "@/stores";
+import { Footer, genModal, ReactFcWithOnResult, Title } from "@/ui/Shared";
+
+interface Props {
+  msg: string;
+}
+interface Result {
+  isOk: boolean;
+}
+
+const Content: ReactFcWithOnResult<Props, Result> = ({ msg, onResult }) => {
+  const { hint } = useSnapshot(matStore);
+  const preHintMsg = hint?.esHint ?? "";
+  return (
+    <>
+      <Title>{`${preHintMsg} ${msg}`}</Title>
+      <Footer>
+        <Button onClick={() => onResult({ isOk: false })}>取消</Button>
+        <Button type="primary" onClick={() => onResult({ isOk: true })}>
+          确认
+        </Button>
+      </Footer>
+    </>
+  );
+};
+
+export const showYesNoModal = genModal({ Content });
+
+// @ts-ignore
+window.showYesNoModal = showYesNoModal;

src/ui/Duel/Message/YesNoModal/index.tsx

@@ -21,6 +21,8 @@ export const YesNoModal: React.FC = () => {
 
   const preHintMsg = hint?.esHint || "";
 
+  console.warn({ preHintMsg, msg });
+
   return (
     <NeosModal
       title={`${preHintMsg} ${msg}`}

src/ui/Duel/Message/index.ts

@@ -5,6 +5,7 @@ export * from "./CardModal";
 export * from "./CheckCounterModal";
 export * from "./EndModal";
 export * from "./HintNotification";
+export * from "./NewYesNoModal";
 export * from "./OptionModal";
 export * from "./PositionModal";
 export * from "./SelectActionsModal";

src/ui/Shared/Modal/index.module.scss

+.title {
+  color: red;
+}
+
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}

src/ui/Shared/Modal/index.tsx

+import { App } from "antd";
+import type { ModalFunc } from "antd/es/modal/confirm";
+
+import styles from "./index.module.scss";
+
+export const ModalContext: React.FC = () => {
+  const { message, notification, modal } = App.useApp();
+  window.message = message;
+  window.notification = notification;
+  window.modal = modal as any;
+  return <></>;
+};
+
+type PropsWithOnResult<Props extends {}, Result extends {}> = Props & {
+  onResult: (result: Result) => void;
+};
+
+export type ReactFcWithOnResult<Props extends {}, Result extends {}> = React.FC<
+  PropsWithOnResult<Props, Result>
+>;
+
+export const Title: React.FC<React.PropsWithChildren> = ({ children }) => (
+  <div className={styles.title}>{children}</div>
+);
+
+export const Footer: React.FC<React.PropsWithChildren> = ({ children }) => (
+  <div className={styles.footer}>{children}</div>
+);
+
+/**
+ * 目的是通过传入不同的 Content 组件和配置选项，生成不同类型的弹窗，并在弹窗的 Content 中处理回调，最终返回一个 Promise 来处理弹窗的结果。
+ */
+export const genModal = <Props extends {}, Result extends {}>({
+  Content,
+  type = "confirm",
+  ...rest
+}: {
+  Content: React.ComponentType<PropsWithOnResult<Props, Result>>;
+  type?: "confirm" | "info" | "success" | "error";
+} & Omit<
+  Parameters<ModalFunc>[0],
+  "content" | "onCancel" | "onOk" | "footer" | "title"
+>) => {
+  return (props: Props) =>
+    new Promise<Result>((rs) => {
+      const { destroy } = modal[type]({
+        content: (
+          <Content
+            onResult={(result) => {
+              rs(result);
+              destroy();
+            }}
+            {...props}
+          />
+        ),
+        footer: null,
+        centered: true,
+        ...rest,
+      });
+    });
+};

src/ui/Shared/index.ts

@@ -3,6 +3,7 @@ export * from "./CardEffectText";
 export * from "./css";
 export * from "./IconFont";
 export * from "./Loading";
+export * from "./Modal";
 export * from "./Scrollbar";
 export * from "./Select";
 export * from "./SpecialButton";