Default player colors alignmnet

webapp/src/components/Checkers.css

@@ -1,5 +1,6 @@
 .Stone {
     cursor: default; /* disable 'I beam' cursor change */
+    user-select: none;
 }
 
 .Board {

webapp/src/container/games/GameBoard.jsx

@@ -51,9 +51,9 @@ export default function GameBoard({ username, onNewGameBoardStone, onActiveGameM
 
   return (
     <div className='GameBoard'>
-      <Player color={opponentColor || Color.white} name={opponentName} />
+      <Player color={opponentColor || Color.black} name={opponentName} />
       <Board game={game} onClick={optionalOnClick} />
-      <Player color={game?.myColor || Color.black} name={myName} />
+      <Player color={game?.myColor || Color.white} name={myName} />
     </div>
   )
 }

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

@@ -46,11 +46,11 @@ export default function NewGame({ players, setOpponent }) {
 
     return (
         <div className='NewGame'>
-            <WhiteStone />
-            <DropdownList selected={whitePlayer} onSelect={(name) => onSelect(name, Color.white)} optionsList={whiteOptions} />
-            <i>- vs -</i>
-            <DropdownList selected={blackPlayer} onSelect={(name) => onSelect(name, Color.black)} optionsList={blackOptions} />
             <BlackStone />
+            <DropdownList selected={blackPlayer} onSelect={(name) => onSelect(name, Color.black)} optionsList={blackOptions} />
+            <i>- vs -</i>
+            <DropdownList selected={whitePlayer} onSelect={(name) => onSelect(name, Color.white)} optionsList={whiteOptions} />
+            <WhiteStone />
         </div>
     )
 }