Dice roll reflects if active roll or volcano roll

Disable Roll button if players are selecting in Volcano mode

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

client/src/Actions.js

@@ -181,7 +181,7 @@ const Actions = ({
   if (inGame && !isTurn) { disableRoll = true; }
   if (inGame && hasRolled) { disableRoll = true; }
   if (volcanoActive && (!isTurn || hasRolled)) { disableRoll = true; }
-  if (volcanoActive && isTurn ) { disableRoll = false; }
+  if (volcanoActive && isTurn && turn && !turn.select) { disableRoll = false; }
   if (inGameOrder && hasGameOrderRolled) { disableRoll = true; } 
  
   console.log(`actions - `, {

client/src/Activities.css

@@ -1,9 +1,6 @@
 .Activities {
   display: flex;
   flex-direction: column;
-  position: absolute;
-  left: 1em;
-  top: 1em;
   max-width: 30vw;
   flex-wrap: wrap;
   justify-content: left;
@@ -11,6 +8,7 @@
   z-index: 1000;
   max-height: 100vh;
   pointer-events: none;
+  margin-bottom: 0.5rem;
 }
 
 .Activities .Resource {

client/src/Activities.js

@@ -140,11 +140,12 @@ const Activities = () => {
     placement = (state === 'initial-placement' || (turn && turn.active === 'road-building')),
     placeRoad = placement && turn && turn.actions && turn.actions.indexOf('place-road') !== -1,
     mustStealResource = turn && turn.actions && turn.actions.indexOf('steal-resource') !== -1,
-    rollForVolcano = (isTurn && state === 'volcano' && turn && !turn.select),
+    rollForVolcano = (state === 'volcano' && turn && !turn.select),
     rollForOrder = (state === 'game-order'),
     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];
@@ -171,7 +172,7 @@ console.log(`activities - `, state, turn, activities);
         name: color === key ? 'You' : players[key].name});
     }
     who = selecting.map((player, index) => 
-      <><PlayerColor color={player.color} />{ player.name }{ index !== selecting.length - 1 ? ', ' : '' }</>);
+      <div key={index}><PlayerColor color={player.color} />{ player.name }{ index !== selecting.length - 1 ? ', ' : '' }</div>);
   } else {
     if (isTurn) {
       who = 'You';

client/src/App.css

@@ -189,18 +189,38 @@ body {
   border: 1px solid #ccc; /* why !important */
 }
 
+.Table .ActivitiesBox {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  left: 1em;
+  top: 1em;
+}
+
 .Table .DiceRoll {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
-  position: absolute;
+  position: relative;
+  /*
   left: 1rem;
-  top: 5rem;
+  top: 5rem;*/
   flex-wrap: wrap;
   justify-content: left;
   align-items: left;
   z-index: 1000;
 }
 
+.Table .DiceRoll div:not(:last-child) {
+  border: 1px solid black;
+  background-color: white;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+}
+.Table .DiceRoll div:last-child {
+  display: flex;
+  flex-direction: row;
+}
+
 .Table .DiceRoll .Dice {
   margin: 0.25rem;
   width: 2.75rem;

client/src/App.js

@@ -109,7 +109,7 @@ const Table = () => {
       if (!loaded) {
         setLoaded(true);
       }
-      console.log(`ws: message - ${data.type}`, data.update);
+      console.log(`app - message - ${data.type}`, data.update);
   
       if ('private' in data.update && !equal(priv, data.update.private)) {
         const priv = data.update.private;
@@ -268,7 +268,6 @@ const Table = () => {
     });
   }, [ gameId, setGameId ]);
 
-  
   /* Once a game id is known, create the sole WebSocket connection
    * to the backend. This WebSocket is then shared with any component
    * that performs game state updates. Those components should 
@@ -333,10 +332,17 @@ const Table = () => {
   return <GlobalContext.Provider value={global}>
     { /* <PingPong/> */ }
     <div className="Table">
+      <div className="ActivitiesBox">
         <Activities/>
         { dice && dice.length && <div className="DiceRoll">
-          <Dice pips={dice[0]} /> <Dice pips={dice[1]} />
+          {dice.length === 1 && <div>Volcano roll!</div>}
+          {dice.length === 2 && <div>Current roll</div>}
+          <div>
+            <Dice pips={dice[0]} />
+            { dice.length === 2 && <Dice pips={dice[1]}/> }
+          </div> 
         </div> }
+      </div>
       <div className="Game">
         <div className="Dialogs">
           { error && <div className="Dialog ErrorDialog">

server/routes/games.js

@@ -226,9 +226,10 @@ const processVolcano = (game, session, dice) => {
     staticData.tiles[game.tileOrder[index]].type === 'desert');
 
   /* Find the volcano tile */
-  console.log(`${info}: Processing volcano roll!`);
+  console.log(`${info}: Processing volcano roll!`, { dice });
   addChatMessage(game, session, `${name} rolled ${dice[0]} for the Volcano!`);
   
+  game.dice = dice;
   game.state = 'normal';
   
   game.turn.volcano = layout.tiles[volcano].corners[dice[0] % 6];
@@ -259,6 +260,7 @@ const processVolcano = (game, session, dice) => {
     turn: game.turn,
     state: game.state,
     chat: game.chat,
+    dice: game.dice,
     placements: game.placements
   });
 }
@@ -300,7 +302,8 @@ const roll = (game, session, dice) => {
     if (game.turn.select) {
       return `You can not roll for the Volcano until all players have mined their resources.`;
     }
-    processVolcano(game, session, dice);
+    /* Only use the first die for the Volcano roll */
+    processVolcano(game, session, [ dice[0] ]);
     return;
   
   default:
@@ -2142,11 +2145,14 @@ const pass = (game, session) => {
   sendUpdateToPlayer(game, session, {
     private: session.player
   });
+  delete game.dice;
+  
   sendUpdateToPlayers(game, {
     turns: game.turns,
     turn: game.turn,
     chat: game.chat,
-    activities: game.activities
+    activities: game.activities,
+    dice: game.dice
   });
   saveGame(game);
 }