refactor: minor hygiene

- guard against empty leaderboard errors
- add event description back to calendar-event
- build a single event object and reuse for multiple links
- improve :key usage though maybe we don't even need them anymore,
  see https://v3-migration.vuejs.org/breaking-changes/key-attribute.html
- 404 errors in the ajax plugin now redirect to HOME_PAGE, not
  FREE_PLAY_LOBBY_PAGE
- remove dead code + yarn style:fix

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/global/Navbar.vue

@@ -113,7 +113,6 @@ import {
   TOURNAMENT_DASHBOARD_PAGE,
 } from "@port-of-mars/shared/routes";
 import { Constants } from "@port-of-mars/shared/settings";
-import _ from "lodash";
 
 @Component({})
 export default class Navbar extends Vue {

client/src/components/global/Schedule.vue

@@ -67,16 +67,18 @@ export default class Schedule extends Vue {
     // could use a Map<string, object> also
     const grouped: LaunchTimes = {};
     for (const time of launchTimes) {
-      const dateStr = new Date(time).toLocaleDateString([], {
+      const launchDate = new Date(time);
+      const dateStr = launchDate.toLocaleDateString([], {
         weekday: "long",
         month: "long",
         day: "numeric",
       });
       if (!grouped[dateStr]) {
         grouped[dateStr] = [];
       }
-      const googleInviteURL = this.buildGoogleInviteLink(new Date(time));
-      const icsInviteURL = this.buildIcsInviteLink(new Date(time));
+      const calendarEvent = this.buildCalendarEvent(launchDate);
+      const googleInviteURL = google(calendarEvent);
+      const icsInviteURL = ics(calendarEvent);
       grouped[dateStr].push({
         date: new Date(time),
         googleInviteURL,
@@ -86,22 +88,22 @@ export default class Schedule extends Vue {
     return grouped;
   }
 
-  buildGoogleInviteLink(start: Date) {
-    return google({
-      title: `Port of Mars Launch`,
-      location: Schedule.SITE_URL,
-      start,
-      duration: [1, "hour"],
-    });
+  get calendarEventDescription() {
+    return (
+      `Register and complete all Port of Mars onboarding tasks at ${Schedule.SITE_URL} ASAP. \n\n` +
+      `Sign in and join the tournament lobby up to 10 minutes before launch time. \n\n` +
+      `Games will automatically start when at least 5 players are connected to the game lobby.`
+    );
   }
 
-  buildIcsInviteLink(start: Date) {
-    return ics({
-      title: `Port of Mars Launch`,
+  buildCalendarEvent(start: Date) {
+    return {
+      title: `Port of Mars Mars Madness Launch`,
       location: Schedule.SITE_URL,
       start,
+      description: this.calendarEventDescription,
       duration: [1, "hour"],
-    });
+    };
   }
 
   formatTime(date: Date) {

client/src/components/global/TournamentOnboardingSteps.vue

@@ -3,19 +3,12 @@
     <div class="d-flex align-items-center flex-shrink-1">
       <div class="flex-shrink-1 mr-5">
         <h2 class="mb-0">
-          <b-icon-check-circle
-            v-if="$tstore.getters.hasConsented"
-            variant="success"
-          ></b-icon-check-circle>
+          <b-icon-check-circle v-if="hasConsented" variant="success"></b-icon-check-circle>
           <b-icon-x-circle v-else variant="secondary"></b-icon-x-circle>
         </h2>
       </div>
       <div class="flex-grow-1">
-        <b-button
-          variant="primary"
-          :disabled="$store.getters.hasConsented"
-          :to="consent"
-          class="w-100"
+        <b-button variant="primary" :disabled="hasConsented" :to="consent" class="w-100"
           ><h4 class="mb-0">Grant Consent</h4></b-button
         >
       </div>
@@ -83,12 +76,8 @@ export default class TournamentOnboardingSteps extends Vue {
     return this.$tstore.getters.tournamentStatus;
   }
 
-  get shortMonthYear() {
-    const date = new Date(this.$tstore.getters.nextLaunchTime ?? 0);
-    return date.toLocaleDateString("en-US", {
-      month: "short",
-      year: "numeric",
-    });
+  get hasConsented() {
+    return this.$store.getters.hasConsented;
   }
 }
 </script>

client/src/components/lobby/LobbyChat.vue

@@ -1,7 +1,11 @@
 <template>
   <div id="chat" class="h-100 d-flex flex-column">
     <div id="messages" class="flex-grow-1 d-flex flex-column-reverse justify-content-start p-2">
-      <div v-for="msg in reversedMessages" :key="msg.dateCreated" class="mt-2 backdrop rounded p-1">
+      <div
+        v-for="msg in reversedMessages"
+        :key="msg.username + msg.dateCreated"
+        class="mt-2 backdrop rounded p-1"
+      >
         <p class="mb-0">
           <b class="text-light">{{ msg.username }}: </b>
           <span class="text-secondary">{{ msg.message }}</span>

client/src/components/stats/LeaderboardTable.vue

@@ -12,6 +12,7 @@
     sort-by="rank"
     :sort-asc="true"
     sort-icon-left
+    show-empty
   >
     <!-- headers -->
     <template #head(username)> Player </template>
@@ -44,6 +45,7 @@
     <template #cell(totalGames)="data">
       {{ getTotalGamesPlayed(data.item) }}
     </template>
+    <template #empty> No players found. Be the first! </template>
   </b-table>
 </template>
 
@@ -86,6 +88,9 @@ export default class Leaderboard extends Vue {
   }
 
   highlightLeader(leaderboard: LeaderboardItem[]) {
+    if (leaderboard.length === 0) {
+      return;
+    }
     const topScore = leaderboard[0].points;
     leaderboard
       .filter(player => player.points === topScore)

client/src/plugins/ajax.ts

@@ -42,7 +42,7 @@ export class AjaxRequest {
   errorRoutes: Map<number, string> = new Map([
     [401, LOGIN_PAGE],
     [403, CONSENT_PAGE],
-    [404, FREE_PLAY_LOBBY_PAGE],
+    [404, HOME_PAGE],
   ]);
 
   set roomId(r: RoomId | undefined) {
@@ -60,6 +60,7 @@ export class AjaxRequest {
       ({ data, status }) => {
         if (status === 200) {
           this.store.commit("SET_USER", data.user);
+          // FIXME: not terribly important but we might want to move to the tournament dashboard if isTournamentEnabled
           if (data.user.isVerified) this.router.push({ name: FREE_PLAY_LOBBY_PAGE });
           else this.router.push({ name: CONSENT_PAGE });
         } else {

client/src/views/Home.vue

@@ -103,10 +103,9 @@
           <b-col md="12" lg="6" xl="5" class="text-left">
             <h1 class="section-title mb-3">Community</h1>
             <p class="text mb-3">
-              Whether you are looking to discuss the game or find a team, connect with other players
-              by joining our
-              <a :href="constants.DISCORD_URL">community Discord</a> or by joining a room in the
-              <b-link :to="freePlayLobby">game lobby</b-link> and using the built-in chat.
+              Discuss the game, find a game to play, or connect with other players in our
+              <a :href="constants.DISCORD_URL">community Discord</a> or by joining a room in our
+              <b-link :to="freePlayLobby">free play lobby</b-link> and using the built-in chat.
             </p>
             <p class="text mb-3">
               Keep track of your performance with your
@@ -142,7 +141,7 @@ import {
   SOLO_GAME_PAGE,
   TOURNAMENT_DASHBOARD_PAGE,
 } from "@port-of-mars/shared/routes";
-import { isDevOrStaging, Constants } from "@port-of-mars/shared/settings";
+import { Constants } from "@port-of-mars/shared/settings";
 import Footer from "@port-of-mars/client/components/global/Footer.vue";
 import CharCarousel from "@port-of-mars/client/components/global/CharCarousel.vue";
 import AgeTooltip from "@port-of-mars/client/components/global/AgeTooltip.vue";
@@ -162,7 +161,6 @@ export default class Home extends Vue {
   @Prop({ default: false })
   scrollToAbout!: boolean;
 
-  isDevMode: boolean = false;
   currentYear = new Date().getFullYear();
   freePlayLobby = { name: FREE_PLAY_LOBBY_PAGE };
   tournamentDashboard = { name: TOURNAMENT_DASHBOARD_PAGE };
@@ -179,7 +177,6 @@ export default class Home extends Vue {
   }
 
   async mounted() {
-    this.isDevMode = isDevOrStaging();
     if (this.scrollToAbout) {
       this.scrollToAboutSection();
     }