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);
+  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;
-  position: absolute;
+  flex-direction: column;
+  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 
@@ -331,60 +330,67 @@ const Table = () => {
   console.log(`board - (app) - Render with ws: ${ws ? '!' : ''}NULL, connection: ${connection ? '!' : ''}NULL`);
 
   return <GlobalContext.Provider value={global}>
-      { /* <PingPong/> */ }
-      <div className="Table">
+    { /* <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 className="Game">
-          <div className="Dialogs">
-            { error && <div className="Dialog ErrorDialog">
-              <Paper className="Error">
-                <div>{ error }</div>
-                <Button onClick={() => { setError("")}}>dismiss</Button>
-              </Paper>
-            </div> }
-            
-            { priv && priv.turnNotice && <div className="Dialog TurnNoticeDialog">
-              <Paper className="TurnNotice">
-                <div>{ priv.turnNotice }</div>
-                 <Button onClick={() => { sendUpdate({type: 'turn-notice'}) }}>dismiss</Button>
-              </Paper>
-            </div> }
-            { warning && <div className="Dialog WarningDialog">
-              <Paper className="Warning">
-                <div>{ warning }</div>
-                <Button onClick={() => { setWarning("")}}>dismiss</Button>
-              </Paper>
-            </div> }
-            { state === 'normal' && <SelectPlayer/> }
-            { color && state === 'game-order' && <GameOrder/> }
-            
-            { !winnerDismissed && <Winner {...{winnerDismissed, setWinnerDismissed}}/> }
-            { houseRulesActive && <HouseRules {...{houseRulesActive, setHouseRulesActive}}/> }
-            <ViewCard {...{cardActive, setCardActive }}/>
-            <ChooseCard/>
-          </div>
-         
-          <Board/>          
-          <PlayersStatus/>
-          <PlayersStatus active={true}/>
-          <Hand {...{buildActive, setBuildActive, setCardActive}}/>
-        </div>
-        <div className="Sidebar">
-          { name !== "" && <PlayerList/> }
-          <Trade {...{tradeActive, setTradeActive}}/>
-          { name !== "" && <Chat/> }
-          { /* name !== "" && <VideoFeeds/> */ }
-          { loaded && <Actions {
-            ...{buildActive, setBuildActive, 
-              tradeActive, setTradeActive,
-              houseRulesActive, setHouseRulesActive
-              }}/> }
-        </div>
       </div>
-    </GlobalContext.Provider>;
+      <div className="Game">
+        <div className="Dialogs">
+          { error && <div className="Dialog ErrorDialog">
+            <Paper className="Error">
+              <div>{ error }</div>
+              <Button onClick={() => { setError("")}}>dismiss</Button>
+            </Paper>
+          </div> }
+          
+          { priv && priv.turnNotice && <div className="Dialog TurnNoticeDialog">
+            <Paper className="TurnNotice">
+              <div>{ priv.turnNotice }</div>
+                <Button onClick={() => { sendUpdate({type: 'turn-notice'}) }}>dismiss</Button>
+            </Paper>
+          </div> }
+          { warning && <div className="Dialog WarningDialog">
+            <Paper className="Warning">
+              <div>{ warning }</div>
+              <Button onClick={() => { setWarning("")}}>dismiss</Button>
+            </Paper>
+          </div> }
+          { state === 'normal' && <SelectPlayer/> }
+          { color && state === 'game-order' && <GameOrder/> }
+          
+          { !winnerDismissed && <Winner {...{winnerDismissed, setWinnerDismissed}}/> }
+          { houseRulesActive && <HouseRules {...{houseRulesActive, setHouseRulesActive}}/> }
+          <ViewCard {...{cardActive, setCardActive }}/>
+          <ChooseCard/>
+        </div>
+        
+        <Board/>          
+        <PlayersStatus/>
+        <PlayersStatus active={true}/>
+        <Hand {...{buildActive, setBuildActive, setCardActive}}/>
+      </div>
+      <div className="Sidebar">
+        { name !== "" && <PlayerList/> }
+        <Trade {...{tradeActive, setTradeActive}}/>
+        { name !== "" && <Chat/> }
+        { /* name !== "" && <VideoFeeds/> */ }
+        { loaded && <Actions {
+          ...{buildActive, setBuildActive, 
+            tradeActive, setTradeActive,
+            houseRulesActive, setHouseRulesActive
+            }}/> }
+      </div>
+    </div>
+  </GlobalContext.Provider>;
 };
 
 const App = () => {

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);
 }