front: GameComponent refactoring

webapp/src/App.js

@@ -7,26 +7,24 @@ import Leaderboard from "./components/Leaderboard"
 import Game from "./components/Game"
 import About from "./components/About"
 
-function App() { 
+function App() {
 
   return <div className="App">
     <BrowserRouter>
-        <Header/>
+      <Header />
-        <div className="Container">
+      <Routes>
-          <Routes>
+        {/* https://stackoverflow.com/questions/40541994/multiple-path-names-for-a-same-component-in-react-router */}
-            {/* https://stackoverflow.com/questions/40541994/multiple-path-names-for-a-same-component-in-react-router */}
+        <Route path="/game" element={<Game />} />
-            <Route path="/game" element={<Game/>} />
+        <Route path="/game/new" element={<Game />} />
-            <Route path="/game/new" element={<Game/>} />
+        <Route path="/game/proposal" element={<Game />} />
-            <Route path="/game/proposal" element={<Game/>} />
+        <Route path="/game/active" element={<Game />} />
-            <Route path="/game/active" element={<Game/>} />
+        <Route path="/game/archive" element={<Game />} />
-            <Route path="/game/archive" element={<Game/>} />
+
-            
+        <Route path="/leaderboard" element={<Leaderboard />} />
-            <Route path="/leaderboard" element={<Leaderboard/>} />
+        <Route path="/about" element={<About />} />
-            <Route path="/about" element={<About/>} />
+      </Routes>
-          </Routes>
-        </div>
     </BrowserRouter>
-    </div>
+  </div>
 }
 
 export default App;

webapp/src/components/Game.css

@@ -1,9 +1,9 @@
-.split {
+.game {
     width: 100%;
     float: left;
 }
 
-.split .left {
+.game .left-side {
     float: left;
     width: 45%;
     /* max-width: 400px; */
@@ -15,7 +15,7 @@
     align-items: center;
 }
 
-.split .right {
+.game .right-side {
     float: left;
     width: 55%;
 }

webapp/src/components/Game.jsx

@@ -0,0 +1,25 @@
+import './Game.css';
+import React from 'react';
+import GameView from './Game/GameView'
+import GameSelector from './Game/GameSelector'
+import GameAction from './Game/GameAction'
+import GameBoard from './Game/GameBoard'
+import NewGame from './Game/NewGame';
+
+export default function Game() {
+
+  return (
+    <div className="game">
+      <div className='left-side'>
+        <GameView />
+        <GameSelector />
+        <NewGame />
+      </div>
+      <div className='right-side'>
+        <GameAction />
+        <GameBoard />
+      </div>
+    </div>
+  )
+
+}

webapp/src/components/Game/GameProposalAction.js

@@ -1,19 +0,0 @@
-import React from 'react';
-
-export function Accept({uuid}) {
-    return <button className="action" id={uuid} type="submit">
-        Accept
-        </button>
-}
-
-// export function Reject({uuid}) {
-//     return <button className="action" id={uuid} type="submit" >
-//         Reject
-//         </button>
-// }
-
-export function Cancel({uuid}) {
-    return <button className="action" id={uuid} type="submit">
-        Cancel
-        </button>
-}

webapp/src/components/Game/GameProposalCancel.js

@@ -1,24 +0,0 @@
-import React, {useState} from 'react';
-
-export default function Cancel({uuid}) {
-    const [pending, setPending] = useState(new Map())
-
-    for (const [key, value] of pending)
-        console.log("cancel", key, value);
-
-    function sendRequest(uuid2reject) {
-        const nextPending = new Map(pending)
-        nextPending.set(uuid2reject, null)
-
-        setPending(nextPending)
-    }
-
-    const status = pending.get(uuid)
-    const isPending = status !== undefined
-
-    return <button 
-        className={isPending ? "visible" : "action"} 
-        onClick={() => sendRequest(uuid) }>
-            Cancel
-        </button>
-}

webapp/src/components/Game/index.jsx

@@ -1,25 +0,0 @@
-import './index.css';
-import React from 'react';
-import GameView from './GameView'
-import GameSelector from './GameSelector'
-import GameAction from './GameAction'
-import GameBoard from './GameBoard'
-import NewGame from './NewGame';
-
-export default function Game() {
-
-  return (
-    <div className="split">
-      <div className='split left'>
-        <GameView />
-        <GameSelector />
-        <NewGame />
-      </div>
-      <div className='split right'>
-        <GameAction />
-        <GameBoard />
-      </div>
-    </div>
-  )
-
-}