Merge pull request #844 from sgfost/lobby-rework

most excellent lobby rework from @sgfost that supports flexible creation and management of game rooms

resolves #780 
resolves #810

client/src/App.vue

@@ -4,7 +4,7 @@
       <Navbar v-if="!isGamePage"></Navbar>
       <router-view
         :class="bodyClass"
-        :key="$route.path"
+        :key="topLevelPath"
       ></router-view>
     </b-row>
   </b-container>
@@ -18,7 +18,6 @@ import Footer from "@port-of-mars/client/components/global/Footer.vue";
 import { 
   GAME_PAGE,
   MANUAL_PAGE,
-  DASHBOARD_PAGE,
   LOBBY_PAGE,
   HOME_PAGE,
   ABOUT_PAGE,
@@ -34,19 +33,22 @@ Vue.use(BootstrapVue);
   }
 })
 export default class App extends Vue {
-  dashboard = { name: DASHBOARD_PAGE };
   game = { name: GAME_PAGE };
   manual = { name: MANUAL_PAGE };
   lobby = { name: LOBBY_PAGE };
   home = { name: HOME_PAGE };
   about = { name: ABOUT_PAGE };
   privacy = { name: PRIVACY_PAGE };
 
+  get topLevelPath() {
+    return this.$route.path.split("/")[1];
+  }
+
   get isGamePage() {
     if (_.isNil(this.$route.name)) {
       return false;
     } else {
-      return this.lobby.name === this.$route.name || this.game.name === this.$route.name;
+      return this.game.name === this.$route.name;
     }
   }
 
@@ -61,14 +63,6 @@ export default class App extends Vue {
     }
   }
 
-  get isDashboard() {
-    if (_.isNil(this.$route.name)) {
-      return false;
-    } else {
-      return this.dashboard.name === this.$route.name;
-    }
-  }
-
   get bodyClass() {
     return [
       { 'h-100': !this.isScrollable },

client/src/api/lobby/request.ts

@@ -1,11 +1,14 @@
-import { Room } from 'colyseus.js';
+import { Room } from "colyseus.js";
 import {
-  WaitingRequests,
+  LobbyRequest,
   AcceptInvitation,
-  DistributeGroups
-} from '@port-of-mars/shared/lobby/requests';
+  StartWithBots,
+  VoteStartWithBots,
+  StartSoloWithBots,
+  SendLobbyChatMessage,
+} from "@port-of-mars/shared/lobby/requests";
 
-export class WaitingRequestAPI {
+export class LobbyRequestAPI {
   room!: Room;
 
   connect(room: Room) {
@@ -18,17 +21,39 @@ export class WaitingRequestAPI {
     }
   }
 
-  public send(req: WaitingRequests) {
+  public send(req: LobbyRequest) {
     this.room.send(req.kind, req);
   }
 
   public acceptInvitation() {
-    const msg: AcceptInvitation = { kind: 'accept-invitation' };
+    const msg: AcceptInvitation = { kind: "accept-invitation" };
     this.send(msg);
   }
 
-  public distributeGroups() {
-    const msg: DistributeGroups = { kind: 'distribute-groups' };
+  public startWithBots() {
+    const msg: StartWithBots = { kind: "start-with-bots" };
     this.send(msg);
   }
+
+  public startSoloWithBots() {
+    const msg: StartSoloWithBots = { kind: "start-solo-with-bots" };
+    this.send(msg);
+  }
+
+  public voteStartWithBots(vote: boolean) {
+    const msg: VoteStartWithBots = {
+      kind: "vote-start-with-bots",
+      value: vote
+    };
+    this.send(msg);
+  }
+
+  public sendChatMessage(message: string) {
+    const msg: SendLobbyChatMessage = {
+      kind: "send-lobby-chat-message",
+      value: message,
+    };
+    this.send(msg);
+  }
+
 }

client/src/api/lobby/response.ts

@@ -1,31 +1,30 @@
 import { Room } from 'colyseus.js';
+import { DataChange, Schema } from "@colyseus/schema";
 import {
   JoinedClientQueue,
   SentInvitation,
   RemovedClientFromLobby,
-  JoinFailure, JoinExistingGame
+  JoinFailure, JoinExistingGame,
 } from '@port-of-mars/shared/lobby/responses';
-import { DASHBOARD_PAGE, GAME_PAGE } from '@port-of-mars/shared/routes';
-import Lobby from '@port-of-mars/client/views/Lobby.vue';
+import {
+  LobbyChatMessageData,
+  LobbyClientData,
+} from '@port-of-mars/shared/types'
+import { LOBBY_PAGE, GAME_PAGE } from '@port-of-mars/shared/routes';
 
-// TODO: Temporary Implementation
-const GAME_DATA = 'gameData';
-interface GameData {
-  roomId: string;
-  sessionId: string;
-}
+type Schemify<T> = T & Schema;
 
-// TODO: Temporary Implementation
-function setGameData(data: GameData) {
-  localStorage.setItem(GAME_DATA, JSON.stringify(data));
+function deschemify<T>(s: Schemify<T>): T {
+  return s.toJSON() as T;
 }
 
-export function applyWaitingServerResponses<T>(
+export function applyLobbyResponses<T>(
   room: Room,
-  component: Lobby
+  component: any
 ) {
   const store = component.$tstore;
   const router = component.$router;
+
   room.onError((code: number, message?: string) => {
     console.log(`Error ${code} occurred in room: ${message} `);
     alert(
@@ -39,34 +38,42 @@ export function applyWaitingServerResponses<T>(
 
   room.onMessage('join-failure', (msg: JoinFailure) => {
     store.commit('SET_DASHBOARD_MESSAGE', { kind: 'warning', message: msg.reason});
-    router.push({ name: DASHBOARD_PAGE });
+    router.push({ name: LOBBY_PAGE });
   });
 
-  room.onMessage('joined-client-queue', (msg: JoinedClientQueue) => {
-    (component as any).joinedQueue = msg.value;
-  });
   room.onMessage('sent-invitation', (msg: SentInvitation) => {
     component.$ajax.roomId = msg.roomId;
-    room.send('accept-invitation', { kind: 'accept-invitation' });
+    store.commit('SET_LOBBY_READINESS', true);
+    setTimeout(() => {
+      room.send('accept-invitation', { kind: 'accept-invitation' });
+    }, 5 * 1000);
   });
+
   room.onMessage('removed-client-from-lobby', (msg: RemovedClientFromLobby) => {
-    console.log('Removed client from lobby (currently a NO-OP).');
     router.push({ name: GAME_PAGE });
   });
+
   room.onMessage('join-existing-game', (msg: JoinExistingGame) => {
     router.push({ name: GAME_PAGE });
-  })
+  });
 
-  room.state.onChange = (changes: Array<any>) => {
-    changes.forEach((change) => {
-      switch (change.field) {
-        case 'nextAssignmentTime':
-          (component as any).nextAssignmentTime = change.value;
-          break;
-        case 'waitingUserCount':
-          (component as any).waitingUserCount = change.value;
-          break;
-      }
-    });
+  room.state.clients.onAdd = (e: Schemify<LobbyClientData>, key: string) => {
+    store.commit('ADD_TO_LOBBY_CLIENTS', deschemify(e));
+    e.onChange = (changes: DataChange[]) => {
+      changes.forEach(change => {
+        if (change.field === 'ready') {
+          store.commit('SET_LOBBY_CLIENT_READINESS', { client: deschemify(e), ready: change.value });
+        }
+      });
+    }
+  };
+
+  room.state.clients.onRemove = (e: Schemify<LobbyClientData>, key: string) => {
+    store.commit('REMOVE_FROM_LOBBY_CLIENTS', deschemify(e));
   };
+
+  room.state.chat.onAdd = (e: Schemify<LobbyChatMessageData>, key: string) => {
+    store.commit('ADD_TO_LOBBY_CHAT', deschemify(e));
+  }
+
 }

client/src/components/game/static/popups/ProfileMenu.vue

@@ -6,10 +6,10 @@
     </button>
     <div class="wrapper" v-show="profileMenuVisible">
       <p>Logged in as {{ username }}</p>
-      <router-link :to="dashboard" class="link">
+      <router-link :to="lobby" class="link">
         <button>
           <b-icon-person-fill></b-icon-person-fill>
-          <span>Your Dashboard</span>
+          <span>Return to Lobby</span>
         </button>
       </router-link>
       <button @click="logoutUser" class="link">
@@ -42,7 +42,7 @@
 import { Vue, Component, Inject } from "vue-property-decorator";
 import { GameRequestAPI } from "@port-of-mars/client/api/game/request";
 import { isDev, isStaging } from "@port-of-mars/shared/settings";
-import { DASHBOARD_PAGE } from "@port-of-mars/shared/routes";
+import { LOBBY_PAGE } from "@port-of-mars/shared/routes";
 
 @Component({
   components: {}
@@ -51,9 +51,7 @@ export default class ProfileMenu extends Vue {
   @Inject() readonly api!: GameRequestAPI;
   devtoolsEnabled: boolean = false;
 
-  get dashboard() {
-    return { name: DASHBOARD_PAGE };
-  }
+  lobby = { name: LOBBY_PAGE };
 
   get profileMenuVisible() {
     return this.$tstore.state.userInterface.profileMenuView.visible;

client/src/components/dashboard/Consent.vue → client/src/components/global/Consent.vue

@@ -179,8 +179,8 @@
 import { Component, Vue } from "vue-property-decorator";
 import { url } from "@port-of-mars/client/util";
 import { Constants } from "@port-of-mars/shared/settings";
-import { DASHBOARD_PAGE } from "@port-of-mars/shared/routes";
-import Messages from "@port-of-mars/client/components/dashboard/Messages.vue";
+import { LOBBY_PAGE } from "@port-of-mars/shared/routes";
+import Messages from "@port-of-mars/client/components/global/Messages.vue";
 import _ from "lodash";
 
 @Component({
@@ -261,9 +261,9 @@ export default class Consent extends Vue {
             // temporarily disable verification
             this.isVerificationDisabled = true;
             this.hasConsented = true;
-            // if user is already verified (mostly for dev mode), redirect to dashboard
+            // if user is already verified (mostly for dev mode), redirect to lobby
             if (this.isVerified) {
-              this.$router.push({ name: DASHBOARD_PAGE });
+              this.$router.push({ name: LOBBY_PAGE });
             }
             else {
               this.$tstore.commit("SET_DASHBOARD_MESSAGE", {

client/src/components/global/Footer.vue

@@ -12,7 +12,7 @@ ccarra1@asu.edu
           <b-link :to="login" title="Sign up or login">Sign In</b-link>
         </li>
         <li>
-          <b-link :to="dashboard" title="Play Port of Mars">Player Dashboard</b-link>
+          <b-link :to="lobby" title="Play Port of Mars">Game Lobby</b-link>
         </li>
         <li>
           <b-link :to="manual" title="User Manual">How to Play</b-link>
@@ -94,7 +94,7 @@ import { Component, Vue } from "vue-property-decorator";
 import { Constants } from "@port-of-mars/shared/settings";
 import {
   LOGIN_PAGE,
-  DASHBOARD_PAGE,
+  LOBBY_PAGE,
   REGISTER_PAGE,
   MANUAL_PAGE,
   PRIVACY_PAGE,
@@ -103,10 +103,10 @@ import {
 @Component({})
 export default class Footer extends Vue {
   currentYear = new Date().getFullYear();
-  dashboard = { name: DASHBOARD_PAGE };
   consent = { name: REGISTER_PAGE };
   manual = { name: MANUAL_PAGE };
   login = { name: LOGIN_PAGE };
+  lobby = { name: LOBBY_PAGE };
   privacy = { name: PRIVACY_PAGE };
 
   get constants() {

client/src/components/global/Navbar.vue

@@ -39,9 +39,9 @@
         >Manual</b-nav-item>
         <b-nav-item
           class="mx-2"
-          :to="dashboard"
+          :to="lobby"
           exact-active-class="active"
-          title="Player Dashboard"
+          title="Game Lobby"
         >Play</b-nav-item>
       </b-navbar-nav>
       <b-navbar-nav class="ml-auto">
@@ -84,7 +84,6 @@
 import { Component, Prop, Vue } from "vue-property-decorator";
 import {
   ADMIN_PAGE,
-  DASHBOARD_PAGE,
   HOME_PAGE,
   ABOUT_PAGE,
   LOGIN_PAGE,
@@ -111,7 +110,6 @@ export default class Header extends Vue {
   readonly SITE_URL = "https://portofmars.asu.edu";
 
   admin = { name: ADMIN_PAGE };
-  dashboard = { name: DASHBOARD_PAGE };
   consent = { name: REGISTER_PAGE };
   home = { name: HOME_PAGE };
   about = { name: ABOUT_PAGE };
@@ -134,7 +132,6 @@ export default class Header extends Vue {
   }
 
   get username() {
-    console.log("store user: ", this.$tstore.state.user);
     return this.$tstore.state.user.username;
   }