Get stage images from the dashboard

src/graphics/helpers/imageHelper.ts

@@ -1,5 +1,4 @@
 import { isBlank } from '../../shared/helpers/stringHelper';
-import { mapNameToImagePath } from '../../shared/constants';
 
 export async function loadAndCheckIfImageExists(src: string): Promise<boolean> {
     return new Promise(resolve => {
@@ -18,5 +17,3 @@ export async function loadAndCheckIfImageExists(src: string): Promise<boolean> {
         };
     });
 }
-
-export const getStageImagePath = (stage: string): string => mapNameToImagePath[stage];

src/graphics/pages/stageDisplay/StageDisplay.vue

@@ -71,10 +71,11 @@ import { defineComponent } from '@vue/runtime-core';
 import { computed, onMounted } from 'vue';
 import OpacitySwapTransition from '../../components/OpacitySwapTransition.vue';
 import gsap from 'gsap';
-import { getStageImagePath, loadAndCheckIfImageExists } from '../../helpers/imageHelper';
+import { loadAndCheckIfImageExists } from '../../helpers/imageHelper';
 import { addDots } from '../../../shared/helpers/stringHelper';
 import { bindEntranceToTimelineGenerator } from '../../helpers/obsSourceHelper';
 import { useActiveRoundStore } from '../../../shared/store/activeRoundStore';
+import { useAssetPathStore } from '../../../shared/store/assetPathStore';
 
 const STAGE_SHOW_HIDE_ANIMATION_DURATION = 0.35;
 
@@ -85,6 +86,7 @@ export default defineComponent({
 
     setup() {
         const activeRoundStore = useActiveRoundStore();
+        const assetPathStore = useAssetPathStore();
         const games = computed(() => activeRoundStore.activeRound.games);
 
         onMounted(() => {
@@ -142,10 +144,10 @@ export default defineComponent({
                 }
             })),
             matchId: computed(() => activeRoundStore.activeRound.match.id),
-            getStageImagePath,
+            getStageImagePath: assetPathStore.getStageImagePath,
 
             async stageEnter(elem: HTMLElement, done: gsap.Callback) {
-                await loadAndCheckIfImageExists(getStageImagePath(elem.dataset.stage));
+                await loadAndCheckIfImageExists(assetPathStore.getStageImagePath(elem.dataset.stage));
                 stageEnter(elem, done);
             },
             stageWrapperEnter(elem: HTMLElement, done: gsap.Callback) {

src/graphics/stageDisplay.ts

@@ -5,11 +5,13 @@ import StageDisplay from './pages/stageDisplay/StageDisplay.vue';
 import { installCommonHelpers } from './helpers/installCommonHelpers';
 import { createPinia } from 'pinia';
 import { initActiveRoundStore } from '../shared/store/activeRoundStore';
+import { initAssetPathStore } from '../shared/store/assetPathStore';
 
 (async () => {
     const app = createApp(StageDisplay);
     installCommonHelpers(app);
     app.use(createPinia());
     await initActiveRoundStore();
+    await initAssetPathStore();
     app.mount('#app');
 })();

src/shared/constants.ts

@@ -1,77 +1 @@
-import ImgAncho from 'img/stages/S2_Stage_Ancho-V_Games.png';
-import ImgArowana from 'img/stages/S2_Stage_Arowana_Mall.png';
-import ImgBlackbelly from 'img/stages/S2_Stage_Blackbelly_Skatepark.png';
-import ImgCamp from 'img/stages/S2_Stage_Camp_Triggerfish.png';
-import ImgGoby from 'img/stages/S2_Stage_Goby_Arena.png';
-import ImgHumpback from 'img/stages/S2_Stage_Humpback_Pump_Track.png';
-import ImgInkblot from 'img/stages/S2_Stage_Inkblot_Art_Academy.png';
-import ImgKelp from 'img/stages/S2_Stage_Kelp_Dome.png';
-import ImgMakoMart from 'img/stages/S2_Stage_MakoMart.png';
-import ImgManta from 'img/stages/S2_Stage_Manta_Maria.png';
-import ImgMoray from 'img/stages/S2_Stage_Moray_Towers.png';
-import ImgMusselforge from 'img/stages/S2_Stage_Musselforge_Fitness.png';
-import ImgNew from 'img/stages/S2_Stage_New_Albacore_Hotel.png';
-import ImgPiranha from 'img/stages/S2_Stage_Piranha_Pit.png';
-import ImgPort from 'img/stages/S2_Stage_Port_Mackerel.png';
-import ImgShellendorf from 'img/stages/S2_Stage_Shellendorf_Institute.png';
-import ImgShifty from 'img/stages/S2_Stage_Shifty_Station.png';
-import ImgSnapper from 'img/stages/S2_Stage_Snapper_Canal.png';
-import ImgStarfish from 'img/stages/S2_Stage_Starfish_Mainstage.png';
-import ImgSturgeon from 'img/stages/S2_Stage_Sturgeon_Shipyard.png';
-import ImgThe from 'img/stages/S2_Stage_The_Reef.png';
-import ImgWahoo from 'img/stages/S2_Stage_Wahoo_World.png';
-import ImgWalleye from 'img/stages/S2_Stage_Walleye_Warehouse.png';
-import ImgSkipper from 'img/stages/S2_Stage_Skipper_Pavilion.png';
-import ImgUnknown from 'img/stages/unknown-stage.png';
-import ImgMuseum from 'img/stages/S3_Stage_Museum_d_Alfonsino.png';
-import ImgScorch from 'img/stages/S3_Scorch_Gorge.png';
-import ImgEeltail from 'img/stages/S3_Eeltail_Alley.png';
-import ImgHagglefish from 'img/stages/S3HagglefishMarketIcon.png';
-import ImgUndertow from 'img/stages/S3UndertowSpillwayIcon.png';
-import ImgMincemeat from 'img/stages/S3MincemeatMetalworksIcon.png';
-import ImgHammerhead from 'img/stages/S3HammerheadBridgeIcon.png';
-import ImgMahi from 'img/stages/S3MahiMahiResortIcon.png';
-import ImgFlounder from 'img/stages/S3_Stage_Flounder_Heights.png';
-import ImgBrinewater from 'img/stages/S3_Brinewater_Springs.png';
-
 export const DASHBOARD_BUNDLE_NAME = 'ipl-overlay-controls';
-
-export const mapNameToImagePath: Record<string, string> = {
-    'Ancho-V Games': ImgAncho,
-    'Arowana Mall': ImgArowana,
-    'Blackbelly Skatepark': ImgBlackbelly,
-    'Camp Triggerfish': ImgCamp,
-    'Goby Arena': ImgGoby,
-    'Humpback Pump Track': ImgHumpback,
-    'Inkblot Art Academy': ImgInkblot,
-    'Kelp Dome': ImgKelp,
-    MakoMart: ImgMakoMart,
-    'Manta Maria': ImgManta,
-    'Moray Towers': ImgMoray,
-    'Musselforge Fitness': ImgMusselforge,
-    'New Albacore Hotel': ImgNew,
-    'Piranha Pit': ImgPiranha,
-    'Port Mackerel': ImgPort,
-    'Shellendorf Institute': ImgShellendorf,
-    'Shifty Station': ImgShifty,
-    'Snapper Canal': ImgSnapper,
-    'Starfish Mainstage': ImgStarfish,
-    'Sturgeon Shipyard': ImgSturgeon,
-    'The Reef': ImgThe,
-    'Wahoo World': ImgWahoo,
-    'Walleye Warehouse': ImgWalleye,
-    'Skipper Pavilion': ImgSkipper,
-    'Museum d\'Alfonsino': ImgMuseum,
-    'Scorch Gorge': ImgScorch,
-    'Eeltail Alley': ImgEeltail,
-    'Hagglefish Market': ImgHagglefish,
-    'Undertow Spillway': ImgUndertow,
-    'Mincemeat Metalworks': ImgMincemeat,
-    'Hammerhead Bridge': ImgHammerhead,
-    'Mahi-Mahi Resort': ImgMahi,
-    'Flounder Heights': ImgFlounder,
-    'Brinewater Springs': ImgBrinewater,
-    'Unknown Stage': ImgUnknown,
-    Counterpick: ImgUnknown
-};
-

src/shared/store/assetPathStore.ts

@@ -0,0 +1,23 @@
+import { AssetPaths } from 'schemas';
+import { defineStore } from 'pinia';
+import { DASHBOARD_BUNDLE_NAME } from '../constants';
+import { createReplicantStoreInitializer } from './storeHelper';
+import ImgUnknown from 'img/stages/unknown-stage.png';
+
+const assetPaths = nodecg.Replicant<AssetPaths>('assetPaths', DASHBOARD_BUNDLE_NAME);
+
+interface AssetPathStore {
+    assetPaths: AssetPaths;
+}
+
+export const useAssetPathStore = defineStore('assetPaths', {
+    state: (): AssetPathStore => ({
+        assetPaths: null
+    }),
+    getters: {
+        getStageImagePath: state =>
+            (stageName: string) => state.assetPaths.stageImages[stageName] ?? ImgUnknown
+    }
+});
+
+export const initAssetPathStore = createReplicantStoreInitializer([assetPaths], useAssetPathStore);