Beginning of implementations of Eggstra Work

src/components/salmonrun/ExpandedSalmonRunRow.vue

@@ -27,8 +27,8 @@
       </div>
     </div>
 
-    <div class="text-shadow text-zinc-300 ss:hidden">
-      <KingSalmonid :schedule="schedule" class="inline-block align-middle" />
+    <div class="text-shadow text-zinc-300 ss:hidden" v-if="!time.isUpcoming(schedule.startTime)">
+      <KingSalmonid :schedule="schedule" class="inline-block align-middle" v-if="!eggstra" />
 
       {{ $t('time.remaining', { time: formatDurationFromNow(schedule.endTime) }) }}
     </div>
@@ -61,6 +61,7 @@ import SalmonRunWeapons from './SalmonRunWeapons.vue';
 
 defineProps({
   schedule: Object,
+  eggstra: Boolean,
 });
 
 const time = useTimeStore();

src/components/salmonrun/SalmonRunBox.vue

@@ -1,13 +1,17 @@
 <template>
-  <ProductContainer bg="bg-splatoon-salmonRun bg-monsters" class="pt-8 overflow-hidden rounded-2xl">
+  <ProductContainer :bg="eggstra ? 'bg-splatoon-eggstraWork bg-monsters' : 'bg-splatoon-salmonRun bg-monsters'" class="pt-8 overflow-hidden rounded-2xl">
     <div class="space-y-2">
-      <div class="font-splatoon1 text-3xl mx-4 text-shadow">
+      <div class="font-splatoon1 text-3xl mx-4 text-shadow" v-if="eggstra">
+        {{ $t('salmonrun.eggstrawork') }}
+      </div>
+      <div class="font-splatoon1 text-3xl mx-4 text-shadow" v-else>
         {{ $t('salmonrun.title') }}
       </div>
 
       <div class="flex">
         <!-- Character graphic -->
-        <div class="flex-1 bg-character hidden md:block"></div>
+        <div class="flex-1 bg-eggstra hidden md:block" v-if="eggstra"></div>
+        <div class="flex-1 bg-character hidden md:block" v-else></div>
 
         <!-- Main content -->
         <div class="md:w-2/3 mx-2 pb-2">
@@ -16,7 +20,7 @@
               <div class="px-2">{{ $t('times.now') }}</div>
             </SquidTape>
 
-            <ExpandedSalmonRunRow :schedule="activeSchedule" />
+            <ExpandedSalmonRunRow :schedule="activeSchedule" :eggstra="eggstra"/>
           </div>
 
           <div class="py-1 bg-zinc-900 bg-opacity-70 rounded-lg backdrop-blur-sm" v-if="upcomingSchedules.length">
@@ -26,7 +30,7 @@
 
             <div class="mx-2 divide-y-2 divide-dashed divide-zinc-400">
               <div v-for="schedule in upcomingSchedules" :key="schedule.startTime">
-                <ExpandedSalmonRunRow class="my-3" :schedule="schedule" v-if="isScreenshot" />
+                <ExpandedSalmonRunRow class="my-3" :schedule="schedule" v-if="isScreenshot || eggstra" :eggstra="eggstra"/>
                 <SalmonRunRow class="my-2" :schedule="schedule" v-else />
               </div>
             </div>
@@ -39,7 +43,7 @@
 
 <script setup>
 import { computed } from 'vue';
-import { useSalmonRunSchedulesStore } from '@/stores/schedules.mjs';
+import { useSalmonRunSchedulesStore, useEggstraWorkSchedulesStore } from '@/stores/schedules.mjs';
 import ProductContainer from '../ProductContainer.vue';
 import SquidTape from '../SquidTape.vue';
 import SalmonRunRow from './SalmonRunRow.vue';
@@ -48,20 +52,22 @@ import ExpandedSalmonRunRow from './ExpandedSalmonRunRow.vue';
 const props = defineProps({
   isScreenshot: Boolean,
   startTime: String,
+  eggstra: Boolean,
 });
 
-const store = useSalmonRunSchedulesStore();
+const SRstore = useSalmonRunSchedulesStore();
+const EWstore = useEggstraWorkSchedulesStore();
 
 function filterSchedules(schedules) {
   return schedules.filter(s => !props.startTime || s?.startTime === props.startTime);
 }
-const activeSchedule = computed(() => filterSchedules([store.activeSchedule])[0]);
+const activeSchedule = computed(() => filterSchedules([props.eggstra ? EWstore.activeSchedule : SRstore.activeSchedule])[0]);
 const upcomingSchedules = computed(() => {
   if (props.isScreenshot && !props.startTime) {
     return [];
   }
 
-  return filterSchedules(store.upcomingSchedules);
+  return filterSchedules(props.eggstra ? EWstore.upcomingSchedules : SRstore.upcomingSchedules);
 });
 </script>
 
@@ -73,6 +79,13 @@ const upcomingSchedules = computed(() => {
   background-repeat: no-repeat;
 }
 
+.bg-eggstra {
+  background-image: url('@/assets/img/eggstra-work.png');
+  background-size: cover;
+  background-position: top, center;
+  background-repeat: no-repeat;
+}
+
 :deep(.bg-monsters) {
   background-image: url('@/assets/img/monsters-transparent-bg.png'),
     linear-gradient(180deg, rgba(2, 0, 36, 0.10) 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.2) 100%);

src/stores/schedules.mjs

@@ -29,6 +29,7 @@ function defineScheduleStore(id, options) {
     const activeSchedule = computed(() => schedules.value?.find(s => time.isActive(s.startTime, s.endTime)));
     const upcomingSchedules = computed(() => schedules.value?.filter(s => time.isUpcoming(s.startTime)));
 
+
     return { schedules, currentSchedules, activeSchedule, upcomingSchedules };
   });
 }
@@ -90,6 +91,12 @@ export const useSalmonRunSchedulesStore = defineScheduleStore('salmonRun', {
   settings: node => node.setting,
 });
 
+// Eggstra Work
+export const useEggstraWorkSchedulesStore = defineScheduleStore('eggstraWork', {
+  nodes: () => useSchedulesDataStore().data?.coopGroupingSchedule.teamContestSchedules.nodes || [],
+  settings: node => node.setting,
+});
+
 if (import.meta.hot) {
   import.meta.hot.accept(acceptHMRUpdate(useRegularSchedulesStore, import.meta.hot));
   import.meta.hot.accept(acceptHMRUpdate(useAnarchySeriesSchedulesStore, import.meta.hot));
@@ -97,4 +104,5 @@ if (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(useSalmonRunSchedulesStore, import.meta.hot));
+  import.meta.hot.accept(acceptHMRUpdate(useEggstraWorkSchedulesStore, import.meta.hot));
 }

src/views/SalmonRunView.vue

@@ -6,6 +6,9 @@
           <div class="w-full max-w-2xl">
             <SalmonRunBox class="md:-rotate-1" />
           </div>
+          <div class="w-full max-w-2xl" v-if="eggstraWork.schedules.length">
+            <SalmonRunBox class="md:rotate-1" eggstra/>
+          </div>
         </div>
       </div>
     </div>
@@ -13,6 +16,8 @@
 </template>
 
 <script setup>
+import { useEggstraWorkSchedulesStore } from '@/stores/schedules.mjs';
 import MainLayout from '@/layouts/MainLayout.vue'
 import SalmonRunBox from '../components/salmonrun/SalmonRunBox.vue';
+const eggstraWork = useEggstraWorkSchedulesStore();
 </script>

tailwind.config.js

@@ -26,6 +26,7 @@ module.exports = {
 
           salmonRun: '#ff5600',
           bigRun: '#b322ff',
+          eggstraWork: '#be8800'
         },
       },
       fontFamily: {