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/styles/HeaderBar/components/HeaderBar.scss

@@ -0,0 +1,4 @@
+#header-bar{
+  font-size: 3.4em;
+  min-width: 1036px;
+}

data/web/src/styles/Monitor/components/Monitor.scss

@@ -0,0 +1,4 @@
+#monitor{
+  flex-grow: 1;
+  min-width: 800px;
+}

data/web/src/styles/Monitor/containers/MonitorControls.scss

@@ -0,0 +1,45 @@
+#monitor-controls{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  height: 48px;
+  margin-top: 0.5em;
+  padding-bottom: 0.5em;
+
+  #connection-status{
+    display: flex;
+    flex-direction: row;
+
+    #snes-connection, #server-connection{
+      margin-right: 1em;
+      table{
+        td{
+          padding-right: 0.5em;
+        }
+      }
+    }
+
+    .connected{
+      color: #008000;
+    }
+
+    .not-connected{
+      color: #ff0000;
+    }
+
+    button {
+      border-radius: 3px;
+    }
+  }
+
+  #accessibility{
+    display: flex;
+    flex-direction: column;
+    height: 48px;
+
+    button{
+      border-radius: 4px;
+      margin: 0.5em;
+    }
+  }
+}

data/web/src/styles/Monitor/containers/MonitorWindow.scss

@@ -0,0 +1,48 @@
+#monitor-window-wrapper{
+  #monitor-window{
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    background-color: #414042;
+    color: #dce7df;
+    overflow-y: auto;
+    margin-bottom: 10px;
+
+    div{
+      width: calc(100% - 14px);
+      padding: 7px;
+      border-bottom: 1px solid #000000;
+
+      &.user-command{
+        color: #ffffff;
+        background-color: #575757;
+      }
+    }
+
+    &.relevant-only{
+      div:not(.relevant){
+        visibility: collapse;
+      }
+    }
+
+    .item-span{ color: #67e9ff; }
+    .location-span{ color: #f5e63c; }
+    .entrance-span{ color: #73ae38 }
+    .finder-span{ color: #f96cb8; }
+    .recipient-span{ color: #9b8aff; }
+    .mine{ color: #ffa500; }
+  }
+
+  #command-wrapper{
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    height: 25px;
+    line-height: 25px;
+
+    input{
+      margin-left: 0.5em;
+      flex-grow: 1;
+    }
+  }
+}

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

@@ -0,0 +1,9 @@
+#web-ui{
+  width: calc(100% - 1.5em);
+  padding: 0.75em;
+
+  #content-middle{
+    display: flex;
+    flex-direction: row;
+  }
+}

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

@@ -0,0 +1,39 @@
+#widget-area{
+  margin-left: 0.5em;
+  margin-right: 0.5em;
+  padding: 0.25em;
+  border: 2px solid #6a6a6a;
+
+  &:not(.collapsed){
+    width: calc(20% - 1.5em - 4px);
+  }
+
+  #widget-button-row{
+    width: 100%;
+    text-align: right;
+
+    .collapse-button{
+      width: 35px;
+    }
+  }
+
+  #widget-area-contents{
+    display: flex;
+    flex-direction: column;
+
+    #notes{
+      display: flex;
+      flex-direction: column;
+
+      #notes-title{
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+      }
+
+      textarea{
+        height: 10em;
+      }
+    }
+  }
+}

data/web/src/styles/index.scss

@@ -0,0 +1,12 @@
+@font-face{
+    font-family: HyliaSerif;
+    src: local('HyliaSerif'), url('../assets/HyliaSerif.otf')
+}
+
+body {
+    background-color: #131313;
+    color: #eae703;
+    font-family: HyliaSerif, serif;
+    letter-spacing: 2px;
+    margin: 0;
+}