Merge branch 'opt/card_modal' into 'main'

optimize CardModal.tsx

See merge request mycard/Neos!177

src/styles/card-modal.scss

+.card-modal {
+  position: fixed;
+  display: flex;
+  left: 5%;
+  top: 20%;
+  border-style: groove;
+  border-radius: 8px;
+  width: 200px;
+  flex-wrap: wrap;
+  background-color: #303030;
+  padding: 1%;
+  --visibility: hidden;
+  visibility: var(--visibility);
+  --opacity: 0;
+  opacity: var(--opacity);
+  transition:visibility 0.3s linear, opacity 0.3s linear;
+}
+
+.card-modal-container {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.card-modal-name {
+  font-weight: bold;
+}
+
+.card-modal-attribute {
+  font-weight: bold;
+}
+
+.card-modal-atk {
+  font-weight: bold;
+}
+
+.card-modal-counter {
+  font-weight: bold;
+}
+
+.card-modal-effect {
+  font-weight: lighter;
+  text-align: left;
+  max-height: 200px;
+  overflow: auto;
+}
+
+.card-modal-btn {
+  margin: 1px 5px;
+  font-size: 80%;
+  border-color: yellow;
+}

src/ui/Duel/Message/CardModal.tsx

-import Icon, { StarOutlined } from "@ant-design/icons";
-import { Button, Card, Col, Modal, Row } from "antd";
-import { ReactComponent as BattleSvg } from "neos-assets/battle-axe.svg";
-import { ReactComponent as DefenceSvg } from "neos-assets/checked-shield.svg";
+import "@/styles/card-modal.scss";
+
+import classnames from "classnames";
 import React from "react";
 import { useSnapshot } from "valtio";
 
@@ -19,105 +18,72 @@ import {
   Type2StringCodeMap,
 } from "../../../common";
 
-const NeosConfig = useConfig();
-const { Meta } = Card;
-const CARD_WIDTH = 240;
-
 const { cardModal } = messageStore;
+const NeosConfig = useConfig();
+const CARD_WIDTH = 200;
 
 export const CardModal = () => {
-  const snapCardModal = useSnapshot(cardModal);
+  const snap = useSnapshot(cardModal);
 
-  const isOpen = snapCardModal.isOpen;
-  const meta = snapCardModal.meta;
+  const isOpen = snap.isOpen;
+  const meta = snap.meta;
 
   const name = meta?.text.name;
   const types = meta?.data.type;
   const race = meta?.data.race;
   const attribute = meta?.data.attribute;
-  const level = meta?.data.level;
   const desc = meta?.text.desc;
   const atk = meta?.data.atk;
   const def = meta?.data.def;
-
-  // const counters = useAppSelector(selectCardModalCounters);
-  const counters = snapCardModal.counters;
+  const counters = snap.counters;
 
   const imgUrl = meta?.id
     ? `${NeosConfig.cardImgUrl}/${meta.id}.jpg`
     : undefined;
-  const interactivies = snapCardModal.interactivies;
-
-  const handleOkOrCancel = () => {
-    cardModal.isOpen = false;
-  };
+  const interactivies = snap.interactivies;
 
   return (
-    <Modal open={isOpen} onOk={handleOkOrCancel} onCancel={handleOkOrCancel}>
-      <Card
-        hoverable
-        style={{ width: CARD_WIDTH }}
-        cover={<img alt={name} src={imgUrl} />}
-      >
-        <Meta title={name} />
+    <div
+      className={classnames("card-modal")}
+      style={
+        {
+          "--visibility": isOpen ? "visible" : "hidden",
+          "--opacity": isOpen ? 1 : 0,
+        } as any
+      }
+    >
+      <div className="card-modal-container">
+        <img src={imgUrl} width={CARD_WIDTH} />
+        <div className="card-modal-name">{name}</div>
         <AttLine
           types={extraCardTypes(types || 0)}
           race={race}
           attribute={attribute}
         />
-        <AtkLine level={level} atk={atk} def={def} />
+        <AtkLine atk={atk} def={def} />
         <CounterLine counters={counters} />
-        <p>{desc}</p>
-      </Card>
-      {interactivies.map((interactive, idx) => {
-        return (
-          <Button
-            key={idx}
-            onClick={() => {
-              sendSelectIdleCmdResponse(interactive.response);
-              cardModal.isOpen = false;
-              clearAllIdleInteractivities(0);
-              clearAllIdleInteractivities(1);
-            }}
-          >
-            {interactive.desc}
-          </Button>
-        );
-      })}
-    </Modal>
+        <div className="card-modal-effect">{desc}</div>
+        {interactivies.map((interactive, idx) => {
+          return (
+            <button
+              key={idx}
+              className="card-modal-btn"
+              onClick={() => {
+                sendSelectIdleCmdResponse(interactive.response);
+                cardModal.isOpen = false;
+                clearAllIdleInteractivities(0);
+                clearAllIdleInteractivities(1);
+              }}
+            >
+              {interactive.desc}
+            </button>
+          );
+        })}
+      </div>
+    </div>
   );
 };
 
-const AtkLine = (props: { level?: number; atk?: number; def?: number }) => (
-  <Row gutter={8}>
-    {props.level ? (
-      <Col>
-        <StarOutlined />
-        {props.level}
-      </Col>
-    ) : (
-      <></>
-    )}
-    {props.atk ? (
-      <Col>
-        <Icon component={BattleSvg} />
-        <a>{props.atk}</a>
-      </Col>
-    ) : (
-      <></>
-    )}
-    <Col>/</Col>
-    {props.def ? (
-      <Col>
-        <Icon component={DefenceSvg} />
-        <a>{props.def}</a>
-      </Col>
-    ) : (
-      <></>
-    )}
-  </Row>
-);
-
 const AttLine = (props: {
   types: number[];
   race?: number;
@@ -125,23 +91,24 @@ const AttLine = (props: {
 }) => {
   const race = props.race
     ? fetchStrings("!system", Race2StringCodeMap.get(props.race) || 0)
-    : undefined;
+    : "?";
   const attribute = props.attribute
     ? fetchStrings("!system", Attribute2StringCodeMap.get(props.attribute) || 0)
-    : undefined;
+    : "?";
   const types = props.types
     .map((t) => fetchStrings("!system", Type2StringCodeMap.get(t) || 0))
     .join("|");
   return (
-    <Row gutter={8}>
-      <Col>{`[${types}]`}</Col>
-      {race ? <Col>{race}</Col> : <></>}
-      <Col>/</Col>
-      {attribute ? <Col>{attribute}</Col> : <></>}
-    </Row>
+    <div className="card-modal-attribute">{`【 ${race} / ${types} 】【 ${attribute} 】`}</div>
   );
 };
 
+const AtkLine = (props: { atk?: number; def?: number }) => (
+  <div className="card-modal-atk">{`ATK/${
+    props.atk !== undefined ? props.atk : "?"
+  } DEF/${props.def !== undefined ? props.def : "?"}`}</div>
+);
+
 const CounterLine = (props: { counters: { [type: number]: number } }) => {
   const counters = [];
   for (const counterType in props.counters) {
@@ -152,13 +119,11 @@ const CounterLine = (props: { counters: { [type: number]: number } }) => {
     }
   }
 
-  return counters.length > 0 ? (
-    <Row gutter={8}>
+  return (
+    <>
       {counters.map((counter) => (
-        <Col>{counter}</Col>
+        <div className="card-modal-counter">{counter}</div>
       ))}
-    </Row>
-  ) : (
-    <></>
+    </>
   );
 };