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>
2026-04-27 07:48:01 -07:00 · 2020-12-31 16:08:15 -06:00 · 2020-12-31 16:08:15 -06:00 · 0457e65751
commit 0457e65751
parent d5b36e8b8a
152 changed files with 19573 additions and 1071 deletions
--- a/webclient/src/AppShell/common/components/ThreePaneLayout/ThreePaneLayout.tsx
+++ b/webclient/src/AppShell/common/components/ThreePaneLayout/ThreePaneLayout.tsx
@ -0,0 +1,47 @@
+// eslint-disable-next-line
+import React, { Component, CElement } from "react";
+import { connect } from "react-redux";
+import Grid from "@material-ui/core/Grid";
+import Hidden from "@material-ui/core/Hidden";
+
+import "./ThreePaneLayout.css";
+
+class ThreePaneLayout extends Component<ThreePaneLayoutProps> {
+  render() {
+    return (
+      <div className="three-pane-layout">
+        <Grid container spacing={2} className="grid">
+          <Grid item xs={12} md={9} lg={10} className="grid-main">
+            <Grid item className={
+              "grid-main__top"
+              + (this.props.fixedHeight ? " fixedHeight" : "")
+            }>
+              {this.props.top}
+            </Grid>
+            <Grid item className="grid-main__bottom">
+              {this.props.bottom}
+            </Grid>
+          </Grid>
+          <Hidden smDown>
+            <Grid item md={3} lg={2} className="grid-side">
+              {this.props.side}
+            </Grid>
+          </Hidden>
+        </Grid>
+      </div>
+    );
+  }
+}
+
+interface ThreePaneLayoutProps {
+  top: CElement<any, any>,
+  bottom: CElement<any, any>,
+  side?: CElement<any, any>,
+  fixedHeight?: boolean,
+}
+
+const mapStateToProps = state => ({
+
+});
+
+export default connect(mapStateToProps)(ThreePaneLayout);