update NewWaitRoom

src/api/ocgcore/ocgHelper.ts

@@ -42,6 +42,10 @@ export function sendHsReady() {
   socketMiddleWare({ cmd: socketCmd.SEND, payload });
 }
 
+export function sendHsNotReady() {
+  // TODO
+}
+
 export function sendHsStart() {
   const hasStart = new ygopro.YgoCtosMsg({
     ctos_hs_start: new ygopro.CtosHsStart({}),

src/ui/NewWaitRoom/index.tsx

 import { CheckCircleFilled } from "@ant-design/icons";
 
-import { ygopro } from "@/api";
+import { sendHsNotReady, sendHsReady, sendUpdateDeck, ygopro } from "@/api";
 import PlayerState = ygopro.StocHsPlayerChange.State;
 import { Avatar, Button, ConfigProvider, Popover, Skeleton, Space } from "antd";
 import classNames from "classnames";
-import { forwardRef, useImperativeHandle, useRef, useState } from "react";
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
 import { useSnapshot } from "valtio";
 
 import { useConfig } from "@/config";
-import { accountStore, Player, roomStore } from "@/stores";
+import { accountStore, deckStore, IDeck, Player, roomStore } from "@/stores";
 import { Background, IconFont, Select } from "@/ui/Shared";
 
 import { Chat } from "./Chat";
@@ -35,10 +41,17 @@ const theme = {
 export const Component: React.FC = () => {
   const { user } = useSnapshot(accountStore);
   const [collapsed, setCollapsed] = useState(false);
+  const { decks } = useSnapshot(deckStore);
+  const [deck, setDeck] = useState<IDeck>(JSON.parse(JSON.stringify(decks[0])));
   const room = useSnapshot(roomStore);
   // const ref = useRef<MoraButtonRef>(null);
   // ref.current?.getMoraResult(); // 用这个来异步获取猜拳结果
 
+  useEffect(() => {
+    sendUpdateDeck(deck);
+    window.myExtraDeckCodes = [...deck.extra];
+  }, [deck]);
+
   return (
     <ConfigProvider theme={theme}>
       <div
@@ -60,7 +73,17 @@ export const Component: React.FC = () => {
             <LoadingOutlined />
             对方正在选择先后
           </div> */}
-          <Controller />
+          <Controller
+            onDeckChange={(deckName: string) => {
+              const deck = deckStore.get(deckName);
+              // 同步后端
+              if (deck) {
+                setDeck(deck);
+              } else {
+                alert(`Deck ${deckName} not found`);
+              }
+            }}
+          />
           <div className={styles["both-side-container"]}>
             <PlayerZone
               who={Who.Me}
@@ -68,8 +91,18 @@ export const Component: React.FC = () => {
               avatar={user?.avatar_url}
               btn={
                 <>
-                  <Button size="large" className={styles["btn-join"]}>
-                    决斗准备
+                  <Button
+                    size="large"
+                    className={styles["btn-join"]}
+                    onClick={() => {
+                      room.getMePlayer().state == PlayerState.NO_READY
+                        ? sendHsReady()
+                        : sendHsNotReady();
+                    }}
+                  >
+                    {room.getMePlayer().state == PlayerState.NO_READY
+                      ? "决斗准备"
+                      : "取消准备"}
                   </Button>
                   {/* <MoraButton ref={ref} /> */}
                 </>
@@ -218,20 +251,25 @@ const PlayerZone: React.FC<{
   );
 };
 
-const Controller: React.FC = () => {
+const Controller: React.FC<{ onDeckChange: (deckName: string) => void }> = ({
+  onDeckChange,
+}) => {
+  const snap = useSnapshot(deckStore);
   return (
     <Space>
       <Select
         title="卡组"
         showSearch
-        defaultValue="lucy"
         style={{ width: 300 }}
-        options={[
-          { value: "jack", label: "Jack" },
-          { value: "lucy", label: "Lucy" },
-          { value: "Yiminghe", label: "yiminghe" },
-          { value: "disabled", label: "Disabled", disabled: true },
-        ]}
+        defaultValue={snap.decks[0].deckName}
+        options={snap.decks.map((deck) => ({
+          value: deck.deckName,
+          title: deck.deckName,
+        }))}
+        onChange={
+          // @ts-ignore
+          (value) => onDeckChange(value)
+        }
       />
       <Button size="large" icon={<IconFont type="icon-record" size={18} />}>
         加入观战