Merge pull request #904 from sgfost/tournament-mode

- add preliminary tournament lobby and dashboard with onboarding and schedules
- add tournament banner to the landing page when tournaments are enabled
- add tournament participation links to the navbar, landing page, and footer when tournaments are enabled

client/src/App.vue

@@ -15,7 +15,7 @@ import Footer from "@port-of-mars/client/components/global/Footer.vue";
 import {
   GAME_PAGE,
   MANUAL_PAGE,
-  LOBBY_PAGE,
+  FREE_PLAY_LOBBY_PAGE,
   HOME_PAGE,
   ABOUT_PAGE,
   PRIVACY_PAGE,
@@ -32,7 +32,7 @@ Vue.use(BootstrapVue);
 export default class App extends Vue {
   game = { name: GAME_PAGE };
   manual = { name: MANUAL_PAGE };
-  lobby = { name: LOBBY_PAGE };
+  freePlayLobby = { name: FREE_PLAY_LOBBY_PAGE };
   home = { name: HOME_PAGE };
   about = { name: ABOUT_PAGE };
   privacy = { name: PRIVACY_PAGE };

client/src/api/lobby/request.ts

@@ -30,6 +30,16 @@ export class LobbyRequestAPI {
     this.send(msg);
   }
 
+  public sendChatMessage(message: string) {
+    const msg: SendLobbyChatMessage = {
+      kind: "send-lobby-chat-message",
+      value: message,
+    };
+    this.send(msg);
+  }
+}
+
+export class FreePlayLobbyRequestAPI extends LobbyRequestAPI {
   public startWithBots() {
     const msg: StartWithBots = { kind: "start-with-bots" };
     this.send(msg);
@@ -47,12 +57,6 @@ export class LobbyRequestAPI {
     };
     this.send(msg);
   }
-
-  public sendChatMessage(message: string) {
-    const msg: SendLobbyChatMessage = {
-      kind: "send-lobby-chat-message",
-      value: message,
-    };
-    this.send(msg);
-  }
 }
+
+export class TournamentLobbyRequestAPI extends LobbyRequestAPI {}

client/src/api/lobby/response.ts

@@ -1,19 +1,25 @@
 import { Room } from "colyseus.js";
 import { DataChange, Schema } from "@colyseus/schema";
 import { SentInvitation, JoinFailure } from "@port-of-mars/shared/lobby/responses";
-import { LobbyChatMessageData, LobbyClientData } from "@port-of-mars/shared/types";
-import { LOBBY_PAGE, GAME_PAGE } from "@port-of-mars/shared/routes";
+import { LobbyChatMessageData, LobbyClientData, LobbyType } from "@port-of-mars/shared/types";
+import {
+  FREE_PLAY_LOBBY_PAGE,
+  GAME_PAGE,
+  TOURNAMENT_LOBBY_PAGE,
+} from "@port-of-mars/shared/routes";
 
 type Schemify<T> = T & Schema;
 
 function deschemify<T>(s: Schemify<T>): T {
   return s.toJSON() as T;
 }
 
-export function applyLobbyResponses(room: Room, component: any) {
+export function applyLobbyResponses(room: Room, component: any, lobbyType: LobbyType) {
   const store = component.$tstore;
   const router = component.$router;
 
+  store.commit("SET_LOBBY_TYPE", lobbyType);
+
   room.onError((code: number, message?: string) => {
     console.log(`Error ${code} occurred in room: ${message} `);
     alert("sorry, we encountered an error, please try refreshing the page or contact us");
@@ -25,15 +31,22 @@ export function applyLobbyResponses(room: Room, component: any) {
 
   room.onMessage("join-failure", (msg: JoinFailure) => {
     store.commit("SET_DASHBOARD_MESSAGE", { kind: "warning", message: msg.reason });
-    router.push({ name: LOBBY_PAGE });
+    router.push({
+      name: lobbyType === "freeplay" ? FREE_PLAY_LOBBY_PAGE : TOURNAMENT_LOBBY_PAGE,
+    });
   });
 
   room.onMessage("sent-invitation", (msg: SentInvitation) => {
     component.$ajax.roomId = msg.roomId;
-    store.commit("SET_LOBBY_READINESS", true);
-    setTimeout(() => {
+    // set ready and wait for freeplay, in a tournament we just put them right into a game
+    if (lobbyType === "freeplay") {
+      store.commit("SET_LOBBY_READINESS", true);
+      setTimeout(() => {
+        room.send("accept-invitation", { kind: "accept-invitation" });
+      }, 5 * 1000);
+    } else {
       room.send("accept-invitation", { kind: "accept-invitation" });
-    }, 5 * 1000);
+    }
   });
 
   room.onMessage("removed-client-from-lobby", () => {

client/src/api/tournament/request.ts

@@ -0,0 +1,28 @@
+import { url } from "@port-of-mars/client/util";
+import { TournamentRoundInviteStatus, TournamentStatus } from "@port-of-mars/shared/types";
+import { TStore } from "@port-of-mars/client/plugins/tstore";
+import { AjaxRequest } from "@port-of-mars/client/plugins/ajax";
+
+export class TournamentAPI {
+  constructor(public store: TStore, public ajax: AjaxRequest) {}
+
+  async getTournamentStatus(): Promise<TournamentStatus> {
+    try {
+      return this.ajax.get(url("/tournament/status"), ({ data }) => data);
+    } catch (e) {
+      console.log("Unable to get tournament status");
+      console.log(e);
+      throw e;
+    }
+  }
+
+  async getInviteStatus(): Promise<TournamentRoundInviteStatus> {
+    try {
+      return this.ajax.get(url("/tournament/invite-status"), ({ data }) => data);
+    } catch (e) {
+      console.log("Unable to get tournament round invite status");
+      console.log(e);
+      throw e;
+    }
+  }
+}

client/src/components/game/phases/Investments.vue

@@ -41,7 +41,7 @@
           <div class="h-100 p-2 scrollable">
             <AccomplishmentCard
               v-for="accomplishment in purchasableAccomplishments"
-              :key="accomplishment.label + Math.random()"
+              :key="accomplishment.id"
               :accomplishment="accomplishment"
               :enableModal="true"
             ></AccomplishmentCard>

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

@@ -6,7 +6,7 @@
     </button>
     <div class="wrapper" v-show="profileMenuVisible">
       <p>Logged in as {{ username }}</p>
-      <router-link :to="lobby" class="link">
+      <router-link :to="freePlayLobby" class="link">
         <button>
           <b-icon-person-fill></b-icon-person-fill>
           <span>Return to Lobby</span>
@@ -40,7 +40,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 { LOBBY_PAGE } from "@port-of-mars/shared/routes";
+import { FREE_PLAY_LOBBY_PAGE } from "@port-of-mars/shared/routes";
 
 @Component({
   components: {},
@@ -49,7 +49,7 @@ export default class ProfileMenu extends Vue {
   @Inject() readonly api!: GameRequestAPI;
   devtoolsEnabled: boolean = false;
 
-  lobby = { name: LOBBY_PAGE };
+  freePlayLobby = { name: FREE_PLAY_LOBBY_PAGE };
 
   get profileMenuVisible() {
     return this.$tstore.state.userInterface.profileMenuView.visible;

client/src/components/global/Countdown.vue

@@ -1,15 +1,19 @@
 <template>
   <div class="countdown">
     <div class="countdown-block">
-      <div class="countdown-digit">{{ format(hours) }}</div>
+      <div class="countdown-digit" :style="`font-size: ${size}rem`">{{ format(days) }}</div>
+      <div class="countdown-unit">Days</div>
+    </div>
+    <div class="countdown-block">
+      <div class="countdown-digit" :style="`font-size: ${size}rem`">{{ format(hours) }}</div>
       <div class="countdown-unit">Hrs</div>
     </div>
     <div class="countdown-block">
-      <div class="countdown-digit">{{ format(minutes) }}</div>
+      <div class="countdown-digit" :style="`font-size: ${size}rem`">{{ format(minutes) }}</div>
       <div class="countdown-unit">Min</div>
     </div>
     <div class="countdown-block">
-      <div class="countdown-digit">{{ format(seconds) }}</div>
+      <div class="countdown-digit" :style="`font-size: ${size}rem`">{{ format(seconds) }}</div>
       <div class="countdown-unit">Sec</div>
     </div>
   </div>
@@ -23,6 +27,9 @@ export default class Countdown extends Vue {
   @Prop({ default: 0 })
   nextLaunch!: number;
 
+  @Prop({ default: 3 })
+  size!: number;
+
   secondInterval = 0;
   now: number = Math.trunc(Date.now() / 1000);
 
@@ -44,7 +51,11 @@ export default class Countdown extends Vue {
   }
 
   get hours() {
-    return Math.trunc(this.secondsUntilLaunch / 60 / 60);
+    return Math.trunc(this.secondsUntilLaunch / 60 / 60) % 24;
+  }
+
+  get days() {
+    return Math.trunc(this.secondsUntilLaunch / 60 / 60 / 24);
   }
 
   mounted() {
@@ -74,36 +85,28 @@ export default class Countdown extends Vue {
 }
 
 .countdown-block {
+  background-color: rgba(255, 255, 255, 0.05);
   text-align: center;
-  padding: 0px 15px;
+  margin: 0.5rem;
+  padding: 0.75rem;
+  padding-bottom: 0.5rem;
+  border-radius: 0.25rem;
   position: relative;
   &:first-child {
-    padding-left: 0;
     .countdown-digit {
       &:before {
         display: none;
       }
     }
   }
-  &:last-child {
-    padding-right: 0;
-  }
 }
 
 .countdown-digit {
-  font-size: 500%;
   font-weight: bold;
   line-height: 1;
-  margin-bottom: 5px;
-  &:before {
-    content: ":";
-    position: absolute;
-    left: -10px;
-  }
 }
 
 .countdown-unit {
   text-transform: uppercase;
-  margin-bottom: 5px;
 }
 </style>

client/src/components/global/Footer.vue

@@ -15,7 +15,14 @@ [email protected]
           <b-link :to="solo" title="Solo Mode">Solo Mode</b-link>
         </li>
         <li>
-          <b-link :to="lobby" title="Play Port of Mars">Play Port of Mars</b-link>
+          <b-link v-if="isFreePlayEnabled" :to="freePlayLobby" title="Port of Mars Free Play"
+            >Free Play</b-link
+          >
+        </li>
+        <li>
+          <b-link v-if="isTournamentEnabled" :to="tournamentDashboard" title="Join Mars Madness"
+            >Join Mars Madness</b-link
+          >
         </li>
         <li>
           <b-link :to="manual" title="User Manual">How to Play</b-link>
@@ -97,11 +104,12 @@ import { Component, Vue } from "vue-property-decorator";
 import { Constants } from "@port-of-mars/shared/settings";
 import {
   LOGIN_PAGE,
-  LOBBY_PAGE,
+  FREE_PLAY_LOBBY_PAGE,
   CONSENT_PAGE,
   MANUAL_PAGE,
   PRIVACY_PAGE,
   SOLO_GAME_PAGE,
+  TOURNAMENT_DASHBOARD_PAGE,
 } from "@port-of-mars/shared/routes";
 
 @Component({})
@@ -110,13 +118,22 @@ export default class Footer extends Vue {
   consent = { name: CONSENT_PAGE };
   manual = { name: MANUAL_PAGE };
   login = { name: LOGIN_PAGE };
-  lobby = { name: LOBBY_PAGE };
+  freePlayLobby = { name: FREE_PLAY_LOBBY_PAGE };
+  tournamentDashboard = { name: TOURNAMENT_DASHBOARD_PAGE };
   privacy = { name: PRIVACY_PAGE };
   solo = { name: SOLO_GAME_PAGE };
 
   get constants() {
     return Constants;
   }
+
+  get isTournamentEnabled() {
+    return this.$tstore.state.isTournamentEnabled;
+  }
+
+  get isFreePlayEnabled() {
+    return this.$tstore.state.isFreePlayEnabled;
+  }
 }
 </script>