refactor: 40%

src/ui/Duel/Message/CardModal/Desc.scss → src/ui/Duel/Message/CardModal/Desc.module.scss

-.card-modal-desc {
+.desc {
   line-height: 1.6;
   font-size: 14px;
   font-family: var(--theme-font);

src/ui/Duel/Message/CardModal/Desc.tsx

-import "./Desc.scss";
+import styles from "./Desc.module.scss";
 
 import { Fragment } from "react";
 
 export const Desc: React.FC<{ desc?: string }> = ({ desc = "" }) => {
   if (!desc) return <></>;
   return (
-    <div className="card-modal-desc">
-      {/* https://125naroom.com/web/2877 */}
-      {/* 牛逼的丸文字css教程 */}
+    <div className={styles.desc}>
       <RegexWrapper
         text={addSpaces(desc)}
         re={/(①|②|③|④|⑤|⑥|⑦|⑧|⑨|⑩)：.+?(?=((①|②|③|④|⑤|⑥|⑦|⑧|⑨|⑩)：|$))/gs}
@@ -43,7 +41,7 @@ const RegexWrapper: React.FC<{
 
 const MaroListItem: React.FC<{ children: string }> = ({ children }) => {
   return (
-    <div className="maro-item">
+    <div className={styles["maro-item"]}>
       <span>{children[0]}</span>
       <span>
         <RegexWrapper
@@ -58,7 +56,7 @@ const MaroListItem: React.FC<{ children: string }> = ({ children }) => {
 
 const CircleListItem: React.FC<{ children: string }> = ({ children }) => {
   return children ? (
-    <div className="maro-item">
+    <div className={styles["maro-item"]}>
       <span>{children[0]}</span>
       <span>{children.slice(1)}</span>
     </div>

src/ui/Duel/Message/CardModal/index.scss → src/ui/Duel/Message/CardModal/index.module.scss

-.card-modal-root {
+.root {
   .ant-drawer-content-wrapper {
     box-shadow: none;
   }
-  .card-modal-drawer {
+}
+
+.drawer {
   width: 90%;
   left: 10%;
   --height: 640px;
@@ -18,15 +20,10 @@
       padding-left: 24px;
     }
   }
-  }
-  .card-modal-container {
+}
+.container {
   position: relative;
   height: 100%;
-  }
-}
-.card-modal-name {
-  font-weight: bold;
-  font-size: 1.2rem;
 }
 
 .atkLine {

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

-import "./index.scss";
+import styles from "./index.module.scss";
 
 import { LeftOutlined } from "@ant-design/icons";
 import { Divider, Drawer, Space, Tag } from "antd";
@@ -57,14 +57,14 @@ export const CardModal = () => {
       open={isOpen}
       placement="left"
       onClose={() => (store.isOpen = false)}
-      rootClassName="card-modal-root"
-      className="card-modal-drawer"
+      rootClassName={styles.root}
+      className={styles.drawer}
       mask={false}
       title={name}
       closeIcon={<LeftOutlined />}
       width={350}
     >
-      <div className="card-modal-container">
+      <div className={styles.container}>
         <Space
           align="start"
           size={18}

src/ui/Duel/Message/HintNotification/index.scss → src/ui/Duel/Message/HintNotification/index.module.scss

-.neos-message .ant-message-notice-content {
+.message .ant-message-notice-content {
   background-color: #333;
 }

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

-import "./index.scss";
+import styles from "./index.module.scss";
 
 import { message, notification } from "antd";
 import React, { useEffect } from "react";
@@ -103,7 +103,7 @@ export const showWaiting = (open: boolean) => {
         type: "loading",
         content: fetchStrings("!system", 1390),
         key: waitingKey,
-        className: "neos-message",
+        className: styles["message"],
         duration: 0,
       });
       clearTimeout(destoryTimer);

src/ui/Duel/Message/NeosModal/index.scss → src/ui/Duel/Message/NeosModal/index.module.scss

-.neos-modal {
+.modal {
   position: fixed;
   left: 0;
   right: 0;
@@ -10,7 +10,7 @@
   transition: 0.3s;
 }
 
-.neos-modal-mini {
+.mini {
   top: 100% !important;
   bottom: 0 !important;
   transform: translateY(calc(50% - 66px));
@@ -19,7 +19,7 @@
   }
 }
 
-.neos-modal-wrap {
+.wrap {
   pointer-events: none;
 }
 

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

-import "./index.scss";
+import styles from "./index.module.scss";
 
 import { MinusOutlined, UpOutlined } from "@ant-design/icons";
 import { Modal, type ModalProps } from "antd";
@@ -20,14 +20,14 @@ export const NeosModal: React.FC<Props> = (props) => {
 
   return (
     <Modal
-      className={classNames("neos-modal", { "neos-modal-mini": mini })}
+      className={classNames(styles.modal, { [styles["mini"]]: mini })}
       centered
       maskClosable={true}
       onCancel={() => setMini(!mini)}
       closeIcon={mini ? <UpOutlined /> : <MinusOutlined />}
       bodyStyle={{ padding: "10px 0" }}
       mask={!mini}
-      wrapClassName={classNames({ "neos-modal-wrap": mini })}
+      wrapClassName={classNames({ [styles.wrap]: mini })}
       closable={canBeMinimized}
       {...props}
       open={realOpen}

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

-import "./index.scss";
-
 import { INTERNAL_Snapshot as Snapshot, proxy, useSnapshot } from "valtio";
 
 import { sendSelectMultiResponse, sendSelectSingleResponse } from "@/api";

src/ui/Duel/Message/SelectCardsModal/index.module.scss

-.checkcard-container {
+.container {
   position: relative;
   .btns {
     width: 100%;

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

@@ -136,7 +136,7 @@ export const SelectCardsModal: React.FC<SelectCardsModalProps> = ({
         {grouped.map(
           (options, i) =>
             options[0] === selectedZone && (
-              <div className={styles["checkcard-container"]} key={i}>
+              <div className={styles["container"]} key={i}>
                 <CheckCard.Group
                   onChange={(res) => {
                     setResult((isMultiple ? res : [res]) as any);

src/ui/Duel/PlayMat/Bg/index.module.scss

+.mat-bg {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--row-gap);
+  justify-content: center;
+  align-items: center;
+  background-color: transparent;
+  .bg-row {
+    display: flex;
+    column-gap: var(--col-gap);
+    &.opponent {
+      flex-direction: row-reverse;
+    }
+  }
+}
+
+.block {
+  height: var(--block-height-m);
+  width: var(--block-width);
+  background: radial-gradient(#1d1d1d, #222);
+  position: relative;
+  &.extra {
+    margin-inline: calc(var(--block-width) / 2 + var(--col-gap) / 2);
+  }
+  &.szone {
+    height: var(--block-height-s);
+  }
+  &.highlight {
+    background: #102639;
+    cursor: pointer;
+    // animation: blink 1s linear infinite alternate;
+    .triangle {
+      --color: #006eff;
+      transform: scale(1.5);
+    }
+    &:hover {
+      opacity: 0.7;
+      .triangle {
+        transform: scale(1.2);
+      }
+    }
+  }
+  .triangle {
+    width: 0;
+    height: 0;
+    --color: #333;
+    border-width: 4px;
+    border-style: solid;
+    position: absolute;
+    transition: 0.3s;
+    &:nth-of-type(1) {
+      border-color: var(--color) transparent transparent var(--color);
+    }
+    &:nth-of-type(2) {
+      border-color: var(--color) var(--color) transparent transparent;
+      right: 0;
+    }
+    &:nth-of-type(3) {
+      border-color: transparent var(--color) var(--color) transparent;
+      right: 0;
+      bottom: 0;
+    }
+    &:nth-of-type(4) {
+      border-color: transparent transparent var(--color) var(--color);
+      bottom: 0;
+    }
+  }
+}
+
+// 被禁用的样式
+.disabled-cross {
+  width: 100%;
+  height: 100%;
+  cursor: not-allowed;
+  background: linear-gradient(
+      to top right,
+      rgba(0, 0, 0, 0) 0%,
+      rgba(0, 0, 0, 0) calc(50% - 1.5px),
+      red 50%,
+      rgba(0, 0, 0, 0) calc(50% + 1.5px),
+      rgba(0, 0, 0, 0) 100%
+    ),
+    linear-gradient(
+      to bottom right,
+      rgba(0, 0, 0, 0) 0%,
+      rgba(0, 0, 0, 0) calc(50% - 1.5px),
+      red 50%,
+      rgba(0, 0, 0, 0) calc(50% + 1.5px),
+      rgba(0, 0, 0, 0) 100%
+    );
+  display: none;
+}
+.block.disabled {
+  .disabled-cross {
+    display: block;
+  }
+}

src/ui/Duel/PlayMat/Bg/index.scss

-section#mat {
-  .mat-bg {
-    display: flex;
-    flex-direction: column;
-    row-gap: var(--row-gap);
-    justify-content: center;
-    align-items: center;
-    background-color: transparent;
-    .bg-row {
-      display: flex;
-      column-gap: var(--col-gap);
-      &.opponent {
-        flex-direction: row-reverse;
-      }
-    }
-  }
-
-  .block {
-    height: var(--block-height-m);
-    width: var(--block-width);
-    background: radial-gradient(#1d1d1d, #222);
-    position: relative;
-    &.extra {
-      margin-inline: calc(var(--block-width) / 2 + var(--col-gap) / 2);
-    }
-    &.szone {
-      height: var(--block-height-s);
-    }
-    &.highlight {
-      background: #102639;
-      cursor: pointer;
-      // animation: blink 1s linear infinite alternate;
-      .triangle {
-        --color: #006eff;
-        transform: scale(1.5);
-      }
-      &:hover {
-        opacity: 0.7;
-        .triangle {
-          transform: scale(1.2);
-        }
-      }
-    }
-    .triangle {
-      width: 0;
-      height: 0;
-      --color: #333;
-      border-width: 4px;
-      border-style: solid;
-      position: absolute;
-      transition: 0.3s;
-      &:nth-of-type(1) {
-        border-color: var(--color) transparent transparent var(--color);
-      }
-      &:nth-of-type(2) {
-        border-color: var(--color) var(--color) transparent transparent;
-        right: 0;
-      }
-      &:nth-of-type(3) {
-        border-color: transparent var(--color) var(--color) transparent;
-        right: 0;
-        bottom: 0;
-      }
-      &:nth-of-type(4) {
-        border-color: transparent transparent var(--color) var(--color);
-        bottom: 0;
-      }
-    }
-  }
-
-  // 下面应该和moveToOutside、moveToGround对应
-  .bg-other-blocks {
-    &.op {
-      transform: rotate(180deg);
-    }
-    position: absolute;
-    --height: var(--card-height-o);
-    --width: calc(var(--height) * var(--card-ratio));
-    --left: calc(
-      var(--col-gap) * 2 + var(--block-width) * 2.5 +
-        var(--block-outside-offset-x) + var(--width) / 2
-    );
-    --top: calc(
-      var(--row-gap) + var(--block-height-m) +
-        (var(--block-height-m) - var(--height)) / 2
-    );
-    .block {
-      position: absolute;
-      transform: translate(-50%, -50%);
-      height: var(--height);
-      width: var(--width);
-      top: var(--top);
-      left: var(--left);
-    }
-    .field {
-      left: calc(-1 * var(--left));
-    }
-    .banish {
-      top: calc(var(--top) - var(--row-gap) - var(--height));
-    }
-    .deck {
-      --left: calc(
-        var(--deck-offset-x) + 2 * (var(--block-width) + var(--col-gap))
-      );
-      left: var(--left);
-      top: calc(
-        var(--deck-offset-y) + 2 * var(--block-height-m) + 2 * var(--row-gap)
-      );
-      transform: translate(-50%, -50%) rotate(calc(-1 * var(--deck-rotate-z)));
-      height: var(--deck-card-height);
-      width: calc(var(--deck-card-height) * var(--card-ratio));
-      &.extra-deck {
-        left: calc(-1 * var(--left));
-        transform: translate(-50%, -50%) rotate(var(--deck-rotate-z));
-      }
-    }
-  }
-}
-
-// 被禁用的样式
-.disabled-cross {
-  width: 100%;
-  height: 100%;
-  cursor: not-allowed;
-  background: linear-gradient(
-      to top right,
-      rgba(0, 0, 0, 0) 0%,
-      rgba(0, 0, 0, 0) calc(50% - 1.5px),
-      red 50%,
-      rgba(0, 0, 0, 0) calc(50% + 1.5px),
-      rgba(0, 0, 0, 0) 100%
-    ),
-    linear-gradient(
-      to bottom right,
-      rgba(0, 0, 0, 0) 0%,
-      rgba(0, 0, 0, 0) calc(50% - 1.5px),
-      red 50%,
-      rgba(0, 0, 0, 0) calc(50% + 1.5px),
-      rgba(0, 0, 0, 0) 100%
-    );
-  display: none;
-}
-
-.disabled-cross.show {
-  display: block;
-}
-
-section#mat {
-  .block.glowing {
-    --card-shadow-color: #13a1ff;
-    box-shadow: 0 0 3px 3px var(--card-shadow-color), 0 0 25px 2px #0099ff87;
-    background: var(--card-shadow-color);
-    border-radius: 2px;
-    .triangle {
-      display: none;
-    }
-  }
-}

src/ui/Duel/PlayMat/Bg/index.tsx

-import "./index.scss";
+import styles from "./index.module.scss";
 
 import classnames from "classnames";
 import { type INTERNAL_Snapshot as Snapshot, useSnapshot } from "valtio";

src/ui/Shared/YgoCard/index.tsx

-import "./index.scss";
+import styles from "./index.module.scss";
 
 import classNames from "classnames";
 import { CSSProperties, useMemo } from "react";
@@ -26,7 +26,7 @@ export const YgoCard: React.FC<Props> = (props) => {
   return useMemo(
     () => (
       <img
-        className={classNames("ygo-card", className)}
+        className={classNames(styles["ygo-card"], className)}
         src={getCardImgUrl(code, isBack)}
         style={{ width, ...style }}
         onClick={onClick}