fix: shared settings rework

- use vite import.meta.env for things on the client that come from .env
  * would've been nice to just integrate this into shared/settings such
    that when called from the client, import.meta.env would be used
    instead of process.env but this is extremely difficult to do
- Constants -> settings
- add $settings vue global for accessing shared settings easier

Makefile

@@ -64,7 +64,7 @@ secrets: keys $(GENERATED_SECRETS)
 
 .PHONY: release-version
 release-version: .env
-	$(ENVREPLACE) RELEASE_VERSION $$(git describe --tags --abbrev=1) .env
+	$(ENVREPLACE) SHARED_RELEASE_VERSION $$(git describe --tags --abbrev=1) .env
 
 docker-compose.yml: base.yml $(DEPLOY_ENVIRONMENT).yml config.mk $(DB_DATA_PATH) $(DATA_DUMP_PATH) $(LOG_DATA_PATH) $(DYNAMIC_SETTINGS_PATH) secrets $(PGPASS_PATH) release-version
 	case "$(DEPLOY_ENVIRONMENT)" in \

client/src/components/game/Inventory.vue

@@ -46,7 +46,6 @@
 import { Vue, Component, Prop } from "vue-property-decorator";
 import { Role, RESEARCHER } from "@port-of-mars/shared/types";
 import { Investment, Resource, RESOURCES, Phase } from "@port-of-mars/shared/types";
-import { Constants } from "@port-of-mars/shared/settings";
 
 @Component({
   components: {},
@@ -96,7 +95,7 @@ export default class Inventory extends Vue {
   }
 
   canInvest(cost: number): boolean {
-    return cost < Constants.MAXIMUM_COST;
+    return cost < this.$settings.MAXIMUM_COST;
   }
 
   toggleCosts() {

client/src/components/game/phases/investment/InvestmentCard.vue

@@ -56,7 +56,6 @@
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
 import { Investment, Resource } from "@port-of-mars/shared/types";
-import { Constants } from "@port-of-mars/shared/settings";
 
 @Component({})
 export default class InvestmentCard extends Vue {
@@ -100,7 +99,7 @@ export default class InvestmentCard extends Vue {
    * Define if investment is affordable.
    */
   get cannotPurchase(): boolean {
-    return this.cost >= Constants.MAXIMUM_COST;
+    return this.cost >= this.$settings.MAXIMUM_COST;
   }
 
   /**

client/src/components/global/Footer.vue

@@ -64,25 +64,25 @@ ccarra1@asu.edu
       <h2>Connect with Us</h2>
       <ul>
         <li>
-          <a :href="constants.DISCORD_URL" title="Discord">
+          <a :href="$settings.DISCORD_URL" title="Discord">
             Discord
             <b-icon-discord></b-icon-discord>
           </a>
         </li>
         <li>
-          <a :href="'mailto:' + constants.CONTACT_EMAIL" title="Email us">
+          <a :href="'mailto:' + $settings.CONTACT_EMAIL" title="Email us">
             Email
             <b-icon-envelope class="mx-1"></b-icon-envelope>
           </a>
         </li>
         <li>
-          <a :href="constants.INSTAGRAM_URL" title="Instagram">
+          <a :href="$settings.INSTAGRAM_URL" title="Instagram">
             Instagram
             <b-icon-instagram class="mx-1"></b-icon-instagram>
           </a>
         </li>
         <li>
-          <a :href="constants.TWITTER_URL" title="Twitter">
+          <a :href="$settings.TWITTER_URL" title="Twitter">
             Twitter
             <b-icon-twitter class="mx-1"></b-icon-twitter>
           </a>
@@ -93,15 +93,14 @@ ccarra1@asu.edu
       &copy; 2020-{{ currentYear }}
       <a href="https://www.azregents.edu/">Arizona Board of Regents</a> |
 
-      <a :href="constants.GITHUB_URL">{{ constants.RELEASE_VERSION }}</a>
+      <a :href="$settings.GITHUB_URL">{{ RELEASE_VERSION }}</a>
     </div>
   </footer>
   <!-- </b-container> -->
 </template>
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
-import { Constants } from "@port-of-mars/shared/settings";
 import {
   LOGIN_PAGE,
   FREE_PLAY_LOBBY_PAGE,
@@ -123,8 +122,8 @@ export default class Footer extends Vue {
   privacy = { name: PRIVACY_PAGE };
   solo = { name: SOLO_GAME_PAGE };
 
-  get constants() {
-    return Constants;
+  get RELEASE_VERSION() {
+    return import.meta.env.SHARED_RELEASE_VERSION;
   }
 
   get isTournamentEnabled() {

client/src/components/global/Navbar.vue

@@ -67,13 +67,13 @@
         </b-nav-item>
       </b-navbar-nav>
       <b-navbar-nav class="ml-auto">
-        <b-nav-item class="mx-2" target="_blank" :href="constants.DISCORD_URL" title="Discord"
+        <b-nav-item class="mx-2" target="_blank" :href="$settings.DISCORD_URL" title="Discord"
           ><b-icon-discord></b-icon-discord
         ></b-nav-item>
-        <b-nav-item class="mx-2" target="_blank" :href="constants.TWITTER_URL" title="Twitter"
+        <b-nav-item class="mx-2" target="_blank" :href="$settings.TWITTER_URL" title="Twitter"
           ><b-icon-twitter></b-icon-twitter
         ></b-nav-item>
-        <b-nav-item class="mx-2" target="_blank" :href="constants.INSTAGRAM_URL" title="Instagram"
+        <b-nav-item class="mx-2" target="_blank" :href="$settings.INSTAGRAM_URL" title="Instagram"
           ><b-icon-instagram></b-icon-instagram
         ></b-nav-item>
         <div v-if="isAuthenticated">
@@ -112,7 +112,6 @@ import {
   PROFILE_PAGE,
   TOURNAMENT_DASHBOARD_PAGE,
 } from "@port-of-mars/shared/routes";
-import { Constants } from "@port-of-mars/shared/settings";
 
 @Component({})
 export default class Navbar extends Vue {
@@ -136,10 +135,6 @@ export default class Navbar extends Vue {
   freePlayLobby = { name: FREE_PLAY_LOBBY_PAGE };
   profile = { name: PROFILE_PAGE };
 
-  get constants() {
-    return Constants;
-  }
-
   get username() {
     return this.$tstore.state.user.username;
   }

client/src/components/global/TournamentOnboardingSteps.vue

@@ -48,7 +48,7 @@
         <h4>Learn How to Play</h4>
         <b-button-group size="sm">
           <b-button variant="secondary" :to="manual" target="_blank">Read the manual</b-button>
-          <b-button variant="primary" :href="constants.TUTORIAL_VIDEO_URL" target="_blank"
+          <b-button variant="primary" :href="$settings.TUTORIAL_VIDEO_URL" target="_blank"
             >Watch the tutorial</b-button
           >
         </b-button-group>
@@ -61,7 +61,7 @@
 import { CONSENT_PAGE, MANUAL_PAGE } from "@port-of-mars/shared/routes";
 import { TournamentRoundInviteStatus } from "@port-of-mars/shared/types";
 import { Component, Prop, Vue } from "vue-property-decorator";
-import { Constants, isDevOrStaging } from "@port-of-mars/shared/settings";
+import { isDevOrStaging } from "@port-of-mars/shared/settings";
 import { url } from "@port-of-mars/client/util";
 
 @Component({})
@@ -73,10 +73,6 @@ export default class TournamentOnboardingSteps extends Vue {
   consent = { name: CONSENT_PAGE };
   manual = { name: MANUAL_PAGE };
 
-  get constants() {
-    return Constants;
-  }
-
   get status() {
     return this.$tstore.getters.tournamentStatus;
   }

client/src/components/lobby/HelpPanel.vue

@@ -22,7 +22,7 @@
         id="tutorialVideo"
         type="iframe"
         aspect="16by9"
-        :src="constants.TUTORIAL_VIDEO_URL"
+        :src="$settings.TUTORIAL_VIDEO_URL"
         allowfullscreen
       ></b-embed>
     </div>
@@ -32,15 +32,10 @@
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 import { MANUAL_PAGE } from "@port-of-mars/shared/routes";
-import { Constants } from "@port-of-mars/shared/settings";
 
 @Component({})
 export default class HelpPanel extends Vue {
   manual = { name: MANUAL_PAGE };
-
-  get constants() {
-    return Constants;
-  }
 }
 </script>
 

client/src/components/lobby/LobbyRoomList.vue

@@ -101,7 +101,6 @@
 import { Component, Inject, Vue } from "vue-property-decorator";
 import { Client } from "colyseus.js";
 import { FREE_PLAY_LOBBY_NAME } from "@port-of-mars/shared/lobby";
-import { Constants } from "@port-of-mars/shared/settings";
 import MuteBanWarning from "@port-of-mars/client/components/lobby/MuteBanWarning.vue";
 
 @Component({
@@ -123,10 +122,6 @@ export default class LobbyRoomList extends Vue {
   refreshingRoomList = false;
   pollingIntervalId = 0;
 
-  get constants() {
-    return Constants;
-  }
-
   get isBanned() {
     return this.$store.state.user.isBanned;
   }

client/src/main.ts

@@ -7,7 +7,7 @@ import Vuex from "vuex";
 import * as Sentry from "@sentry/browser";
 import { Vue as VueIntegration } from "@sentry/integrations";
 import { Integrations } from "@sentry/tracing";
-import { isStagingOrProduction, Constants, SERVER_URL_WS } from "@port-of-mars/shared/settings";
+import { settings, isStagingOrProduction, SERVER_URL_WS } from "@port-of-mars/shared/settings";
 import { Ajax } from "@port-of-mars/client/plugins/ajax";
 import { TypedStore } from "@port-of-mars/client/plugins/tstore";
 import { getAssetUrl, SfxManager } from "@port-of-mars/client/util";
@@ -25,15 +25,15 @@ Vue.config.productionTip = false;
 
 if (isStagingOrProduction()) {
   Sentry.init({
-    dsn: Constants.SENTRY_DSN,
+    dsn: import.meta.env.SHARED_SENTRY_DSN,
     integrations: [new VueIntegration({ Vue, tracing: true }), new Integrations.BrowserTracing()],
     tracesSampleRate: 1,
   });
   Vue.use(
     VueGtag,
     {
       config: {
-        id: Constants.GA_TAG,
+        id: import.meta.env.SHARED_GA_TAG,
       },
     },
     router
@@ -44,6 +44,13 @@ const $client = new Colyseus.Client(SERVER_URL_WS || undefined);
 const $sfx = new SfxManager();
 
 Vue.prototype.$getAssetUrl = getAssetUrl;
+Vue.prototype.$settings = settings;
+declare module "vue/types/vue" {
+  interface Vue {
+    $settings: typeof settings;
+    $getAssetUrl: typeof getAssetUrl;
+  }
+}
 
 new Vue({
   router,

client/src/plugins/settings.ts

@@ -0,0 +1,31 @@
+import { State } from "@port-of-mars/shared/game/client/state";
+import Getters from "@port-of-mars/client/store/getters";
+import Mutations from "@port-of-mars/client/store/mutations";
+import { VueConstructor } from "vue";
+import { Store } from "vuex";
+
+export interface TStore {
+  state: State;
+  readonly getters: { [K in keyof typeof Getters]: ReturnType<(typeof Getters)[K]> };
+
+  commit<K extends keyof typeof Mutations>(
+    name: K,
+    payload?: Parameters<(typeof Mutations)[K]>[1]
+  ): void;
+}
+
+declare module "vue/types/vue" {
+  interface Vue {
+    $tstore: TStore;
+  }
+}
+
+export const TypedStore = {
+  install(instance: VueConstructor) {
+    Object.defineProperty(instance.prototype, "$tstore", {
+      get: function (this: { $store: Store<any> }) {
+        return this.$store;
+      },
+    });
+  },
+};

client/src/views/FreePlayLobby.vue

@@ -26,7 +26,6 @@ import { FreePlayLobbyRequestAPI } from "@port-of-mars/client/api/lobby/request"
 import { AccountAPI } from "@port-of-mars/client/api/account/request";
 import { FREE_PLAY_LOBBY_NAME } from "@port-of-mars/shared/lobby";
 import { GAME_PAGE, CONSENT_PAGE, MANUAL_PAGE } from "@port-of-mars/shared/routes";
-import { Constants } from "@port-of-mars/shared/settings";
 import Countdown from "@port-of-mars/client/components/global/Countdown.vue";
 import HelpPanel from "@port-of-mars/client/components/lobby/HelpPanel.vue";
 import Messages from "@port-of-mars/client/components/global/Messages.vue";
@@ -47,10 +46,6 @@ export default class FreePlayLobby extends Vue {
   manual = { name: MANUAL_PAGE };
   consent = { name: CONSENT_PAGE };
 
-  get constants() {
-    return Constants;
-  }
-
   async created() {
     this.accountApi = new AccountAPI(this.$store, this.$ajax);
     await this.checkCanPlay();

client/src/views/Home.vue

@@ -78,7 +78,7 @@
               class="p-1"
               type="iframe"
               aspect="16by9"
-              :src="constants.TUTORIAL_VIDEO_URL"
+              :src="$settings.TUTORIAL_VIDEO_URL"
               allowfullscreen
             ></b-embed>
           </b-col>
@@ -88,7 +88,7 @@
               class="p-1"
               type="iframe"
               aspect="16by9"
-              :src="constants.TRAILER_VIDEO_URL"
+              :src="$settings.TRAILER_VIDEO_URL"
               allowfullscreen
             ></b-embed>
           </b-col>
@@ -117,7 +117,7 @@
             <h1 class="section-title mb-3">Community</h1>
             <p class="text mb-3">
               Discuss the game, find a game to play, or connect with other players in our
-              <a :href="constants.DISCORD_URL">community Discord</a>.
+              <a :href="$settings.DISCORD_URL">community Discord</a>.
             </p>
             <p class="text mb-3">
               Keep track of your performance with your
@@ -155,7 +155,6 @@ import {
   TOURNAMENT_DASHBOARD_PAGE,
   MANUAL_PAGE,
 } from "@port-of-mars/shared/routes";
-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";
@@ -185,10 +184,6 @@ export default class Home extends Vue {
   solo = { name: SOLO_GAME_PAGE };
   manual = { name: MANUAL_PAGE };
 
-  get constants() {
-    return Constants;
-  }
-
   get shouldShowTournamentBanner() {
     return this.$tstore.state.isTournamentEnabled && this.$tstore.getters.tournamentStatus;
   }

client/src/views/Privacy.vue

@@ -78,7 +78,7 @@
       <p>
         If you have any questions or concerns about our Privacy Policy or the collection, use, or
         sharing of your personal information, please contact us at
-        <a :href="`mailto:${constants.CONTACT_EMAIL}`">{{ constants.CONTACT_EMAIL }}</a
+        <a :href="`mailto:${$settings.CONTACT_EMAIL}`">{{ $settings.CONTACT_EMAIL }}</a
         >.
       </p>
     </div>
@@ -88,19 +88,14 @@
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
-import { Constants } from "@port-of-mars/shared/settings";
 import Footer from "@port-of-mars/client/components/global/Footer.vue";
 
 @Component({
   components: {
     Footer,
   },
 })
-export default class Privacy extends Vue {
-  get constants() {
-    return Constants;
-  }
-}
+export default class Privacy extends Vue {}
 </script>
 
 <style lang="scss" scoped>