fix: small

src/ui/BuildDeck/DeckSelect.tsx

@@ -2,8 +2,9 @@ import {
   DeleteOutlined,
   DownloadOutlined,
   PlusOutlined,
+  FileAddOutlined,
 } from "@ant-design/icons";
-import { Button } from "antd";
+import { Button, Dropdown, MenuProps } from "antd";
 
 import styles from "./DeckSelect.module.scss";
 
@@ -15,6 +16,20 @@ export const DeckSelect: React.FC<{
   onDownload: (deckName: string) => void;
   onAdd: () => void;
 }> = ({ decks, selected, onSelect, onDelete, onDownload, onAdd }) => {
+  const items: MenuProps["items"] = [
+    {
+      key: "1",
+      label: "新建卡组",
+      icon: <PlusOutlined />,
+      onClick: () => {},
+    },
+    {
+      key: "2",
+      label: "导入卡组",
+      icon: <FileAddOutlined />,
+      onClick: () => {},
+    },
+  ];
   return (
     <>
       <div className={styles["deck-select"]}>
@@ -44,14 +59,16 @@ export const DeckSelect: React.FC<{
           </div>
         ))}
       </div>
-      <Button
-        className={styles["btn-add"]}
-        icon={<PlusOutlined />}
-        shape="circle"
-        type="text"
-        onClick={onAdd}
-        size="large"
-      />
+      <Dropdown menu={{ items }} placement="top" arrow trigger={["click"]}>
+        <Button
+          className={styles["btn-add"]}
+          icon={<PlusOutlined />}
+          shape="circle"
+          type="text"
+          onClick={onAdd}
+          size="large"
+        />
+      </Dropdown>
     </>
   );
 };

src/ui/BuildDeck/index.module.scss

@@ -59,9 +59,17 @@
   .main,
   .extra,
   .side {
+    transition: 0.2s;
     position: relative;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     padding: 0.75rem;
+    &.over {
+      background-color: hsla(0, 0%, 100%, 0.05);
+    }
+    &.not-allow-to-drop {
+      background-color: rgba(255, 0, 0, 0.15);
+      cursor: not-allowed;
+    }
   }
   .main {
     flex: 3;

src/ui/BuildDeck/index.tsx

@@ -13,7 +13,7 @@ import {
   Button,
   ConfigProvider,
   Input,
-  message,
+  Dropdown,
   Space,
   type ThemeConfig,
 } from "antd";
@@ -48,6 +48,7 @@ import {
   iDeckToEditingDeck,
   type Type,
 } from "./utils";
+import classNames from "classnames";
 
 const theme: ThemeConfig = {
   components: {
@@ -85,9 +86,11 @@ export const Component: React.FC = () => {
     if (result) {
       setSelectedDeck(tmpIDeck);
       message.info("保存成功");
+      editDeckStore.edited = false;
     } else {
       editDeckStore.set(await iDeckToEditingDeck(selectedDeck));
       message.error("保存失败");
+      editDeckStore.edited = false;
     }
   };
 
@@ -182,7 +185,7 @@ const DeckEditor: React.FC<{
             重置
           </Button>
           <Button
-            type="text"
+            type={snapEditDeck.edited ? "primary" : "text"}
             size="small"
             icon={<CheckOutlined />}
             onClick={() => onSave()}
@@ -202,7 +205,7 @@ const DeckEditor: React.FC<{
 
 /** 卡片库，选择卡片加入正在编辑的卡组 */
 const Search: React.FC = () => {
-  const { message, notification, modal } = App.useApp();
+  const { modal } = App.useApp();
   const [searchWord, setSearchWord] = useState("");
   const [searchResult, setSearchResult] = useState<CardMeta[]>([]);
   const handleSearch = async () => {
@@ -238,6 +241,7 @@ const Search: React.FC = () => {
           value={searchWord}
           onChange={(e) => setSearchWord(e.target.value)}
           onKeyUp={(e) => e.key === "Enter" && handleSearch()}
+          allowClear
         />
       </div>
       <div className={styles["select-btns"]}>
@@ -293,7 +297,8 @@ const DeckZone: React.FC<{
 }> = ({ type }) => {
   const { message } = App.useApp();
   const cards = useSnapshot(editDeckStore)[type];
-  const [_, dropRef] = useDrop({
+  const [allowToDrop, setAllowToDrop] = useState(false);
+  const [{ isOver }, dropRef] = useDrop({
     accept: ["Card"], // 指明该区域允许接收的拖放物。可以是单个，也可以是数组
     // 里面的值就是useDrag所定义的type
     // 当拖拽物在这个拖放区域放下时触发,这个item就是拖拽物的item（拖拽物携带的数据）
@@ -309,9 +314,23 @@ const DeckZone: React.FC<{
         message.error(reason);
       }
     },
+    hover: ({ value, source }) => {
+      setAllowToDrop(
+        type !== source ? canAdd(value, type, editDeckStore).result : true
+      );
+    },
+    collect: (monitor) => ({
+      isOver: monitor.isOver(),
+    }),
   });
   return (
-    <div className={styles[type]} ref={dropRef}>
+    <div
+      className={classNames(styles[type], {
+        [styles.over]: isOver,
+        [styles["not-allow-to-drop"]]: isOver && !allowToDrop,
+      })}
+      ref={dropRef}
+    >
       <div className={styles["card-continer"]}>
         {cards.map((item, i) => (
           <Card
@@ -390,11 +409,13 @@ const editDeckStore = proxy({
   add(type: Type, card: CardMeta) {
     editDeckStore[type].push(card);
     editDeckStore[type].sort(compareCards);
+    editDeckStore.edited = true;
   },
   remove(type: Type, card: CardMeta) {
     const index = editDeckStore[type].findIndex((item) => item.id === card.id);
     if (index !== -1) {
       editDeckStore[type].splice(index, 1);
+      editDeckStore.edited = true;
     }
   },
   set(deck: EditingDeck) {
@@ -402,10 +423,13 @@ const editDeckStore = proxy({
     editDeckStore.main = deck.main.sort(compareCards);
     editDeckStore.extra = deck.extra.sort(compareCards);
     editDeckStore.side = deck.side.sort(compareCards);
+    editDeckStore.edited = false;
   },
   clear() {
     editDeckStore.main = [];
     editDeckStore.extra = [];
     editDeckStore.side = [];
+    editDeckStore.edited = true;
   },
+  edited: false,
 }) satisfies EditingDeck;

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

@@ -17,7 +17,7 @@
 .block {
   height: var(--block-height-m);
   width: var(--block-width);
-  background: #ffffff1c;
+  background-color: #ffffff1c;
   position: relative;
   &.extra {
     margin-inline: calc(var(--block-width) / 2 + var(--col-gap) / 2);
@@ -28,41 +28,42 @@
   &.highlight {
     background: #ffffff35;
     cursor: pointer;
-    .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;
+    display: none;
+    --color: red;
     position: absolute;
     transition: 0.3s;
+    transform: scale(1.2);
+    .triangle-atom {
+      width: 20px;
+      height: 5px;
+      background-color: red;
+      position: absolute;
+      &:last-of-type {
+        transform: rotate(90deg);
+        transform-origin: 2.5px 2.5px;
+      }
+    }
     &:nth-of-type(1) {
-      border-color: var(--color) transparent transparent var(--color);
+      left: 0;
     }
     &: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;
+      transform: rotate(90deg);
       right: 0;
-      bottom: 0;
-    }
-    &:nth-of-type(4) {
-      border-color: transparent transparent var(--color) var(--color);
-      bottom: 0;
     }
+    // &:nth-of-type(3) {
+    //   transform: rotate(180deg);
+    //   right: 0;
+    //   bottom: 0;
+    // }
+    // &:nth-of-type(4) {
+    //   transform: rotate(270deg);
+    //   bottom: 0;
+    // }
   }
 }
 

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

@@ -32,7 +32,7 @@ const BgBlock: React.FC<
       [styles.glowing]: glowing,
     })}
   >
-    {/* {<DecoTriangles />} */}
+    {<DecoTriangles />}
     {<DisabledCross disabled={disabled} />}
   </div>
 );
@@ -129,8 +129,11 @@ const onBlockClick = (placeInteractivity: PlaceInteractivity) => {
 
 const DecoTriangles: React.FC = () => (
   <>
-    {Array.from({ length: 4 }).map((_, i) => (
-      <div className={styles.triangle} key={i} />
+    {Array.from({ length: 2 }).map((_, i) => (
+      <div className={styles.triangle} key={i}>
+        <div className={styles["triangle-atom"]} />
+        <div className={styles["triangle-atom"]} />
+      </div>
     ))}
   </>
 );

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

@@ -16,7 +16,7 @@
 }
 
 .inner {
-  transform: translateY(40%);
+  transform: translateY(50%);
   width: 60vw;
   height: 100vh;
   background: radial-gradient(#00814f, #1c0161);
@@ -26,7 +26,7 @@
   transition: 0.5s;
 }
 .opponent .inner {
-  background: radial-gradient(#ff5100, #54005f98);
+  background: radial-gradient(#810000, #54005f98);
   transform: translateY(-50%);
   filter: blur(602px);
   opacity: 0.8;

src/ui/theme.ts

@@ -29,5 +29,8 @@ export const theme: ThemeConfig = {
       lineWidth: 0,
       colorBgContainer: "hsla(0, 0%, 100%, 0.05)",
     },
+    Dropdown: {
+      colorBgElevated: "hsla(0, 0%, 100%, 0.15)",
+    },
   },
 };