Merge branch 'optimize/select_option' into 'main'

Optimize/select option

See merge request !406

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

@@ -7,7 +7,7 @@
   top: -webkit-fill-available;
   margin: auto;
   height: fit-content;
-  transition: 0.3s;
+  transition: 0.2s;
 }
 
 .mini {
@@ -15,7 +15,7 @@
   bottom: 0 !important;
   transform: translateY(calc(50% - 66px));
   .ant-modal-body {
-    animation: fadeout 0.3s forwards;
+    animation: fadeout 0.1s forwards;
   }
 }
 

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

+.container {
+  :global(.ant-pro-checkcard-description) {
+    font-family: var(--theme-font);
+    font-size: 0.9rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  :global(.ant-pro-checkcard) {
+    background-color: #1414142b;
+  }
+
+  :global(.ant-pro-checkcard-checked) {
+    &::before {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      content: "";
+      z-index: 1;
+      background-color: #0023bf32;
+      box-shadow: 0 0 0 1px #0087e6 inset;
+    }
+
+    &::after {
+      display: none;
+    }
+  }
+
+  .check-card-group {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 0.625rem;
+  }
+
+  .check-card {
+    max-width: 12.5rem;
+    margin-inline-end: 0;
+    margin-block-end: 0;
+  }
+}

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

@@ -16,6 +16,7 @@ import { Container } from "@/container";
 import { getUIContainer } from "@/container/compat";
 
 import { NeosModal } from "../NeosModal";
+import styles from "./index.module.scss";
 
 type Options = { info: string; response: number }[];
 
@@ -53,6 +54,13 @@ export const OptionModal = () => {
     setSelecteds(Array.from({ length: maxPage }).map((_) => []));
   }, [options]);
 
+  const onQuickSelect = (response: number) => {
+    if (store.min === 1) {
+      sendSelectOptionResponse(container.conn, response);
+      rs();
+    }
+  };
+
   return (
     <NeosModal
       title={title}
@@ -67,35 +75,31 @@ export const OptionModal = () => {
       {grouped.map(
         (options, i) =>
           i === page && (
-            <CheckCard.Group
-              key={i}
-              bordered
-              multiple
-              value={selecteds[i]}
-              style={{
-                display: "grid",
-                gridTemplateColumns: "repeat(2, 1fr)",
-                gap: "0.625rem",
-              }}
-              onChange={(values: any) => {
-                const v = selecteds.map((x, i) => (i === page ? values : x));
-                setSelecteds(v);
-              }}
-            >
-              {options.map((option, idx) => (
-                <CheckCard
-                  key={idx}
-                  style={{
-                    width: "12.5rem",
-                    fontSize: "1rem",
-                    marginInlineEnd: 0,
-                    marginBlockEnd: 0,
-                  }}
-                  title={option.info}
-                  value={option.response}
-                />
-              ))}
-            </CheckCard.Group>
+            <div className={styles.container} key={i}>
+              <CheckCard.Group
+                bordered
+                multiple
+                value={selecteds[i]}
+                className={styles["check-card-group"]}
+                onChange={(values: any) => {
+                  const v = selecteds.map((x, i) => (i === page ? values : x));
+                  setSelecteds(v);
+                }}
+              >
+                {options.map((option, idx) => (
+                  <div
+                    key={idx}
+                    onDoubleClick={() => onQuickSelect(option.response)}
+                  >
+                    <CheckCard
+                      className={styles["check-card"]}
+                      description={option.info}
+                      value={option.response}
+                    />
+                  </div>
+                ))}
+              </CheckCard.Group>
+            </div>
           ),
       )}
     </NeosModal>