Add unread chat indicator (#130)

src/board/TextPanel/Chat.tsx

@@ -7,7 +7,7 @@ import { MachikoroG } from 'game';
 
 /**
  * @extends BoardProps<MachikoroG>
- * @prop {string[]} names - List of player names.
+ * @prop names - List of player names.
  */
 interface ChatProps extends BoardProps<MachikoroG> {
   names: string[];

src/board/TextPanel/Logger.tsx

@@ -4,11 +4,11 @@ import { BoardProps } from 'boardgame.io/react';
 import { LogEntry } from 'boardgame.io';
 import React from 'react';
 
-import { Log, MachikoroG, Version, displayName } from 'game';
+import { Log, MachikoroG, Version, displayName, supplyVariantName } from 'game';
 
 /**
  * @extends BoardProps<MachikoroG>
- * @prop {string[]} names - List of player names.
+ * @prop names - List of player names.
  */
 interface LogProps extends BoardProps<MachikoroG> {
   names: string[];
@@ -24,7 +24,7 @@ interface LogProps extends BoardProps<MachikoroG> {
  * `LogEvent` objects are parsed into strings and displayed in the log. See
  * 'src/game/log/parsers.ts' for more details on how these `LogEvent` objects
  * are created and parsed.
- * @prop {RefObject} textBoxRef - Reference to the log text box.
+ * @prop textBoxRef - Reference to the log text box.
  */
 export default class Logger extends React.Component<LogProps, object> {
   private textBoxRef: React.RefObject<HTMLDivElement>;
@@ -90,7 +90,8 @@ export default class Logger extends React.Component<LogProps, object> {
     let lines: string[] = [];
 
     lines.push('Game Configuration:');
-    lines.push('– ' + displayName(G.version, G.expansions) + ' (' + G.supplyVariant + ' Supply)');
+    lines.push('\u2013 ' + displayName(G.version, G.expansions));
+    lines.push('\u2013 ' + supplyVariantName(G.supplyVariant));
     lines.push(' ');
 
     // for MK2, add a line to indicate the start of the initial build phase

src/board/TextPanel/TextPanel.tsx

@@ -21,14 +21,14 @@ type ToggleState = (typeof ToggleState)[keyof typeof ToggleState];
 
 /**
  * @extends BoardProps<MachikoroG>
- * @prop {string[]} names - List of player names.
+ * @prop names - List of player names.
  */
 interface TextPanelProps extends BoardProps<MachikoroG> {
   names: string[];
 }
 
 /**
- * @prop {ToggleState} toggleState - Current toggle state.
+ * @prop toggleState - Current toggle state.
  */
 interface TextPanelState {
   toggleState: ToggleState;
@@ -40,6 +40,7 @@ interface TextPanelState {
  * @prop {RefObject} chatRadioRef - Reference to the chat radio button.
  */
 export default class TextPanel extends React.Component<TextPanelProps, TextPanelState> {
+  private numReadChats: number;
   private logRadioRef: React.RefObject<HTMLInputElement>;
   private chatRadioRef: React.RefObject<HTMLInputElement>;
 
@@ -48,6 +49,7 @@ export default class TextPanel extends React.Component<TextPanelProps, TextPanel
     this.state = {
       toggleState: ToggleState.Log,
     };
+    this.numReadChats = 0; // on refresh, all chats are erased since they are ephemeral
     this.logRadioRef = React.createRef();
     this.chatRadioRef = React.createRef();
   }
@@ -80,6 +82,24 @@ export default class TextPanel extends React.Component<TextPanelProps, TextPanel
   };
 
   render() {
+    const { chatMessages } = this.props;
+    const { toggleState } = this.state;
+
+    let chatButtonText = 'Chat';
+
+    const numChats = chatMessages.length;
+    if (toggleState === ToggleState.Log) {
+      // if there are unread chat messages, add a number to the button
+      if (numChats > this.numReadChats) {
+        chatButtonText += ` (${numChats - this.numReadChats})`;
+      }
+    } else if (toggleState === ToggleState.Chat) {
+      // update the number of read chats
+      this.numReadChats = numChats;
+    } else {
+      return assertUnreachable(toggleState);
+    }
+
     return (
       <div className='div-column'>
         <div className='radio-inputs'>
@@ -99,7 +119,7 @@ export default class TextPanel extends React.Component<TextPanelProps, TextPanel
               ref={this.chatRadioRef}
               onClick={() => this.setToggleState(ToggleState.Chat)}
             />
-            <span className='name'>Chat</span>
+            <span className='name'>{chatButtonText}</span>
           </label>
         </div>
         <div className='textpanel-box'>{this.renderToggledState()}</div>

src/styles/main.css

@@ -615,12 +615,13 @@ span.tooltip_sym {
   font-size: 18px;
   padding: none;
   position: relative;
-  width: 306px;
+  width: 303px;
 }
 
 .radio-inputs .radio {
   flex: 1 1 auto;
   text-align: center;
+  width: 151.5px;
 }
 
 .radio-inputs .radio input {