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-13 01:24:46 -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/Server/Rooms/Rooms.tsx
+++ b/webclient/src/AppShell/Server/Rooms/Rooms.tsx
@ -0,0 +1,61 @@
+// eslint-disable-next-line
+import React from "react";
+import { generatePath } from "react-router-dom";
+import * as _ from "lodash";
+
+import Button from "@material-ui/core/Button";
+import Table from "@material-ui/core/Table";
+import TableBody from "@material-ui/core/TableBody";
+import TableCell from "@material-ui/core/TableCell";
+import TableHead from "@material-ui/core/TableHead";
+import TableRow from "@material-ui/core/TableRow";
+
+import { RoomsService } from "AppShell/common/services";
+import { RouteEnum } from "AppShell/common/types";
+
+import "./Rooms.css";
+
+const Rooms = ({ rooms, joinedRooms, history }) => {
+  function onClick(roomId) {
+    if (_.find(joinedRooms, room => room.roomId === roomId)) {
+      history.push(generatePath(RouteEnum.ROOM, { roomId }));
+    } else {
+      RoomsService.joinRoom(roomId);
+    }
+  }
+
+  return (
+    <div className="rooms">
+      <Table size="small">
+        <TableHead>
+          <TableRow>
+            <TableCell>Name</TableCell>
+            <TableCell>Description</TableCell>
+            <TableCell>Permissions</TableCell>
+            <TableCell>Players</TableCell>
+            <TableCell>Games</TableCell>
+            <TableCell></TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          { _.map(rooms, ({ description, gameCount, name, permissionlevel, playerCount, roomId }) => (
+            <TableRow key={roomId}>
+              <TableCell>{name}</TableCell>
+              <TableCell>{description}</TableCell>
+              <TableCell>{permissionlevel}</TableCell>
+              <TableCell>{playerCount}</TableCell>
+              <TableCell>{gameCount}</TableCell>
+              <TableCell>
+                <Button size="small" color="primary" variant="contained" onClick={() => onClick(roomId)}>
+                  Join
+                </Button>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+};
+
+export default Rooms;