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/store/rooms/index.ts

@@ -0,0 +1,6 @@
+export * from "./rooms.actions";
+export * from "./rooms.dispatch";
+export * from "./rooms.interfaces";
+export * from "./rooms.reducer";
+export * from "./rooms.selectors";
+export * from "./rooms.types";

webclient/src/store/rooms/rooms.actions.tsx

@@ -0,0 +1,53 @@
+import { Types } from "./rooms.types";
+
+export const Actions = {
+  clearStore: () => ({
+    type: Types.CLEAR_STORE
+  }),
+  
+  updateRooms: rooms => ({
+    type: Types.UPDATE_ROOMS,
+    rooms
+  }),
+
+  joinRoom: roomInfo => ({
+    type: Types.JOIN_ROOM,
+    roomInfo
+  }),
+
+  leaveRoom: roomId => ({
+    type: Types.LEAVE_ROOM,
+    roomId
+  }),
+
+  addMessage: (roomId, message) => ({
+    type: Types.ADD_MESSAGE,
+    roomId,
+    message
+  }),
+
+  updateGames: (roomId, games) => ({
+    type: Types.UPDATE_GAMES,
+    roomId,
+    games
+  }),
+
+  userJoined: (roomId, user) => ({
+    type: Types.USER_JOINED,
+    roomId,
+    user
+  }),
+
+  userLeft: (roomId, name) => ({
+    type: Types.USER_LEFT,
+    roomId,
+    name
+  }),
+
+  sortGames: (roomId, field, order) => ({
+    type: Types.SORT_GAMES,
+    roomId,
+    field,
+    order
+  })
+}

webclient/src/store/rooms/rooms.dispatch.tsx

@@ -0,0 +1,48 @@
+import { reset } from 'redux-form';
+import { Actions } from "./rooms.actions";
+import { store } from "../store";
+
+// const history = useHistory();
+
+export const Dispatch = {
+  clearStore: () => {
+    store.dispatch(Actions.clearStore());
+  },
+  
+  updateRooms: rooms => {
+    store.dispatch(Actions.updateRooms(rooms));
+  },
+
+  joinRoom: roomInfo => {
+    store.dispatch(Actions.joinRoom(roomInfo));
+
+  },
+
+  leaveRoom: roomId => {
+    store.dispatch(Actions.leaveRoom(roomId));
+  },
+
+  addMessage: (roomId, message) => {
+    if (message.name) {
+      store.dispatch(reset('sayMessage'));
+    }
+    
+    store.dispatch(Actions.addMessage(roomId, message));
+  },
+
+  updateGames: (roomId, games) => {
+    store.dispatch(Actions.updateGames(roomId, games));
+  },
+
+  userJoined: (roomId, user) => {
+    store.dispatch(Actions.userJoined(roomId, user));
+  },
+
+  userLeft: (roomId, name) => {
+    store.dispatch(Actions.userLeft(roomId, name));
+  },
+
+  sortGames: (roomId, field, order) => {
+    store.dispatch(Actions.sortGames(roomId, field, order));
+  }
+}

webclient/src/store/rooms/rooms.interfaces.tsx

@@ -0,0 +1,36 @@
+import { GameSortField, Room, SortBy, UserSortField } from "types";
+
+export interface RoomsState {
+  rooms: RoomsStateRooms;
+  joined: JoinedRooms;
+  messages: RoomsStateMessages;
+  sortGamesBy: RoomsStateSortGamesBy;
+  sortUsersBy: RoomsStateSortUsersBy;
+}
+
+export interface RoomsStateRooms {
+  [roomId: number]: Room;
+}
+
+export interface JoinedRooms {
+  [roomId: number]: boolean;
+}
+
+export interface RoomsStateMessages {
+  [roomId: number]: Message[];
+}
+
+export interface RoomsStateSortGamesBy extends SortBy {
+  field: GameSortField
+}
+
+export interface RoomsStateSortUsersBy extends SortBy {
+  field: UserSortField
+}
+
+export interface Message {
+  message: string;
+  messageType: number;
+  timeReceived: number;
+  timeOf?: number;
+}

webclient/src/store/rooms/rooms.reducer.tsx

@@ -0,0 +1,270 @@
+import * as _ from "lodash";
+
+import { GameSortField, UserSortField, SortDirection } from "types";
+
+import { SortUtil } from "../common";
+
+import { RoomsState } from "./rooms.interfaces"
+import { MAX_ROOM_MESSAGES, Types } from "./rooms.types";
+
+const initialState: RoomsState = {
+  rooms: {},
+  joined: {},
+  messages: {},
+  sortGamesBy: {
+    field: GameSortField.START_TIME,
+    order: SortDirection.DESC
+  },
+  sortUsersBy: {
+    field: UserSortField.NAME,
+    order: SortDirection.ASC
+  }
+};
+
+export const roomsReducer = (state = initialState, action: any) => {
+  switch(action.type) {
+    case Types.CLEAR_STORE: {
+      return {
+        ...initialState
+      };
+    }
+    case Types.UPDATE_ROOMS: {
+      const rooms = {
+        ...state.rooms
+      };
+
+      // Server does not send everything on updates
+      _.each(action.rooms, (room, order) => {
+        const { roomId } = room;
+        const existing = rooms[roomId] || {};
+        
+        const update = { ...room };
+        delete update.gameList;
+        delete update.gametypeList;
+        delete update.userList;
+
+        rooms[roomId] = {
+          ...existing,
+          ...update,
+          order
+        };
+      });
+
+      return { ...state, rooms };
+    }
+    case Types.JOIN_ROOM: {
+      const { roomInfo } = action;
+      const { joined, rooms, sortGamesBy, sortUsersBy } = state;
+
+      const { roomId } = roomInfo;
+
+      const gameList = [
+        ...roomInfo.gameList
+      ];
+
+      const userList = [
+        ...roomInfo.userList
+      ];
+
+      SortUtil.sortByField(gameList, sortGamesBy);
+      SortUtil.sortUsersByField(userList, sortUsersBy);
+
+      return {
+        ...state,
+
+        rooms: {
+          ...rooms,
+          [roomId]: {
+            ...roomInfo,
+            gameList,
+            userList
+          }
+        },
+
+        joined: {
+          ...joined,
+          [roomId]: true
+        },
+      }
+    }
+    case Types.LEAVE_ROOM: {
+      const { roomId } = action;
+      const { joined, messages } = state;
+
+      const _joined = {
+        ...joined
+      };
+
+      const _messages = {
+        ...messages
+      };
+
+      delete _joined[roomId];
+      delete _messages[roomId];
+
+      return {
+        ...state,
+
+        joined: _joined,
+        messages: _messages,
+      }
+    }
+    case Types.ADD_MESSAGE: {
+      const { roomId, message } = action;
+      const { messages } = state;
+
+      let roomMessages = [ ...(messages[roomId] || []) ];
+
+      if (roomMessages.length === MAX_ROOM_MESSAGES) {
+        roomMessages.shift();
+      }
+
+      message.timeReceived = new Date().getTime();
+      roomMessages.push(message);
+
+      return {
+        ...state,
+        messages: {
+          ...messages,
+
+          [roomId]: [
+            ...roomMessages
+          ]
+        }
+      }
+    }
+    // @TODO improve this reducer, likely by improving the store model
+    case Types.UPDATE_GAMES: {
+      const { roomId, games } = action;
+      const { rooms, sortGamesBy } = state;
+      const room = rooms[roomId];
+
+      if (!room) {
+        return { ...state };
+      }
+
+      // Create map of games with update objects
+      const toUpdate = games.reduce((map, game) => {
+        map[game.gameId] = game;
+        return map;
+      }, {});
+
+      const gameUpdates = room.gameList
+        // filter out closed games and remove from update map
+        .filter(game => {
+          const gameUpdate = toUpdate[game.gameId];
+          const closedGame = gameUpdate && gameUpdate.closed;
+
+          if (closedGame) {
+            delete toUpdate[game.gameId];
+          }
+
+          return !closedGame;
+        })
+        .map(game => {
+          const gameUpdate = toUpdate[game.gameId];
+
+          if (gameUpdate) {
+            delete toUpdate[game.gameId];
+
+            return {
+              ...game,
+              ...gameUpdate
+            };
+          }
+
+          return game;
+        });
+
+      // Push new games to end of list
+      if (_.size(toUpdate)) {
+        _.each(toUpdate, game => gameUpdates.push(game));
+      }
+
+      const gameList = [ ...gameUpdates ];
+
+      SortUtil.sortByField(gameList, sortGamesBy);
+
+      return {
+        ...state,
+        rooms: {
+          ...rooms,
+          [roomId]: {
+            ...room,
+            gameList
+          }
+        }
+      }
+    }
+    case Types.USER_JOINED: {
+      const { roomId, user } = action;
+      const { rooms, sortUsersBy } = state;
+
+      const room = { ...rooms[roomId] };
+
+      const userList = [
+        ...room.userList,
+        user
+      ];
+
+      SortUtil.sortUsersByField(userList, sortUsersBy);
+
+      return {
+        ...state,
+        rooms: {
+          ...rooms,
+          [roomId]: {
+            ...room,
+            userList
+          } 
+        }
+      };
+    }
+    case Types.USER_LEFT: {
+      const { roomId, name } = action;
+      const { rooms } = state;
+
+      const room = { ...rooms[roomId] };
+      const userList = room.userList.filter(user =>  user.name !== name);
+
+      return {
+        ...state,
+        rooms: {
+          ...rooms,
+          [roomId]: {
+            ...room,
+            userList
+          } 
+        }
+      };
+    }
+    case Types.SORT_GAMES: {
+      const { field, order, roomId } = action;
+      const { rooms } = state;
+
+      const gameList = [ ...rooms[roomId].gameList ];
+
+      const sortGamesBy = {
+        field, order
+      };
+
+      SortUtil.sortByField(gameList, sortGamesBy);
+
+      return {
+        ...state,
+
+        rooms: {
+          ...rooms,
+          [roomId]: {
+            ...rooms[roomId],
+            gameList
+          }
+        },
+
+        sortGamesBy
+      }
+    }
+    default:
+      return state;
+  }
+}

webclient/src/store/rooms/rooms.selectors.tsx

@@ -0,0 +1,26 @@
+import * as _ from "lodash";
+import { RoomsState } from "./rooms.interfaces";
+
+interface State {
+  rooms: RoomsState
+}
+
+export const Selectors = {
+  getRooms: ({ rooms }: State) => rooms.rooms,
+  getRoom: ({ rooms }: State, id: number) =>
+    _.find(rooms.rooms, ({roomId}) => roomId === id),
+  getJoined: ({ rooms }: State) => rooms.joined,
+  getMessages: ({ rooms }: State) => rooms.messages,
+  getSortGamesBy: ({ rooms: { sortGamesBy } }: State) => sortGamesBy,
+  getSortUsersBy: ({ rooms: { sortUsersBy } }: State) => sortUsersBy,
+
+  getJoinedRooms: (state: State) => {
+    const joined = Selectors.getJoined(state);
+    return _.filter(Selectors.getRooms(state), room => joined[room.roomId]);
+  },
+  getRoomMessages: (state: State, roomId: number) => Selectors.getMessages(state)[roomId],
+  getRoomGames: (state: State, roomId: number) => Selectors.getRooms(state)[roomId].gameList,
+  getRoomUsers: (state: State, roomId: number) => Selectors.getRooms(state)[roomId].userList
+
+}
+

webclient/src/store/rooms/rooms.types.tsx

@@ -0,0 +1,13 @@
+export const Types = {
+  CLEAR_STORE: "[Rooms] Clear Store",
+  UPDATE_ROOMS: "[Rooms] Update Rooms",
+  JOIN_ROOM: "[Rooms] Join Room",
+  LEAVE_ROOM: "[Rooms] Leave Room",
+  ADD_MESSAGE: "[Rooms] Add Message",
+  UPDATE_GAMES: "[Rooms] Update Games",
+  USER_JOINED: "[Rooms] User Joined",
+  USER_LEFT: "[Rooms] User Left",
+  SORT_GAMES: "[Rooms] Sort Games"
+};
+
+export const MAX_ROOM_MESSAGES = 1000;