webapp/src/App.js

@@ -7,24 +7,26 @@ 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 />
-      <Routes>
-        {/* https://stackoverflow.com/questions/40541994/multiple-path-names-for-a-same-component-in-react-router */}
-        <Route path="/game" element={<Game />} />
-        <Route path="/game/new" element={<Game />} />
-        <Route path="/game/proposal" element={<Game />} />
-        <Route path="/game/active" element={<Game />} />
-        <Route path="/game/archive" element={<Game />} />
-
-        <Route path="/leaderboard" element={<Leaderboard />} />
-        <Route path="/about" element={<About />} />
-      </Routes>
+        <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/>} />
+            <Route path="/game/new" element={<Game/>} />
+            <Route path="/game/proposal" element={<Game/>} />
+            <Route path="/game/active" element={<Game/>} />
+            <Route path="/game/archive" element={<Game/>} />
+            
+            <Route path="/leaderboard" element={<Leaderboard/>} />
+            <Route path="/about" element={<About/>} />
+          </Routes>
+        </div>
     </BrowserRouter>
-  </div>
+    </div>
 }
 
 export default App;

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); 
-    margin-left: -19px;
+    transform: scale(.25, .25);
+    width: 1px;
+    height: 1px;
 }
 
 .app-header {
-    display: flex;
-}
-
-.app-header nav {
+    padding: auto;
     align-items: center;
     justify-content: center;
     display: flex;
     flex-wrap: wrap;
-
-    padding-top: 10px;
 }
 
 .app-header a {

webapp/src/components/Header/index.jsx

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