add mora page

src/css/Mora.css

+.container {
+  display: flex;
+  margin: auto;
+  padding: 0;
+}
+
+.item {
+  text-align: center;
+  flex: 1;
+}

src/main.tsx

@@ -21,7 +21,7 @@
  * */
 import React from "react";
 import ReactDOM from "react-dom/client";
-import App from "./ui/App";
+import Neos from "./ui/Neos";
 import { BrowserRouter } from "react-router-dom";
 import { Provider } from "react-redux";
 import { store } from "./store";
@@ -33,7 +33,7 @@ root.render(
   <React.StrictMode>
     <BrowserRouter>
       <Provider store={store}>
-        <App />
+        <Neos />
       </Provider>
     </BrowserRouter>
   </React.StrictMode>

src/ui/Mora.tsx

+/*
+ * 猜拳页面
+ *
+ * */
+
+import React from "react";
+import "../css/Mora.css";
+
+export default function Mora() {
+  return (
+    <div className="container">
+      <div className="item">
+        <button>rock</button>
+      </div>
+      <div className="item">
+        <button>scissors</button>
+      </div>
+      <div className="item">
+        <button>paper</button>
+      </div>
+    </div>
+  );
+}

src/ui/App.tsx → src/ui/Neos.tsx

@@ -4,16 +4,17 @@ import WaitRoom from "./WaitRoom";
 import ThreeJs from "./ThreeJs";
 import BabylonJs from "./BabylonJs";
 import { Routes, Route } from "react-router-dom";
+import Mora from "./Mora";
 
-function App() {
+export default function () {
+  // FIXME: 这里Mora路由应该由每个房间指定一个路径
   return (
     <Routes>
       <Route path="/" element={<JoinRoom />} />
       <Route path="/:player/:passWd/:ip" element={<WaitRoom />} />
+      <Route path="/mora" element={<Mora />} />
       <Route path="/three" element={<ThreeJs />} />
       <Route path="/babylon" element={<BabylonJs />} />
     </Routes>
   );
 }
-
-export default App;

src/ui/WaitRoom.tsx

@@ -3,7 +3,7 @@
  *
  * */
 import React, { useEffect, useState } from "react";
-import { useParams } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
 import { fetchDeck } from "../api/Card";
 import "../css/WaitRoom.css";
 import { useAppSelector } from "../hook";
@@ -87,18 +87,19 @@ export default function WaitRoom() {
         </p>
         <p>
           <button
-            disabled={
-              !(
-                isHost &&
-                player0.state != undefined &&
-                player0.state === READY_STATE &&
-                player1.state != undefined &&
-                player1.state === READY_STATE
-              )
-            }
+            // disabled={
+            //   !(
+            //     isHost &&
+            //     player0.state != undefined &&
+            //     player0.state === READY_STATE &&
+            //     player1.state != undefined &&
+            //     player1.state === READY_STATE
+            //   )
+            // }
+            disabled={false}
             onClick={handleChoseStart}
           >
-            start
+            <Link to={{ pathname: `/mora` }}>start</Link>
           </button>
         </p>
       </div>