add observer support

src/env.d.ts

@@ -17,7 +17,7 @@ import { EventEmitter } from "eventemitter3";
 
 /* eslint no-var: 0 */
 declare global {
-  var myExtraDeckCodes: number[];
+  var myExtraDeckCodes: number[] = [];
   interface Console {
     color: (
       color: string,

src/service/duel/start.ts

@@ -2,7 +2,7 @@ import { flatten } from "lodash-es";
 import { v4 as v4uuid } from "uuid";
 import { proxy } from "valtio";
 import { subscribeKey } from "valtio/utils";
-
+import PlayerType = ygopro.StocGameMessage.MsgStart.PlayerType;
 import { fetchCard, ygopro } from "@/api";
 import { useConfig } from "@/config";
 import { sleep } from "@/infra";
@@ -14,7 +14,8 @@ export default async (start: ygopro.StocGameMessage.MsgStart) => {
   // 先初始化`matStore`
   matStore.selfType = start.playerType;
   const opponent =
-    start.playerType === ygopro.StocGameMessage.MsgStart.PlayerType.FirstStrike
+    start.playerType === PlayerType.FirstStrike ||
+    start.playerType === PlayerType.Observer
       ? 1
       : 0;
 
@@ -77,7 +78,7 @@ export default async (start: ygopro.StocGameMessage.MsgStart) => {
   // 设置自己的额外卡组，信息是在waitroom之中拿到的
   cardStore
     .at(ygopro.CardZone.EXTRA, 1 - opponent)
-    .forEach((card) => (card.code = myExtraDeckCodes.pop() ?? 0));
+    .forEach((card) => (card.code = window.myExtraDeckCodes?.pop() ?? 0));
 
   if (matStore.isReplay) {
     replayStart();

src/service/room/handResult.ts

@@ -9,7 +9,7 @@ export default function handResult(pb: ygopro.YgoStocMsg) {
   if (me && op) {
     me.moraResult = msg.meResult;
     op.moraResult = msg.opResult;
-  } else {
+  } else if (roomStore.selfType !== ygopro.StocTypeChange.SelfType.OBSERVER) {
     console.error("<HandResult>me or op is undefined");
   }
 }

src/stores/matStore/store.ts

@@ -26,9 +26,9 @@ export const isMe = (controller: number): boolean => {
       // 自己是后攻
       return controller === 1;
     default:
-      // 目前不可能出现这种情况
-      console.error("judgeSelf error", controller, matStore.selfType);
-      return false;
+      // 自己是观战者
+      // 这里假设偶数方的玩家是自己
+      return controller % 2 == 0;
   }
 };
 

src/ui/WaitRoom/index.tsx

@@ -138,8 +138,9 @@ export const Component: React.FC = () => {
               />
               {room.players
                 .filter((player) => player !== undefined && !player.isMe)
-                .map((player) => (
+                .map((player, idx) => (
                   <PlayerZone
+                    key={idx}
                     who={Who.Op}
                     player={player}
                     btn={