front: GameHeader as one line of elemnts

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>
-  )
-
-}

webapp/src/components/Header/index.css

@@ -1,19 +1,19 @@
-h1 {
-    display: inline-flex;
-}
-
 .OnlineTgl {
-    transform: scale(.25, .25);
+    transform: scale(.5); 
-    width: 1px;
+    margin-left: -19px;
-    height: 1px;
 }
 
 .app-header {
-    padding: auto;
+    display: flex;
+}
+
+.app-header nav {
     align-items: center;
     justify-content: center;
     display: flex;
     flex-wrap: wrap;
+
+    padding-top: 10px;
 }
 
 .app-header a {

webapp/src/components/Header/index.jsx

@@ -8,35 +8,36 @@ import { AppData } from "../../context/data"
 export default function Header() {
   const [data] = React.useContext(AppData)
 
-  return <div>
+  return (
-    <h1>
+    <div className='app-header'>
-      CordaCheckers<OnlineToggle />
+      <h1 >
-    </h1>
+        CordaCheckers
-    <nav className='app-header'>
+      </h1>
-      <NavLink to="/leaderboard" className={data.leaderboardFetching && "woble"}>
+      <OnlineToggle />
-        <span>L</span>
+      <nav>
-        <span>e</span>
+        <NavLink to="/about" className={""}>
-        <span>a</span>
+          About
-        <span>d</span>
+        </NavLink>
-        <span>e</span>
+        <NavLink to="/game" className={data.gamesFetching && "woble"}>
-        <span>r</span>
+          <span>G</span>
-        <span>b</span>
+          <span>a</span>
-        <span>o</span>
+          <span>m</span>
-        <span>a</span>
+          <span>e</span>
-        <span>r</span>
+        </NavLink>
-        <span>d</span>
+        <NavLink to="/leaderboard" className={data.leaderboardFetching && "woble"}>
-      </NavLink>
+          <span>L</span>
-
+          <span>e</span>
-      <NavLink to="/game" className={data.gamesFetching && "woble"}>
+          <span>a</span>
-        <span>G</span>
+          <span>d</span>
-        <span>a</span>
+          <span>e</span>
-        <span>m</span>
+          <span>r</span>
-        <span>e</span>
+          <span>b</span>
-      </NavLink>
+          <span>o</span>
-
+          <span>a</span>
-      <NavLink to="/about" className={""}>
+          <span>r</span>
-        About
+          <span>d</span>
-      </NavLink>
+        </NavLink>
-    </nav>
+      </nav>
-  </div>
+    </div>
+  )
 }

webapp/src/components/OnlineTgl/index.css

@@ -1,4 +1,3 @@
-
 .tgl {
   display: none;