finish mora 90%

src/api/ocgcore/ocgAdapter/adapter.ts

@@ -8,6 +8,8 @@ import {
   STOC_JOIN_GAME,
   STOC_TYPE_CHANGE,
   STOC_SELECT_HAND,
+  STOC_SELECT_TP,
+  STOC_HAND_RESULT,
 } from "./protoDecl";
 import StocChat from "./stoc/stocChat";
 import StocJoinGame from "./stoc/stocJoinGame";
@@ -16,6 +18,7 @@ import StocHsPlayerChange from "./stoc/stocHsPlayerChange";
 import StocHsWatchChange from "./stoc/stocHsWatchChange";
 import StocTypeChange from "./stoc/stocTypeChange";
 import StocSelectHand from "./stoc/stocSelectHand";
+import StocSelectTp from "./stoc/stocSelectTp";
 
 /*
  * 将[`ygoProPacket`]对象转换成[`ygopro.YgoStocMsg`]对象
@@ -62,6 +65,15 @@ export function adaptStoc(packet: ygoProPacket): ygopro.YgoStocMsg {
 
       break;
     }
+    case STOC_SELECT_TP: {
+      pb = new StocSelectTp(packet).upcast();
+      break;
+    }
+    case STOC_HAND_RESULT: {
+      // TODO
+
+      break;
+    }
     default: {
       break;
     }

src/api/ocgcore/ocgAdapter/ctos/ctosTpResult.ts

+import { ygopro } from "../../idl/ocgcore";
+import { ygoProPacket } from "../packet";
+import { CTOS_TP_RESULT } from "../protoDecl";
+
+/*
+ * CTOS CTOS_TP_RESULT
+ *
+ * @param res: unsigned char - 玩家的先后攻选择
+ *
+ * @usage - 告知服务端当前玩家的先后攻选择
+ *
+ * */
+export default class CtosTpResultPacket extends ygoProPacket {
+  constructor(pb: ygopro.YgoCtosMsg) {
+    const tpResult = pb.ctos_tp_result;
+
+    const tp = tpResult.tp;
+    const exData = new Uint8Array(1);
+    const dataView = new DataView(exData.buffer);
+
+    switch (tp) {
+      case ygopro.CtosTpResult.TpType.FIRST: {
+        dataView.setUint8(0, 1);
+
+        break;
+      }
+      case ygopro.CtosTpResult.TpType.SECOND: {
+        dataView.setUint8(0, 0);
+
+        break;
+      }
+      default: {
+        console.log("Unknown HandResult type" + tp);
+      }
+    }
+
+    super(exData.length + 1, CTOS_TP_RESULT, exData);
+  }
+}

src/api/ocgcore/ocgAdapter/protoDecl.ts

@@ -8,6 +8,7 @@ export const CTOS_UPDATE_DECK = 2;
 export const CTOS_HS_READY = 34;
 export const CTOS_HS_START = 37;
 export const CTOS_HAND_RESULT = 3;
+export const CTOS_TP_RESULT = 4;
 
 export const STOC_JOIN_GAME = 18;
 export const STOC_CHAT = 25;
@@ -16,3 +17,5 @@ export const STOC_HS_PLAYER_CHANGE = 33;
 export const STOC_HS_WATCH_CHANGE = 34;
 export const STOC_TYPE_CHANGE = 19;
 export const STOC_SELECT_HAND = 3;
+export const STOC_SELECT_TP = 4;
+export const STOC_HAND_RESULT = 5;

src/api/ocgcore/ocgAdapter/stoc/stocSelectTp.ts

+import { ygopro } from "../../idl/ocgcore";
+import { ygoProPacket, StocAdapter } from "../packet";
+
+/*
+ * STOC SelectTp
+ *
+ * @usage - 通知客户端/前端提醒用户进行选先后攻
+ * */
+export default class selectTp implements StocAdapter {
+  packet: ygoProPacket;
+
+  constructor(packet: ygoProPacket) {
+    this.packet = packet;
+  }
+
+  upcast(): ygopro.YgoStocMsg {
+    return new ygopro.YgoStocMsg({
+      stoc_select_tp: new ygopro.StocSelectTp({}),
+    });
+  }
+}

src/api/ocgcore/ocgHelper.ts

@@ -11,6 +11,7 @@ import UpdateDeckAdapter from "./ocgAdapter/ctos/ctosUpdateDeck";
 import HsReadyAdapter from "./ocgAdapter/ctos/ctosHsReady";
 import HsStartAdapter from "./ocgAdapter/ctos/ctosHsStart";
 import HandResult from "./ocgAdapter/ctos/ctosHandResult";
+import TpResult from "./ocgAdapter/ctos/ctosTpResult";
 
 export function sendUpdateDeck(deck: IDeck) {
   const updateDeck = new ygopro.YgoCtosMsg({
@@ -88,3 +89,21 @@ export function sendHandResult(result: string) {
 
   socketMiddleWare({ cmd: socketCmd.SEND, payload });
 }
+
+export function sendTpResult(isFirst: boolean) {
+  let tp = ygopro.CtosTpResult.TpType.UNKNOWN;
+  if (isFirst) {
+    tp = ygopro.CtosTpResult.TpType.FIRST;
+  } else {
+    tp = ygopro.CtosTpResult.TpType.SECOND;
+  }
+
+  const tpResult = new ygopro.YgoCtosMsg({
+    ctos_tp_result: new ygopro.CtosTpResult({
+      tp,
+    }),
+  });
+  const payload = new TpResult(tpResult).serialize();
+
+  socketMiddleWare({ cmd: socketCmd.SEND, payload });
+}

src/reducers/moraSlice.ts

@@ -6,26 +6,41 @@ import { createSlice } from "@reduxjs/toolkit";
 import { RootState } from "../store";
 
 export interface moraState {
-  selectable: boolean;
+  selectHandAble: boolean;
+  selectTpAble: boolean;
 }
 
 const initialState: moraState = {
-  selectable: false,
+  selectHandAble: false,
+  selectTpAble: false,
 };
 
 const moraSlice = createSlice({
   name: "mora",
   initialState,
   reducers: {
-    selectAble: (state) => {
-      state.selectable = true;
+    selectHandAble: (state) => {
+      state.selectHandAble = true;
     },
-    unSelectAble: (state) => {
-      state.selectable = false;
+    unSelectHandAble: (state) => {
+      state.selectHandAble = false;
+    },
+    selectTpAble: (state) => {
+      state.selectTpAble = true;
+    },
+    unSelectTpAble: (state) => {
+      state.selectTpAble = false;
     },
   },
 });
 
-export const { selectAble, unSelectAble } = moraSlice.actions;
-export const selectMoraSelectAble = (state: RootState) => state.mora.selectable;
+export const {
+  selectHandAble,
+  unSelectHandAble,
+  selectTpAble,
+  unSelectTpAble,
+} = moraSlice.actions;
+export const selectHandSelectAble = (state: RootState) =>
+  state.mora.selectHandAble;
+export const selectTpSelectAble = (state: RootState) => state.mora.selectTpAble;
 export default moraSlice.reducer;

src/service/mora/selectHand.ts

 import { ygopro } from "../../api/ocgcore/idl/ocgcore";
 import { store } from "../../store";
-import { selectAble } from "../../reducers/moraSlice";
+import { selectHandAble } from "../../reducers/moraSlice";
 
 export default function handleSelectHand(_: ygopro.YgoStocMsg) {
   const dispatch = store.dispatch;
 
-  dispatch(selectAble());
+  dispatch(selectHandAble());
 }

src/service/mora/selectTp.ts

+import { ygopro } from "../../api/ocgcore/idl/ocgcore";
+import { store } from "../../store";
+import { selectTpAble } from "../../reducers/moraSlice";
+
+export default function handleSelectTp(_: ygopro.YgoStocMsg) {
+  const dispatch = store.dispatch;
+
+  dispatch(selectTpAble());
+}

src/service/onSocketMessage.ts

@@ -11,6 +11,7 @@ import handleHsWatchChange from "./room/hsWatchChange";
 import { ygoProPacket } from "../api/ocgcore/ocgAdapter/packet";
 import { adaptStoc } from "../api/ocgcore/ocgAdapter/adapter";
 import handleSelectHand from "./mora/selectHand";
+import handleSelectTp from "./mora/selectTp";
 
 /*
  * 先将从长连接中读取到的二进制数据通过Adapter转成protobuf结构体，
@@ -57,6 +58,17 @@ export default function handleSocketMessage(e: MessageEvent) {
 
       break;
     }
+    case "stoc_hand_result": {
+      // TODO
+      console.log("TODO: handle STOC HandResult.");
+
+      break;
+    }
+    case "stoc_select_tp": {
+      handleSelectTp(pb);
+
+      break;
+    }
     default: {
       break;
     }

src/ui/Mora.tsx

@@ -4,40 +4,63 @@
  * */
 
 import React from "react";
-import { sendHandResult } from "../api/ocgcore/ocgHelper";
+import { sendHandResult, sendTpResult } from "../api/ocgcore/ocgHelper";
 import "../css/Mora.css";
 import { useAppSelector } from "../hook";
-import { selectMoraSelectAble } from "../reducers/moraSlice";
+import {
+  selectHandSelectAble,
+  unSelectHandAble,
+  selectTpSelectAble,
+  unSelectTpAble,
+} from "../reducers/moraSlice";
+import { store } from "../store";
 
 // TODO: 应该展示对手卡组信息和聊天信息
 export default function Mora() {
-  const selectAble = useAppSelector(selectMoraSelectAble);
+  const dispatch = store.dispatch;
+  const selectHandAble = useAppSelector(selectHandSelectAble);
+  const selectTpAble = useAppSelector(selectTpSelectAble);
 
   const handleSelectScissors = () => {
     sendHandResult("scissors");
+    dispatch(unSelectHandAble());
   };
   const handleSelectRock = () => {
     sendHandResult("rock");
+    dispatch(unSelectHandAble());
   };
   const handleSelectPaper = () => {
     sendHandResult("paper");
+    dispatch(unSelectHandAble());
+  };
+  const handleSelectFirst = () => {
+    sendTpResult(true);
+    dispatch(unSelectTpAble());
+  };
+  const handleSelectSecond = () => {
+    sendTpResult(false);
+    dispatch(unSelectTpAble());
   };
 
   return (
     <div className="container">
       <div className="item">
-        <button disabled={!selectAble} onClick={handleSelectScissors}>
+        <button disabled={!selectHandAble} onClick={handleSelectScissors}>
           scissors
         </button>
-      </div>
-      <div className="item">
-        <button disabled={!selectAble} onClick={handleSelectRock}>
+        <button disabled={!selectHandAble} onClick={handleSelectRock}>
           rock
         </button>
+        <button disabled={!selectHandAble} onClick={handleSelectPaper}>
+          paper
+        </button>
       </div>
       <div className="item">
-        <button disabled={!selectAble} onClick={handleSelectPaper}>
-          paper
+        <button disabled={!selectTpAble} onClick={handleSelectFirst}>
+          first
+        </button>
+        <button disabled={!selectTpAble} onClick={handleSelectSecond}>
+          second
         </button>
       </div>
     </div>