add calc

godismygirl · May 23, 2024 · cb34d14 · cb34d14
1 parent 3fd4c9e
commit cb34d14
Show file tree

Hide file tree

Showing 14 changed files with 822 additions and 718 deletions.
diff --git a/src/AllyConfig/BlackDiceConfig/css.module.css b/src/AllyConfig/BlackDiceConfig/css.module.css
@@ -1,25 +1,30 @@
 .box {
-    padding: 4px;
-    border-radius: 8px;
-    border: 2px solid transparent;
-    text-align: center;
+  padding: 4px;
+  border-radius: 8px;
+  border: 2px solid transparent;
+  text-align: center;
 }
 
 .header {
-    display: flex;
-    align-items: center;
+  display: flex;
+  align-items: center;
 }
 .header .label {
-    margin-right: 8px;
-    font-weight: bold;
+  margin-right: 8px;
+  font-weight: bold;
+}
+
+.checkPlace {
+  height: 20px;
+  padding-top: 4px;
 }
 
 .body {
-    display: flex;
-    margin-top: 15px;
+  display: flex;
+  margin-top: 15px;
 }
 
 .active {
-    color: #1677ff;
-    font-size: 16px;
+  color: #1677ff;
+  font-size: 16px;
 }
diff --git a/src/AllyConfig/BlackDiceConfig/index.jsx b/src/AllyConfig/BlackDiceConfig/index.jsx
@@ -1,70 +1,75 @@
-import React, { useState } from 'react';
-import { Switch } from 'antd';
-import { CheckOutlined } from '@ant-design/icons';
-import Dice from '../../comps/Dice';
-import css from './css.module.css';
+import React, { useState, useEffect } from "react";
+import { Switch } from "antd";
+import { CheckOutlined } from "@ant-design/icons";
+import Dice from "../../comps/Dice";
+import css from "./css.module.css";
 
 //黑骰子默认1-6
 
 const BlackDiceConfig = ({ value, onChange }) => {
-    const [empower, setEmpower] = useState(false);
+  const [empower, setEmpower] = useState(false);
 
-    const renderDice = () => {
-        let result = [];
-        for (let i = 1; i <= 6; i++) {
-            const active = value?.base === i;
-            result.push(
-                <div
-                    key={i}
-                    className={css.box}
-                    style={{
-                        borderColor: active ? '#1677ff' : 'transparent',
-                    }}
-                >
-                    <Dice.Black
-                        value={i}
-                        width={50}
-                        onChange={(c) => {
-                            c.color = 'BLACK';
-                            c.base = i;
-                            onChange?.(c);
-                        }}
-                    />
-                    {active && (
-                        <CheckOutlined
-                            className={css.active}
-                            style={{ marginTop: 5 }}
-                        />
-                    )}
-                </div>
-            );
-        }
-        return result;
-    };
+  const renderDice = () => {
+    let result = [];
+    for (let i = 1; i <= 6; i++) {
+      const active = value?.base === i;
+      result.push(
+        <div
+          key={i}
+          className={css.box}
+          style={{
+            borderColor: active ? "#1677ff" : "transparent",
+          }}
+        >
+          <Dice.Black
+            value={i}
+            width={50}
+            onChange={(c) => {
+              c.color = "BLACK";
+              c.base = i;
+              onChange?.(c);
+            }}
+          />
+          <div className={css.checkPlace}>
+            {active && (
+              <CheckOutlined className={css.active} style={{ marginTop: 5 }} />
+            )}
+          </div>
+        </div>
+      );
+    }
+    return result;
+  };
 
-    return (
-        <div className={css.container}>
-            <div className={css.header}>
-                <span
-                    className={css.label}
-                    style={{ color: empower ? '#1677ff' : '#999' }}
-                >
-                    EMPOWER
-                </span>
-                <Switch
-                    checked={empower}
-                    checkedChildren="ON"
-                    unCheckedChildren="OFF"
-                    onChange={(checked) => {
-                        setEmpower(checked);
-                        onChange?.();
-                    }}
-                />
-            </div>
+  useEffect(() => {
+    if (value) {
+      setEmpower(true);
+    }
+  }, [value]);
 
-            {empower && <div className={css.body}>{renderDice()}</div>}
-        </div>
-    );
+  return (
+    <div className={css.container}>
+      <div className={css.header}>
+        <span
+          className={css.label}
+          style={{ color: empower ? "#1677ff" : "#999" }}
+        >
+          EMPOWER
+        </span>
+        <Switch
+          checked={empower}
+          checkedChildren="ON"
+          unCheckedChildren="OFF"
+          onChange={(checked) => {
+            setEmpower(checked);
+            if (!checked) onChange?.();
+          }}
+        />
+      </div>
+
+      {empower && <div className={css.body}>{renderDice()}</div>}
+    </div>
+  );
 };
 
 export default BlackDiceConfig;
diff --git a/src/AllyConfig/DiceConfig/index.jsx b/src/AllyConfig/DiceConfig/index.jsx
@@ -1,81 +1,79 @@
-import React, { useState, useEffect } from 'react';
-import { CheckOutlined } from '@ant-design/icons';
-import { DICE_COLOR_SET } from '../../GlobalStore';
-import Dice from '../../comps/Dice';
-import css from './css.module.css';
+import React, { useState, useEffect } from "react";
+import { CheckOutlined } from "@ant-design/icons";
+import { DICE_COLOR_SET } from "../../GlobalStore";
+import Dice from "../../comps/Dice";
+import css from "./css.module.css";
 
 //数据格式 {color:'BLUE', count:9, shield:1, book:1, burst:0}
 
 const DiceConfig = ({ value, onChange }) => {
-    const [color, setColor] = useState();
+  const [color, setColor] = useState();
 
-    const renderColorSet = () => {
-        let result = [];
-        Object.keys(DICE_COLOR_SET).forEach((c) => {
-            const active = color === c;
-            result.push(
-                <div
-                    key={c}
-                    className={css.box}
-                    style={{ borderColor: active ? '#1677ff' : 'transparent' }}
-                >
-                    <i
-                        key={c}
-                        className={`${css[c]} ${css.icon}`}
-                        onClick={() => {
-                            setColor(c);
-                            onChange?.();
-                        }}
-                    ></i>
-                    {active && <CheckOutlined className={css.active} />}
-                </div>
-            );
-        });
-        return result;
-    };
+  const renderColorSet = () => {
+    let result = [];
+    Object.keys(DICE_COLOR_SET).forEach((c) => {
+      const active = color === c;
+      result.push(
+        <div
+          key={c}
+          className={css.box}
+          style={{ borderColor: active ? "#1677ff" : "transparent" }}
+        >
+          <i
+            key={c}
+            className={`${css[c]} ${css.icon}`}
+            onClick={() => {
+              setColor(c);
+              onChange?.();
+            }}
+          ></i>
+          {active && <CheckOutlined className={css.active} />}
+        </div>
+      );
+    });
+    return result;
+  };
 
-    useEffect(() => {
-        if (value) {
-            setColor(value.color);
-        }
-    }, [value]);
+  useEffect(() => {
+    if (value) {
+      setColor(value.color);
+    }
+  }, [value]);
 
-    return (
-        <div className={css.container}>
-            <div className={css.color}>{renderColorSet(true)}</div>
-            <div className={css.dice}>
-                {DICE_COLOR_SET?.[color]?.map((v) => {
-                    const active = value?.base === v;
+  return (
+    <div className={css.container}>
+      <div className={css.color}>{renderColorSet(true)}</div>
+      <div className={css.dice}>
+        {DICE_COLOR_SET?.[color]?.map((v) => {
+          const active = value?.base === v;
 
-                    return (
-                        <div
-                            className={css.box}
-                            style={{
-                                borderColor: active ? '#1677ff' : 'transparent',
-                            }}
-                        >
-                            <Dice
-                                key={v}
-                                width={50}
-                                color={color}
-                                value={v}
-                                onChange={(c) => {
-                                    c.color = color;
-                                    c.base = v;
-                                    onChange?.(c);
-                                }}
-                            />
-                            <div className={css.checkPlace}>
-                                {active && (
-                                    <CheckOutlined className={css.activeDice} />
-                                )}
-                            </div>
-                        </div>
-                    );
-                })}
+          return (
+            <div
+              key={v}
+              className={css.box}
+              style={{
+                borderColor: active ? "#1677ff" : "transparent",
+              }}
+            >
+              <Dice
+                width={50}
+                color={color}
+                value={v}
+                onChange={(c) => {
+                  c.color = color;
+                  c.base = v;
+                  onChange?.(c);
+                }}
+              />
+              <div className={css.checkPlace}>
+                {active && <CheckOutlined className={css.activeDice} />}
+              </div>
             </div>
-        </div>
-    );
+          );
+        })}
+      </div>
+    </div>
+  );
 };
 
 export default DiceConfig;