Fix discard display so it says who needs to do what

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

client/src/Activities.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import "./Activities.css";
-
+import { getPlayerName } from './Common.js';
 import PlayerColor from './PlayerColor.js';
 import Dice from './Dice.js';
 
@@ -61,12 +61,22 @@ const Activities = ({ table }) => {
     game = table.game,
     isTurn = (game.turn && game.turn.color === game.color) ? true : false,
     normalPlay = (game.state === 'initial-placement' || game.state === 'normal'),
-    mustDiscard = game.player ? parseInt(game.player.mustDiscard ? game.player.mustDiscard : 0) : 0,
     mustPlaceRobber = (game.turn && !game.turn.placedRobber && game.turn.robberInAction),
     placement = (game.state === 'initial-placement' || game.turn.active === 'road-building'),
     placeRoad = placement && game.turn && game.turn.actions && game.turn.actions.indexOf('place-road') !== -1,
     mustStealResource = game.turn && game.turn.actions && game.turn.actions.indexOf('steal-resource') !== -1;
-    
+
+  let discarders = [], mustDiscard = false;
+  for (let color in table.game.players) {
+    const player = table.game.players[color];
+    if (!player.mustDiscard) {
+      continue;
+    }
+    mustDiscard = true;
+    const name = (game.color === color) ? 'You' : getPlayerName(table.game.sessions, color);
+    discarders.push(<div key={name} className="Requirement">{name} must discard <b>{player.mustDiscard}</b> cards.</div>);
+  }
+
   const list = game.activities
     .filter(activity => game.timestamp - activity.date < 11000)
     .map(activity => {
@@ -94,11 +104,8 @@ const Activities = ({ table }) => {
         <div className="Requirement">{who} must select a player to steal from.</div>
       }
 
-      { normalPlay && mustDiscard !== 0 && 
+      { normalPlay && mustDiscard !== 0 && <> { discarders } </> }
-        <div className="Requirement">You must discard <b>{mustDiscard}</b> cards.</div>
-      }
       
-
       { !isTurn && normalPlay &&
         <div>It is <PlayerColor color={table.game.turn.color}/> {table.game.turn.name}'s turn.</div>
       }