front: GameHeader: add New gameView

- GameActions for each GameView
- activate GameAction per relevan GameView

webapp/src/App.js

@@ -16,6 +16,7 @@ function App() {
           <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/>} />

webapp/src/components/Game/GameAction.jsx

@@ -1,24 +1,45 @@
 import './GameAction.css';
 import React from 'react';
+import { useLocation, matchPath } from "react-router";
+
+import Create from './GameAction/Create';
+
+import Reject from './GameAction/Reject';
+import Cancel from './GameAction/Cancel';
+import Accept from './GameAction/Accept';
+
+import DrawReq from './GameAction/DrawReq';
+import DrawAcq from './GameAction/DrawAcq';
+import Surrender from './GameAction/Surrender';
+
+import Backward from './GameAction/Backward';
+import Forward from './GameAction/Forward';
 
-import Create from './GameAction/Create'
-import Reject from './GameAction/Reject'
-import Cancel from './GameAction/Cancel'
-import Accept from './GameAction/Accept'
 // import { AppContext } from '../../context/app'
 
 export default function GameAction() {
   // const [ctx, dispatchCtx] = React.useContext(AppContext)
 
+  const { pathname } = useLocation();
+  const isNewGamePath = matchPath("/game/new", pathname);
+  const isProposalPath = matchPath("/game/proposal/*", pathname);
+  const isActivelPath = matchPath("/game/active/*", pathname);
+  const isArchivePath = matchPath("/game/archive/*", pathname);
+
   return (
-    <div>
+    <div className='action-panel'>
-      <div className='action-panel'>
+      {isNewGamePath && <Create />}
-        <Create />
+
-        <Reject />
+      {isProposalPath && <Reject />}
-        <Cancel />
+      {isProposalPath && <Cancel />}
-        <Accept />
+      {isProposalPath && <Accept />}
-      </div>
+
-      {/* {isProposalPath && <Proposal games={data.games} />} */}
+      {isActivelPath && <DrawReq />}      
+      {isActivelPath && <DrawAcq />}      
+      {isActivelPath && <Surrender />}
+
+      {isArchivePath && <Backward />}      
+      {isArchivePath && <Forward />}      
     </div>
   )
 }

webapp/src/components/Game/GameAction/Backward.jsx

@@ -0,0 +1,6 @@
+import React from 'react';
+
+export default function Backward() {
+
+    return <button className='game-action backward'>Backward</button>
+}

webapp/src/components/Game/GameAction/DrawAcq.jsx

@@ -0,0 +1,6 @@
+import React from 'react';
+
+export default function DrawAcq() {
+
+    return <button className='game-action draw-acq'>Draw acquire</button>
+}

webapp/src/components/Game/GameAction/DrawReq.jsx

@@ -0,0 +1,6 @@
+import React from 'react';
+
+export default function DrawReq() {
+
+    return <button className='game-action drawreq'>Draw request</button>
+}

webapp/src/components/Game/GameAction/Forward.jsx

@@ -0,0 +1,6 @@
+import React from 'react';
+
+export default function Forward() {
+
+    return <button className='game-action forward'>Forward</button>
+}

webapp/src/components/Game/GameAction/Surrender.jsx

@@ -0,0 +1,6 @@
+import React from 'react';
+
+export default function Surrender() {
+
+    return <button className='game-action surrender'>Surrender</button>
+}

webapp/src/components/Game/GameHeader.jsx

@@ -6,6 +6,7 @@ export default function GameHeader() {
 
   return (
     <nav className='game-header'>
+      <NavLink to="/game/new">New</NavLink>
       <NavLink to="/game/proposal">Proposal</NavLink>
       <NavLink to="/game/active">Active</NavLink>
       <NavLink to="/game/archive">Archive</NavLink>

webapp/src/components/Game/NewGame.jsx

@@ -0,0 +1,21 @@
+import './NewGame.css';
+import React from 'react';
+import { useLocation, matchPath } from "react-router";
+
+// import { AppContext } from '../../context/app'
+
+export default function NewGame() {
+  // const [ctx, dispatchCtx] = React.useContext(AppContext)
+
+  const { pathname } = useLocation();
+  const isMyPath = matchPath("/game/new", pathname);
+
+  if (!isMyPath)
+    return 
+  
+  return (
+    <div className='new-game'>
+      <div>New game TBD</div>
+    </div>
+  )
+}

webapp/src/components/Game/index.jsx

@@ -4,22 +4,22 @@ import GameHeader from './GameHeader'
 import GameSelector from './GameSelector'
 import GameAction from './GameAction'
 import GameBoard from './GameBoard'
-
+import NewGame from './NewGame';
-// import { AppData } from "../../context/data"
 
 export default function Game() {
 
-  return <div className="split">
+  return (
-
+    <div className="split">
-    <div className='split left'>
+      <div className='split left'>
-      <GameHeader />
+        <GameHeader />
-      <GameSelector />
+        <GameSelector />
+        <NewGame />
+      </div>
+      <div className='split right'>
+        <GameAction />
+        <GameBoard />
+      </div>
     </div>
-
+  )
-    <div className='split right'>
-      <GameAction />
-      <GameBoard />
-    </div>
-  </div>
 
 }