Selection of players working better

Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>

client/src/Board.css

@@ -72,6 +72,10 @@
   padding: 0.5em;
 }
 
+.PlayerName {
+  padding: 0.5em;
+}
+
 #ChatList {
   scroll-behavior: smooth;
 }

client/src/Board.js

@@ -225,7 +225,6 @@ const Chat = ({ board, promoteGameState }) => {
   })
   
   //const timeDelta = game.timestamp - Date.now();
-
   const messages = board.game.chat.map((item, index) => {
     return (
       <ListItem key={`msg-${index}`}>
@@ -237,10 +236,7 @@ const Chat = ({ board, promoteGameState }) => {
     );
   });
 
-  useEffect(() => {
+  console.log(board.game);
-    document.querySelector(".chatInput").focus();
-  });
-
   return (
     <Paper className="Chat">
       <List id="ChatList">
@@ -248,7 +244,6 @@ const Chat = ({ board, promoteGameState }) => {
       </List>
       <TextField className="chatInput"
         disabled={!board.game.activePlayer}
-        inputRef={input => input && input.focus()}
         onChange={chatInput}
         onKeyPress={chatKeyPress}
         label={(<Moment format="h:mm:ss" interval={1000}/>)} variant="outlined"/>
@@ -284,58 +279,48 @@ const Action = ({ board }) => {
   );
 }
 
-/* This needs to take in a mechanism to declare the
+const PlayerName = ({board}) => {
- * player's active item in the game */
+  const [name, setName] = useState((board && board.game && board.game.activePlayerName) ? board.game.activePlayerName : "");
-const Players = ({ board, promoteGameState }) => {
-  const [selected, setSelected] = useState("");
-  const [name, setName] = useState("");
 
-  const nameInput = (event) => {
+  const nameChange = (event) => {
-    console.log(event.target.value);
+    setName(event.target.value);
-  };
+  }
 
   const nameKeyPress = (event) => {
     if (event.key === "Enter") {
-      console.log(`Send: ${event.target.value}`);
+      console.log(`Send: ${name}`);
-      setName(event.target.value);
+      if (name && name != board.game.activePlayerName) {
+        board.setPlayerName(name);
+      }
     }
   }
 
-  useEffect(() => {
+  return (
-    const change = { players: {} };
+    <Paper className="PlayerName">
+      <TextField className="nameInput"
+        fullWidth
+        onChange={nameChange}
+        onKeyPress={nameKeyPress}
+        label="Name"
+        variant="outlined"
+        value={name}
+        />
+    </Paper>
+  );
+};
 
-    /* Joining: selected != "" and name != "" */
+/* This needs to take in a mechanism to declare the
-    if (selected && name && !board.game.activePlayer) {
+ * player's active item in the game */
-      change.players[selected] = {  name: name }
+const Players = ({ board }) => {
-      promoteGameState(change)
+  const [selected, setSelected] = useState(board.game && board.game.activePlayer ? board.game.activePlayer : "");
-      return;
-    }
-    
-    /* Leaving: selected = "", name = "" */
-    if (!selected && board.game.activePlayer) {
-      change.players[board.game.activePlayer] = {  name: "" }
-      promoteGameState(change)
-      return;
-    }
-    
-    /* Updating name: selected != "", name != "", name != board.name*/
-    if (selected &&
-        board.player &&
-        name  &&
-        board.game.players[board.game.activePlayer].name !== name) {
-      change.players[board.game.activePlayer] = {  name: name }
-      promoteGameState(change)
-      return;
-    }
-  });
 
   const toggleSelected = (key) => {
     if (selected === key) {
       setSelected("");
-      setName("");
     } else {
       setSelected(key);
     }
+    board.setSelected(selected === key ? "" : key);
   }
 
   const classes = useStyles();
@@ -343,7 +328,6 @@ const Players = ({ board, promoteGameState }) => {
   const players = [];
   for (let key in board.game.players) {
     const item = board.game.players[key];
-    console.log(item);
     if (board.game.state != "lobby" && item.status == 'Not active') {
       continue;
     }
@@ -352,23 +336,12 @@ const Players = ({ board, promoteGameState }) => {
         <ListItemAvatar>
           <Avatar className={classes[key]}>{key}</Avatar>
         </ListItemAvatar>
-        <> { /* so flex-grow works we put in a fragment */ }
-          { selected === key && item.name === "" &&
-            <TextField className="nameInput"
-              onChange={nameInput}
-              onKeyPress={nameKeyPress}
-              inputRef={input => input && input.focus()}
-              disabled={(name !== item.name) ? true: false}
-              label="Name"
-              variant="outlined" autoFocus/>
-          }
-          { (selected !== key || item.name !== "") && 
         <ListItemText primary={item.name} secondary={item.status} />
-          }
+        { (!selected || selected === key) &&
-        </>
           <Switch edge="end"
-          disabled={(selected && selected !== key) ? true : false} checked={selected === key}
+            checked={selected === key}
             onChange={() => toggleSelected(key)}/>
+        }
       </ListItem>
     ));
   }
@@ -413,6 +386,8 @@ class Board extends React.Component {
     this.updateGame = this.updateGame.bind(this);
     this.imageLoadError = this.imageLoadError.bind(this);
     this.imageLoaded = this.imageLoaded.bind(this);
+    this.setPlayerName = this.setPlayerName.bind(this);
+    this.setSelected = this.setSelected.bind(this);
 
     this.mouse = { x: 0, y: 0 };
     this.radius = 0.317;
@@ -444,6 +419,74 @@ class Board extends React.Component {
     this.setState({message: `Error loading  ${event.target.src}`});
   }
 
+  setSelected(key) {
+    if (this.loadTimer) {
+      window.clearTimeout(this.loadTimer);
+      this.loadTimer = null;
+    }
+
+    return window.fetch(`${base}/api/v1/games/${this.state.game.id}/player-selected/${key}`, {
+      method: "PUT",
+      cache: 'no-cache',
+      credentials: 'same-origin',
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    }).then((res) => {
+      if (res.status >= 400) {
+        throw new Error(`Unable to set selected player!`);
+      }
+      return res.json();
+    }).then((game) => {
+      let message;
+      if (key) {
+        message = `Player selected ${key}!`;
+      } else {
+        message = `Player deselected ${game.activePlayer}!`;
+      }
+      console.log (message);
+      this.updateGame(game);
+      this.setState({ game: game, message: message });
+    }).catch((error) => {
+      console.error(error);
+      this.setState({message: error.message});
+    }).then(() => {
+      this.resetGameLoad();
+      window.requestAnimationFrame(this.drawFrame);
+    });
+  }
+
+  setPlayerName(name) {
+    if (this.loadTimer) {
+      window.clearTimeout(this.loadTimer);
+      this.loadTimer = null;
+    }
+
+    return window.fetch(`${base}/api/v1/games/${this.state.game.id}/player-name/${name}`, {
+      method: "PUT",
+      cache: 'no-cache',
+      credentials: 'same-origin',
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    }).then((res) => {
+      if (res.status >= 400) {
+        throw new Error(`Unable to set player name!`);
+      }
+      return res.json();
+    }).then((game) => {
+      console.log (`Player name set to ${name}!`);
+      this.updateGame(game);
+      this.setState({ game: game, message: `Player name set to ${name}!`});
+    }).catch((error) => {
+      console.error(error);
+      this.setState({message: error.message});
+    }).then(() => {
+      this.resetGameLoad();
+      window.requestAnimationFrame(this.drawFrame);
+    });
+  }  
+
   shuffleBoard() {
     if (this.loadTimer) {
       window.clearTimeout(this.loadTimer);
@@ -1244,8 +1287,8 @@ class Board extends React.Component {
     }
 
     for (let image in images) {
-      image.removeEventListener("load", this.imageLoaded);
+      images[image].removeEventListener("load", this.imageLoaded);
-      image.removeEventListener("error", this.imageLoadError);
+      images[image].removeEventListener("error", this.imageLoadError);
       delete images[image];
     }
     
@@ -1263,6 +1306,7 @@ class Board extends React.Component {
          <div className="Cards" ref={el => this.cards = el}>
           { game && 
             <div className="Game">
+              <PlayerName board={this}/>
               <Players board={this} promoteGameState={this.promoteGameState}/>
               <Chat board={this} promoteGameState={this.promoteGameState}/>
               <Action board={this}/>

server/routes/games.js

@@ -140,13 +140,66 @@ router.put("/:id/:action/:value?", (req, res) => {
 
   let error;
 
-  if (!req.session.activePlayer || !(req.session.activePlayer in game.players)) {
+  if (req.params.action == "player-name") {
-    error = `Invalid player: ${req.session.activePlayer}`;
+    if (!req.params.value) {
+      error = `No name provided`;
+    } else {
+      req.session.playerName = req.params.value;
+      const color = req.session.playerColor;
+      if (color && game && color in game.players) {
+        game.players[color].name = req.session.playerName;
+        game.chat.push({ date: Date.now(),  message: `${color} is no known as ${req.session.playerName}.` });
+      }
+    }
+
     return sendGame(res, req, game, error);
   }
 
-  const player = game.players[req.session.activePlayer],
+  if (req.params.action == "player-selected") {
-    name = player.name;
+    if (!game) {
+      error = `No game found`;
+      return sendGame(res, req, game, error);
+    }
+    
+    const selected = req.params.value;
+    let player;
+
+    console.log(`player-selected: ${selected}`);
+
+    /* Deselect currentlyi active player for this session */
+    for (let key in game.players) {
+      if (key == req.session.playerColor && selected != key) {
+        player = game.players[key];
+        if (player.session == req.session.id) {
+          player.session = '';
+          player.name = '';
+          player.status = 'Not active';
+          req.session.playerColor = '';
+          game.chat.push({ date: Date.now(),  message: `${key} is no longer claimed.` });
+          break;
+        }
+      }
+    }
+    
+    if (selected in game.players) {
+      player = game.players[selected];
+      player.session = req.session.id;
+      player.name = req.session.playerName;
+      player.status = `Just joined`;
+      req.session.playerColor = selected;
+      game.chat.push({ date: Date.now(),  message: `${selected} is now '${player.name}'.` });
+    } 
+   
+    return sendGame(res, req, game, error);
+  }
+
+  if (!req.session.playerColor || !(req.session.playerColor in game.players)) {
+    error = `Invalid player: ${req.session.playerColor}`;
+    return sendGame(res, req, game, error);
+  }
+
+  player = game.players[req.session.playerColor];
+  const name = player.name;
 
   switch (req.params.action) {
   case "roll":
@@ -212,26 +265,12 @@ router.put("/:id", (req, res/*, next*/) => {
     const game = games[req.params.id],
       changes = req.body;
 
-    console.log(req.session.id, req.session.activePlayer);
+    console.log(req.session.id, req.session.playerColor);
     console.log(JSON.stringify(changes, null, 2));
 
     for (let change in changes) {
       switch (change) {
       case "players":
-        console.log("Player change.");
-        for (let player in changes.players) {
-          const playerChange = changes.players[player];
-          if (playerChange.name != "") {
-            game.chat.push({ from: player, date: Date.now(),  message: `${player} is now '${playerChange.name}'.` });
-            req.session.activePlayer = player;
-            game.players[player].status = `Just joined`;
-          } else {
-            game.chat.push({ from: player, date: Date.now(),  message: `${player} is no longer claimed.` });
-            req.session.activePlayer = "";
-            game.players[player].status = `Not active`;
-          }
-          game.players[player].name = playerChange.name;
-        }
         break;
       case "chat":
         console.log("Chat change.");
@@ -271,12 +310,18 @@ const sendGame = async (res, req, game, error) => {
     console.error(error);
   });
 
-  return res.status(200).send(Object.assign({}, game, {
+  const playerGame = Object.assign({}, game, {
     timestamp: Date.now(),
     status: error ? error : "success",
-    activePlayer: (req.session && req.session.activePlayer) ?
+    activePlayerName: (req.session && req.session.playerName) ?
-      req.session.activePlayer : null
+      req.session.playerName : "",
-  }));
+    activePlayer: (req.session && req.session.playerColor) ?
+      req.session.playerColor : null
+  });
+  if (game.id == 'b3c4bd15efe212a2') {
+//    console.log(req.session);
+  }
+  return res.status(200).send(playerGame);
 }
 
 router.post("/:id?", (req, res/*, next*/) => {
@@ -315,7 +360,7 @@ router.post("/:id?", (req, res/*, next*/) => {
   };
 
   games[game.id] = game;
-  req.session.activePlayer = null;
+  req.session.playerColor = null;
   shuffleBoard(game);
   console.log(`New game created: ${game.id}`);
   return sendGame(res, req, game);