Merge branch 'splatfests' into main

src/assets/i18n/de-DE.json

@@ -38,6 +38,7 @@
     "bigrun": "Big Run"
   },
   "festival": {
+    "title": "Splatfeste",
     "upcoming": "Bevorstehendes Splatfest",
     "active": "Splatfest",
     "past": "Letztes Splatfest",

src/assets/i18n/en-GB.json

@@ -37,6 +37,7 @@
     "bigrun": "Big Run"
   },
   "festival": {
+    "title": "Splatfests",
     "upcoming": "Upcoming Splatfest",
     "active": "Splatfest",
     "past": "Recent Splatfest",

src/assets/i18n/en-US.json

@@ -38,6 +38,7 @@
     "bigrun": "Big Run"
   },
   "festival": {
+    "title": "Splatfests",
     "upcoming": "Upcoming Splatfest",
     "active": "Splatfest",
     "past": "Recent Splatfest",

src/assets/i18n/es-ES.json

@@ -36,6 +36,7 @@
     "bigrun": "Big Run"
   },
   "festival": {
+    "title": "Festivales",
     "upcoming": "Festival",
     "active": "Festival",
     "past": "Festival",

src/assets/i18n/es-MX.json

@@ -36,6 +36,7 @@
     "bigrun": "Big Run"
   },
   "festival": {
+    "title": "Festivales",
     "upcoming": "Festivales",
     "active": "Festivales",
     "past": "Festivales",

src/assets/i18n/fr-CA.json

@@ -37,6 +37,7 @@
     "bigrun": "Big Run"
   },
   "festival": {
+    "title": "Festivals",
     "upcoming": "Festival",
     "active": "Festival",
     "past": "Festival",

src/assets/i18n/fr-FR.json

@@ -38,6 +38,7 @@
     "bigrun": "Big Run"
   },
   "festival": {
+    "title": "Festivals",
     "upcoming": "Festival",
     "active": "Festival",
     "past": "Festival",

src/assets/i18n/it-IT.json

@@ -36,6 +36,7 @@
     "bigrun": "Big Run"
   },
   "festival": {
+    "title": "Festival",
     "upcoming": "Festival",
     "active": "Festival",
     "past": "Festival",

src/assets/i18n/ja-JP.json

@@ -36,6 +36,7 @@
     "bigrun": "ビッグラン"
   },
   "festival": {
+    "title": "フェス",
     "upcoming": "フェス",
     "active": "フェス",
     "past": "フェス",

src/assets/i18n/ko-KR.json

@@ -36,6 +36,7 @@
     "bigrun": "빅 런"
   },
   "festival": {
+    "title": "페스티벌",
     "upcoming": "페스티벌",
     "active": "페스티벌",
     "past": "페스티벌",

src/assets/i18n/nl-NL.json

@@ -36,6 +36,7 @@
     "bigrun": "Big Run"
   },
   "festival": {
+    "title": "Splatfests",
     "upcoming": "Splatfest",
     "active": "Splatfest",
     "past": "Splatfest",

src/assets/i18n/ru-RU.json

@@ -36,6 +36,7 @@
     "bigrun": "Big Run"
   },
   "festival": {
+    "title": "Сплатфест",
     "upcoming": "Сплатфест",
     "active": "Сплатфест",
     "past": "Сплатфест",

src/assets/i18n/zh-CN.json

@@ -37,6 +37,7 @@
     "bigrun": "大型跑"
   },
   "festival": {
+    "title": "祭典",
     "upcoming": "祭典",
     "active": "祭典",
     "past": "祭典",

src/assets/i18n/zh-TW.json

@@ -36,6 +36,7 @@
     "bigrun": "大型跑"
   },
   "festival": {
+    "title": "祭典",
     "upcoming": "祭典",
     "active": "祭典",
     "past": "祭典",

src/components/NavButtons.vue

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

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>