Merge branch 'feat/ant_design' into 'main'

Feat/ant design

See merge request !41

package.json

@@ -12,6 +12,7 @@
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
     "@types/react-redux": "^7.1.24",
+    "antd": "^5.0.7",
     "axios": "^0.27.2",
     "google-protobuf": "^3.21.0",
     "react": "^18.2.0",

src/css/JoinRoom.css

@@ -3,11 +3,11 @@ body {
   justify-content: center;
 }
 
-div {
+.login_div {
   margin: auto;
   padding: 10%;
 }
 
-p {
+.login_p {
   text-align: center;
 }

src/css/Mora.css

@@ -7,4 +7,6 @@
 .item {
   text-align: center;
   flex: 1;
+  margin: auto;
+  padding: 10%;
 }

src/css/WaitRoom.css

@@ -7,10 +7,14 @@
 .playerRegion {
   text-align: center;
   flex: 1;
+  margin: auto;
+  padding: 10%;
 }
 
 .roomRegion {
   flex: 1;
+  margin: auto;
+  padding: 10%;
 }
 .roomRegion > p {
   text-align: start;

src/ui/JoinRoom.tsx

@@ -9,6 +9,7 @@
 import React, { useState, ChangeEvent } from "react";
 import { Link } from "react-router-dom";
 import "../css/JoinRoom.css";
+import { Input, Button } from "antd";
 
 export default function JoinRoom() {
   const [player, setPlayer] = useState("");
@@ -26,38 +27,38 @@ export default function JoinRoom() {
   };
 
   return (
-    <div>
-      <p>
-        <label>player: </label>
-        <input
+    <div className="login_div">
+      <p className="login_p">
+        <Input
           type="text"
-          title="player"
+          style={{ width: "20%" }}
+          placeholder="player"
           value={player}
           onChange={handlePlayerChange}
-        ></input>
+        />
       </p>
-      <p>
-        <label>addr: </label>
-        <input
+      <p className="login_p">
+        <Input
           type="text"
-          title="ip"
+          style={{ width: "20%" }}
+          placeholder="ip"
           value={ip}
           onChange={handleIpChange}
-        ></input>
+        />
       </p>
-      <p>
-        <label>passwd: </label>
-        <input
+      <p className="login_p">
+        <Input
           type="text"
-          title="passwd"
+          style={{ width: "20%" }}
+          placeholder="passwd"
           value={passWd}
           onChange={handlePasswdChange}
-        ></input>
+        />
       </p>
-      <p>
-        <button>
+      <p className="login_p">
+        <Button>
           <Link to={{ pathname: `/${player}/${passWd}/${ip}` }}>join</Link>
-        </button>
+        </Button>
       </p>
     </div>
   );

src/ui/Mora.tsx

@@ -18,6 +18,7 @@ import { selectDuelHsStart } from "../reducers/duel/mod";
 import { store } from "../store";
 import { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
+import { Button } from "antd";
 
 // TODO: 应该展示聊天信息
 export default function Mora() {
@@ -61,23 +62,23 @@ export default function Mora() {
   return (
     <div className="container">
       <div className="item">
-        <button disabled={!selectHandAble} onClick={handleSelectScissors}>
+        <Button disabled={!selectHandAble} onClick={handleSelectScissors}>
           scissors
-        </button>
-        <button disabled={!selectHandAble} onClick={handleSelectRock}>
+        </Button>
+        <Button disabled={!selectHandAble} onClick={handleSelectRock}>
           rock
-        </button>
-        <button disabled={!selectHandAble} onClick={handleSelectPaper}>
+        </Button>
+        <Button disabled={!selectHandAble} onClick={handleSelectPaper}>
           paper
-        </button>
+        </Button>
       </div>
       <div className="item">
-        <button disabled={!selectTpAble} onClick={handleSelectFirst}>
+        <Button disabled={!selectTpAble} onClick={handleSelectFirst}>
           first
-        </button>
-        <button disabled={!selectTpAble} onClick={handleSelectSecond}>
+        </Button>
+        <Button disabled={!selectTpAble} onClick={handleSelectSecond}>
           second
-        </button>
+        </Button>
       </div>
       <div className="item">
         <p>

src/ui/WaitRoom.tsx

@@ -21,6 +21,7 @@ import {
   sendHsStart,
 } from "../api/ocgcore/ocgHelper";
 import socketMiddleWare, { socketCmd } from "../middleware/socket";
+import { Button } from "antd";
 
 const READY_STATE = "ready";
 
@@ -76,17 +77,17 @@ export default function WaitRoom() {
       <div className="playerRegion">
         <h2>{joined ? "Room Joined!" : "Room Not Joined."}</h2>
         <p>
-          <button disabled={!joined} onClick={handleChoseDeck}>
+          <Button disabled={!joined} onClick={handleChoseDeck}>
             choose hero.ydk
-          </button>
+          </Button>
         </p>
         <p>
-          <button disabled={!choseDeck} onClick={handleChoseReady}>
+          <Button disabled={!choseDeck} onClick={handleChoseReady}>
             ready
-          </button>
+          </Button>
         </p>
         <p>
-          <button onClick={handleChoseStart}>
+          <Button onClick={handleChoseStart}>
             <Link
               to={
                 // 若当前玩家是房主并且对战双方都已准备完毕，跳转到猜拳页面；
@@ -100,7 +101,7 @@ export default function WaitRoom() {
             >
               start
             </Link>
-          </button>
+          </Button>
         </p>
       </div>
       <div className="roomRegion">