Splatfest Open/Pro/Tricolor split

also fix breaking change to anarchy battles

src/components/ScheduleBox.vue

@@ -48,21 +48,6 @@
             img-class="rounded-r-xl"
             :stage="store.activeSchedule?.settings?.vsStages[1]"
           />
-          <div v-if="tricolor?.isTricolorActive" class="flex-1 relative">
-            <StageImage
-              img-class="rounded-xl"
-              :stage="tricolor?.tricolorStage"
-            />
-
-            <div class="absolute top-0 right-0 rounded-full bg-black p-1">
-              <TricolorIcon
-                class="h-6 w-6"
-                :a="tricolor?.teams[0]?.color"
-                :b="tricolor?.teams[1]?.color"
-                :c="tricolor?.teams[2]?.color"
-              />
-            </div>
-          </div>
         </div>
       </div>
 
@@ -90,7 +75,6 @@
 
 <script setup>
 import { computed, ref } from 'vue';
-import { useUSSplatfestsStore } from '@/stores/splatfests';
 import ProductContainer from './ProductContainer.vue';
 import StageImage from './StageImage.vue';
 import ScheduleRow from './ScheduleRow.vue';
@@ -98,7 +82,6 @@ import RuleIcon from './RuleIcon.vue';
 import SquidTape from './SquidTape.vue';
 import { useScheduleTypes } from './concerns/scheduleTypes.mjs';
 import ScheduleDialog from './ScheduleDialog.vue';
-import TricolorIcon from './TricolorIcon.vue';
 
 const props = defineProps({
   type: {
@@ -112,7 +95,6 @@ const { types } = useScheduleTypes();
 const type = computed(() => types[props.type]);
 const store = computed(() => type.value.store);
 const nextSchedule = computed(() => store.value.upcomingSchedules?.[0]);
-const tricolor = computed(() => useUSSplatfestsStore().tricolor);
 
 const open = ref(false);
 </script>

src/components/TricolorBox.vue

@@ -0,0 +1,74 @@
+<template>
+  <ProductContainer :bg="type.bg" class="w-full pt-10 pb-4">
+    <div class="space-y-2">
+      <div class="flex items-center space-x-2 mx-2">
+        <img :src="type.img" />
+        <div class="font-splatoon1 lg:text-2xl xl:text-3xl text-shadow">
+          {{ $t(type.name) }}
+        </div>
+        <div v-if="type.badge" class="font-splatoon2 text-xs lg:text-sm xl:text-base bg-splatoon-blue rounded px-1 drop-shadow">
+          {{ $t(type.badge) }}
+        </div>
+      </div>
+
+      <div class="bg-zinc-900 bg-opacity-70 backdrop-blur-sm pt-2 pb-6 px-2 mx-1 rounded-lg space-y-2">
+        <div class="flex items-center justify-between font-splatoon2">
+          <div class="flex items-center space-x-2 text-sm lg:text-lg">
+            <div>
+              <TricolorIcon
+                class="h-6 w-6"
+                :a="tricolor?.teams[0]?.color"
+                :b="tricolor?.teams[1]?.color"
+                :c="tricolor?.teams[2]?.color"
+              />
+            </div>
+            <div class="text-shadow">
+              {{ $t("splatnet.rules.TRI_COLOR.name", "Tricolor Turf War") }}
+            </div>
+          </div>
+
+          <div v-if="tricolor.startTime && tricolor.endTime" class="justify-end text-xs lg:text-sm bg-zinc-100 bg-opacity-80 rounded text-black px-2">
+            {{ $d(tricolor.startTime, 'dateTimeShort') }}
+            &ndash;
+            {{ $d(tricolor.endTime, 'dateTimeShort') }}
+          </div>
+        </div>
+
+        <div class="flex space-x-1">
+          <div class="flex-1 relative">
+            <StageImage
+              img-class="rounded-xl"
+              :stage="tricolor?.tricolorStage"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </ProductContainer>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { useUSSplatfestsStore } from '@/stores/splatfests';
+import ProductContainer from './ProductContainer.vue';
+import StageImage from './StageImage.vue';
+import RuleIcon from './RuleIcon.vue';
+import { useScheduleTypes } from './concerns/scheduleTypes.mjs';
+import TricolorIcon from './TricolorIcon.vue';
+
+
+const { types } = useScheduleTypes();
+
+const type = computed(() => types["splatfestTricolor"]);
+const tricolor = computed(() => useUSSplatfestsStore().tricolor);
+
+
+</script>
+
+<style scoped>
+:deep(.bg-tapes) {
+  background-image: url('@/assets/img/tapes-transparent.png'),
+    linear-gradient(180deg, rgba(2, 0, 36, 0.10) 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.25) 100%);
+  background-size: contain;
+}
+</style>

src/components/concerns/scheduleTypes.mjs

@@ -1,4 +1,4 @@
-import { useAnarchyOpenSchedulesStore, useAnarchySeriesSchedulesStore, useRegularSchedulesStore, useSplatfestSchedulesStore, useXSchedulesStore, useEventSchedulesStore } from '@/stores/schedules';
+import { useAnarchyOpenSchedulesStore, useAnarchySeriesSchedulesStore, useRegularSchedulesStore, useSplatfestOpenSchedulesStore, useSplatfestProSchedulesStore, useXSchedulesStore, useEventSchedulesStore } 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';
@@ -35,10 +35,24 @@ export function useScheduleTypes() {
       img: battleXSvg,
       bg: 'bg-splatoon-battle-xmatch bg-tapes',
     },
-    splatfest: {
+    splatfestOpen: {
       name: 'schedule.types.splatfest',
-      badge: null,
-      store: useSplatfestSchedulesStore(),
+      badge: 'schedule.types.open',
+      store: useSplatfestOpenSchedulesStore(),
+      img: battleRegularSvg,
+      bg: 'bg-splatoon-battle-regular bg-tapes',
+    },
+    splatfestPro: {
+      name: 'schedule.types.splatfest',
+      badge: 'schedule.types.pro',
+      store: useSplatfestProSchedulesStore(),
+      img: battleRegularSvg,
+      bg: 'bg-splatoon-battle-regular bg-tapes',
+    },
+    splatfestTricolor: {
+      name: 'schedule.types.splatfest',
+      badge: 'schedule.types.tricolor',
+      store: useSplatfestProSchedulesStore(),
       img: battleRegularSvg,
       bg: 'bg-splatoon-battle-regular bg-tapes',
     },

src/components/screenshots/ScreenshotScheduleBox.vue

@@ -41,23 +41,6 @@
             :stage="store.activeSchedule.settings.vsStages[1]"
             text-size="text-xl"
           />
-
-          <div v-if="tricolor?.isTricolorActive" class="flex-1 relative">
-            <StageImage
-              img-class="rounded-2xl"
-              :stage="tricolor?.tricolorStage"
-              text-size="text-xl"
-            />
-
-            <div class="absolute top-0 right-0 rounded-full bg-black p-1">
-              <TricolorIcon
-                class="h-12 w-12"
-                :a="tricolor?.teams[0]?.color"
-                :b="tricolor?.teams[1]?.color"
-                :c="tricolor?.teams[2]?.color"
-              />
-            </div>
-          </div>
         </div>
       </div>
     </div>
@@ -70,7 +53,6 @@ import { useUSSplatfestsStore } from '@/stores/splatfests';
 import ProductContainer from '../ProductContainer.vue';
 import StageImage from '../StageImage.vue';
 import RuleIcon from '../RuleIcon.vue';
-import TricolorIcon from '../TricolorIcon.vue';
 import { useScheduleTypes } from '@/components/concerns/scheduleTypes.mjs';
 
 const props = defineProps({
@@ -84,7 +66,6 @@ const { types } = useScheduleTypes();
 
 const type = computed(() => types[props.type]);
 const store = computed(() => type.value.store);
-const tricolor = computed(() => useUSSplatfestsStore().tricolor);
 </script>
 
 <style scoped>

src/components/screenshots/ScreenshotTricolorBox.vue

@@ -0,0 +1,69 @@
+<template>
+  <ProductContainer :bg="type.bg" class="pt-10 max-w-sm">
+    <div class="space-y-2">
+      <div class="flex items-center justify-center space-x-1 mx-2">
+        <div class="font-splatoon1 text-2xl text-shadow">
+          {{ $t(type.name) }}
+        </div>
+      </div>
+
+      <div  class="pt-2 pb-6 px-2 space-y-2">
+        <div class="flex items-center justify-between font-splatoon2">
+          <div class="flex items-center space-x-2 text-xl">
+            <div>
+              <TricolorIcon
+                class="h-8 drop-shadow-ruleIcon"
+                :a="tricolor?.teams[0]?.color"
+                :b="tricolor?.teams[1]?.color"
+                :c="tricolor?.teams[2]?.color"
+              />
+            </div>
+            <div class="text-shadow">
+              Tricolor Turf War
+            </div>
+          </div>
+
+          <div>
+            <div v-if="type.badge" class="flex items-center">
+              <img :src="type.img" class="h-8" />
+              <div v-if="type.badge" class="font-splatoon2 text-xl bg-splatoon-blue px-2 drop-shadow rounded">
+                {{ $t(type.badge) }}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="space-y-8">
+          <StageImage
+            img-class="rounded-2xl"
+            :stage="tricolor?.tricolorStage"
+            text-size="text-xl"
+          />
+        </div>
+      </div>
+    </div>
+  </ProductContainer>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { useUSSplatfestsStore } from '@/stores/splatfests';
+import ProductContainer from '../ProductContainer.vue';
+import StageImage from '../StageImage.vue';
+import TricolorIcon from '../TricolorIcon.vue';
+import { useScheduleTypes } from '@/components/concerns/scheduleTypes.mjs';
+
+
+const { types } = useScheduleTypes();
+
+const type = computed(() => types["splatfestTricolor"]);
+const tricolor = computed(() => useUSSplatfestsStore().tricolor);
+</script>
+
+<style scoped>
+:deep(.bg-tapes) {
+  background-image: url('@/assets/img/tapes-transparent.png'),
+    linear-gradient(180deg, rgba(2, 0, 36, 0.10) 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.25) 100%);
+  background-size: contain;
+}
+</style>

src/stores/schedules.mjs

@@ -50,13 +50,13 @@ export const useRegularSchedulesStore = defineScheduleStore('regular', {
 // Anarchy Battle (Series)
 export const useAnarchySeriesSchedulesStore = defineScheduleStore('anarchy/series', {
   nodes: () => useSchedulesDataStore().data?.bankaraSchedules.nodes,
-  settings: node => node.bankaraMatchSettings?.find(s => s.mode === 'CHALLENGE'),
+  settings: node => node.bankaraMatchSettings?.find(s => s.bankaraMode === 'CHALLENGE'),
 });
 
 // Anarchy Battle (Open)
 export const useAnarchyOpenSchedulesStore = defineScheduleStore('anarchy/open', {
   nodes: () => useSchedulesDataStore().data?.bankaraSchedules.nodes,
-  settings: node => node.bankaraMatchSettings?.find(s => s.mode === 'OPEN'),
+  settings: node => node.bankaraMatchSettings?.find(s => s.bankaraMode === 'OPEN'),
 });
 
 // X Battle
@@ -65,10 +65,16 @@ export const useXSchedulesStore = defineScheduleStore('xmatch', {
   settings: node => node.xMatchSetting,
 });
 
-// Splatfest Battle
-export const useSplatfestSchedulesStore = defineScheduleStore('splatfest', {
+// Splatfest Battle (Open)
+export const useSplatfestOpenSchedulesStore = defineScheduleStore('splatfest/open', {
   nodes: () => useSchedulesDataStore().data?.festSchedules.nodes,
-  settings: node => node.festMatchSetting,
+  settings: node => node.festMatchSettings?.find(s => s.festMode === 'OPEN'),
+});
+
+// Splatfest Battle (Pro)
+export const useSplatfestProSchedulesStore = defineScheduleStore('splatfest/pro', {
+  nodes: () => useSchedulesDataStore().data?.festSchedules.nodes,
+  settings: node => node.festMatchSettings?.find(s => s.festMode === 'CHALLENGE'),
 });
 
 // Challenge Events
@@ -124,7 +130,8 @@ if (import.meta.hot) {
   import.meta.hot.accept(acceptHMRUpdate(useAnarchySeriesSchedulesStore, import.meta.hot));
   import.meta.hot.accept(acceptHMRUpdate(useAnarchyOpenSchedulesStore, import.meta.hot));
   import.meta.hot.accept(acceptHMRUpdate(useXSchedulesStore, import.meta.hot));
-  import.meta.hot.accept(acceptHMRUpdate(useSplatfestSchedulesStore, import.meta.hot));
+  import.meta.hot.accept(acceptHMRUpdate(useSplatfestOpenSchedulesStore, import.meta.hot));
+  import.meta.hot.accept(acceptHMRUpdate(useSplatfestProSchedulesStore, import.meta.hot));
   import.meta.hot.accept(acceptHMRUpdate(useEventSchedulesStore, import.meta.hot));
   import.meta.hot.accept(acceptHMRUpdate(useSalmonRunSchedulesStore, import.meta.hot));
   import.meta.hot.accept(acceptHMRUpdate(useEggstraWorkSchedulesStore, import.meta.hot));

src/stores/splatfests.mjs

@@ -60,6 +60,8 @@ function defineSplatfestRegionStore(region) {
       return {
         ...fest,
         isTricolorActive: time.isActive(fest.midtermTime, fest.endTime),
+        startTime: fest.midtermTime,
+        endTime: fest.endTime,
       };
     });
 

src/views/HomeView.vue

@@ -4,8 +4,10 @@
       <div class="mx-4 md:mx-12 w-full space-y-10">
         <div class="flex flex-wrap justify-center items-center gap-6">
           <template v-if="usSplatfests.activeFestival">
-            <SplatfestBox :festival="usSplatfests.activeFestival" class="max-w-md md:-rotate-1" />
-            <ScheduleBox type="splatfest" class="max-w-lg md:rotate-1" />
+            <SplatfestBox :festival="usSplatfests.activeFestival" class="md:max-w-md 2xl:max-w-lg md:-rotate-1" />
+            <ScheduleBox type="splatfestOpen" class="md:max-w-md 2xl:max-w-lg md:-rotate-1" />
+            <ScheduleBox type="splatfestPro" class="md:max-w-md 2xl:max-w-lg md:-rotate-1" />
+            <TricolorBox v-if="tricolor?.isTricolorActive" class="md:max-w-md 2xl:max-w-lg md:rotate-1" />
           </template>
 
           <template v-else>
@@ -40,11 +42,14 @@
 </template>
 
 <script setup>
+import { computed } from 'vue';
 import MainLayout from '@/layouts/MainLayout.vue'
 import ScheduleBox from '../components/ScheduleBox.vue';
+import TricolorBox from '../components/TricolorBox.vue';
 
 import { useUSSplatfestsStore } from '@/stores/splatfests';
 import SplatfestBox from '../components/SplatfestBox.vue';
 import SplatfestResultsBox from '../components/SplatfestResultsBox.vue';
 const usSplatfests = useUSSplatfestsStore();
+const tricolor = computed(() => usSplatfests.tricolor);
 </script>

src/views/screenshots/SchedulesView.vue

@@ -1,14 +1,16 @@
 <template>
   <ScreenshotLayout header="Map Schedules">
     <div class="grow flex items-center justify-center">
-      <div v-if="usSplatfests.activeFestival" class="flex space-x-12 items-center mx-6">
+      <div v-if="usSplatfests.activeFestival" class="flex space-x-6 items-center mx-6">
         <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" />
+        <ScreenshotScheduleBox type="splatfestOpen" class="flex-1 rotate-1" />
+        <ScreenshotScheduleBox type="splatfestPro" class="flex-1 -rotate-1" />
+        <ScreenshotTricolorBox v-if="tricolor?.isTricolorActive" class="flex-1 rotate-1" />
       </div>
 
       <div v-else class="flex space-x-6 mx-6">
@@ -22,10 +24,13 @@
 </template>
 
 <script setup>
+import { computed } from 'vue';
 import ScreenshotLayout from '../../layouts/ScreenshotLayout.vue';
 import ScreenshotScheduleBox from '../../components/screenshots/ScreenshotScheduleBox.vue';
 
 import { useUSSplatfestsStore } from '@/stores/splatfests';
 import SplatfestBox from '@/components/SplatfestBox.vue';
+import ScreenshotTricolorBox from '../../components/screenshots/ScreenshotTricolorBox.vue';
 const usSplatfests = useUSSplatfestsStore();
+const tricolor = computed(() => usSplatfests.tricolor);
 </script>