webapp/src/container/Games.css

@@ -63,7 +63,8 @@
 
 .ViewProvider {
     display: flex;
-    flex-direction: column;
+    flex-flow: column;
+    height: 340px;
     justify-content: center; 
     align-items: center;
 }

webapp/src/container/Games.jsx

@@ -3,9 +3,7 @@ import React from 'react';
 import { NavLink, Routes, Route } from 'react-router-dom';
 
 import NewGame from './games/view/NewGame';
-import GameProposals from './games/view/GameProposals';
-import ActiveGames from './games/view/ActiveGames';
-import GamesArchive from './games/view/GamesArchive';
+import GameSelector from './games/view/GameSelector';
 
 import Create from './games/action/Create';
 import Reject from './games/action/Reject';
@@ -27,7 +25,7 @@ export default function Games({ context }) {
     <GamesContext.Provider value={context.games} >
       <GamesDispatchContext.Provider value={context.dispatchGames} >
         <GamesApiContext.Provider value={context.gamesApi} >
-          <div className="Games">
+          <div className='Games'>
             <div className='left-side'>
               <ViewSelector />
               <ViewProvider />
@@ -47,24 +45,34 @@ export default function Games({ context }) {
 };
 
 function ViewSelector() {
+  // TODO: counter Wating for YOU
+
   return (
     <nav className='ViewSelector'>
-      <NavLink to="new">New</NavLink>
-      <NavLink to="proposal">Proposal</NavLink>
-      <NavLink to="active">Active</NavLink>
-      <NavLink to="archive">Archive</NavLink>
+      <NavLink to='new'>New</NavLink>
+      <NavLink to='proposal'>Proposal</NavLink>
+      <NavLink to='active'>Active</NavLink>
+      <NavLink to='archive'>Archive</NavLink>
     </nav>
   )
 }
 
-function ViewProvider() {
+function ViewProvider(/*todo: dispatchGame*/) {
   return (
     <div className='ViewProvider'>
       <Routes>
-        <Route path="new" element={<NewGame />} />
-        <Route path="proposal" element={<GameProposals />} />
-        <Route path="active" element={<ActiveGames />} />
-        <Route path="archive" element={<GamesArchive />} />
+        <Route path='new' element={<NewGame />} />
+
+        <Route path='proposal' element={
+          <GameSelector
+            yours='GAME_PROPOSAL_WAIT_FOR_YOU'
+            opponents='GAME_PROPOSAL_WAIT_FOR_OPPONENT'
+            onClick={(uuid) => console.log("GameProposal", uuid)}
+          />
+        } />
+
+        <Route path='active' element={<GameSelector />} />
+        <Route path='archive' element={<GameSelector />} />
       </Routes>
     </div>
   )
@@ -74,10 +82,10 @@ function ActionPanel() {
   return (
     <div className='ActionPanel'>
       <Routes>
-        <Route path="new" element={<Create />} />
-        <Route path="proposal" element={[<Accept key={1} />, <Reject key={2} />, <Cancel key={3} />]} />
-        <Route path="active" element={[<DrawReq key={1} />, <DrawAcq key={2} />, <Surrender key={3} />]} />
-        <Route path="archive" element={[<Backward key={1} />, <Forward key={2} />]} />
+        <Route path='new' element={<Create />} />
+        <Route path='proposal' element={[<Accept key={1} />, <Reject key={2} />, <Cancel key={3} />]} />
+        <Route path='active' element={[<DrawReq key={1} />, <DrawAcq key={2} />, <Surrender key={3} />]} />
+        <Route path='archive' element={[<Backward key={1} />, <Forward key={2} />]} />
       </Routes>
     </div>
   )