Add alternate font toggle to WebUI

data/web/src/js/Monitor/Redux/actions/setSimpleFont.js

@@ -0,0 +1,8 @@
+const SET_SIMPLE_FONT = 'SET_SIMPLE_FONT';
+
+const setSimpleFont = (simpleFont) => ({
+  type: SET_SIMPLE_FONT,
+  simpleFont,
+});
+
+export default setSimpleFont;

data/web/src/js/Monitor/Redux/reducers/monitorReducer.js

@@ -2,6 +2,7 @@ import _assign from 'lodash-es/assign';
 
 const initialState = {
   fontSize: 18,
+  simpleFont: false,
   showRelevantOnly: false,
   messageLog: [],
 };
@@ -19,6 +20,11 @@ const monitorReducer = (state = initialState, action) => {
         fontSize: action.fontSize,
       });
 
+    case 'SET_SIMPLE_FONT':
+      return _assign({}, state, {
+        simpleFont: action.simpleFont,
+      });
+
     case 'SET_SHOW_RELEVANT':
       return _assign({}, state, {
         showRelevantOnly: action.showRelevant,

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

@@ -7,6 +7,7 @@ import '../../../styles/Monitor/containers/MonitorControls.scss';
 // Redux actions
 import setMonitorFontSize from '../Redux/actions/setMonitorFontSize';
 import setShowRelevant from '../Redux/actions/setShowRelevant';
+import setSimpleFont from '../Redux/actions/setSimpleFont';
 
 const mapReduxStateToProps = (reduxState) => ({
   fontSize: reduxState.monitor.fontSize,
@@ -16,6 +17,7 @@ const mapReduxStateToProps = (reduxState) => ({
   snesConnected: reduxState.gameState.connections.snesConnected,
   serverAddress: reduxState.gameState.connections.serverAddress,
   serverConnected: reduxState.gameState.connections.serverConnected,
+  simpleFont: reduxState.monitor.simpleFont,
 });
 
 const mapDispatchToProps = (dispatch) => ({
@@ -25,6 +27,9 @@ const mapDispatchToProps = (dispatch) => ({
   doToggleRelevance: (showRelevantOnly) => {
     dispatch(setShowRelevant(showRelevantOnly));
   },
+  doSetSimpleFont: (simpleFont) => {
+    dispatch(setSimpleFont(simpleFont));
+  },
 });
 
 class MonitorControls extends Component {
@@ -129,6 +134,8 @@ class MonitorControls extends Component {
     this.props.doToggleRelevance(event.target.checked);
   };
 
+  setSimpleFont = (event) => this.props.doSetSimpleFont(event.target.checked);
+
   render() {
     return (
       <div id="monitor-controls">
@@ -194,6 +201,14 @@ class MonitorControls extends Component {
           <div>
             Only show my items <input type="checkbox" onChange={ this.toggleRelevance } />
           </div>
+          <div>
+            Use alternate font
+            <input
+              type="checkbox"
+              onChange={ this.setSimpleFont }
+              defaultChecked={ this.props.simpleFont }
+            />
+          </div>
         </div>
       </div>
     );

data/web/src/js/WebUI/containers/WebUI.js

@@ -14,6 +14,7 @@ import appendMessage from '../../Monitor/Redux/actions/appendMessage';
 
 const mapReduxStateToProps = (reduxState) => ({
   connections: reduxState.gameState.connections,
+  simpleFont: reduxState.monitor.simpleFont,
 });
 
 const mapDispatchToProps = (dispatch) => ({
@@ -94,7 +95,7 @@ class WebUI extends Component {
 
   render() {
     return (
-      <div id="web-ui" ref={ this.webUiRef }>
+      <div id="web-ui" ref={ this.webUiRef } className={ this.props.simpleFont ? 'simple-font' : null }>
         <HeaderBar />
         <div id="content-middle">
           <Monitor />