From 63a45d6bd8739dc9d8678de1ebe00b091c2158d4 Mon Sep 17 00:00:00 2001
From: Allen Lee <alee@users.noreply.github.com>
Date: Fri, 27 Oct 2023 18:12:09 -0700
Subject: [PATCH] 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
---
 .../components/game/phases/Investments.vue    |  2 +-
 client/src/components/global/Navbar.vue       |  1 -
 client/src/components/global/Schedule.vue     | 30 ++++++++++---------
 .../global/TournamentOnboardingSteps.vue      | 19 +++---------
 client/src/components/lobby/LobbyChat.vue     |  6 +++-
 .../src/components/stats/LeaderboardTable.vue |  5 ++++
 client/src/plugins/ajax.ts                    |  3 +-
 client/src/views/Home.vue                     | 11 +++----
 8 files changed, 37 insertions(+), 40 deletions(-)

diff --git a/client/src/components/game/phases/Investments.vue b/client/src/components/game/phases/Investments.vue
index 7a4a6ad61..7fb64d96b 100644
--- a/client/src/components/game/phases/Investments.vue
+++ b/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>
diff --git a/client/src/components/global/Navbar.vue b/client/src/components/global/Navbar.vue
index ed790cd08..d8aac0ca0 100644
--- a/client/src/components/global/Navbar.vue
+++ b/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 {
diff --git a/client/src/components/global/Schedule.vue b/client/src/components/global/Schedule.vue
index 1130dadfe..a64557599 100644
--- a/client/src/components/global/Schedule.vue
+++ b/client/src/components/global/Schedule.vue
@@ -67,7 +67,8 @@ 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",
@@ -75,8 +76,9 @@ export default class Schedule extends Vue {
       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) {
diff --git a/client/src/components/global/TournamentOnboardingSteps.vue b/client/src/components/global/TournamentOnboardingSteps.vue
index cdaee9182..9ece096e1 100644
--- a/client/src/components/global/TournamentOnboardingSteps.vue
+++ b/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>
diff --git a/client/src/components/lobby/LobbyChat.vue b/client/src/components/lobby/LobbyChat.vue
index 1dd9ad8ad..aa5b6dc4f 100644
--- a/client/src/components/lobby/LobbyChat.vue
+++ b/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>
diff --git a/client/src/components/stats/LeaderboardTable.vue b/client/src/components/stats/LeaderboardTable.vue
index c668cfbdb..3eacc067a 100644
--- a/client/src/components/stats/LeaderboardTable.vue
+++ b/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)
diff --git a/client/src/plugins/ajax.ts b/client/src/plugins/ajax.ts
index 3308348f5..6f8d3a256 100644
--- a/client/src/plugins/ajax.ts
+++ b/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 {
diff --git a/client/src/views/Home.vue b/client/src/views/Home.vue
index b17469381..3d9bee0c5 100644
--- a/client/src/views/Home.vue
+++ b/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();
     }