Merge branch 'main' into kchen/tooltip

src/board/MachikoroBoard.tsx

@@ -28,7 +28,7 @@ const initializeNames = (matchData: { id: number; name?: string }[]): string[] =
 
 /**
  * Handles all game components
- * @prop {string[]} names - List of player names.
+ * @prop names - List of player names.
  */
 export default class MachikoroBoard extends React.Component<BoardProps<MachikoroG>, object> {
   private names: string[];
@@ -92,7 +92,7 @@ export default class MachikoroBoard extends React.Component<BoardProps<Machikoro
         </div>
         <div className='div-column'>{this.renderPlayerInfo()}</div>
         <div className='div-column'>
-          <TextPanel {...this.props} names={this.names} />
+          <TextPanel {...this.props} clientPlayer={clientPlayer} names={this.names} />
         </div>
       </div>
     );

src/board/PlayerInfo.tsx

@@ -12,10 +12,10 @@ import StackTable from './StackTable';
 
 /**
  * @extends BoardProps<MachikoroG>
- * @prop {number} player - Player ID corresponding to the component.
- * @prop {number | null} clientPlayer - Player ID of the client, or null if the
+ * @prop player - Player ID corresponding to the component.
+ * @prop clientPlayer - Player ID of the client, or null if the
  * client is not a player.
- * @prop {string} name - Player name corresponding to the component.
+ * @prop name - Player name corresponding to the component.
  */
 interface PlayerInfoProps extends BoardProps<MachikoroG> {
   player: number;
@@ -26,18 +26,8 @@ interface PlayerInfoProps extends BoardProps<MachikoroG> {
 /**
  * Information panels for a player, displaying name, money, purchased landmarks
  * and establishments, etc.
- * @prop {Landmark[]} landmarks - List of landmarks in use.
- * @prop {Establishment[]} establishments - List of establishments in use.
  */
 export default class PlayerInfo extends React.Component<PlayerInfoProps, object> {
-  private landmarks: Land.Landmark[];
-
-  constructor(props: PlayerInfoProps) {
-    super(props);
-    const { G } = this.props;
-    this.landmarks = Land.getAllInUse(G.version, G.expansions);
-  }
-
   render() {
     const { G, ctx, moves, isActive, player, clientPlayer, name } = this.props;
     const version = G.version;
@@ -52,9 +42,11 @@ export default class PlayerInfo extends React.Component<PlayerInfoProps, object>
     // `currentPlayer` is the player ID whose turn it is in the game.
 
     // landmarks
-    const lands = new StackTable(1);
-    for (let i = 0; i < this.landmarks.length; i++) {
-      const land = this.landmarks[i];
+    const landTable = new StackTable(1);
+
+    const lands = Land.getAllInUse(G.version, G.expansions);
+    for (let i = 0; i < lands.length; i++) {
+      const land = lands[i];
       const owned = Land.owns(G, player, land);
 
       // for Machi Koro 2, only show owned landmarks
@@ -89,7 +81,7 @@ export default class PlayerInfo extends React.Component<PlayerInfoProps, object>
         onClickLandEvent = () => void 0;
       }
 
-      lands.push(
+      landTable.push(
         <td
           key={i}
           className={classNames('mini_td', landColor, { inactive: landIsGrey }, { clickable: landClickable })}
@@ -190,7 +182,7 @@ export default class PlayerInfo extends React.Component<PlayerInfoProps, object>
           <span className={classNames('material-symbols-outlined', 'dollar_player_money')}>paid</span>
           {money}
         </div>
-        <div>{lands.render()}</div>
+        <div>{landTable.render()}</div>
         <div>{minis.render()}</div>
       </div>
     );

src/board/StatusBar.tsx

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

src/board/Supply.tsx

@@ -12,22 +12,18 @@ import StackTable from './StackTable';
 
 /**
  * @extends BoardProps<MachikoroG>
- * @prop {number | null} clientPlayer - Player ID of the client, or null if the
+ * @prop clientPlayer - Player ID of the client, or null if the
  * client is not a player.
  */
 interface SupplyProps extends BoardProps<MachikoroG> {
   clientPlayer: number | null;
 }
 
 /**
- * Supply area, where players see and buy establishments
- * @prop {Establishment[]} establishments - List of establishments in use.
+ * Supply area, where players see and buy establishments (and landmarks, in
+ * Machi Koro 2).
  */
 export default class Supply extends React.Component<SupplyProps, object> {
-  constructor(props: SupplyProps) {
-    super(props);
-  }
-
   /**
    * Render the landmark supply. This returns nothing for Machi Koro 1.
    */

src/board/TextPanel/Chat.tsx

@@ -8,15 +8,18 @@ import { MachikoroG } from 'game';
 /**
  * @extends BoardProps<MachikoroG>
  * @prop names - List of player names.
+ * @prop clientPlayer - Player ID of the client, or null if the
+ * client is not a player.
  */
 interface ChatProps extends BoardProps<MachikoroG> {
   names: string[];
+  clientPlayer: number | null;
 }
 
 /**
  * Chat messages from players. Messages are ephemeral and are lost upon refresh.
- * @prop {RefObject} entryBoxRef - Reference to the chat entry box.
- * @prop {RefObject} textBoxRef - Reference to the chat text box.
+ * @prop entryBoxRef - Reference to the chat entry box.
+ * @prop textBoxRef - Reference to the chat text box.
  */
 export default class Chat extends React.Component<ChatProps, object> {
   private entryBoxRef: React.RefObject<HTMLInputElement>;
@@ -91,6 +94,31 @@ export default class Chat extends React.Component<ChatProps, object> {
 
   // --- Render ---------------------------------------------------------------
 
+  private renderChatBox = (): JSX.Element | null => {
+    const { clientPlayer } = this.props;
+
+    if (clientPlayer === null) {
+      // if spectator, do not render chat box
+      return null;
+    } else {
+      return (
+        <div className='chat-input'>
+          <input
+            id='chat-message'
+            type='text'
+            className='message-input'
+            placeholder='Type your message here'
+            ref={this.entryBoxRef}
+            onKeyDown={(e) => this.entryHandleKeyDown(e)}
+          ></input>
+          <button className='send-button' onClick={this.sendChatAndClear}>
+            Send
+          </button>
+        </div>
+      );
+    }
+  };
+
   render() {
     const lines = this.parseChat();
     const tbody: JSX.Element[] = [];
@@ -108,19 +136,7 @@ export default class Chat extends React.Component<ChatProps, object> {
         <div className='chat-window' ref={this.textBoxRef}>
           <ul className='message-list'>{tbody}</ul>
         </div>
-        <div className='chat-input'>
-          <input
-            id='chat-message'
-            type='text'
-            className='message-input'
-            placeholder='Type your message here'
-            ref={this.entryBoxRef}
-            onKeyDown={(e) => this.entryHandleKeyDown(e)}
-          ></input>
-          <button className='send-button' onClick={this.sendChatAndClear}>
-            Send
-          </button>
-        </div>
+        {this.renderChatBox()}
       </div>
     );
   }

src/board/TextPanel/TextPanel.tsx

@@ -22,9 +22,12 @@ type ToggleState = (typeof ToggleState)[keyof typeof ToggleState];
 /**
  * @extends BoardProps<MachikoroG>
  * @prop names - List of player names.
+ * @prop clientPlayer - Player ID of the client, or null if the
+ * client is not a player.
  */
 interface TextPanelProps extends BoardProps<MachikoroG> {
   names: string[];
+  clientPlayer: number | null;
 }
 
 /**
@@ -36,8 +39,9 @@ interface TextPanelState {
 
 /**
  * Game log and chat, including buttons that toggle between them.
- * @prop {RefObject} logRadioRef - Reference to the log radio button.
- * @prop {RefObject} chatRadioRef - Reference to the chat radio button.
+ * @prop numReadChats - Number of read chat messages.
+ * @prop logRadioRef - Reference to the log radio button.
+ * @prop chatRadioRef - Reference to the chat radio button.
  */
 export default class TextPanel extends React.Component<TextPanelProps, TextPanelState> {
   private numReadChats: number;