Merge branch 'optimize/mora' into 'main'

Optimize/mora

See merge request mycard/Neos!104

src/styles/_mora.scss

-.mora_container {
-  display: flex;
-  margin: auto;
-  padding: 0;
-}
-
-.item {
-  text-align: center;
-  flex: 1;
-  margin: auto;
-  padding: 10%;
-}

src/styles/_wait-room.scss

-.wait_container {
-  display: flex;
-  margin: auto;
-  padding: 0;
-}
-
-.playerRegion {
-  text-align: center;
-  flex: 1;
-  margin: auto;
-  padding: 10%;
-}
-
-.roomRegion {
-  flex: 1;
-  margin: auto;
-  padding: 10%;
-}
-.roomRegion > p {
-  text-align: start;
-}

src/styles/core.scss

@@ -52,9 +52,7 @@ url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css")
 "commom",
 "header",
 "login-form",
-"sign-in",
-"wait-room",
-"mora";
+"sign-in";
 
 
 * {

src/ui/Mora.tsx

-/*
- * 猜拳页面
- *
- * */
-
 import React from "react";
 import { sendHandResult, sendTpResult } from "../api/ocgcore/ocgHelper";
 import { useAppSelector } from "../hook";
@@ -12,23 +7,22 @@ import {
   selectTpSelectAble,
   unSelectTpAble,
 } from "../reducers/moraSlice";
-import { selectPlayer0, selectPlayer1 } from "../reducers/playerSlice";
 import { selectDuelHsStart } from "../reducers/duel/mod";
 import { store } from "../store";
 import { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
-import { Button } from "antd";
-import "../styles/core.scss";
+import { Button, Modal } from "antd";
+import {
+  ScissorOutlined,
+  SketchOutlined,
+  TableOutlined,
+} from "@ant-design/icons";
 
-// TODO: 应该展示聊天信息
-export default function Mora() {
+const Mora = () => {
   const dispatch = store.dispatch;
   const selectHandAble = useAppSelector(selectHandSelectAble);
   const selectTpAble = useAppSelector(selectTpSelectAble);
-  const player0 = useAppSelector(selectPlayer0);
-  const player1 = useAppSelector(selectPlayer1);
   const duelHsStart = useAppSelector(selectDuelHsStart);
-
   const navigate = useNavigate();
 
   useEffect(() => {
@@ -38,58 +32,70 @@ export default function Mora() {
     }
   }, [duelHsStart]);
 
-  const handleSelectScissors = () => {
-    sendHandResult("scissors");
-    dispatch(unSelectHandAble());
-  };
-  const handleSelectRock = () => {
-    sendHandResult("rock");
+  const handleSelectMora = (selected: string) => {
+    sendHandResult(selected);
     dispatch(unSelectHandAble());
   };
-  const handleSelectPaper = () => {
-    sendHandResult("paper");
-    dispatch(unSelectHandAble());
-  };
-  const handleSelectFirst = () => {
-    sendTpResult(true);
-    dispatch(unSelectTpAble());
-  };
-  const handleSelectSecond = () => {
-    sendTpResult(false);
+  const handleSelectTp = (isFirst: boolean) => {
+    sendTpResult(isFirst);
     dispatch(unSelectTpAble());
   };
 
   return (
-    <div className="mora_container">
-      <div className="item">
-        <Button disabled={!selectHandAble} onClick={handleSelectScissors}>
-          scissors
+    <>
+      <Modal title="请选择猜拳" open={selectHandAble} footer={<></>}>
+        <Button
+          disabled={!selectHandAble}
+          onClick={() => {
+            handleSelectMora("scissors");
+          }}
+          icon={<ScissorOutlined />}
+        >
+          剪刀
         </Button>
-        <Button disabled={!selectHandAble} onClick={handleSelectRock}>
-          rock
+        <Button
+          disabled={!selectHandAble}
+          onClick={() => {
+            handleSelectMora("rock");
+          }}
+          icon={<SketchOutlined />}
+        >
+          石头
         </Button>
-        <Button disabled={!selectHandAble} onClick={handleSelectPaper}>
-          paper
+        <Button
+          disabled={!selectHandAble}
+          onClick={() => {
+            handleSelectMora("paper");
+          }}
+          icon={<TableOutlined />}
+        >
+          布
         </Button>
-      </div>
-      <div className="item">
-        <Button disabled={!selectTpAble} onClick={handleSelectFirst}>
-          first
+      </Modal>
+      <Modal
+        title="请选择先攻/后攻"
+        open={!selectHandAble && selectTpAble}
+        footer={<></>}
+      >
+        <Button
+          disabled={!selectTpAble}
+          onClick={() => {
+            handleSelectTp(true);
+          }}
+        >
+          先攻
         </Button>
-        <Button disabled={!selectTpAble} onClick={handleSelectSecond}>
-          second
+        <Button
+          disabled={!selectTpAble}
+          onClick={() => {
+            handleSelectTp(false);
+          }}
+        >
+          后攻
         </Button>
-      </div>
-      <div className="item">
-        <p>
-          Me: main={player0.deckInfo?.mainCnt}, extra=
-          {player0.deckInfo?.extraCnt}, side={player0.deckInfo?.sideCnt}
-        </p>
-        <p>
-          Me: main={player1.deckInfo?.mainCnt}, extra=
-          {player1.deckInfo?.extraCnt}, side={player1.deckInfo?.sideCnt}
-        </p>
-      </div>
-    </div>
+      </Modal>
+    </>
   );
-}
+};
+
+export default Mora;

src/ui/Neos.tsx

 import React from "react";
 import JoinRoom from "./JoinRoom";
 import WaitRoomV2 from "./WaitRoom";
+import MoraV2 from "./Mora";
 import { Routes, Route } from "react-router-dom";
-import Mora from "./Mora";
 import NeosDuel from "./Duel/main";
 
 export default function () {
@@ -11,7 +11,7 @@ export default function () {
     <Routes>
       <Route path="/" element={<JoinRoom />} />
       <Route path="/:player/:passWd/:ip" element={<WaitRoomV2 />} />
-      <Route path="/mora" element={<Mora />} />
+      <Route path="/mora" element={<MoraV2 />} />
       <Route path="/duel" element={<NeosDuel />} />
     </Routes>
   );