update screenshot page for region-specific Splatfests

app/social/generators/SplatfestResultsStatus.mjs

@@ -82,7 +82,7 @@ export default class SplatfestResultsStatus extends StatusGenerator
   /** @param {ScreenshotHelper} screenshotHelper */
   async _getMedia(screenshotHelper) {
     let media = new Media;
-    media.file = await screenshotHelper.capture('splatfest');
+    media.file = await screenshotHelper.capture(`splatfest/${this.region}`);
 
     return media;
   }

app/social/generators/SplatfestStatus.mjs

@@ -124,7 +124,7 @@ export default class SplatfestStatus extends StatusGenerator
   /** @param {ScreenshotHelper} screenshotHelper */
   async _getMedia(screenshotHelper) {
     let media = new Media;
-    media.file = await screenshotHelper.capture('splatfest');
+    media.file = await screenshotHelper.capture(`splatfest/${this.region}`);
 
     return media;
   }

src/router/screenshots.js

@@ -45,8 +45,32 @@ const router = createRouter({
       component: SalmonRunGearView,
     },
     {
-      path: '/splatfest',
+      path: '/splatfest/NA',
       component: SplatfestView,
+      props: {
+        region: 'NA',
+      },
+    },
+    {
+      path: '/splatfest/EU',
+      component: SplatfestView,
+      props: {
+        region: 'EU',
+      },
+    },
+    {
+      path: '/splatfest/JP',
+      component: SplatfestView,
+      props: {
+        region: 'JP',
+      },
+    },
+    {
+      path: '/splatfest/AP',
+      component: SplatfestView,
+      props: {
+        region: 'AP',
+      },
     },
   ],
 })

src/views/screenshots/ScreenshotsHomeView.vue

@@ -36,8 +36,18 @@
         </router-link>
       </div>
       <div>
-        <router-link to="/splatfest">
-          Splatfest
+        Splatfest:
+        <router-link to="/splatfest/NA">
+          NA
+        </router-link>&nbsp;
+        <router-link to="/splatfest/EU">
+          EU
+        </router-link>&nbsp;
+        <router-link to="/splatfest/JP">
+          JP
+        </router-link>&nbsp;
+        <router-link to="/splatfest/AP">
+          AP
         </router-link>
       </div>
     </div>

src/views/screenshots/SplatfestView.vue

@@ -20,15 +20,30 @@
 <script setup>
 import ScreenshotLayout from '../../layouts/ScreenshotLayout.vue';
 
-import { useUSSplatfestsStore } from '@/stores/splatfests';
+import { useUSSplatfestsStore, useEUSplatfestsStore, useJPSplatfestsStore, useAPSplatfestsStore } from '@/stores/splatfests';
 import SplatfestBox from '@/components/SplatfestBox.vue';
 import SplatfestResultsBox from '@/components/SplatfestResultsBox.vue';
 import { computed } from 'vue';
-const usSplatfests = useUSSplatfestsStore();
 
-const festival = computed(() =>
-  usSplatfests.upcomingFestival
-  ?? usSplatfests.activeFestival
-  ?? usSplatfests.recentFestival,
-);
+const usSplatfests = useUSSplatfestsStore();
+const euSplatfests = useEUSplatfestsStore();
+const jpSplatfests = useJPSplatfestsStore();
+const apSplatfests = useAPSplatfestsStore();
+
+const props = defineProps({
+  region: String,
+});
+
+
+const festival = computed(() => {
+  let store;
+  switch(props.region) {
+    case "NA": store = usSplatfests; break;
+    case "EU": store = euSplatfests; break;
+    case "JP": store = jpSplatfests; break;
+    case "AP": store = apSplatfests; break;
+    default: return null;
+  }
+  return store.upcomingFestival ?? store.activeFestival ?? store.recentFestival;
+});
 </script>