Update WebUI to display server, check, and hint info. CURRENT HINT POINTS DO NOT WORK YET

data/web/src/js/Monitor/containers/MonitorControls.js

@@ -46,6 +46,7 @@ class MonitorControls extends Component {
   }
 
   componentDidUpdate(prevProps) {
+    // If there is only one SNES device available, connect to it automatically
     if (
       prevProps.availableDevices.length !== this.props.availableDevices.length &&
       this.props.availableDevices.length === 1
@@ -57,6 +58,17 @@ class MonitorControls extends Component {
         }
       });
     }
+
+    // If we have moved from a disconnected state (default) into a connected state, request the game information
+    if (
+      (
+        (prevProps.snesConnected !== this.props.snesConnected) || // SNES status changed
+        (prevProps.serverConnected !== this.props.serverConnected) // OR server status changed
+      ) && ((this.props.serverConnected) && (this.props.snesConnected)) // AND both are connected
+    ) {
+      this.props.webSocket.send(WebSocketUtils.formatSocketData('webStatus', 'gameInfo'));
+      this.props.webSocket.send(WebSocketUtils.formatSocketData('webStatus', 'checkData'));
+    }
   }
 
   increaseTextSize = () => {

data/web/src/js/WidgetArea/containers/WidgetArea.js

@@ -2,6 +2,17 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import '../../../styles/WidgetArea/containers/WidgetArea.scss';
 
+const mapReduxStateToProps = (reduxState) => ({
+  serverVersion: reduxState.gameState.serverVersion,
+  forfeitMode: reduxState.gameState.forfeitMode,
+  remainingMode: reduxState.gameState.remainingMode,
+  hintCost: reduxState.gameState.hintCost,
+  checkPoints: reduxState.gameState.checkPoints,
+  hintPoints: reduxState.gameState.hintPoints,
+  totalChecks: reduxState.gameState.totalChecks,
+  lastCheck: reduxState.gameState.lastCheck,
+});
+
 class WidgetArea extends Component {
   constructor(props) {
     super(props);
@@ -30,10 +41,67 @@ class WidgetArea extends Component {
         {
           this.state.collapsed ? null : (
             <div id="widget-area-contents">
+              <div id="game-info">
+                <div id="game-info-title">
+                  Game Info:
+                  <button className="collapse-button" onClick={ this.toggleCollapse }>↪</button>
+                </div>
+                <table>
+                  <tbody>
+                    <tr>
+                      <th>Server Version:</th>
+                      <td>{this.props.serverVersion}</td>
+                    </tr>
+                    <tr>
+                      <th>Forfeit Mode:</th>
+                      <td>{this.props.forfeitMode}</td>
+                    </tr>
+                    <tr>
+                      <th>Remaining Mode:</th>
+                      <td>{this.props.remainingMode}</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <div id="check-data">
+                <div id="check-data-title">Checks:</div>
+                <table>
+                  <tbody>
+                    <tr>
+                      <th>Total Checks:</th>
+                      <td>{this.props.totalChecks}</td>
+                    </tr>
+                    <tr>
+                      <th>Last Check:</th>
+                      <td>{this.props.lastCheck}</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <div id="hint-data">
+                <div id="hint-data-title">
+                  Hint Data:
+                </div>
+                <table>
+                  <tbody>
+                    <tr>
+                      <th>Hint Cost:</th>
+                      <td>{this.props.hintCost}</td>
+                    </tr>
+                    <tr>
+                      <th>Check Points:</th>
+                      <td>{this.props.checkPoints}</td>
+                    </tr>
+                    <tr>
+                      <th>Current Points:</th>
+                      <td>{this.props.hintPoints}</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
               <div id="notes">
                 <div id="notes-title">
                   <div>Notes:</div>
-                  <button className="collapse-button" onClick={ this.toggleCollapse }>↪</button>
                 </div>
                 <textarea defaultValue={ localStorage.getItem('notes') } onKeyUp={ this.saveNotes } />
               </div>
@@ -46,4 +114,4 @@ class WidgetArea extends Component {
   }
 }
 
-export default connect()(WidgetArea);
+export default connect(mapReduxStateToProps)(WidgetArea);

data/web/src/js/global/Redux/reducers/gameStateReducer.js

@@ -1,17 +1,20 @@
 import _assign from 'lodash-es/assign';
 
 const initialState = {
+  serverVersion: null,
+  forfeitMode: null,
+  remainingMode: null,
   connections: {
     snesDevice: '',
     snesConnected: false,
     serverAddress: null,
     serverConnected: false,
   },
-  hints: {
-    hintCost: null,
-    checkPoints: null,
-    playerPoints: 0,
-  },
+  totalChecks: 0,
+  lastCheck: null,
+  hintCost: null,
+  checkPoints: null,
+  hintPoints: 0,
 };
 
 const gameStateReducer = (state = initialState, action) => {

data/web/src/js/global/WebSocketUtils.js

@@ -60,6 +60,22 @@ class WebSocketUtils {
             parseInt(data.content.iAmFinder, 10) === 1, parseInt(data.content.iAmRecipient, 10) === 1,
             data.content.entranceLocation));
 
+        case 'gameInfo':
+          return updateGameState({
+            serverVersion: data.content.serverVersion,
+            forfeitMode: data.content.forfeitMode,
+            remainingMode: data.content.remainingMode,
+            hintCost: parseInt(data.content.hintCost, 10),
+            checkPoints: parseInt(data.content.checkPoints, 10),
+          });
+
+        case 'locationCheck':
+          return updateGameState({
+            totalChecks: parseInt(data.content.totalChecks, 10),
+            lastCheck: data.content.lastCheck,
+            hintPoints: parseInt(data.content.hintPoints, 10),
+          });
+
         // The client prints several types of messages to the console
         case 'critical':
         case 'error':

data/web/src/styles/WidgetArea/containers/WidgetArea.scss

@@ -21,15 +21,36 @@
     display: flex;
     flex-direction: column;
 
-    #notes{
-      display: flex;
-      flex-direction: column;
+    table{
+      th{
+        text-align: left;
+      }
+      td{
+        padding-left: 1em;
+      }
+    }
 
-      #notes-title{
+    #game-info{
+      margin-bottom: 1em;
+
+      #game-info-title{
         display: flex;
         flex-direction: row;
         justify-content: space-between;
       }
+    }
+
+    #check-data{
+      margin-bottom: 1em;
+    }
+
+    #hint-data{
+      margin-bottom: 1em;
+    }
+
+    #notes{
+      display: flex;
+      flex-direction: column;
 
       textarea{
         height: 10em;