Male and female robbers!

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

client/src/Board.css

@@ -152,9 +152,16 @@
   background-color:#e7c099;
   background-size: contain;
   background-position: center; 
+}
+
+.Roberta .Pip-Shape {
   background-image:url("./assets/woman-robber.png"); 
 }
 
+.Robert .Pip-Shape {
+  background-image:url("./assets/man-robber.png"); 
+}
+
 .Tile-Shape:hover,
 .Corner-Shape:hover,
 .Road-Shape:hover {

client/src/Board.js

@@ -471,15 +471,18 @@ const Board = ({ table, game }) => {
   }
   
   if (game) {
+    let robberClass = game.gender === 'female' ? 'Roberta' : 'Robert';
     let nodes = document.querySelectorAll(`.Pip.Robber`);
     for (let i = 0; i < nodes.length; i++) {
       nodes[i].classList.remove('Robber');
+      nodes[i].classList.remove(robberClass);
     }
 
     if (game.robber) {
       const el = document.querySelector(`.Pip[data-index="${game.robber}"]`);
       if (el) {
         el.classList.add('Robber');
+        el.classList.add(robberClass);
       } 
     }
   }

server/routes/games.js

@@ -366,7 +366,7 @@ const processRoll = (game, dice) => {
   addChatMessage(game, session, `${session.name} rolled ${game.dice[0]}, ${game.dice[1]}.`);
   game.turn.roll = game.dice[0] + game.dice[1];
   if (game.turn.roll === 7) {
-    addChatMessage(game, null, `ROBBER! Robber Roberson!`);
+    addChatMessage(game, null, `ROBBER! ${game.gender === 'female' ? 'Roberta' : 'Robert'} Robber Roberson!`);
     game.turn.robberDone = false;
     delete game.turn.placedRobber;
     for (let id in game.sessions) {
@@ -2375,6 +2375,8 @@ const shuffleBoard = (game) => {
   }
   shuffle(seq);
 
+  game.gender = Math.random() > 0.5 ? 'male' : 'female';
+
   game.borderOrder = seq.slice();
   for (let i = 6; i < 19; i++) {
     seq.push(i);