current user stones are allways at the botom

webapp/src/api/games.js

@@ -1,5 +1,6 @@
 import { usePolling, doPushing } from '../hook/api';
 import { gamesInitialState } from '../reducer/games';
+import { Color } from '../components/Checkers';
 
 export default function useGamesApi(gamesReducer, config) {
     const [games, dispatchGames] = gamesReducer;
@@ -20,8 +21,8 @@ export default function useGamesApi(gamesReducer, config) {
     return {
         pollGamesList: usePollingGamesList,
 
-        pushNewGame: ({ opponentName, opponentColor, board, message }) => ifNot(games.isPushingNewGame) &&
-            doPushing('/api/gameproposal', 'POST', { opponentName, opponentColor, board, message }, {
+        pushNewGame: ({ opponentName, myColor, board, message }) => ifNot(games.isPushingNewGame) &&
+            doPushing('/api/gameproposal', 'POST', { opponentName, opponentColor: Color.opposite(myColor), board, message }, {
                 onPushing: (isPushingNewGame) => dispatchGames({ type: 'next', isPushingNewGame }),
                 onSuccess: (game) => dispatchGames({ type: 'next', gamesList: [game, ...games.gamesList], newGame: gamesInitialState.newGame })
             }),

webapp/src/components/Checkers.css

@@ -10,6 +10,10 @@
     align-items: center;
 }
 
+.Board.flip {
+    flex-direction: column-reverse;
+}
+
 .Tile {
     border: 1px solid #e4e4e4;
     float: left;

webapp/src/components/Checkers.jsx

@@ -83,7 +83,7 @@ export function Board({ game, onClick }) {
         );
     }
 
-    return <div className='Board'>
+    return <div className={'Board' + (game?.myColor === Color.black ? ' flip' : '')} >
         <div className='row'>
             <BlackTile /> <WhiteTile id={1} />
             <BlackTile /> <WhiteTile id={2} />

webapp/src/container/Games.jsx

@@ -59,7 +59,7 @@ function ViewProvider({ dispatchGames, players }) {
       <Routes>
 
         <Route path='new' element={
-          <NewGame setOpponent={(opponentName, opponentColor) => dispatchGames({ type: 'nextNewGame', opponentName, opponentColor })}
+          <NewGame setPlayers={(opponentName, myColor) => dispatchGames({ type: 'nextNewGame', opponentName, myColor })}
             players={players}
           />
         } />

webapp/src/container/games/ActionPanel.jsx

@@ -8,17 +8,17 @@ import Wobler from '../../components/Wobler';
 export function Create({ onClick }) {
     const games = useContext(GamesContext);
 
-    const hasOpponent = games.newGame.opponentName && games.newGame.opponentColor;
+    const hasPlayers = games.newGame.opponentName && games.newGame.myColor;
 
     const validateNewGame = () => {
-        if (!hasOpponent)
+        if (!hasPlayers)
             return alert("You have to select an opponent");
 
         onClick(games.newGame);
     }
 
     return (
-        <button className={'Create' + (hasOpponent ? ' ready' : '')}
+        <button className={'Create' + (hasPlayers ? ' ready' : '')}
             onClick={validateNewGame}
         >
             <Wobler text="Create" dance={games.isPushingNewGame} />

webapp/src/container/games/GameBoard.jsx

@@ -32,7 +32,7 @@ export default function GameBoard({ username, onNewGameBoardStone, onActiveGameM
 
   const [game, onClick] = (() => {
     if (matchPath('/games/new', pathname))
-      return [gameFrom(games.newGame), onClick_NewGame];
+      return [games.newGame, onClick_NewGame];
 
     if (matchPath('/games/proposal', pathname))
       return [games.findGame({ uuid: games.proposal.selectedUUID }), null];
@@ -41,7 +41,7 @@ export default function GameBoard({ username, onNewGameBoardStone, onActiveGameM
     else if (matchPath('/games/archive', pathname))
       return [games.findGame({ uuid: games.archive.selectedUUID }), null];
 
-    return [{}, null]; //  defaults
+    return [{}, null];
   })(); // <<-- Execute
 
   const opponentColor = Color.opposite(game?.myColor);
@@ -56,13 +56,4 @@ export default function GameBoard({ username, onNewGameBoardStone, onActiveGameM
       <Player color={game?.myColor || Color.white} name={myName} />
     </div>
   )
-}
-
-function gameFrom(newGame) {
-  return {
-    myColor: Color.opposite(newGame.opponentColor),
-    opponentName: newGame.opponentName,
-    opponentColor: newGame.opponentColor,
-    board: newGame.board,
-  };
 }

webapp/src/container/games/view/NewGame.jsx

@@ -5,16 +5,16 @@ import { GamesContext } from '../../../context/games';
 import DropdownList from '../../../components/DropdownList';
 import { Color, WhiteStone, BlackStone } from '../../../components/Checkers';
 
-export default function NewGame({ players, setOpponent }) {
+export default function NewGame({ players, setPlayers }) {
     const games = useContext(GamesContext);
     
     const [whitePlayer, blackPlayer] = (() => {
-        if (games.newGame.opponentColor === Color.white)
-            return [games.newGame.opponentName, players.currentUser];
-
-        if (games.newGame.opponentColor === Color.black)
+        if (games.newGame.myColor === Color.white)
             return [players.currentUser, games.newGame.opponentName];
 
+        if (games.newGame.myColor === Color.black)
+            return [games.newGame.opponentName, players.currentUser];
+
         return ['', ''];
     })(); // <<-- Execute!
 
@@ -37,11 +37,11 @@ export default function NewGame({ players, setOpponent }) {
     /*
      * The Component
      */
-    const onSelect = (name, color) => {
+    const onSelect = (name, myColor) => {
         if (players.isCurrentUser(name))
-            setOpponent(games.newGame.opponentName, Color.opposite(color));
+            setPlayers(games.newGame.opponentName, myColor);
         else
-            setOpponent(name, color);
+            setPlayers(name, Color.opposite(myColor));
     }
 
     return (

webapp/src/reducer/games.js

@@ -7,7 +7,7 @@ export const gamesInitialState = {
 
   newGame: {
     opponentName: '',
-    opponentColor: '',
+    myColor: '',
     board: defaultBoard,
     message: '',
   },