final ui layout

webapp/src/App.css

@@ -1,10 +1,18 @@
+h1 {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
 .Header .OnlineToggle {
   transform: scale(.5); 
   margin-left: -19px;
+  margin-top: -7px;
 }
 
 .Header {
   display: flex;
+  justify-content: center;
+  margin-left: 60px;
 }
 
 .Header nav {
@@ -12,8 +20,9 @@
   justify-content: center;
   display: flex;
   flex-wrap: wrap;
+  padding-left: 30px; 
 
-  padding-top: 10px;
+  padding-bottom: 5px;
 }
 
 .Header a {

webapp/src/App.js

@@ -57,9 +57,7 @@ function Header({ configReducer, isPolling }) {
 
   return (
     <div className='Header'>
-      <h1>
+      <h1>CordaCheckers</h1>
-        CordaCheckers
-      </h1>
 
       <OnlineToggle
         isOnline={config.online}

webapp/src/components/Checkers.css

@@ -8,7 +8,6 @@
     display: flex;
     flex-direction: column;
     justify-content: center; 
-    align-items: center;
 }
 
 .Board.flip {

webapp/src/container/Games.css

@@ -5,31 +5,25 @@
 
 .Games .left-side {
     float: left;
-    width: 45%;
+    width: 50%;
-    /* max-width: 400px; */
-
-  /* height: 100px; */
     display: flex;
     flex-direction: column;
-    justify-content: center; 
-    align-items: center;
 }
 
 .Games .right-side {
     float: left;
-    width: 55%;
+    width: 50%;
 
     display: flex;
     flex-direction: column;
-    justify-content: center; 
-    align-items: center;
 }
 
 
 
 .ViewSelector {
-    text-align: center;
+    text-align: end;
     margin-bottom: 10px;
+    margin-left: -10px;
     background-color: lightgrey;
     width: 100%;
     padding-top: 8px;
@@ -37,6 +31,10 @@
     color: black;
 }
 
+.ViewSelector .Container {
+    margin-right: 30px;
+}
+
 .ViewSelector a {
     color: black;
     text-decoration: none;
@@ -60,122 +58,45 @@
 }
 
 .ViewSelector .Counter {
-    background-color:#FF3A19;;
+    background-color: #FF3A19;
+    ;
     margin-right: 1px;
     font-size: 60%;
     vertical-align: 7px;
 }
 
+
 .ViewProvider {
     display: flex;
     flex-flow: column;
     height: 340px;
     justify-content: center;
-    align-items: center;
+    align-items: flex-end;
+    margin-right: 30px;
 }
 
+.NewGame {
+    margin-right: 30px;
+    margin-bottom: 30px;
+}
 
 .ActionPanel {
-    text-align: center;
     margin-bottom: 10px;
-    height: 34.5px;
-
-    /* background-color: lightgrey; */
-    width: 100%;
-    /* padding-top: 8px;
-    padding-bottom: 8px; */
-    color: black;
-    padding-left: -10px;
-    /* */
-
     margin-left: 10px;
+    height: 34.5px;
+    width: 100%;
+
+    color: black;
+    padding-left: 17px;
     border: 0.5px dotted lightslategray;
 }
 
-.ActionPanel button {
+.GameBoard {
-    width:fit-content;
+    padding-left: 30px;
-    padding: 6px;
-    padding-left: 15px;
-    padding-right: 15px;
-    border-radius: 5px;
-    border: 0.5px solid darkgrey; 
-    margin: 2px;
 }
 
-.ActionPanel .Create.ready {
+.Message2Opponent {
-    background-color:#00b0ff30;  
+    margin: 10px;
-}
+    margin-left: 30px;
-
+    width: 270px;
-.ActionPanel .Create.ready:hover {
-    background-color:#00b0ffa0;  
-}
-
-.ActionPanel .Create.ready:active {
-    background-color:#00b0fff0;  
-}
-
-.ActionPanel .Cancel.ready,
-.ActionPanel .Reject.ready,
-.ActionPanel .Surrender.ready  
-{
-    background-color:#ffaaaa60
-}
-
-.ActionPanel .Cancel.ready:hover,
-.ActionPanel .Reject.ready:hover,
-.ActionPanel .Surrender.ready:hover
-{
-    background-color:#ff000060
-}
-
-.ActionPanel .Cancel.ready:active,
-.ActionPanel .Reject.ready:active,
-.ActionPanel .Surrender.ready:active
- {
-    background-color:#ff0000a0
-}
-
-.ActionPanel .Accept.ready {
-    background-color: #00af0018;  
-}
-
-.ActionPanel .Accept.ready:hover {
-    background-color:#00af0060;  
-}
-
-.ActionPanel .Accept.ready:active {
-    background-color:#00af00a0;  
-}
-
-/*
- * Draw
- */
-.ActionPanel .Draw.ready,
-.ActionPanel .Draw.accept,
-.ActionPanel .Draw.reject  {
-    background-color: #ffff0018;  
-}
-
-.ActionPanel .Draw.ready:hover {
-    background-color:#ffff0040;  
-}
-
-.ActionPanel .Draw.ready:active {
-    background-color:#ffff00a0;  
-}
-
-.ActionPanel .Draw.accept:hover {
-    background-color:#a4ff4a50;  
-}
-
-.ActionPanel .Draw.accept:active {
-    background-color:#10ff0080;  
-}
-
-.ActionPanel .Draw.reject:hover {
-    background-color:#ffaaaa60;  
-}
-
-.ActionPanel .Draw.reject:active {
-    background-color:#ff000090;  
 }

webapp/src/container/Games.jsx

@@ -41,10 +41,12 @@ function ViewSelector({ games }) {
 
   return (
     <nav className='ViewSelector' >
+      <div className='Container' >
         <NavLink to='new'>New</NavLink>
         <NavLink to='proposal'>Proposal<Counter number={awaiting.proposals} /></NavLink>
         <NavLink to='active'  >Active<Counter number={awaiting.active} /></NavLink>
         <NavLink to='archive' >Archive</NavLink>
+      </div>
     </nav>
   )
 }
@@ -119,7 +121,7 @@ function GameBoardRoutes({ gamesReducer, gamesApi, username }) {
     dispatchGames({ type: 'nextNewGame', board });
   }
 
-  const onStoneMove = (uuid, move) => gamesApi.pushGameMove({uuid, move, message: games.active.message});
+  const onStoneMove = (uuid, move) => gamesApi.pushGameMove({ uuid, move, message: games.active.message });
 
   return (
     <Routes>

webapp/src/container/games/ActionPanel.css

@@ -0,0 +1,84 @@
+.ActionPanel button {
+    width: fit-content;
+    padding: 6px;
+    padding-left: 15px;
+    padding-right: 15px;
+    border-radius: 5px;
+    border: 0.5px solid darkgrey;
+    margin: 2px;
+}
+
+.ActionPanel .Create.ready {
+    background-color: #00b0ff30;
+}
+
+.ActionPanel .Create.ready:hover {
+    background-color: #00b0ffa0;
+}
+
+.ActionPanel .Create.ready:active {
+    background-color: #00b0fff0;
+}
+
+.ActionPanel .Cancel.ready,
+.ActionPanel .Reject.ready,
+.ActionPanel .Surrender.ready {
+    background-color: #ffaaaa60
+}
+
+.ActionPanel .Cancel.ready:hover,
+.ActionPanel .Reject.ready:hover,
+.ActionPanel .Surrender.ready:hover {
+    background-color: #ff000060
+}
+
+.ActionPanel .Cancel.ready:active,
+.ActionPanel .Reject.ready:active,
+.ActionPanel .Surrender.ready:active {
+    background-color: #ff0000a0
+}
+
+.ActionPanel .Accept.ready {
+    background-color: #00af0018;
+}
+
+.ActionPanel .Accept.ready:hover {
+    background-color: #00af0060;
+}
+
+.ActionPanel .Accept.ready:active {
+    background-color: #00af00a0;
+}
+
+/*
+ * Draw
+ */
+ .ActionPanel .Draw.ready,
+ .ActionPanel .Draw.accept,
+ .ActionPanel .Draw.reject {
+     background-color: #ffff0018;
+ }
+ 
+ .ActionPanel .Draw.ready:hover {
+     background-color: #ffff0040;
+ }
+ 
+ .ActionPanel .Draw.ready:active {
+     background-color: #ffff00a0;
+ }
+ 
+ .ActionPanel .Draw.accept:hover {
+     background-color: #a4ff4a50;
+ }
+ 
+ .ActionPanel .Draw.accept:active {
+     background-color: #10ff0080;
+ }
+ 
+ .ActionPanel .Draw.reject:hover {
+     background-color: #ffaaaa60;
+ }
+ 
+ .ActionPanel .Draw.reject:active {
+     background-color: #ff000090;
+ }

webapp/src/container/games/ActionPanel.jsx

@@ -1,6 +1,7 @@
 import React, { useContext } from 'react';
 import { GamesContext } from '../../context/games';
 import Wobler from '../../components/Wobler';
+import './ActionPanel.css'
 
 /*
  * NewGame actoins

webapp/src/container/games/GameBoard.css

@@ -1,8 +1,6 @@
 .GameBoard .Player {
     display: flex;
     flex-direction: row;
-    align-items: center;
-    justify-content: center;
 }
 
 .GameBoard .Tile {
@@ -18,10 +16,5 @@
 }
 
 .GameBoard .Tile.white.interactive:hover {
-    background-color:azure;
+    background-color: azure;
-}
-
-.Message2Opponent {
-    margin: 10px;
-    width: 270px;
 }

webapp/src/container/games/GameBoard.jsx

@@ -6,27 +6,27 @@ import { Color, Player, Board } from '../../components/Checkers';
 import './GameBoard.css';
 
 export default function GameBoard({ username, onStoneClick, onStoneMove }) {
-  const game = useSelectedGame();
+  const game = useSelectedGame() || {};
 
-  const opponentColor = Color.opposite(game?.myColor);
+  const myName = game.opponentName ? username : '';
-  const [opponentName, myName] = (game?.opponentName) ? [game.opponentName, username] : ['', ''];
+  const opponentColor = Color.opposite(game.myColor);
-  const flipBoard = (game?.myColor === Color.black) ? true : null;
+  const flipBoard = (game.myColor === Color.black) ? true : null;
 
   const optionalOnStoneClick = (typeof onStoneClick !== 'function') ? null :
-    (cellId) => onStoneClick(game?.uuid, cellId);
+    (cellId) => onStoneClick(game.uuid, cellId);
 
   const optionalOnStoneMove = (typeof onStoneMove !== 'function') ? null :
-    (move) => onStoneMove(game?.uuid, move);
+    (move) => onStoneMove(game.uuid, move);
 
   return (
     <div className='GameBoard'>
-      <Player color={opponentColor || Color.black} name={opponentName} />
+      <Player color={opponentColor || Color.black} name={game.opponentName} />
-      <Board board={game?.board} flip={flipBoard}
+      <Board board={game.board} flip={flipBoard}
         onStoneClick={optionalOnStoneClick}
         onStoneMove={optionalOnStoneMove}
       />
-      <Player color={game?.myColor || Color.white} name={myName} />
+      <Player color={game.myColor || Color.white} name={myName} />
-      {game?.isPushingGameMove ? <span>Moving...</span> : null /* TODO: isPushing shall be stored per game. curernty it is global indicator */} 
+      {game.isPushingGameMove ? <span>Moving...</span> : null /* TODO: isPushing shall be stored per game. curernty it is global indicator */} 
     </div>
   )
 }