webapp/src/container/games/GameBoard.jsx

@@ -1,20 +1,27 @@
-import './GameBoard.css'
-import React from 'react'
+import React, { useContext } from 'react';
+import { useLocation, matchPath } from 'react-router-dom';
+import { GamesContext } from '../../context/games';
 
 import { Color, Player, Board } from '../../components/Checkers';
-
-//import { AppContext } from '../../context/app'
+import './GameBoard.css';
 
 export default function GameBoard() {
+  const games = useContext(GamesContext);
+  const {pathname} = useLocation();
 
+  var whiteName = '';
+  var blackName = '';
 
-  //const [ctx] = React.useContext(AppContext)
+  if (matchPath('/games/new', pathname)) {
+    whiteName = games.newGame.whitePlayer;
+    blackName = games.newGame.blackPlayer;
+  }
 
   return (
     <div className='GameBoard'>
-      <Player color={Color.white} name={/*ctx.newGame.whitePlayer*/"White player name"} />
+      <Player color={Color.white} name={whiteName} />
       <Board />
-      <Player color={Color.black} name={/*ctx.newGame.blackPlayer*/"Black player name"} />
+      <Player color={Color.black} name={blackName} />
     </div>
   )
 }