feat: filter and duel

src/styles/inject.scss

@@ -22,3 +22,11 @@
   height: 100%;
   flex-direction: column;
 }
+
+.ant-modal-confirm-content {
+  max-width: 100% !important;
+}
+
+.ant-select-dropdown {
+  backdrop-filter: blur(10px);
+}

src/ui/BuildDeck/Filter.module.scss

+.title {
+  text-align: center;
+  font-size: 16px;
+  font-weight: bold;
+  margin-bottom: 32px;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  .item-name {
+    flex: 1;
+    flex-basis: 80px;
+  }
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.btns {
+  margin-top: 30px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: center;
+  padding-bottom: 10px;
+  & > button {
+    width: 220px;
+    border-radius: 3px;
+  }
+}
+
+.number {
+  width: 100%;
+  display: flex;
+  & > * {
+    flex: 1;
+  }
+  .divider {
+    flex: 0;
+    flex-basis: 32px;
+    text-align: center;
+    line-height: 30px;
+  }
+}

src/ui/BuildDeck/Filter.tsx

+import {
+  Button,
+  Checkbox,
+  Form,
+  Input,
+  Select,
+  type SelectProps,
+  InputNumber,
+} from "antd";
+import styles from "./Filter.module.scss";
+
+const options: SelectProps["options"] = [];
+
+for (let i = 10; i < 36; i++) {
+  options.push({
+    label: i.toString(36) + i,
+    value: i.toString(36) + i,
+  });
+}
+
+export const Filter: React.FC = () => {
+  return (
+    <>
+      <div className={styles.title}>卡片筛选</div>
+      <div className={styles.form}>
+        <div className={styles.item}>
+          <div className={styles["item-name"]}>卡种</div>
+          <Select
+            mode="multiple"
+            allowClear
+            style={{ width: "100%" }}
+            placeholder="Please select"
+            options={options}
+          />
+        </div>
+        <div className={styles.item}>
+          <div className={styles["item-name"]}>属性</div>
+          <Select
+            mode="multiple"
+            allowClear
+            style={{ width: "100%" }}
+            placeholder="Please select"
+            options={options}
+          />
+        </div>
+        <div className={styles.item}>
+          <div className={styles["item-name"]}>星级</div>
+          <Select
+            mode="multiple"
+            allowClear
+            style={{ width: "100%" }}
+            placeholder="Please select"
+            options={options}
+          />
+        </div>
+        <div className={styles.item}>
+          <div className={styles["item-name"]}>种族</div>
+          <Select
+            mode="multiple"
+            allowClear
+            style={{ width: "100%" }}
+            placeholder="Please select"
+            options={options}
+          />
+        </div>
+        <div className={styles.item}>
+          <div className={styles["item-name"]}>类型</div>
+          <Select
+            mode="multiple"
+            allowClear
+            style={{ width: "100%" }}
+            placeholder="Please select"
+            options={options}
+          />
+        </div>
+        <div className={styles.item}>
+          <div className={styles["item-name"]}>其他</div>
+          <Select
+            mode="multiple"
+            allowClear
+            style={{ width: "100%" }}
+            placeholder="Please select"
+            options={options}
+          />
+        </div>
+        <div className={styles.item}>
+          <div className={styles["item-name"]}>攻击力</div>
+          <div className={styles.number}>
+            <InputNumber min={1} max={10} defaultValue={3} />
+            <span className={styles.divider}>~</span>
+            <InputNumber min={1} max={10} defaultValue={3} />
+          </div>
+        </div>
+        <div className={styles.item}>
+          <div className={styles["item-name"]}>防御力</div>
+          <div className={styles.number}>
+            <InputNumber min={1} max={10} defaultValue={3} />
+            <span className={styles.divider}>~</span>
+            <InputNumber min={1} max={10} defaultValue={3} />
+          </div>
+        </div>
+      </div>
+      <div className={styles.btns}>
+        <Button type="primary">确定</Button>
+        <Button type="text">取消</Button>
+      </div>
+    </>
+  );
+};

src/ui/BuildDeck/index.module.scss

@@ -59,6 +59,7 @@
   .main,
   .extra,
   .side {
+    position: relative;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     padding: 0.75rem;
   }
@@ -140,3 +141,15 @@
   justify-content: center;
   align-items: center;
 }
+
+.editing-zone-name {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  background-color: #212332;
+  color: hsla(0, 0%, 100%, 0.3);
+  font-size: 12px;
+  padding: 2px 6px;
+  font-family: var(--theme-font);
+  user-select: none;
+}

src/ui/BuildDeck/index.tsx

@@ -37,6 +37,7 @@ import {
 
 import { CardDetail } from "./CardDetail";
 import { DeckSelect } from "./DeckSelect";
+import { Filter } from "./Filter";
 import styles from "./index.module.scss";
 import {
   canAdd,
@@ -210,8 +211,19 @@ const Search: React.FC = () => {
     ); // 衍生物不显示
     setSearchResult(result);
   };
+
+  const [_, dropRef] = useDrop({
+    accept: ["Card"], // 指明该区域允许接收的拖放物。可以是单个，也可以是数组
+    // 里面的值就是useDrag所定义的type
+    // 当拖拽物在这个拖放区域放下时触发,这个item就是拖拽物的item（拖拽物携带的数据）
+    drop: ({ value, source }: { value: CardMeta; source: Type | "search" }) => {
+      if (source !== "search") {
+        editDeckStore.remove(source, value);
+      }
+    },
+  });
   return (
-    <div className={styles.container}>
+    <div className={styles.container} ref={dropRef}>
       <div className={styles.title}>
         <Input
           placeholder="搜索卡片"
@@ -234,11 +246,12 @@ const Search: React.FC = () => {
           type="text"
           icon={<FilterOutlined />}
           onClick={() => {
-            modal.confirm({
+            modal.info({
+              width: 500,
               centered: true,
               title: null,
               icon: null,
-              content: "TODO",
+              content: <Filter />,
               footer: null,
             });
           }}
@@ -308,6 +321,7 @@ const DeckZone: React.FC<{
             onRightClick={() => editDeckStore.remove(type, item)}
           />
         ))}
+        <div className={styles["editing-zone-name"]}>{type.toUpperCase()}</div>
       </div>
     </div>
   );
@@ -317,24 +331,8 @@ const DeckZone: React.FC<{
 const SearchResults: React.FC<{
   results: CardMeta[];
 }> = memo(({ results }) => {
-  const [_, dropRef] = useDrop({
-    accept: ["Card"], // 指明该区域允许接收的拖放物。可以是单个，也可以是数组
-    // 里面的值就是useDrag所定义的type
-    // 当拖拽物在这个拖放区域放下时触发,这个item就是拖拽物的item（拖拽物携带的数据）
-    drop: ({
-      value,
-      source,
-    }: {
-      value: CardMeta;
-      source: "main" | "extra" | "side" | "search";
-    }) => {
-      if (source !== "search") {
-        editDeckStore.remove(source, value);
-      }
-    },
-  });
   return (
-    <div className={styles["search-cards"]} ref={dropRef}>
+    <div className={styles["search-cards"]}>
       {results.map((item) => (
         <Card value={item} key={v4uuid()} source="search" />
       ))}

src/ui/Duel/Main.tsx

@@ -16,10 +16,12 @@ import {
   YesNoModal,
 } from "./Message";
 import { LifeBar, Mat, Menu } from "./PlayMat";
+import { Background } from "@/ui/Shared";
 
 export const Component: React.FC = () => {
   return (
     <>
+      <Background />
       <SelectActionsModal />
       <Alert />
       <Menu />

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

@@ -17,7 +17,7 @@
 .block {
   height: var(--block-height-m);
   width: var(--block-width);
-  background: radial-gradient(#ffffff00, #151212);
+  background: #ffffff1c;
   position: relative;
   &.extra {
     margin-inline: calc(var(--block-width) / 2 + var(--col-gap) / 2);

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

@@ -32,7 +32,7 @@ const BgBlock: React.FC<
       [styles.glowing]: glowing,
     })}
   >
-    {<DecoTriangles />}
+    {/* {<DecoTriangles />} */}
     {<DisabledCross disabled={disabled} />}
   </div>
 );

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

@@ -5,8 +5,11 @@ body {
 }
 
 section.mat {
-  position: relative;
-  width: "100%";
+  position: absolute;
+  width: 100%;
+  left: 0;
+  top: 0;
+  height: 100%;
   .camera {
     height: 100%;
     display: flex;

src/ui/Layout/index.tsx

@@ -56,7 +56,7 @@ export const Component = () => {
   const logined = Boolean(useSnapshot(accountStore).user);
 
   const { pathname } = useLocation();
-  const pathnamesHideHeader = ["/waitroom"];
+  const pathnamesHideHeader = ["/waitroom", "/duel"];
   return (
     <>
       {!pathnamesHideHeader.includes(pathname) && (

src/ui/theme.ts

@@ -10,6 +10,21 @@ export const theme: ThemeConfig = {
     },
     Modal: {
       colorBgElevated: "#1f242c",
+      paddingMD: 24,
+      paddingContentHorizontalLG: 48,
+    },
+    Select: {
+      colorBgElevated: "hsla(0, 0%, 20%, 0.3)",
+      controlItemBgActive: "#79797955",
+      colorBorder: "transparent",
+      colorBgContainer: "hsla(0, 0%, 100%, 0.05)",
+      colorPrimaryHover: "#3400d1",
+      lineWidth: 0,
+    },
+    InputNumber: {
+      colorBorder: "transparent",
+      lineWidth: 0,
+      colorBgContainer: "hsla(0, 0%, 100%, 0.05)",
     },
   },
 };