add historyStore

src/api/strings.ts

@@ -52,7 +52,7 @@ export enum Region {
 }
 
 export function fetchStrings(region: Region, id: string | number): string {
-  return localStorage.getItem(`${region}_${id}`) ?? "";
+  return localStorage.getItem(`${region}_${id}`) ?? "?";
 }
 
 export function getStrings(description: number): string {

src/container/compat.ts

@@ -2,6 +2,7 @@ import { WebSocketStream } from "@/infra";
 import {
   cardStore,
   chatStore,
+  historyStore,
   matStore,
   placeStore,
   roomStore,
@@ -22,6 +23,7 @@ export function initUIContainer(conn: WebSocketStream) {
     roomStore,
     chatStore,
     sideStore,
+    historyStore,
   });
   const container = new Container(context, conn);
 

src/container/context.ts

@@ -3,6 +3,7 @@
 import {
   CardStore,
   ChatStore,
+  HistoryStore,
   MatStore,
   PlaceStore,
   RoomStore,
@@ -16,6 +17,7 @@ interface ContextInitInfo {
   roomStore?: RoomStore;
   chatStore?: ChatStore;
   sideStore?: SideStore;
+  historyStore?: HistoryStore;
 }
 
 export class Context {
@@ -25,17 +27,26 @@ export class Context {
   public roomStore: RoomStore;
   public chatStore: ChatStore;
   public sideStore: SideStore;
+  public historyStore: HistoryStore;
 
   constructor();
   constructor(initInfo: ContextInitInfo);
   constructor(initInfo?: ContextInitInfo) {
-    const { matStore, cardStore, placeStore, roomStore, chatStore, sideStore } =
-      initInfo ?? {};
+    const {
+      matStore,
+      cardStore,
+      placeStore,
+      roomStore,
+      chatStore,
+      sideStore,
+      historyStore,
+    } = initInfo ?? {};
     this.matStore = matStore ?? new MatStore();
     this.cardStore = cardStore ?? new CardStore();
     this.placeStore = placeStore ?? new PlaceStore();
     this.roomStore = roomStore ?? new RoomStore();
     this.chatStore = chatStore ?? new ChatStore();
     this.sideStore = sideStore ?? new SideStore();
+    this.historyStore = historyStore ?? new HistoryStore();
   }
 }

src/service/duel/becomeTarget.ts

@@ -15,6 +15,8 @@ export default (
     if (target) {
       console.info(`${target.meta.text.name} become target`);
       target.targeted = true;
+
+      context.historyStore.putTargeted(context, target.code, location);
     } else {
       console.warn(`<BecomeTarget>target from ${location} is null`);
     }

src/service/duel/chaining.ts

@@ -44,6 +44,8 @@ export default async (
       target.meta = meta;
     }
 
+    context.historyStore.putEffect(context, meta.id, location);
+
     // 发动效果动画
     await callCardFocus(target.uuid);
     console.color("blue")(`${target.meta.text.name} chaining`);

src/service/duel/confirmCards.ts

@@ -63,6 +63,8 @@ export default async (
           target.meta = { id: 0, data: {}, text: {} };
         }
       }
+
+      context.historyStore.putConfirmed(context, meta.id, target.location);
     } else {
       console.warn(`card of ${card} is null`);
     }

src/service/duel/move.ts

@@ -175,6 +175,8 @@ export default async (container: Container, move: MsgMove) => {
     target.targeted = false;
   }
 
+  context.historyStore.putMove(context, code, from, to.zone);
+
   // 维护完了之后，开始播放音效和动画
 
   if (to.zone === REMOVED) {

src/stores/historyStore.ts

+import { proxy } from "valtio";
+
+import { fetchCard, ygopro } from "@/api";
+import { Context } from "@/container";
+
+import { NeosStore } from "./shared";
+
+export enum HistoryOp {
+  MOVE = 1,
+  EFFECT = 2,
+  TARGETED = 3,
+  CONFIRMED = 4,
+  ATTACK = 5, // TODO
+}
+
+export interface History {
+  card?: string;
+  opponent: boolean;
+  currentLocation: ygopro.CardLocation;
+  operation: HistoryOp;
+  target?: ygopro.CardZone;
+}
+
+export class HistoryStore implements NeosStore {
+  historys: History[] = [];
+
+  putMove(
+    context: Context,
+    card: number,
+    from: ygopro.CardLocation,
+    to: ygopro.CardZone,
+  ) {
+    // TODO: Refinement
+    this.historys.push({
+      card: fetchCard(card).text.name,
+      opponent: context.matStore.isMe(from.controller),
+      currentLocation: from,
+      operation: HistoryOp.MOVE,
+      target: to,
+    });
+  }
+
+  putEffect(context: Context, card: number, location: ygopro.CardLocation) {
+    this.historys.push({
+      card: fetchCard(card).text.name,
+      opponent: context.matStore.isMe(location.controller),
+      currentLocation: location,
+      operation: HistoryOp.EFFECT,
+    });
+  }
+
+  putTargeted(context: Context, card: number, location: ygopro.CardLocation) {
+    this.historys.push({
+      card: fetchCard(card).text.name,
+      opponent: context.matStore.isMe(location.controller),
+      currentLocation: location,
+      operation: HistoryOp.TARGETED,
+    });
+  }
+
+  putConfirmed(context: Context, card: number, location: ygopro.CardLocation) {
+    this.historys.push({
+      card: fetchCard(card).text.name,
+      opponent: context.matStore.isMe(location.controller),
+      currentLocation: location,
+      operation: HistoryOp.CONFIRMED,
+    });
+  }
+
+  reset(): void {
+    this.historys = [];
+  }
+}
+
+export const historyStore = proxy(new HistoryStore());

src/stores/index.ts

@@ -2,6 +2,7 @@ export * from "./accountStore";
 export * from "./cardStore";
 export * from "./chatStore";
 export * from "./deckStore";
+export * from "./historyStore";
 export * from "./initStore";
 export * from "./matStore";
 export * from "./placeStore";
@@ -17,6 +18,7 @@ import { accountStore } from "./accountStore";
 import { cardStore } from "./cardStore";
 import { chatStore } from "./chatStore";
 import { deckStore } from "./deckStore";
+import { historyStore } from "./historyStore";
 import { initStore } from "./initStore";
 import { matStore } from "./matStore";
 import { placeStore } from "./placeStore";
@@ -47,6 +49,7 @@ export const resetUniverse = () => {
   replayStore.reset();
   roomStore.reset();
   sideStore.reset();
+  historyStore.reset();
 };
 
 // 重置决斗相关的`Store`
@@ -54,4 +57,5 @@ export const resetDuel = () => {
   cardStore.reset();
   matStore.reset();
   placeStore.reset();
+  historyStore.reset();
 };

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

@@ -34,10 +34,24 @@
   height: 100%;
 
   .timeline {
-
+    margin-top: 1rem;
     p {
       font-family: var(--theme-font);
       font-size: 1rem;
+
+      .card {
+          color: #48faf0;
+      }
+      .current-location {
+          color: #8484ff;
+      }
+      .op {
+          color: yellow;
+          font-size: 1.2rem;
+      }
+      .target {
+          color: #f16b3f;
+      }
     }
   }
 }

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

@@ -3,6 +3,8 @@ import { Drawer, Timeline } from "antd";
 import React from "react";
 import { proxy, useSnapshot } from "valtio";
 
+import { fetchStrings, Region, ygopro } from "@/api";
+import { History, HistoryOp, historyStore } from "@/stores";
 import { ScrollableArea } from "@/ui/Shared";
 
 import styles from "./index.module.scss";
@@ -15,6 +17,7 @@ const store = proxy(defaultStore);
 
 export const ActionHistory: React.FC = () => {
   const { isOpen } = useSnapshot(store);
+  const { historys } = useSnapshot(historyStore);
   return (
     <Drawer
       open={isOpen}
@@ -29,20 +32,56 @@ export const ActionHistory: React.FC = () => {
       <ScrollableArea className={styles.container} maxHeight="var(--height)">
         <Timeline
           className={styles.timeline}
-          items={[
-            {
-              color: "red",
-              children: <p>我方发动灰流丽的效果</p>,
-            },
-            {
-              color: "blue",
-              children: <p>对方发动墓穴的指名者</p>,
-            },
-          ]}
+          items={historys.map((history) => ({
+            color: history.opponent ? "red" : "blue",
+            children: <HistoryItem {...(history as History)} />,
+          }))}
         />
       </ScrollableArea>
     </Drawer>
   );
 };
 
+const HistoryItem: React.FC<History> = ({
+  card,
+  currentLocation,
+  operation,
+  target,
+}) => (
+  <p>
+    <span className={styles.card}>{card ?? "未知卡片"}</span>
+    <span className={styles["current-location"]}>{` [${zone2Text(
+      currentLocation.zone,
+    )}]`}</span>
+    <span>{"  "}</span>
+    <span className={styles.op}>{Op2Text(operation)}</span>
+    {target && (
+      <>
+        <span>{"  "}</span>
+        <span className={styles.target}>{`[${zone2Text(target)}]`}</span>
+      </>
+    )}
+  </p>
+);
+
+function zone2Text(zone: ygopro.CardZone): string {
+  return fetchStrings(Region.System, zone + 1000);
+}
+
+// TODO: I18N
+function Op2Text(op: HistoryOp): string {
+  switch (op) {
+    case HistoryOp.MOVE:
+      return "移动";
+    case HistoryOp.EFFECT:
+      return "发动";
+    case HistoryOp.TARGETED:
+      return "被取对象";
+    case HistoryOp.CONFIRMED:
+      return "展示";
+    case HistoryOp.ATTACK:
+      return "攻击";
+  }
+}
+
 export const displayActionHistory = () => (store.isOpen = true);