add splatfests page

src/components/SplatfestBox.vue

@@ -44,9 +44,13 @@ import SquidTape from './SquidTape.vue';
 
 const props = defineProps({
   festival: Object,
+  historyMode: Boolean,
 });
 
 const title = computed(() => {
+  if (props.historyMode) {
+    return 'festival.active';
+  }
   switch (props.festival.status) {
     case STATUS_PAST:
       return 'festival.past';

src/router/index.js

@@ -3,6 +3,7 @@ import HomeView from '../views/HomeView.vue'
 import SalmonRunView from '../views/SalmonRunView.vue'
 import GearView from '../views/GearView.vue'
 import AboutView from '../views/AboutView.vue'
+import SplatfestsView from '../views/SplatfestsView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -22,6 +23,11 @@ const router = createRouter({
       name: 'gear',
       component: GearView,
     },
+    {
+      path: '/splatfests',
+      name: 'splatfests',
+      component: SplatfestsView,
+    },
     {
       path: '/about',
       name: 'about',

src/views/SplatfestsView.vue

@@ -0,0 +1,32 @@
+<template>
+  <MainLayout :title="$t('festival.title')">
+    <div class="grow flex items-center justify-center">
+      <div class="mx-4 md:mx-12 w-full space-y-10">
+        <div v-for="festival in festivalsWithResults" class="flex flex-wrap items-center justify-center gap-y-6 md:gap-x-6">
+          <SplatfestBox
+            :festival="festival"
+            class="max-w-md md:-rotate-1"
+            history-mode
+            />
+
+          <SplatfestResultsBox
+            :festival="festival"
+            class="w-full sm:max-w-md md:rotate-1"
+            />
+        </div>
+      </div>
+    </div>
+  </MainLayout>
+</template>
+  
+<script setup>
+import { computed } from 'vue';
+import MainLayout from '@/layouts/MainLayout.vue'
+
+import { useUSSplatfestsStore } from '@/stores/splatfests';
+import SplatfestBox from '../components/SplatfestBox.vue';
+import SplatfestResultsBox from '../components/SplatfestResultsBox.vue';
+const usSplatfests = useUSSplatfestsStore();
+const festivalsWithResults = computed(() => usSplatfests.festivals.filter(f => f.hasResults));
+
+</script>