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

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

webclient/src/store/server/server.actions.tsx

@@ -0,0 +1,73 @@
+import { Types } from "./server.types";
+
+export const Actions = {
+  clearStore: () => ({
+    type: Types.CLEAR_STORE
+  }),
+  connectServer: () => ({
+    type: Types.CONNECT_SERVER
+  }),
+  connectionClosed: reason => ({
+    type: Types.CONNECTION_CLOSED,
+    reason
+  }),
+  serverMessage: message => ({
+    type: Types.SERVER_MESSAGE,
+    message
+  }),
+  updateBuddyList: buddyList => ({
+    type: Types.UPDATE_BUDDY_LIST,
+    buddyList
+  }),
+  addToBuddyList: user => ({
+    type: Types.ADD_TO_BUDDY_LIST,
+    user
+  }),
+  removeFromBuddyList: userName => ({
+    type: Types.REMOVE_FROM_BUDDY_LIST,
+    userName
+  }),
+  updateIgnoreList: ignoreList => ({
+    type: Types.UPDATE_IGNORE_LIST,
+    ignoreList
+  }),
+  addToIgnoreList: user => ({
+    type: Types.ADD_TO_IGNORE_LIST,
+    user
+  }),
+  removeFromIgnoreList: userName => ({
+    type: Types.REMOVE_FROM_IGNORE_LIST,
+    userName
+  }),
+  updateInfo: info => ({
+    type: Types.UPDATE_INFO,
+    info
+  }),
+  updateStatus: status => ({
+    type: Types.UPDATE_STATUS,
+    status
+  }),
+  updateUser: user => ({
+    type: Types.UPDATE_USER,
+    user
+  }),
+  updateUsers: users => ({
+    type: Types.UPDATE_USERS,
+    users
+  }),
+  userJoined: user => ({
+    type: Types.USER_JOINED,
+    user
+  }),
+  userLeft: name => ({
+    type: Types.USER_LEFT,
+    name
+  }),
+  viewLogs: logs => ({
+    type: Types.VIEW_LOGS,
+    logs
+  }),
+  clearLogs: () => ({
+    type: Types.CLEAR_LOGS
+  })
+}

webclient/src/store/server/server.dispatch.tsx

@@ -0,0 +1,68 @@
+import { reset } from 'redux-form';
+import { Actions } from "./server.actions";
+import { store } from "../store";
+
+export const Dispatch = {
+  clearStore: () => {
+    store.dispatch(Actions.clearStore());
+  },
+  connectServer: () => {
+    store.dispatch(Actions.connectServer());
+  },
+  connectionClosed: reason => {
+    store.dispatch(Actions.connectionClosed(reason));
+  },
+  updateBuddyList: buddyList => {
+    store.dispatch(Actions.updateBuddyList(buddyList));
+  },
+  addToBuddyList: user => {
+    store.dispatch(reset('addToBuddies'));
+    store.dispatch(Actions.addToBuddyList(user));
+  },
+  removeFromBuddyList: userName => {
+    store.dispatch(Actions.removeFromBuddyList(userName));
+  },
+  updateIgnoreList: ignoreList => {
+    store.dispatch(Actions.updateIgnoreList(ignoreList));
+  },
+  addToIgnoreList: user => {
+    store.dispatch(reset('addToIgnore'));
+    store.dispatch(Actions.addToIgnoreList(user));
+  },
+  removeFromIgnoreList: userName => {
+    store.dispatch(Actions.removeFromIgnoreList(userName));
+  },
+  updateInfo: (name, version) => {
+    store.dispatch(Actions.updateInfo({
+      name,
+      version
+    }));
+  },
+  updateStatus: (state, description) => {
+    store.dispatch(Actions.updateStatus({
+      state,
+      description
+    }));
+  },
+  updateUser: user => {
+    store.dispatch(Actions.updateUser(user));
+  },
+  updateUsers: users => {
+    store.dispatch(Actions.updateUsers(users));
+  },
+  userJoined: user => {
+    store.dispatch(Actions.userJoined(user));
+  },
+  userLeft: name => {
+    store.dispatch(Actions.userLeft(name));
+  },
+  viewLogs: name => {
+    store.dispatch(Actions.viewLogs(name));
+  },
+  clearLogs: () => {
+    store.dispatch(Actions.clearLogs());
+  },
+  serverMessage: message => {
+    store.dispatch(Actions.serverMessage(message));
+  }
+}

webclient/src/store/server/server.interfaces.tsx

@@ -0,0 +1,40 @@
+import { Log, SortBy, User, UserSortField } from "types";
+
+export interface ServerConnectParams {
+  host: string;
+  port: string;
+  user: string;
+  pass: string;
+}
+
+export interface ServerState {
+  buddyList: User[];
+  ignoreList: User[];
+  info: ServerStateInfo;
+  status: ServerStateStatus;
+  logs: ServerStateLogs;
+  user: User;
+  users: User[];
+  sortUsersBy: ServerStateSortUsersBy;
+}
+
+export interface ServerStateStatus {
+  description: string;
+  state: number;
+}
+
+export interface ServerStateInfo {
+  message: string;
+  name: string;
+  version: string;
+}
+
+export interface ServerStateLogs {
+  room: Log[];
+  game: Log[];
+  chat: Log[];
+}
+
+export interface ServerStateSortUsersBy extends SortBy {
+  field: UserSortField
+}

webclient/src/store/server/server.reducer.tsx

@@ -0,0 +1,210 @@
+import { SortDirection, StatusEnum, UserSortField } from "types";
+
+import { SortUtil } from "../common";
+
+import { ServerState } from "./server.interfaces"
+import { Types } from "./server.types";
+
+const initialState: ServerState = {
+  buddyList: [],
+  ignoreList: [],
+
+  status: {
+    state: StatusEnum.DISCONNECTED,
+    description: null
+  },
+  info: {
+    message: null,
+    name: null,
+    version: null
+  },
+  logs: {
+    room: [],
+    game: [],
+    chat: []
+  },
+  user: null,
+  users: [],
+  sortUsersBy: {
+    field: UserSortField.NAME,
+    order: SortDirection.ASC
+  }
+};
+
+export const serverReducer = (state = initialState, action: any) => {
+  switch(action.type) {
+    case Types.CLEAR_STORE: {
+      return {
+        ...initialState,
+        status: {
+          ...state.status
+        }
+      }
+    }
+    case Types.SERVER_MESSAGE: {
+      const { message } = action;
+      const { info } = state;
+
+      return {
+        ...state,
+        info: { ...info, message }
+      }
+    }
+    case Types.UPDATE_BUDDY_LIST: {
+      const { buddyList } = action;
+      const { sortUsersBy } = state;
+
+      SortUtil.sortUsersByField(buddyList, sortUsersBy);
+
+      return {
+        ...state,
+        buddyList: [
+          ...buddyList
+        ]
+      };
+    }
+    case Types.ADD_TO_BUDDY_LIST: {
+      const { user } = action;
+      const { sortUsersBy } = state;
+
+      const buddyList = [ ...state.buddyList ];
+
+      buddyList.push(user);
+      SortUtil.sortUsersByField(buddyList, sortUsersBy);
+
+      return {
+        ...state,
+        buddyList
+      };
+    }
+    case Types.REMOVE_FROM_BUDDY_LIST: {
+      const { userName } = action;
+      const buddyList = state.buddyList.filter(user => user.name !== userName);
+
+      return {
+        ...state,
+        buddyList
+      };
+    }
+    case Types.UPDATE_IGNORE_LIST: {
+      const { ignoreList } = action;
+      const { sortUsersBy } = state;
+
+      SortUtil.sortUsersByField(ignoreList, sortUsersBy);
+
+      return {
+        ...state,
+        ignoreList: [
+          ...ignoreList
+        ]
+      };
+    }
+    case Types.ADD_TO_IGNORE_LIST: {
+      const { user } = action;
+      const { sortUsersBy } = state;
+
+      const ignoreList = [ ...state.ignoreList ];
+
+      ignoreList.push(user);
+      SortUtil.sortUsersByField(ignoreList, sortUsersBy);
+
+      return {
+        ...state,
+        ignoreList
+      };
+    }
+    case Types.REMOVE_FROM_IGNORE_LIST: {
+      const { userName } = action;
+      const ignoreList = state.ignoreList.filter(user => user.name !== userName);
+      
+      return {
+        ...state,
+        ignoreList
+      };
+    }
+    case Types.UPDATE_INFO: {
+      const { name, version } = action.info;
+      const { info } = state;
+      
+      return {
+        ...state,
+        info: { ...info, name, version }
+      }
+    }
+    case Types.UPDATE_STATUS: {
+      const { status } = action;
+
+      return {
+        ...state,
+        status: { ...status }
+      }
+    }
+    case Types.UPDATE_USER: {
+      const { user } = action;
+
+      return {
+        ...state,
+        user: {
+          ...state.user,
+          ...user
+        }
+      }
+    }
+    case Types.UPDATE_USERS: {
+      const users = [ ...action.users ];
+      const { sortUsersBy } = state;
+
+
+      SortUtil.sortUsersByField(users, sortUsersBy);
+
+      return {
+        ...state,
+        users
+      };
+    }
+    case Types.USER_JOINED: {
+      const { sortUsersBy } = state;
+
+      const users = [
+        ...state.users,
+        { ...action.user }
+      ];
+
+      SortUtil.sortUsersByField(users, sortUsersBy);
+
+      return {
+        ...state,
+        users 
+      };
+    }
+    case Types.USER_LEFT: {
+      const { name } = action;
+      const users = state.users.filter(user => user.name !== name);
+
+      return {
+        ...state,
+        users
+      };
+    }
+    case Types.VIEW_LOGS: {
+      const { logs } = action;
+
+      return {
+        ...state,
+        logs: {
+          ...logs
+        }
+      };
+    }
+    case Types.CLEAR_LOGS: {
+      return {
+        ...state,
+        logs: {
+          ...initialState.logs
+        }
+      }
+    }
+    default:
+      return state;
+  }
+}

webclient/src/store/server/server.selectors.tsx

@@ -0,0 +1,18 @@
+import { ServerState } from "./server.interfaces";
+
+interface State {
+  server: ServerState
+}
+
+export const Selectors = {
+  getMessage: ({ server }: State) => server.info.message,
+  getName: ({ server }: State) => server.info.name,
+  getVersion: ({ server }: State) => server.info.version,
+  getDescription: ({ server }: State) => server.status.description,
+  getState: ({ server }: State) => server.status.state,
+  getUser: ({ server }: State) => server.user,
+  getUsers: ({ server }: State) => server.users,
+  getLogs: ({ server }: State) => server.logs,
+  getBuddyList: ({ server }: State) => server.buddyList,
+  getIgnoreList: ({ server }: State) => server.ignoreList
+}

webclient/src/store/server/server.types.tsx

@@ -0,0 +1,20 @@
+export const Types = {
+  CLEAR_STORE: "[Server] Clear Store",
+  CONNECT_SERVER: "[Server] Connect Server",
+  CONNECTION_CLOSED: "[Server] Connection Closed",
+  SERVER_MESSAGE: "[Server] Server Message",
+  UPDATE_BUDDY_LIST: "[Server] Update Buddy List",
+  ADD_TO_BUDDY_LIST: "[Server] Add to Buddy List",
+  REMOVE_FROM_BUDDY_LIST: "[Server] Remove from Buddy List",
+  UPDATE_IGNORE_LIST: "[Server] Update Ignore List",
+  ADD_TO_IGNORE_LIST: "[Server] Add to Ignore List",
+  REMOVE_FROM_IGNORE_LIST: "[Server] Remove from Ignore List",
+  UPDATE_INFO: "[Server] Update Info",
+  UPDATE_STATUS: "[Server] Update Status",
+  UPDATE_USER: "[Server] Update User",
+  UPDATE_USERS: "[Server] Update Users",
+  USER_JOINED: "[Server] User Joined",
+  USER_LEFT: "[Server] User Left",
+  VIEW_LOGS: "[Server] View Logs",
+  CLEAR_LOGS: "[Server] Clear Logs"
+};