From 29ea70bd82837ac63b479ebe9560970da6fff138 Mon Sep 17 00:00:00 2001
From: Matt Isenhower <matt@isenhower.com>
Date: Fri, 23 Sep 2022 09:20:42 -0400
Subject: [PATCH] Update screenshot view for Splatfests

---
 src/components/SplatfestBox.vue                   |  2 +-
 .../screenshots/ScreenshotScheduleBox.vue         |  9 ++++++++-
 src/views/screenshots/SchedulesView.vue           | 15 ++++++++++++++-
 3 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/components/SplatfestBox.vue b/src/components/SplatfestBox.vue
index 6230453..3b0da1e 100644
--- a/src/components/SplatfestBox.vue
+++ b/src/components/SplatfestBox.vue
@@ -27,7 +27,7 @@
         </div>
       </div>
 
-      <div class="font-splatoon2 text-splatoon-yellow text-center mx-2">
+      <div class="font-splatoon2 text-splatoon-yellow text-center mx-2 ss:hidden">
         {{ formatDateTime(festival.startTime) }}
         &ndash;
         {{ formatDateTime(festival.endTime) }}
diff --git a/src/components/screenshots/ScreenshotScheduleBox.vue b/src/components/screenshots/ScreenshotScheduleBox.vue
index 9bf8d99..e8a2dce 100644
--- a/src/components/screenshots/ScreenshotScheduleBox.vue
+++ b/src/components/screenshots/ScreenshotScheduleBox.vue
@@ -46,7 +46,7 @@
 
 <script setup>
 import { computed } from '@vue/reactivity';
-import { useAnarchyOpenSchedulesStore, useAnarchySeriesSchedulesStore, useRegularSchedulesStore } from '@/stores/schedules';
+import { useAnarchyOpenSchedulesStore, useAnarchySeriesSchedulesStore, useRegularSchedulesStore, useSplatfestSchedulesStore } from '@/stores/schedules';
 import ProductContainer from '../ProductContainer.vue';
 import StageImage from '../StageImage.vue';
 
@@ -83,6 +83,13 @@ const types = {
     img: battleBankaraSvg,
     bg: 'bg-splatoon-battle-ranked bg-tapes',
   },
+  splatfest: {
+    name: 'Splatfest Battle',
+    badge: null,
+    store: useSplatfestSchedulesStore(),
+    img: battleRegularSvg,
+    bg: 'bg-splatoon-battle-regular bg-tapes',
+  },
 };
 
 const type = computed(() => types[props.type]);
diff --git a/src/views/screenshots/SchedulesView.vue b/src/views/screenshots/SchedulesView.vue
index 04d1b82..39ec6d3 100644
--- a/src/views/screenshots/SchedulesView.vue
+++ b/src/views/screenshots/SchedulesView.vue
@@ -1,7 +1,16 @@
 <template>
   <ScreenshotLayout header="Map Schedules">
     <div class="grow flex items-center justify-center">
-      <div class="flex space-x-6 mx-6">
+      <div class="flex space-x-12 items-center mx-6" v-if="usSplatfests.activeFestival">
+        <div class="mx-10">
+            <SplatfestBox
+              :festival="usSplatfests.activeFestival"
+              class="flex-1 max-w-md md:-rotate-1 scale-[1.2]"
+              />
+        </div>
+        <ScreenshotScheduleBox type="splatfest" class="flex-1 rotate-1" />
+      </div>
+      <div class="flex space-x-6 mx-6" v-else>
         <ScreenshotScheduleBox type="regular" class="flex-1 -rotate-1" />
         <ScreenshotScheduleBox type="anarchySeries" class="flex-1 rotate-1" />
         <ScreenshotScheduleBox type="anarchyOpen" class="flex-1 -rotate-1" />
@@ -13,4 +22,8 @@
 <script setup>
 import ScreenshotLayout from '../../layouts/ScreenshotLayout.vue';
 import ScreenshotScheduleBox from '../../components/screenshots/ScreenshotScheduleBox.vue';
+
+import { useUSSplatfestsStore } from '@/stores/splatfests';
+import SplatfestBox from '@/components/SplatfestBox.vue';
+const usSplatfests = useUSSplatfestsStore();
 </script>