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-06-18 12:53:54 -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/Room/Room.tsx
+++ b/webclient/src/AppShell/Room/Room.tsx
@ -0,0 +1,103 @@
+// eslint-disable-next-line
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import { withRouter /*, RouteComponentProps */ } from "react-router-dom";
+import ListItem from "@material-ui/core/ListItem";
+import Paper from "@material-ui/core/Paper";
+
+import { RoomsStateMessages, RoomsStateRooms, Selectors } from "store/rooms";
+
+import AuthGuard from "AppShell/common/guards/AuthGuard";
+import { RoomsService } from "AppShell/common/services";
+
+import ScrollToBottomOnChanges from "AppShell/common/components/ScrollToBottomOnChanges/ScrollToBottomOnChanges";
+import ThreePaneLayout from "AppShell/common/components/ThreePaneLayout/ThreePaneLayout";
+import UserDisplay from "AppShell/common/components/UserDisplay/UserDisplay";
+import VirtualList from "AppShell/common/components/VirtualList/VirtualList";
+
+import Games from "./Games/Games";
+import Messages from "./Messages/Messages";
+import SayMessage from "./SayMessage/SayMessage";
+
+import "./Room.css";
+
+// @TODO (3)
+class Room extends Component<any> {
+  constructor(props) {
+    super(props);
+    this.handleRoomSay = this.handleRoomSay.bind(this);
+  }
+
+  handleRoomSay({ message }) {
+    if (message) {
+      const { roomId } = this.props.match.params;
+      RoomsService.roomSay(roomId, message);
+    }
+  }
+
+  render() {
+    const { match, rooms} = this.props;
+    const { roomId } = match.params;
+    const room = rooms[roomId];
+
+    const messages = this.props.messages[roomId];
+    const users = room.userList;
+
+    return (
+      <div className="room-view">
+        <AuthGuard />
+        <ThreePaneLayout
+          fixedHeight
+
+          top={(
+            <Paper className="room-view__games overflow-scroll">
+              <Games room={room} />
+            </Paper>    
+          )}
+
+          bottom={(
+            <div className="room-view__messages">
+              <Paper className="room-view__messages-content overflow-scroll">
+                <ScrollToBottomOnChanges changes={messages} content={(
+                  <Messages messages={messages} />
+                )} />
+              </Paper>
+              <Paper className="room-view__messages-sayMessage">
+                <SayMessage onSubmit={this.handleRoomSay} />
+              </Paper>
+            </div>
+          )}
+
+          side={(
+            <Paper className="room-view__side overflow-scroll">
+              <div className="room-view__side-label">
+                Users in this room: {users.length}
+              </div>
+              <VirtualList
+                className="room-view__side-list"
+                itemKey={(index, data) => users[index].name }
+                items={ users.map(user => (
+                  <ListItem button className="room-view__side-list__item">
+                    <UserDisplay user={user} />
+                  </ListItem>
+                ) ) }
+              />
+            </Paper>
+          )}
+        />
+      </div>
+    );
+  }
+}
+
+interface RoomProps {
+  messages: RoomsStateMessages;
+  rooms: RoomsStateRooms;
+}
+
+const mapStateToProps = state => ({
+  messages: Selectors.getMessages(state),
+  rooms: Selectors.getRooms(state)
+});
+
+export default withRouter(connect(mapStateToProps)(Room));