webapp/src/App.js

@@ -12,6 +12,7 @@ function App() {
   return <div className="App">
     <BrowserRouter>
         <Header/>
+        <div className="Container">
           <Routes>
             {/* https://stackoverflow.com/questions/40541994/multiple-path-names-for-a-same-component-in-react-router */}
             <Route path="/game" element={<Game/>} />
@@ -23,6 +24,7 @@ function App() {
             <Route path="/leaderboard" element={<Leaderboard/>} />
             <Route path="/about" element={<About/>} />
           </Routes>
+        </div>
     </BrowserRouter>
     </div>
 }

webapp/src/components/Game.jsx

@@ -1,25 +0,0 @@
-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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,24 @@
+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.css

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

webapp/src/components/Game/index.jsx

@@ -0,0 +1,25 @@
+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(.5); 
+    transform: scale(.25, .25);
-    margin-left: -19px;
+    width: 1px;
+    height: 1px;
 }
 
 .app-header {
-    display: flex;
+    padding: auto;
-}
-
-.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,22 +8,11 @@ import { AppData } from "../../context/data"
 export default function Header() {
   const [data] = React.useContext(AppData)
 
-  return (
+  return <div>
-    <div className='app-header'>
     <h1>
-        CordaCheckers
+      CordaCheckers<OnlineToggle />
     </h1>
-      <OnlineToggle />
+    <nav className='app-header'>
-      <nav>
-        <NavLink to="/about" className={""}>
-          About
-        </NavLink>
-        <NavLink to="/game" className={data.gamesFetching && "woble"}>
-          <span>G</span>
-          <span>a</span>
-          <span>m</span>
-          <span>e</span>
-        </NavLink>
       <NavLink to="/leaderboard" className={data.leaderboardFetching && "woble"}>
         <span>L</span>
         <span>e</span>
@@ -37,7 +26,17 @@ export default function Header() {
         <span>r</span>
         <span>d</span>
       </NavLink>
+
+      <NavLink to="/game" className={data.gamesFetching && "woble"}>
+        <span>G</span>
+        <span>a</span>
+        <span>m</span>
+        <span>e</span>
+      </NavLink>
+
+      <NavLink to="/about" className={""}>
+        About
+      </NavLink>
     </nav>
   </div>
-  )
 }

webapp/src/components/OnlineTgl/index.css

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