From dbb70cabba6ce42d2e346505185d9667ba9715a1 Mon Sep 17 00:00:00 2001
From: djmil <andriy@djmil.dev>
Date: Fri, 17 Nov 2023 21:50:04 +0100
Subject: [PATCH] current user stones are allways at the botom

---
 webapp/src/api/games.js                     |  5 +++--
 webapp/src/components/Checkers.css          |  4 ++++
 webapp/src/components/Checkers.jsx          |  2 +-
 webapp/src/container/Games.jsx              |  2 +-
 webapp/src/container/games/ActionPanel.jsx  |  6 +++---
 webapp/src/container/games/GameBoard.jsx    | 13 ++-----------
 webapp/src/container/games/view/NewGame.jsx | 16 ++++++++--------
 webapp/src/reducer/games.js                 |  2 +-
 8 files changed, 23 insertions(+), 27 deletions(-)

diff --git a/webapp/src/api/games.js b/webapp/src/api/games.js
index 4d45ce8..dc8ee8c 100644
--- a/webapp/src/api/games.js
+++ b/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 })
             }),
diff --git a/webapp/src/components/Checkers.css b/webapp/src/components/Checkers.css
index 9dfa13e..99a8455 100644
--- a/webapp/src/components/Checkers.css
+++ b/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;
diff --git a/webapp/src/components/Checkers.jsx b/webapp/src/components/Checkers.jsx
index 52ed697..d7dddf3 100644
--- a/webapp/src/components/Checkers.jsx
+++ b/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} />
diff --git a/webapp/src/container/Games.jsx b/webapp/src/container/Games.jsx
index fd8d594..5ec55f0 100644
--- a/webapp/src/container/Games.jsx
+++ b/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}
           />
         } />
diff --git a/webapp/src/container/games/ActionPanel.jsx b/webapp/src/container/games/ActionPanel.jsx
index 5ad9865..c3eb254 100644
--- a/webapp/src/container/games/ActionPanel.jsx
+++ b/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} />
diff --git a/webapp/src/container/games/GameBoard.jsx b/webapp/src/container/games/GameBoard.jsx
index d98d28c..bd3ecb7 100644
--- a/webapp/src/container/games/GameBoard.jsx
+++ b/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,
-  };
 }
\ No newline at end of file
diff --git a/webapp/src/container/games/view/NewGame.jsx b/webapp/src/container/games/view/NewGame.jsx
index 758f955..f0040af 100644
--- a/webapp/src/container/games/view/NewGame.jsx
+++ b/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 (
diff --git a/webapp/src/reducer/games.js b/webapp/src/reducer/games.js
index 71f20f7..4fb7eca 100644
--- a/webapp/src/reducer/games.js
+++ b/webapp/src/reducer/games.js
@@ -7,7 +7,7 @@ export const gamesInitialState = {
 
   newGame: {
     opponentName: '',
-    opponentColor: '',
+    myColor: '',
     board: defaultBoard,
     message: '',
   },