Add a social media post for challenge events

app/social/generators/ChallengeStatus.mjs

@@ -0,0 +1,42 @@
+import StatusGenerator from "./StatusGenerator.mjs";
+import Media from "../Media.mjs";
+import { useEventSchedulesStore } from "../../../src/stores/schedules.mjs";
+export default class ChallengeStatus extends StatusGenerator
+{
+  key = 'challenge';
+  name = 'Challenge';
+
+  async getActiveSchedule() {
+    await this.preparePinia();
+
+    let schedule = useEventSchedulesStore().activeSchedule;
+
+    if (schedule.activeTimePeriod) {
+      return schedule;
+    }
+  }
+
+  async getDataTime() {
+    let schedule = await this.getActiveSchedule();
+
+    return Date.parse(schedule?.activeTimePeriod?.start_time);
+  }
+
+  async _getStatus() {
+    let schedule = await this.getActiveSchedule();
+
+    return [
+      `A challenge event is now open! ${schedule.settings.leagueMatchEvent.name} – ${schedule.settings.leagueMatchEvent.desc}`,
+      '',
+      `Play ${schedule.settings.vsRule.name} on ${schedule.settings.vsStages[0].name} and ${schedule.settings.vsStages[0].name}! #splatoon3`
+    ].join('\n');
+  }
+
+  /** @param {ScreenshotHelper} screenshotHelper */
+  async _getMedia(screenshotHelper) {
+    let media = new Media;
+    media.file = await screenshotHelper.capture('challenges');
+
+    return media;
+  }
+}

app/social/index.mjs

@@ -14,12 +14,14 @@ import SalmonRunUpcomingStatus from "./generators/SalmonRunUpcomingStatus.mjs";
 import EggstraWorkStatus from "./generators/EggstraWorkStatus.mjs";
 import EggstraWorkUpcomingStatus from "./generators/EggstraWorkUpcomingStatus.mjs";
 import BlueskyClient from "./clients/BlueskyClient.mjs";
+import ChallengeStatus from "./generators/ChallengeStatus.mjs";
 
 function defaultStatusGenerators() {
   return [
     new SchedulesStatus,
     new DailyDropGearStatus,
     new RegularGearStatus,
+    new ChallengeStatus,
     new SalmonRunStatus,
     new SalmonRunUpcomingStatus,
     new SalmonRunGearStatus,

src/components/challenge/ChallengeScheduleBox.vue

@@ -46,7 +46,7 @@
               />
           </div>
 
-          <div class="mx-2 space-y-2" v-if="event.upcomingTimePeriods?.length">
+          <div class="mx-2 space-y-2 ss:hidden" v-if="event.upcomingTimePeriods?.length">
             <SquidTape class="font-splatoon2 text-sm drop-shadow -rotate-6 -mx-2 mt-4">
               <div class="px-2">{{ $t('times.future') }}</div>
             </SquidTape>

src/router/screenshots.js

@@ -2,6 +2,7 @@ import { createRouter, createWebHashHistory } from 'vue-router'
 import ScreenshotsHomeView from '@/views/screenshots/ScreenshotsHomeView.vue'
 import CountdownView from '@/views/screenshots/CountdownView.vue'
 import SchedulesView from '@/views/screenshots/SchedulesView.vue'
+import ChallengesView from '@/views/screenshots/ChallengesView.vue'
 import SalmonRunView from '@/views/screenshots/SalmonRunView.vue'
 import SalmonRunGearView from '@/views/screenshots/SalmonRunGearView.vue'
 import RegularGearView from '@/views/screenshots/RegularGearView.vue'
@@ -23,6 +24,10 @@ const router = createRouter({
       path: '/schedules',
       component: SchedulesView,
     },
+    {
+      path: '/challenges',
+      component: ChallengesView,
+    },
     {
       path: '/salmonrun',
       component: SalmonRunView,

src/views/screenshots/ChallengesView.vue

@@ -0,0 +1,21 @@
+<template>
+  <ScreenshotLayout header="Challenges">
+    <div class="grow flex items-center justify-center scale-[1.1]">
+      <ChallengeScheduleBox
+        v-if="store.activeSchedule"
+          :event="store.activeSchedule"
+          type="challenge"
+          class="w-full max-w-xl -rotate-1"
+          />
+    </div>
+
+  </ScreenshotLayout>
+</template>
+
+<script setup>
+import ScreenshotLayout from '../../layouts/ScreenshotLayout.vue';
+import ChallengeScheduleBox from '@/components/challenge/ChallengeScheduleBox.vue';
+import { useEventSchedulesStore } from '@/stores/schedules.mjs'
+
+const store = useEventSchedulesStore();
+</script>

src/views/screenshots/ScreenshotsHomeView.vue

@@ -9,6 +9,9 @@
       <div>
         <router-link to="/schedules">Schedules</router-link>
       </div>
+      <div>
+        <router-link to="/challenges">Challenges</router-link>
+      </div>
       <div>
         <router-link to="/salmonrun">Salmon Run</router-link>
       </div>