Webatrice P.O.C. (#3854)

* port webclient POC into react shell

* Abstract websocket messaging behind redux store

* refactor architecture

* add rooms store

* introduce application service layer and login form

* display room messages

* implement roomSay

* improve Room view styling

* display room games

* improve gameList update logic

* hide protected games

* improve game update logic

* move mapping to earlier lifecycle hook

* add autoscroll to bottom

* tabs to spaces, refresh guard

* implement server joins/leaves

* show users in room

* add material-ui to build

* refactor, add room joins/leaves to store and render

* begin using Material UI components

* fix spectatorsCount

* remove unused package

* improve Server and Room styling

* fix scroll context

* route on room join

* refactor room path

* add auth guard

* refactor authGuard export

* add missing files

* clear store on disconnect, add logout button to Account view

* fix disconnect handling

* Safari fixes

* organize current todos

* improve login page and server status tracking

* improve login page

* introduce sorting arch, refine reducers, begin viewLogHistory

* audit fix for handlebars

* implement moderator log view

* comply with code style rules

* remove original POC from codebase

* add missing semi

* minor improvements, begin registration functionality

* retry as ws when wss fails

additionally, dont mutate the default options when connecting

* retain user/pass in WebClient.options for login

* take protocol off of options, make it a connect param that defaults to wss

* cleanup server page styling

* match wss logic with desktop client

* add virtual scroll component, add context menu to UserDisplay

* revert VirtualTable on messages

* improve styling for Room view

* add routing to Player view

* increase tooltip delay

* begin implementing Account view

* disable app level contextMenu

* implement buddy/ignore list management

* fix gitignore

Co-authored-by: Jay Letto <jeremy.letto@merrillcorp.com>
Co-authored-by: skwerlman <skwerlman@users.noreply.github.com>
Co-authored-by: Jeremy Letto <jeremy.letto@datasite.com>

webclient/src/AppShell/Header/Header.css

@@ -0,0 +1,77 @@
+.Header {
+}
+
+.Header__logo {
+  display: flex;
+}
+
+.Header__logo img {
+  height: 40px;
+}
+
+.Header-content {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 5px;
+  color: white;
+}
+
+.Header-serverDetails {
+  font-size: 12px;
+}
+
+.Header-nav {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  margin-right: 10px;
+}
+
+.Header-nav__items {
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.Header-nav__item {
+  list-style: none;
+  margin: 0 10px;
+}
+
+.Header-account {
+    display: flex;
+    align-items: center;
+}
+
+.Header-account__name {
+  margin-right: 10px;
+  font-weight: bold;
+}
+
+.Header-account__indicator {
+  display: inline-block;
+  height: 16px;
+  width: 16px;
+  background: red;
+  border: 2px solid;
+  border-radius: 50%;
+}
+
+.temp-subnav__rooms {
+  display: flex;
+  align-items: center;
+  font-size: 10px;
+  padding: 5px;
+}
+
+.temp-chip {
+  margin-left: 5px;
+  text-decoration: none;
+}
+
+
+.temp-chip > div {
+  cursor: inherit;
+}
+

webclient/src/AppShell/Header/Header.tsx

@@ -0,0 +1,119 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import { NavLink, withRouter, generatePath } from "react-router-dom";
+import AppBar from "@material-ui/core/AppBar";
+import Chip from "@material-ui/core/Chip";
+import Toolbar from "@material-ui/core/Toolbar";
+import * as _ from "lodash";
+
+import { Selectors as RoomsSelectors } from "store/rooms";
+import { Selectors as ServerSelectors } from "store/server";
+import { Room, User } from "types";
+
+import { AuthenticationService } from "AppShell/common/services";
+import { RouteEnum } from "AppShell/common/types";
+
+import "./Header.css";
+import logo from "./logo.png";
+
+class Header extends Component<HeaderProps> {
+  componentDidUpdate(prevProps) {
+    const currentRooms = this.props.joinedRooms;
+    const previousRooms = prevProps.joinedRooms;
+
+    if (currentRooms > previousRooms) {
+      const { roomId } = _.difference(currentRooms, previousRooms)[0];
+      this.props.history.push(generatePath(RouteEnum.ROOM, { roomId }));
+    }
+  }
+  render() {
+    const { joinedRooms, server, state, user } = this.props;
+
+    return (
+      <div>
+        {/*<header className="Header">*/}
+        <AppBar position="static">
+          <Toolbar variant="dense">
+            <NavLink to={RouteEnum.SERVER} className="Header__logo">
+              <img src={logo} alt="logo" />
+            </NavLink>
+            { AuthenticationService.isConnected(state) && (
+              <div className="Header-content">
+                <nav className="Header-nav">
+                  <ul className="Header-nav__items">
+                    {
+                      AuthenticationService.isModerator(user) && (
+                        <li className="Header-nav__item">
+                          <NavLink to={RouteEnum.LOGS}>
+                            <button>Logs</button>
+                          </NavLink>
+                        </li>
+                      )
+                    }
+                    <li className="Header-nav__item">
+                      <NavLink to={RouteEnum.SERVER} className="plain-link">
+                        Server ({server})
+                      </NavLink>
+                    </li>
+                    <NavLink to={RouteEnum.ACCOUNT} className="plain-link">
+                      <div className="Header-account">
+                        <span className="Header-account__name">
+                          {user.name}
+                        </span>
+                        <span className="Header-account__indicator"></span>
+                      </div>
+                    </NavLink>
+                  </ul>
+                </nav>
+              </div>
+            ) }
+          </Toolbar>
+        </AppBar>
+        <div className="temp-subnav">
+          {
+            !!joinedRooms.length && (
+              <Rooms rooms={joinedRooms} />
+            )
+          }
+          <div className="temp-subnav__games">
+          </div>
+          <div className="temp-subnav__chats">
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+const Rooms = props => (
+  <div className="temp-subnav__rooms">
+    <span>Rooms: </span>
+    {
+      _.reduce(props.rooms, (rooms, { name, roomId}) => {
+        rooms.push(
+          <NavLink to={generatePath(RouteEnum.ROOM, { roomId })} className="temp-chip" key={roomId}>
+            <Chip label={name} color="primary" />
+          </NavLink>
+        );
+        return rooms;
+      }, [])
+    }
+  </div>
+)
+
+interface HeaderProps {
+  state: number;
+  server: string;
+  user: User;
+  joinedRooms: Room[];
+  history: any;
+}
+
+const mapStateToProps = state => ({
+  state: ServerSelectors.getState(state),
+  server: ServerSelectors.getName(state),
+  user: ServerSelectors.getUser(state),
+  joinedRooms: RoomsSelectors.getJoinedRooms(state)
+});
+
+export default withRouter(connect(mapStateToProps)(Header));