From 4c33dfcdf116d501f1b6c20a4782d4a211a8db9f Mon Sep 17 00:00:00 2001
From: James Ketrenos <james_eikona@ketrenos.com>
Date: Sat, 18 Jun 2022 19:54:59 -0700
Subject: [PATCH] Fix #120

Separate who frmo text in Activities

Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
---
 client/src/Activities.css | 4 ++++
 client/src/Activities.js  | 4 ++--
 client/src/Hand.js        | 3 +--
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/client/src/Activities.css b/client/src/Activities.css
index ae623e6..a2f339c 100644
--- a/client/src/Activities.css
+++ b/client/src/Activities.css
@@ -16,6 +16,10 @@
   height: 5.2em;
 }
 
+.Activities .Who {
+  margin-right: 0.25rem;
+}
+
 .Activities .PlayerColor {
   display: inline-flex;
   width: 1rem;
diff --git a/client/src/Activities.js b/client/src/Activities.js
index 3c925e6..722a9ff 100644
--- a/client/src/Activities.js
+++ b/client/src/Activities.js
@@ -145,7 +145,7 @@ const Activities = () => {
     selectResources = turn && turn.actions && turn.actions.indexOf('select-resources') !== -1;
 
   console.log(`activities - `, state, turn, activities);
-  
+
   let discarders = [], mustDiscard = false;
   for (let key in players) {
     const player = players[key];
@@ -172,7 +172,7 @@ const Activities = () => {
         name: color === key ? 'You' : players[key].name});
     }
     who = selecting.map((player, index) => 
-      <div key={index}><PlayerColor color={player.color} />{ player.name }{ index !== selecting.length - 1 ? ', ' : '' }</div>);
+      <div className="Who" key={index}><PlayerColor color={player.color} />{ player.name }{ index !== selecting.length - 1 ? ', ' : '' }</div>);
   } else {
     if (isTurn) {
       who = 'You';
diff --git a/client/src/Hand.js b/client/src/Hand.js
index bfae550..79aedc4 100644
--- a/client/src/Hand.js
+++ b/client/src/Hand.js
@@ -122,7 +122,7 @@ const Hand = ({buildActive, setBuildActive, setCardActive}) => {
     if (count.length !== selected) {
       setSelected(count.length);
     }
-  }, [setSelected, selected]);
+  }, [setSelected, selected, turn]);
 
   if (!priv) {
     return <></>;
@@ -133,7 +133,6 @@ const Hand = ({buildActive, setBuildActive, setCardActive}) => {
     setSelected(count.length);
   }
 
-
   return <div className="Hand">
     {<div className="CardsSelected"
       style={selected === 0 ? { display: 'none' } : {}}>