refactor: consistency and hygiene

- add getters for tstore access, feeding the consistency hobgoblin - include timezone in toLocaleTimeString - move logo style into portOfMarsLogoProps - remove dead code, unused props and attributes, etc.
virtualcommons · Oct 28, 2023 · 08876c7 · 08876c7
1 parent e68cfed
commit 08876c7
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 59 deletions.
diff --git a/client/src/components/global/Footer.vue b/client/src/components/global/Footer.vue
@@ -15,18 +15,12 @@ [email protected]
           <b-link :to="solo" title="Solo Mode">Solo Mode</b-link>
         </li>
         <li>
-          <b-link
-            v-if="$tstore.state.isFreePlayEnabled"
-            :to="freePlayLobby"
-            title="Port of Mars Free Play"
+          <b-link v-if="isFreePlayEnabled" :to="freePlayLobby" title="Port of Mars Free Play"
             >Free Play</b-link
           >
         </li>
         <li>
-          <b-link
-            v-if="$tstore.state.isFreePlayEnabled"
-            :to="tournamentDashboard"
-            title="Join Mars Madness"
+          <b-link v-if="isTournamentEnabled" :to="tournamentDashboard" title="Join Mars Madness"
             >Join Mars Madness</b-link
           >
         </li>
@@ -132,6 +126,14 @@ export default class Footer extends Vue {
   get constants() {
     return Constants;
   }
+
+  get isTournamentEnabled() {
+    return this.$tstore.state.isTournamentEnabled;
+  }
+
+  get isFreePlayEnabled() {
+    return this.$tstore.state.isFreePlayEnabled;
+  }
 }
 </script>
 

diff --git a/client/src/components/global/Navbar.vue b/client/src/components/global/Navbar.vue
@@ -2,7 +2,7 @@
   <b-navbar tag="header" toggleable="xl" type="dark" variant="dark" class="w-100" fixed="top">
     <b-navbar-brand :to="home">
       <b-img
-        id="logo"
+        class="logo"
         v-bind="portOfMarsLogoProps"
         :src="$getAssetUrl(`images/logo-Port-of-Mars-White.svg`)"
         alt="the planet mars illustrated in white above Port of Mars"
@@ -17,8 +17,9 @@
           :to="admin"
           exact-active-class="active"
           title="Admin Dashboard"
-          >Admin</b-nav-item
         >
+          Admin
+        </b-nav-item>
         <b-nav-item class="mx-2" :to="about" exact-active-class="active" title="About Port of Mars"
           >About</b-nav-item
         >
@@ -31,8 +32,9 @@
           target="_blank"
           exact-active-class="active"
           title="Game Manual"
-          >Manual</b-nav-item
         >
+          Manual
+        </b-nav-item>
         <b-nav-item class="mx-2" :to="leaderboard" exact-active-class="active" title="Leaderboard"
           >Leaderboard</b-nav-item
         >
@@ -45,21 +47,21 @@
           Solo Mode
         </b-nav-item>
         <b-nav-item
-          v-if="$tstore.state.isFreePlayEnabled"
+          v-if="isFreePlayEnabled"
           class="mx-2 text-nowrap"
           :to="freePlayLobby"
           exact-active-class="active"
-          title="Free Play (Open) Game Lobby"
+          title="Free Play Game Lobby"
         >
           Free Play
         </b-nav-item>
         <b-nav-item
-          v-if="$tstore.state.isTournamentEnabled"
+          v-if="isTournamentEnabled"
           class="mx-2 text-nowrap"
           link-classes="btn btn-success text-white"
           :to="tournamentDashboard"
           exact-active-class="active"
-          title="Free Play (Open) Game Lobby"
+          title="Tournament Dashboard"
         >
           <b>Join Mars Madness</b>
         </b-nav-item>
@@ -94,7 +96,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
+import { Component, Vue } from "vue-property-decorator";
 import {
   ADMIN_PAGE,
   HOME_PAGE,
@@ -110,20 +112,14 @@ import {
   PROFILE_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 _ from "lodash";
 
 @Component({})
 export default class Navbar extends Vue {
-  @Prop({ default: "Mission Control Dashboard" })
-  title!: string;
-
-  isDevMode: boolean = false;
-
-  contactUrl: string = "mailto:[email protected]";
-
   portOfMarsLogoProps = {
     height: 60,
+    width: 200,
   };
   readonly SITE_URL = "https://portofmars.asu.edu";
 
@@ -141,15 +137,6 @@ export default class Navbar extends Vue {
   freePlayLobby = { name: FREE_PLAY_LOBBY_PAGE };
   profile = { name: PROFILE_PAGE };
 
-  async created() {
-    this.isDevMode = isDevOrStaging();
-  }
-
-  mounted() {
-    console.log("route name: ", this.$route.name);
-    console.log("route.name = login", this.$route.name == this.login.name);
-  }
-
   get constants() {
     return Constants;
   }
@@ -166,12 +153,12 @@ export default class Navbar extends Vue {
     return this.$tstore.getters.isAdmin;
   }
 
-  get isInGame() {
-    if (_.isNil(this.$route.name)) {
-      return false;
-    } else {
-      return this.game.name == this.$route.name || this.freePlayLobby.name == this.$route.name;
-    }
+  get isTournamentEnabled() {
+    return this.$tstore.state.isTournamentEnabled;
+  }
+
+  get isFreePlayEnabled() {
+    return this.$tstore.state.isFreePlayEnabled;
   }
 
   logout() {
@@ -182,8 +169,4 @@ export default class Navbar extends Vue {
 }
 </script>
 
-<style lang="scss" scoped>
-#logo {
-  width: 200px;
-}
-</style>
+<style lang="scss" scoped></style>
diff --git a/client/src/components/global/Schedule.vue b/client/src/components/global/Schedule.vue
@@ -11,7 +11,7 @@
           :key="game.date.getTime()"
         >
           <div class="launch-date">
-            <b>{{ formatTime(game.date) }}</b> ({{ localTimeZone }})
+            <b>{{ formatTime(game.date) }}</b>
           </div>
           <b-button-group>
             <a
@@ -56,25 +56,18 @@ export default class Schedule extends Vue {
   @Prop()
   schedule!: Array<number>;
 
-  readonly SITE_URL = "https://portofmars.asu.edu";
+  static readonly SITE_URL = "https://portofmars.asu.edu";
 
   get launchTimes() {
     return this.groupLaunchTimesByDate(this.schedule);
   }
 
-  get localTimeZone() {
-    return new Date()
-      .toLocaleTimeString(undefined, {
-        timeZoneName: "short",
-      })
-      .split(" ")[2];
-  }
-
   groupLaunchTimesByDate(launchTimes: number[]) {
-    // returns an object with date strings mapped to indivual launch times and invite links
+    // returns an object with date strings mapped to individual launch times and invite links
+    // could use a Map<string, object> also
     const grouped: LaunchTimes = {};
     for (const time of launchTimes) {
-      const dateStr = new Date(time).toLocaleDateString(undefined, {
+      const dateStr = new Date(time).toLocaleDateString([], {
         weekday: "long",
         month: "long",
         day: "numeric",
@@ -96,7 +89,7 @@ export default class Schedule extends Vue {
   buildGoogleInviteLink(start: Date) {
     return google({
       title: `Port of Mars Launch`,
-      location: this.SITE_URL,
+      location: Schedule.SITE_URL,
       start,
       duration: [1, "hour"],
     });
@@ -105,16 +98,17 @@ export default class Schedule extends Vue {
   buildIcsInviteLink(start: Date) {
     return ics({
       title: `Port of Mars Launch`,
-      location: this.SITE_URL,
+      location: Schedule.SITE_URL,
       start,
       duration: [1, "hour"],
     });
   }
 
   formatTime(date: Date) {
-    return date.toLocaleTimeString(undefined, {
+    return date.toLocaleTimeString([], {
       hour: "numeric",
       minute: "numeric",
+      timeZoneName: "short",
     });
   }
 }