Add /challenges

src/components/NavButtons.vue

@@ -6,6 +6,9 @@
     <router-link to="/salmonrun" class="router-link">
       {{ $t('salmonrun.title') }}
     </router-link>
+    <router-link to="/challenges" class="router-link">
+      {{ $t('challenges.title') }}
+    </router-link>
     <router-link to="/gear" class="router-link">
       {{ $t('gear.title') }}
     </router-link>

src/components/concerns/scheduleTypes.mjs

@@ -1,8 +1,9 @@
-import { useAnarchyOpenSchedulesStore, useAnarchySeriesSchedulesStore, useRegularSchedulesStore, useSplatfestSchedulesStore, useXSchedulesStore } from '@/stores/schedules';
+import { useAnarchyOpenSchedulesStore, useAnarchySeriesSchedulesStore, useRegularSchedulesStore, useSplatfestSchedulesStore, useXSchedulesStore, useChallengeSchedulesStore } from '@/stores/schedules';
 import battleRegularSvg from '@/assets/img/modes/regular.svg';
 import battleBankaraSvg from '@/assets/img/modes/bankara.svg';
 import battleXSvg from '@/assets/img/modes/x.svg';
 import battleLeagueSvg from '@/assets/img/modes/league.svg';
+import battleEventSvg from '@/assets/img/modes/event.svg';
 
 export function useScheduleTypes() {
   const types = {
@@ -41,6 +42,13 @@ export function useScheduleTypes() {
       img: battleRegularSvg,
       bg: 'bg-splatoon-battle-regular bg-tapes',
     },
+    challenge: {
+      name: 'schedule.types.challenge',
+      badge: null,
+      store: useChallengeSchedulesStore(),
+      img: battleEventSvg,
+      bg: 'bg-splatoon-battle-league bg-tapes',
+    },
   };
 
   return { types };

src/router/index.js

@@ -4,6 +4,7 @@ import SalmonRunView from '../views/SalmonRunView.vue'
 import GearView from '../views/GearView.vue'
 import AboutView from '../views/AboutView.vue'
 import SplatfestsView from '../views/SplatfestsView.vue'
+import ChallengesView from '../views/ChallengesView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -28,6 +29,11 @@ const router = createRouter({
       name: 'splatfests',
       component: SplatfestsView,
     },
+    {
+      path: '/challenges',
+      name: 'challenges',
+      component: ChallengesView,
+    },
     {
       path: '/about',
       name: 'about',

src/views/ChallengesView.vue

@@ -0,0 +1,15 @@
+<template>
+    <MainLayout :title="$t('challenges.title')">
+      <div class="grow flex items-center justify-center">
+        <div class="mx-4 md:mx-12 w-full space-y-10 max-w-xl">
+            <ChallengeScheduleBox type="challenge" class="flex-1 md:-rotate-1" />
+        </div>
+      </div>
+    </MainLayout>
+  </template>
+  
+  <script setup>
+  import MainLayout from '@/layouts/MainLayout.vue'
+  import ChallengeScheduleBox from '@/components/challenge/ChallengeScheduleBox.vue';
+  </script>
+