Add Salmon Run screenshots view

src/components/StageImage.vue

@@ -19,7 +19,6 @@
       whitespace-nowrap
       font-splatoon2
       px-2
-      ss:text-3xl
     " :class="textSize" v-if="!hideLabel">{{ stage?.name }}</div>
   </div>
 </template>

src/components/salmonrun/ExpandedSalmonRunRow.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="font-splatoon2 space-y-1" v-if="props.schedule">
     <div>
-      <div class="text-lg text-shadow text-zinc-200">
+      <div class="text-lg text-shadow text-zinc-200 ss:hidden">
         {{ formatDateTime(props.schedule.startTime) }}
         &ndash;
         {{ formatDateTime(props.schedule.endTime) }}
       </div>
-      <div class="text-shadow text-zinc-300">
+      <div class="text-shadow text-zinc-300 ss:text-white ss:text-xl">
         {{ formatDurationFromNow(props.schedule.endTime) }}
         remaining
       </div>

src/components/salmonrun/SalmonRunBox.vue

@@ -19,7 +19,7 @@
             <ExpandedSalmonRunRow :schedule="store.activeSchedule" />
           </div>
 
-          <div class="py-1 bg-zinc-900 bg-opacity-70 rounded-lg backdrop-blur-sm">
+          <div class="ss:hidden py-1 bg-zinc-900 bg-opacity-70 rounded-lg backdrop-blur-sm">
             <SquidTape class="font-splatoon2 text-sm drop-shadow -rotate-6 -mx-2">
               <div class="px-2">Soon!</div>
             </SquidTape>
@@ -50,7 +50,7 @@ const store = useSalmonRunSchedulesStore();
 .bg-character {
   background-image: url('@/assets/img/salmon-character.png'), url('@/assets/img/salmon-character-bg.png');
   background-size: cover;
-  background-position: center;
+  background-position: top, center;
   background-repeat: no-repeat;
 }
 

src/components/screenshots/ScreenshotScheduleBox.vue

@@ -32,11 +32,13 @@
             class="flex-1"
             imgClass="rounded-2xl"
             :stage="store.activeSchedule.settings.vsStages[0]"
+            textSize="text-3xl"
             />
           <StageImage
             class="flex-1"
             imgClass="rounded-2xl"
             :stage="store.activeSchedule.settings.vsStages[1]"
+            textSize="text-3xl"
             />
 
           <div class="flex-1 relative" v-if="tricolor?.isTricolorActive">

src/router/screenshots.js

@@ -2,6 +2,7 @@ import { createRouter, createWebHashHistory } from 'vue-router'
 import ScreenshotsHomeView from '@/views/screenshots/ScreenshotsHomeView.vue'
 import CountdownView from '@/views/screenshots/CountdownView.vue'
 import SchedulesView from '@/views/screenshots/SchedulesView.vue'
+import SalmonRunView from '@/views/screenshots/SalmonRunView.vue'
 import RegularGearView from '@/views/screenshots/RegularGearView.vue'
 import DailyDropGearView from '@/views/screenshots/DailyDropGearView.vue'
 import SplatfestView from '@/views/screenshots/SplatfestView.vue'
@@ -21,6 +22,10 @@ const router = createRouter({
       path: '/schedules',
       component: SchedulesView,
     },
+    {
+      path: '/salmonrun',
+      component: SalmonRunView,
+    },
     {
       path: '/gear/regular',
       component: RegularGearView,

src/views/screenshots/SalmonRunView.vue

@@ -0,0 +1,20 @@
+<template>
+  <ScreenshotLayout header="Salmon Run">
+    <div class="grow flex items-center justify-center">
+      <div class="max-w-2xl scale-[1.6]">
+        <SalmonRunBox class="-rotate-1" />
+      </div>
+    </div>
+  </ScreenshotLayout>
+</template>
+
+<script setup>
+import ScreenshotLayout from '../../layouts/ScreenshotLayout.vue';
+import DailyDropGear from '@/components/screenshots/DailyDropGear.vue';
+import { useGearStore } from '../../stores/gear.mjs';
+import { computed } from 'vue';
+import SalmonRunBox from '../../components/salmonrun/SalmonRunBox.vue';
+
+const gearStore = useGearStore();
+const brand = computed(() => gearStore.dailyDropBrand);
+</script>

src/views/screenshots/ScreenshotsHomeView.vue

@@ -9,6 +9,9 @@
       <div>
         <router-link to="/schedules">Schedules</router-link>
       </div>
+      <div>
+        <router-link to="/salmonrun">Salmon Run</router-link>
+      </div>
       <div>
         Gear:
         <router-link to="/gear/regular">Regular</router-link>&nbsp;