Add Salmon Run page

src/components/NavButtons.vue

@@ -3,6 +3,9 @@
     <router-link to="/" class="router-link">
       Schedules
     </router-link>
+    <router-link to="/salmonrun" class="router-link">
+      Salmon Run
+    </router-link>
     <router-link to="/gear" class="router-link">
       Gear
     </router-link>

src/components/StageImage.vue

@@ -20,7 +20,7 @@
       font-splatoon2
       px-2
       ss:text-3xl
-    " :class="textSize">{{ stage?.name }}</div>
+    " :class="textSize" v-if="!hideLabel">{{ stage?.name }}</div>
   </div>
 </template>
 
@@ -34,6 +34,7 @@ const props = defineProps({
     type: String,
     default: 'text-xs lg:text-sm',
   },
+  hideLabel: Boolean,
 });
 
 const lowRes = computed(() => props.stage?.image.url);

src/components/salmonrun/ExpandedSalmonRunRow.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="font-splatoon2 space-y-1" v-if="props.schedule">
+    <div>
+      <div class="text-lg text-shadow text-zinc-200">
+        {{ formatDateTime(props.schedule.startTime) }}
+        &ndash;
+        {{ formatDateTime(props.schedule.endTime) }}
+      </div>
+      <div class="text-shadow text-zinc-300">
+        {{ formatDurationFromNow(props.schedule.endTime) }}
+        remaining
+      </div>
+    </div>
+
+    <div class="flex items-center space-x-2">
+      <StageImage class="flex-1" imgClass="rounded-lg" :stage="props.schedule.settings.coopStage" />
+
+      <div class="flex flex-col items-center space-y-1">
+        <div class="text-sm text-center text-shadow text-zinc-200">
+          Supplied Weapons
+        </div>
+
+        <div class="bg-zinc-900 bg-opacity-30 rounded-full backdrop-blur-sm px-2">
+          <SalmonRunWeapons
+            :weapons="props.schedule.settings.weapons"
+            weaponClass="w-10 sm:w-14"
+            />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { formatDateTime, formatDurationFromNow } from '@/common/time';
+import StageImage from '../StageImage.vue';
+import SalmonRunWeapons from './SalmonRunWeapons.vue';
+
+const props = defineProps({
+  schedule: Object,
+});
+</script>

src/components/salmonrun/SalmonRunBox.vue

@@ -0,0 +1,63 @@
+<template>
+  <ProductContainer bg="bg-splatoon-salmonRun bg-monsters" class="pt-8 overflow-hidden rounded-2xl">
+    <div class="space-y-2">
+      <div class="font-splatoon1 text-3xl mx-4 text-shadow">
+        Salmon Run
+      </div>
+
+      <div class="flex">
+        <!-- Character graphic -->
+        <div class="flex-1 bg-character hidden md:block"></div>
+
+        <!-- Main content -->
+        <div class="md:w-2/3 mx-2 pb-2">
+          <div class="mb-6 space-y-2" v-if="store.activeSchedule">
+            <SquidTape class="font-splatoon2 text-sm drop-shadow -rotate-6 -mx-2">
+              <div class="px-2">Now Open!</div>
+            </SquidTape>
+
+            <ExpandedSalmonRunRow :schedule="store.activeSchedule" />
+          </div>
+
+          <div class="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>
+
+            <div class="mx-2 divide-y-2 divide-dashed divide-zinc-400">
+              <div v-for="schedule in store.upcomingSchedules" :key="schedule.startTime">
+                <SalmonRunRow class="my-2" :schedule="schedule"/>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </ProductContainer>
+</template>
+
+<script setup>
+import { useSalmonRunSchedulesStore } from '@/stores/schedules.mjs';
+import ProductContainer from '../ProductContainer.vue';
+import SquidTape from '../SquidTape.vue';
+import SalmonRunRow from './SalmonRunRow.vue';
+import ExpandedSalmonRunRow from './ExpandedSalmonRunRow.vue';
+
+const store = useSalmonRunSchedulesStore();
+</script>
+
+<style scoped>
+.bg-character {
+  background-image: url('@/assets/img/salmon-character.png'), url('@/assets/img/salmon-character-bg.png');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+:deep(.bg-monsters) {
+  background-image: url('@/assets/img/monsters-transparent-bg.png'),
+    linear-gradient(180deg, rgba(2, 0, 36, 0.10) 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.2) 100%);
+  background-size: 400px;
+  background-position: top center;
+}
+</style>

src/components/salmonrun/SalmonRunRow.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="font-splatoon2 space-y-1" v-if="props.schedule">
+    <div class="flex items-center">
+      <div>
+        <img src="@/assets/img/modes/coop.svg" class="w-6 mr-1" />
+      </div>
+
+      <div class="flex-1 text-shadow text-zinc-200">
+        {{ formatDateTime(props.schedule.startTime) }}
+        &ndash;
+        {{ formatDateTime(props.schedule.endTime) }}
+      </div>
+
+      <div class="hidden sm:block text-xs bg-zinc-100 bg-opacity-80 rounded text-black px-2">
+        in
+        {{ formatDurationFromNow(props.schedule.startTime, true) }}
+      </div>
+    </div>
+
+    <div class="flex items-center space-x-2">
+      <StageImage class="w-1/5" imgClass="rounded" :stage="props.schedule.settings.coopStage" hide-label />
+
+      <div class="flex-1 text-sm text-zinc-300 text-shadow">
+        {{ props.schedule.settings.coopStage.name }}
+      </div>
+
+      <div class="flex flex-col items-center space-y-1">
+        <SalmonRunWeapons :weapons="props.schedule.settings.weapons" weaponClass="w-8 sm:w-10" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { formatDateTime, formatDurationFromNow } from '@/common/time';
+import StageImage from '../StageImage.vue';
+import SalmonRunWeapons from './SalmonRunWeapons.vue';
+
+const props = defineProps({
+  schedule: Object,
+});
+</script>

src/components/salmonrun/SalmonRunWeapons.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="flex justify-center">
+    <div v-for="(weapon, i) in props.weapons" :key="i">
+      <img
+        :src="weapon.image.url"
+        :title="weapon.name"
+        class="aspect-square hover:scale-[1.15] hover:z-10 transition-transform"
+        :class="weaponClass"
+        />
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  weapons: {
+    type: Object,
+    required: true,
+  },
+  weaponClass: {
+    default: 'w-10',
+  },
+});
+</script>

src/router/index.js

@@ -1,5 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
+import SalmonRunView from '../views/SalmonRunView.vue'
 import GearView from '../views/GearView.vue'
 import AboutView from '../views/AboutView.vue'
 
@@ -11,6 +12,11 @@ const router = createRouter({
       name: 'home',
       component: HomeView
     },
+    {
+      path: '/salmonrun',
+      name: 'salmonrun',
+      component: SalmonRunView
+    },
     {
       path: '/gear',
       name: 'gear',

src/views/SalmonRunView.vue

@@ -0,0 +1,18 @@
+<template>
+  <MainLayout title="Salmon Run">
+    <div class="grow flex items-center justify-center">
+      <div class="mx-4 md:mx-12 w-full">
+        <div class="flex items-center justify-center flex-col lg:flex-row lg:items-start space-y-10 lg:space-y-0 lg:space-x-16">
+          <div class="w-full max-w-2xl">
+            <SalmonRunBox class="md:-rotate-1" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </MainLayout>
+</template>
+
+<script setup>
+import MainLayout from '@/layouts/MainLayout.vue'
+import SalmonRunBox from '../components/salmonrun/SalmonRunBox.vue';
+</script>

tailwind.config.js

@@ -22,6 +22,8 @@ module.exports = {
             ranked: '#f54910',
             league: '#f02d7d',
           },
+
+          salmonRun: '#ff5600',
         },
       },
       fontFamily: {