add chose deck logic in WaitRoom.tsx

src/App.tsx

@@ -4,7 +4,6 @@ import JoinRoom from "./JoinRoom";
 import WaitRoom from "./WaitRoom";
 import ThreeJs from "./ThreeJs";
 import { Routes, Route } from "react-router-dom";
-import Card from "./Card";
 
 function App() {
   return (
@@ -12,7 +11,6 @@ function App() {
       <Route path="/" element={<JoinRoom />} />
       <Route path="/:player/:passWd/:ip" element={<WaitRoom />} />
       <Route path="/three.js" element={<ThreeJs />} />
-      <Route path="/card" element={<Card />} />
     </Routes>
   );
 }

src/Card.tsx

 import axios from "axios";
-import React, { useState, useEffect } from "react";
 
-export default function Card() {
-  const [data, setData] = useState<IDeck>({});
-
-  useEffect(() => {
-    const fetchCards = async () => {
-      const res = await axios.get<IDeck>("http://localhost:3030/deck/hero.ydk");
-
-      setData(res.data);
-    };
-
-    fetchCards();
-  }, []);
-
-  const mainCards = (data.main || []).map((item, index) => (
-    <li key={index}>{item}</li>
-  ));
-  const extraCards = (data.extra || []).map((item, index) => (
-    <li key={index}>{item}</li>
-  ));
-  const sideCards = (data.side || []).map((item, index) => (
-    <li key={index}>{item}</li>
-  ));
-
-  return (
-    <ul>
-      <li>
-        main
-        <ul>{mainCards}</ul>
-      </li>
-      <li>
-        extra
-        <ul>{extraCards}</ul>
-      </li>
-      <li>
-        side
-        <ul>{sideCards}</ul>
-      </li>
-    </ul>
-  );
-}
-
-interface IDeck {
+export interface IDeck {
   main?: number[];
   extra?: number[];
   side?: number[];
 }
+
+export async function fetchDeck(deck: string): Promise<IDeck> {
+  const res = await axios.get<IDeck>("http://localhost:3030/deck/" + deck);
+
+  return res.data;
+}

src/WaitRoom.tsx

 import React, { useRef, useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import { ygopro } from "./api/idl/ocgcore";
+import { fetchDeck, IDeck } from "./Card";
 
 export default function WaitRoom() {
   const params = useParams<{
@@ -9,8 +10,9 @@ export default function WaitRoom() {
     ip?: string;
   }>();
 
-  const [joined, setJoined] = useState<string>("false");
+  const [joined, setJoined] = useState<boolean>(false);
   const [chat, setChat] = useState<string>("");
+  const [choseDeck, setChoseDeck] = useState<boolean>(false);
 
   const ws = useRef<WebSocket | null>(null);
 
@@ -49,10 +51,8 @@ export default function WaitRoom() {
       switch (pb.msg) {
         case "stoc_join_game": {
           const msg = pb.stoc_join_game;
-
-          console.log("joinGame msg=" + msg);
-
-          setJoined("true");
+          // todo
+          setJoined(true);
           break;
         }
         case "stoc_chat": {
@@ -76,9 +76,31 @@ export default function WaitRoom() {
     };
   }, [ws]);
 
+  const handleChoseDeck = async () => {
+    if (ws.current) {
+      const deck = await fetchDeck("hero.ydk");
+
+      sendUpdateDeck(ws.current, deck);
+
+      setChoseDeck(true);
+    }
+  };
+
+  const handleChoseReady = () => {
+    if (ws.current) {
+      // todo
+    }
+  };
+
   return (
     <div>
-      <p>joined: {joined}</p>
+      <p>joined: {joined ? "true" : "false"}</p>
+      <button disabled={!joined} onClick={handleChoseDeck}>
+        choose hero.ydk
+      </button>
+      <button disabled={!choseDeck} onClick={handleChoseReady}>
+        ready
+      </button>
       <p>chat: {chat}</p>
     </div>
   );
@@ -105,3 +127,15 @@ function sendJoinGame(ws: WebSocket, version: number, passWd: string) {
 
   ws.send(joinGame.serialize());
 }
+
+function sendUpdateDeck(ws: WebSocket, deck: IDeck) {
+  const updateDeck = new ygopro.YgoCtosMsg({
+    ctos_update_deck: new ygopro.CtosUpdateDeck({
+      main: deck.main,
+      extra: deck.extra,
+      side: deck.side
+    })
+  });
+
+  ws.send(updateDeck.serialize());
+}