WebUI (#100)

* Object-Oriented base changes for web-ui prep

* remove debug raise

* optimize broadcast to serialize once

* Implement WebUI socket, static assets, and classes

- Still need to wrap logging functions and send output to UI
- UI commands are successfully being sent to the server

* GUI operational. Wrap logging functions, implement server address selection on GUI, automatically launch web browser when client websocket is served

* Update MultiServer status when a user disconnects / reconnects

* Implement colored item and hint checks, improve GUI readability

* Fix improper formatting on received items

* Update SNES connection status on disconnect / reconnect. Implement itemFound, prevent accidentally printing JS objects

* Minor text change for itemFound

* Fixed a very wrong comment

* Fixed client commands not working, fixed un-helpful error messages appearing in GUI

* Fix a bug causing a failure to connect to a multiworld server if a previously existing cached address was present and the client was loaded without an address passed in

* Convert WebUI to React /w Redux. WebSocket communications not yet operational.

* WebUI fully converted to React / Redux.

- Websocket communication operational
- Added a button to connect to the multiserver which appears only when a SNES is connected and a server connection is not active

* Restore some features lost in WebUI

- Restore (found) notification on hints if the item has already been obtained
- Restore (x/y) indicator on received items, which indicates the number of items the client is waiting to receive from the client in a queue

* Fix a grammatical UI big causing player names to show only an apostrophe when possessive

* Add support for multiple SNES Devices, and switching between them

* freeze support for client

* make sure flask works when frozen

* UI Improvements

- Hint messages now actually show a found status via ✔ and ❌ emoji
- Active player name is always a different color than other players (orange for now)
- Add a toggle to show only entries relevant to the active player
- Added a WidgetArea
- Added a notes widget

* Received items now marked as relevant

* Include production build for deployment

* Notes now survive a browser close. Minimum width applied to monitor to prevent CSS issues.

* include webUi folder in setup.py

* Bugfixes for Monitor

- Fix a bug causing the monitor window to grow beyond it's intended content limit
- Reduced monitor content limit to 200 items
- Ensured each monitor entry has a unique key

* Prevent eslint from yelling at me about stupid things

* Add button to collapse sidebar, press enter on empty server input to disconnect on purpose

* WebUI is now aware of client disconnect, message log limit increased to 350, fix !missing output

* Update WebUI to v2.2.1

- Added color to WebUI for entrance-span
- Make !missing show total count at bottom of list to match /missing behavior

* Fix a bug causing clients version <= 2.2.0 to crash when anyone asks for a hint

- Also fix a bug in the WebUI causing the entrance location to always show as "somewhere"

* Update WebUI color palette (this cost me $50)

* allow text console input alongside web-ui

* remove Flask
a bit overkill for what we're doing

* remove jinja2

* Update WebUI to work with new hosting mechanism

* with flask gone, we no longer need subprocess shenanigans

* If multiple web ui clients try to run, at least present a working console

* Update MultiClient and WebUI to handle multiple clients simultaneously.

- The port on which the websocket for the WebUI is hosted is not chosen randomly from 5000 - 5999. This port is passed to the browser so it knows which MultiClient to connect to

- Removed failure condition if a web server is already running, as there is no need to run more than one web server on a single system. If an exception is thrown while attempting to launch a web server, a check is made for the port being unavailable. If the port is unavailable, it probably means the user is launching a second MultiClient. A web browser is then opened with a connection to the correct webui_socket_port.

- Add a /web command to the MultiClient to repoen the appropriate browser window and get params in case a user accidentally closes the tab

* Use proper name for WebUI

* move webui into /data with other data files

* make web ui optional
This is mostly for laptop users wanting to preserve some battery, should not be needed outside of that.

* fix direct server start

* re-add connection timer

* fix indentation

Co-authored-by: Chris <chris@legendserver.info>

data/web/src/js/global/MonitorTools.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import md5 from 'crypto-js/md5';
+
+const finderSpan = (finder, possessive = false, ownItem = false) => (
+  <span className={ `finder-span ${ownItem ? 'mine' : null}` }>{finder}{possessive ? "'s" : null}</span>
+);
+const recipientSpan = (recipient, possessive = false, ownItem = false) => (
+  <span className={ `recipient-span ${ownItem ? 'mine' : null}` }>{recipient}{possessive ? "'s" : null}</span>
+);
+const itemSpan = (item) => <span className="item-span">{item}</span>;
+const locationSpan = (location) => <span className="location-span">{location}</span>;
+const entranceSpan = (entrance) => <span className="entrance-span">{entrance}</span>;
+
+class MonitorTools {
+  /** Convert plaintext into a React-friendly div */
+  static createTextDiv = (text) => (
+    <div key={ `${md5(text)}${Math.floor((Math.random() * 1000000))}` }>
+      {text}
+    </div>
+  );
+
+  /** Sent an item to another player */
+  static sentItem = (finder, recipient, item, location, iAmFinder = false, iAmRecipient = false) => (
+    <div
+      key={ `${md5(finder + recipient + item + location)}${Math.floor((Math.random() * 1000000))}` }
+      className={ (iAmFinder || iAmRecipient) ? 'relevant' : null }
+    >
+      {finderSpan(finder, false, iAmFinder)} found {recipientSpan(recipient, true, iAmRecipient)}&nbsp;
+      {itemSpan(item)} at {locationSpan(location)}
+    </div>
+  )
+
+  /** Received item from another player */
+  static receivedItem = (finder, item, location, itemIndex, queueLength) => (
+    <div
+      key={ `${md5(finder + item + location)}${Math.floor((Math.random() * 1000000))}` }
+      className="relevant"
+    >
+      ({itemIndex}/{queueLength}) {finderSpan(finder, false)} found your&nbsp;
+      {itemSpan(item)} at {locationSpan(location)}
+    </div>
+  )
+
+  /** Player found their own item (local or remote player) */
+  static foundItem = (finder, item, location, iAmFinder = false) => (
+    <div
+      key={ `${md5(finder + item + location)}${Math.floor((Math.random() * 1000000))}` }
+      className={ iAmFinder ? 'relevant' : null }
+    >
+      {finderSpan(finder, false, iAmFinder)} found their own {itemSpan(item)} at {locationSpan(location)}
+    </div>
+  )
+
+  /** Hint message */
+  static hintMessage = (finder, recipient, item, location, found, iAmFinder = false, iAmRecipient = false,
+    entranceLocation = null) => (
+      <div
+        key={ `${md5(finder + recipient + item + location)}${Math.floor((Math.random() * 1000000))}` }
+        className={ (iAmFinder || iAmRecipient) ? 'relevant' : null }
+      >
+        {recipientSpan(recipient, true, iAmRecipient)} {itemSpan(item)} can be found in&nbsp;
+        {finderSpan(finder, true, iAmFinder)} world at {locationSpan(location)}
+        { entranceLocation ? [', which is at ', entranceSpan(entranceLocation)] : null }&nbsp;
+        ({found ? '✔' : '❌'})
+      </div>
+  )
+}
+
+export default MonitorTools;

data/web/src/js/global/Redux/actions/updateGameState.js

@@ -0,0 +1,8 @@
+const UPDATE_GAME_STATE = 'UPDATE_GAME_STATE';
+
+const updateGameState = (gameState) => ({
+  type: UPDATE_GAME_STATE,
+  gameState,
+});
+
+export default updateGameState;

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

@@ -0,0 +1,27 @@
+import _assign from 'lodash-es/assign';
+
+const initialState = {
+  connections: {
+    snesDevice: '',
+    snesConnected: false,
+    serverAddress: null,
+    serverConnected: false,
+  },
+  hints: {
+    hintCost: null,
+    checkPoints: null,
+    playerPoints: 0,
+  },
+};
+
+const gameStateReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case 'UPDATE_GAME_STATE':
+      return _assign({}, state, action.gameState);
+
+    default:
+      return state;
+  }
+};
+
+export default gameStateReducer;

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

@@ -0,0 +1,89 @@
+import MonitorTools from './MonitorTools';
+
+// Redux actions
+import appendMessage from '../Monitor/Redux/actions/appendMessage';
+import updateGameState from './Redux/actions/updateGameState';
+import setAvailableDevices from '../WebUI/Redux/actions/setAvailableDevices';
+
+class WebSocketUtils {
+  static formatSocketData = (eventType, content) => JSON.stringify({
+    type: eventType,
+    content,
+  });
+
+  /**
+   * Handle incoming websocket data and return appropriate data for dispatch
+   * @param message
+   * @returns Object
+   */
+  static handleIncomingMessage = (message) => {
+    try {
+      const data = JSON.parse(message.data);
+
+      switch (data.type) {
+        // Client sent snes and server connection statuses
+        case 'connections':
+          return updateGameState({
+            connections: {
+              snesDevice: data.content.snesDevice ? data.content.snesDevice : '',
+              snesConnected: parseInt(data.content.snes, 10) === 3,
+              serverAddress: data.content.serverAddress ? data.content.serverAddress.replace(/^.*\/\//, '') : null,
+              serverConnected: parseInt(data.content.server, 10) === 1,
+            },
+          });
+
+        case 'availableDevices':
+          return setAvailableDevices(data.content.devices);
+
+        // Client unable to automatically connect to multiworld server
+        case 'serverAddress':
+          return appendMessage(MonitorTools.createTextDiv(
+            'Unable to automatically connect to multiworld server. Please enter an address manually.',
+          ));
+
+        case 'itemSent':
+          return appendMessage(MonitorTools.sentItem(data.content.finder, data.content.recipient,
+            data.content.item, data.content.location, parseInt(data.content.iAmFinder, 10) === 1,
+            parseInt(data.content.iAmRecipient, 10) === 1));
+
+        case 'itemReceived':
+          return appendMessage(MonitorTools.receivedItem(data.content.finder, data.content.item,
+            data.content.location, data.content.itemIndex, data.content.queueLength));
+
+        case 'itemFound':
+          return appendMessage(MonitorTools.foundItem(data.content.finder, data.content.item, data.content.location,
+            parseInt(data.content.iAmFinder, 10) === 1));
+
+        case 'hint':
+          return appendMessage(MonitorTools.hintMessage(data.content.finder, data.content.recipient,
+            data.content.item, data.content.location, parseInt(data.content.found, 10) === 1,
+            parseInt(data.content.iAmFinder, 10) === 1, parseInt(data.content.iAmRecipient, 10) === 1,
+            data.content.entranceLocation));
+
+        // The client prints several types of messages to the console
+        case 'critical':
+        case 'error':
+        case 'warning':
+        case 'info':
+        case 'chat':
+          return appendMessage(MonitorTools.createTextDiv(
+            (typeof (data.content) === 'string') ? data.content : JSON.stringify(data.content),
+          ));
+        default:
+          console.warn(`Unknown message type received: ${data.type}`);
+          console.warn(data.content);
+          return { type: 'NO_OP' };
+      }
+    } catch (error) {
+      console.error(message);
+      console.error(error);
+      // The returned value from this function will be dispatched to Redux. If an error occurs,
+      // Redux and the SPA in general should live on. Dispatching something with the correct format
+      // but that matches no known Redux action will cause the state to update to itself, which is
+      // treated as a no-op.
+      return { type: 'NO_OP' };
+    }
+  };
+}
+
+export default WebSocketUtils;