Fix #55 - shrink system messages

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

client/src/Table.css

@@ -256,6 +256,12 @@
   overflow-x: hidden;
 } 
 
+.ChatList .System {
+  background-color: #f0f0f0;
+  transform: scale(0.8);
+  border-radius: 0.25em;
+}
+
 .ChatInput {
   flex-grow: 0;
   flex-shrink: 0;
@@ -269,6 +275,10 @@
   font-size: 0.8rem;
 }
 
+.ChatList .System .MuiTypography-body1 {
+  margin-left: 1em;
+}
+
 .ChatList .MuiTypography-body2 {
   font-size: 0.7rem;
 }
@@ -283,7 +293,8 @@
   width: 1em;
   height: 1em;
   padding: 0;
-  margin-top: 4px;
+  margin-top: 6px;
+  align-self: flex-start;
 }
 
 .Players {

client/src/Table.js

@@ -187,10 +187,8 @@ const Chat = ({ table }) => {
   }
 
   const messages = table.game && table.game.chat.map((item, index) => {
-    /* If the date is in the future, set it to now */
-    const name = item.from ? item.from : item.color,
-      from = name ? `${name}, ` : '';
     let message;
+    /* If the date is in the future, set it to now */
     const dice = item.message.match(/^(.*rolled )([1-6])(, ([1-6]))?(.*)$/);
     if (dice) {
       if (dice[4]) {
@@ -202,12 +200,13 @@ const Chat = ({ table }) => {
       message = item.message;
     }
     return (
-      <ListItem key={`msg-${item.date}`}>
+      <ListItem key={`msg-${item.date}`} className={item.color ? '' : 'System'}>
+        { item.color && 
          <PlayerColor color={item.color}/>
+        }
         <ListItemText primary={message}
-          secondary={(<>{from}
-            <Moment fromNow date={item.date > Date.now() ?
-              Date.now() : item.date} interval={1000}/></>)} />
+          secondary={item.color && <Moment fromNow date={item.date > Date.now() ?
+              Date.now() : item.date} interval={1000}/>} />
       </ListItem>
     );
   });

server/routes/games.js

@@ -276,7 +276,7 @@ const roll = (game, session) => {
   return error;
 };
 
-const distributeResources = (game, roll) => {
+const distributeResources = (session, game, roll) => {
   console.log(`Roll: ${roll}`);
   /* Find which tiles have this roll */
   let tiles = [];
@@ -326,7 +326,7 @@ const distributeResources = (game, roll) => {
         message.push(`${receives[color][type]} ${type}`);
       }
     }
-    addChatMessage(game, null, `${playerNameFromColor(game, color)} receives ${message.join(', ')}.`);
+    addChatMessage(game, session, `${playerNameFromColor(game, color)} receives ${message.join(', ')}.`);
   }
 }
 
@@ -395,7 +395,7 @@ const processRoll = (game, dice) => {
       );
     }
   } else {
-    distributeResources(game, game.turn.roll);
+    distributeResources(session, game, game.turn.roll);
   }
 }
 
@@ -2437,10 +2437,10 @@ router.put("/:id/:action/:value?", async (req, res) => {
               player[type] += receives[type];
               message.push(`${receives[type]} ${type}`);
             }
-            addChatMessage(game, null, `${session.name} receives ${message.join(', ')}.`);
+            addChatMessage(game, session, `${session.name} receives ${message.join(', ')}.`);
           }
         }
-        addChatMessage(game, null, `It is ${name}'s turn.`);
+        addChatMessage(game, session, `It is ${name}'s turn.`);
         game.state = 'normal';
       }
     }