add ActionHistory

src/ui/Duel/Main.tsx

@@ -8,7 +8,9 @@ import { AudioActionType, changeScene } from "@/infra/audio";
 import { matStore, SideStage, sideStore } from "@/stores";
 
 import {
+  ActionHistory,
   Alert,
+  AnnounceModal,
   CardListModal,
   CardModal,
   CheckCounterModal,
@@ -21,10 +23,7 @@ import {
   SortCardModal,
   YesNoModal,
 } from "./Message";
-import { AnnounceModal } from "./Message/AnnounceModal";
-import { LifeBar, Mat, Menu, Underlying } from "./PlayMat";
-import { ChatBox } from "./PlayMat/ChatBox";
-import { HandChain } from "./PlayMat/HandChain";
+import { ChatBox, HandChain, LifeBar, Mat, Menu, Underlying } from "./PlayMat";
 
 export const loader: LoaderFunction = async () => {
   // 更新场景
@@ -88,6 +87,7 @@ export const Component: React.FC = () => {
       <EndModal />
       <ChatBox />
       <HandChain />
+      <ActionHistory />
     </>
   );
 };

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

+.root {
+  :global(.ant-drawer-content-wrapper) {
+    box-shadow: none;
+  }
+
+  :global(.ant-drawer-content) {
+    display: flex;
+    flex-direction: column;
+    background: #0b0a0a96;
+  }
+}
+
+.drawer {
+  width: 100%;
+  right: 10%;
+  --height: 40rem;
+  top: calc((100% - var(--height)) / 2);
+  height: var(--height) !important;
+  position: relative;
+  border-radius: 0.375rem;
+
+  :global(.ant-drawer-header) {
+    padding: 1rem 0;
+
+    :global(.ant-drawer-header-title) {
+      flex-direction: row-reverse;
+      padding-left: 1.5rem;
+    }
+  }
+}
+
+.container {
+  position: relative;
+  height: 100%;
+
+  .timeline {
+
+    p {
+      font-family: var(--theme-font);
+      font-size: 1rem;
+    }
+  }
+}

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

+import { RightOutlined } from "@ant-design/icons";
+import { Drawer, Timeline } from "antd";
+import React from "react";
+import { proxy, useSnapshot } from "valtio";
+
+import { ScrollableArea } from "@/ui/Shared";
+
+import styles from "./index.module.scss";
+
+const defaultStore = {
+  isOpen: false,
+};
+
+const store = proxy(defaultStore);
+
+export const ActionHistory: React.FC = () => {
+  const { isOpen } = useSnapshot(store);
+  return (
+    <Drawer
+      open={isOpen}
+      placement="right"
+      rootClassName={styles.root}
+      className={styles.drawer}
+      mask={false}
+      closeIcon={<RightOutlined />}
+      onClose={() => (store.isOpen = false)}
+      title="操作历史" // TODO: I18N
+    >
+      <ScrollableArea className={styles.container} maxHeight="var(--height)">
+        <Timeline
+          className={styles.timeline}
+          items={[
+            {
+              color: "red",
+              children: <p>我方发动灰流丽的效果</p>,
+            },
+            {
+              color: "blue",
+              children: <p>对方发动墓穴的指名者</p>,
+            },
+          ]}
+        />
+      </ScrollableArea>
+    </Drawer>
+  );
+};
+
+export const displayActionHistory = () => (store.isOpen = true);

src/ui/Duel/Message/index.ts

+export * from "./ActionHistory";
 export * from "./Alert";
+export * from "./AnnounceModal";
 export * from "./CardListModal";
 export * from "./CardModal";
 export * from "./CheckCounterModal";

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

@@ -2,6 +2,7 @@ import {
   ArrowRightOutlined,
   CheckOutlined,
   CloseCircleFilled,
+  FileSearchOutlined,
   MessageFilled,
   RobotFilled,
   RobotOutlined,
@@ -37,6 +38,7 @@ import { useTranslation } from "react-i18next";
 
 import { getUIContainer } from "@/container/compat";
 
+import { displayActionHistory } from "../../Message";
 import { clearAllIdleInteractivities, clearSelectInfo } from "../../utils";
 import { openChatBox } from "../ChatBox";
 
@@ -349,6 +351,13 @@ export const Menu = () => {
           type="text"
         ></Button>
       </DropdownWithTitle>
+      <Tooltip title={i18n("History")}>
+        <Button
+          icon={<FileSearchOutlined />}
+          onClick={displayActionHistory}
+          type="text"
+        />
+      </Tooltip>
       <Tooltip title="AI">
         <Button
           icon={enableKuriboh ? <RobotFilled /> : <RobotOutlined />}

src/ui/Duel/PlayMat/index.ts

+export * from "./ChatBox";
+export * from "./HandChain";
 export * from "./LifeBar";
 export * from "./Mat";
 export * from "./Menu";

src/ui/I18N/Source/Chinese/translation.json

@@ -184,6 +184,7 @@
   },
   "Menu": {
     "DoYouSurrunder": "是否投降？",
+    "History": "操作历史",
     "Cancel": "取消",
     "Confirm": "确定",
     "SelectPhase": "请选择要进入的阶段",

src/ui/I18N/Source/English/translation.json

@@ -182,6 +182,7 @@
   },
   "Menu": {
     "DoYouSurrunder": "Do you surrender?",
+    "History": "Operation History",
     "Cancel": "Cancel",
     "Confirm": "Confirm",
     "SelectPhase": "Please select the phase",