Merge branch 'fix/select_coutner' into 'main'

修复一些指示器相关的问题

See merge request mycard/Neos!316

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

@@ -26,7 +26,9 @@
   height: 100%;
 }
 
-.atkLine {
+.atkLine,
+.counterLine
+{
   .title,
   .number {
     font-family: var(--theme-font);
@@ -46,5 +48,5 @@
 .info {
   justify-content: space-between;
   position: relative;
-  height: 204px; // TODO - fix this
+  height: 230px; // TODO - fix this
 }

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

@@ -41,7 +41,7 @@ const store = proxy(defaultStore);
 export const CardModal = () => {
   const snap = useSnapshot(store);
 
-  const { isOpen, meta, counters: _counters } = snap;
+  const { isOpen, meta, counters } = snap;
 
   const name = meta?.text.name;
   const types = extraCardTypes(meta?.data.type ?? 0);
@@ -80,10 +80,10 @@ export const CardModal = () => {
               atk={atk}
               def={types.includes(TYPE_LINK) ? undefined : def}
             />
+            <CounterLine counters={counters} />
             <AttLine types={types} race={race} attribute={attribute} />
             {/* TODO: 只有怪兽卡需要展示攻击防御 */}
             {/* TODO: 展示星级/LINK数 */}
-            {/* <CounterLine counters={counters} /> */}
           </Space>
         </Space>
         <Divider style={{ margin: "14px 0" }}></Divider>
@@ -132,23 +132,24 @@ const AtkLine = (props: { atk?: number; def?: number }) => (
   </Space>
 );
 
-// TODO: 未完成，研究一下怎么展示这个信息
-const _CounterLine = (props: { counters: { [type: number]: number } }) => {
-  const counters = [];
-  for (const counterType in props.counters) {
-    const count = props.counters[counterType];
-    if (count > 0) {
-      const counterStr = fetchStrings(Region.Counter, `0x${counterType}`);
-      counters.push(`${counterStr}: ${count}`);
-    }
-  }
-
+const CounterLine = (props: { counters: { [type: number]: number } }) => {
   return (
-    <>
-      {counters.map((counter) => (
-        <div>{counter}</div>
-      ))}
-    </>
+    <Space size={10} className={styles.counterLine} direction="vertical">
+      {Object.entries(props.counters).map(
+        ([counterType, count], idx) =>
+          count > 0 && (
+            <div key={idx}>
+              <div className={styles.title}>
+                {fetchStrings(
+                  Region.Counter,
+                  `0x${Number(counterType).toString(16)}`,
+                )}
+              </div>
+              <div className={styles.number}>{count}</div>
+            </div>
+          ),
+      )}
+    </Space>
   );
 };
 

src/ui/Duel/Message/CheckCounterModal.tsx

 // 指示器选择弹窗
 import { Omit } from "@react-spring/web";
 import { Button, Card, Col, InputNumber, Row } from "antd";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { proxy, useSnapshot } from "valtio";
 
 import { fetchStrings, Region, sendSelectCounterResponse } from "@/api";
@@ -41,6 +41,10 @@ export const CheckCounterModal = () => {
   const sum = selected.reduce((sum, current) => sum + current, 0);
   const finishable = sum === min;
 
+  useEffect(() => {
+    setSelected(new Array(options.length));
+  }, [options]);
+
   const onFinish = () => {
     sendSelectCounterResponse(selected);
     rs();
@@ -75,10 +79,11 @@ export const CheckCounterModal = () => {
                   max={option.max}
                   defaultValue={0}
                   onChange={(value) => {
-                    let newSelected = [...selected];
-                    newSelected[idx] = value || 0;
-
-                    setSelected(newSelected);
+                    setSelected((prevSelected) => {
+                      let newSelected = [...prevSelected];
+                      newSelected[idx] = value ?? 0;
+                      return newSelected;
+                    });
                   }}
                 />
               </Card>