feat(timer40k): add early release date

apps/timer40k/app/Display.tsx

@@ -9,14 +9,18 @@ import {
 import dayjs from 'dayjs';
 
 export type DisplayProperties = {
-  yes: Partial<ComponentProps<typeof Image>>,
-  no: Partial<ComponentProps<typeof Image>>,
+  releasedImage: Partial<ComponentProps<typeof Image>>,
+  earlyReleaseImage: Partial<ComponentProps<typeof Image>>,
+  upcomingImage: Partial<ComponentProps<typeof Image>>,
   releaseDate: string,
+  earlyReleaseDate: string,
 };
 export function Display({
-  yes,
-  no,
+  releasedImage,
+  earlyReleaseImage,
+  upcomingImage,
   releaseDate,
+  earlyReleaseDate,
 }: DisplayProperties) {
   const [
     time,
@@ -32,22 +36,33 @@ export function Display({
     },
     [],
   );
-  const diff = dayjs(time).diff(dayjs(releaseDate), 'day', true);
-  const isReleased = diff >= 0;
-  const toRender = (isReleased ? yes : no) as any;
-  const text = (isReleased
-    ? String.raw`It's released, what are you doing here?`
-    : `Coming out in ${Number.parseInt(`${0 - diff}`, 10)} days`
-  )
+  const releaseDiff = dayjs(time).diff(dayjs(releaseDate), 'day', true);
+  const earlyReleaseDiff = earlyReleaseDate ? dayjs(time).diff(dayjs(earlyReleaseDate), 'day', true) : 0 - Infinity;
+  const imageToRender = (
+    (releaseDiff >= 0 && releasedImage)
+    || (earlyReleaseDiff >= 0 && earlyReleaseImage)
+    || upcomingImage
+  ) as any;
   return (
     <>
       <div className="background">
-        <Image {...toRender} alt="status-bg" />
+        <Image {...imageToRender} alt="status-bg" />
       </div>
       <div className="foreground">
-        <Image {...toRender} alt="status" />
-        <h1>{text}</h1>
+        <Image {...imageToRender} alt="status" />
+        <h1>
+          {releaseDiff >= 0
+            ? String.raw`It's released, what are you doing here?`
+            : `Releasing in ${Number.parseInt(`${0 - releaseDiff}`, 10)} days`}
+        </h1>
+        {earlyReleaseDate && (
+          <h2>
+            {earlyReleaseDiff >= 0
+              ? String.raw`It's in early release. Go have fun, you wealthy git.`
+              : `Early release in in ${Number.parseInt(`${0 - earlyReleaseDiff}`, 10)} days`}
+          </h2>
+        )}
       </div>
     </>
   );
-}
+}

apps/timer40k/app/env.ts

@@ -1,12 +1,17 @@
+// eslint-disable-next-line unicorn/prevent-abbreviations
 import { z } from 'zod';
 
-const envSchema = z.object({
+const environmentSchema = z.object({
   TIMER_40K_RELEASE_DATE: z.string(),
   TIMER_40K_GAME_NAME: z.string(),
+  TIMER_40K_EARLY_RELEASE_DATE: z.string().optional(),
 });
 
-export type EnvType = z.infer<typeof envSchema>;
-export const env = envSchema.parse({
+// eslint-disable-next-line unicorn/prevent-abbreviations
+export type EnvType = z.infer<typeof environmentSchema>;
+// eslint-disable-next-line unicorn/prevent-abbreviations
+export const env = environmentSchema.parse({
   TIMER_40K_RELEASE_DATE: process.env.TIMER_40K_RELEASE_DATE,
+  TIMER_40K_EARLY_RELEASE_DATE: process.env.TIMER_40K_EARLY_RELEASE_DATE,
   TIMER_40K_GAME_NAME: process.env.TIMER_40K_GAME_NAME,
-});
+});

apps/timer40k/app/index.css

@@ -53,14 +53,23 @@ html, body, #root {
     flex-flow: column nowrap;
 }
 
-.foreground h1 {
-    padding: 1.5rem;
+.foreground :is(h1, h2) {
+    padding-block-start: 1.5rem;
     text-transform: uppercase;
     font-size: 2rem;
     text-shadow: 0 1px 5px black;
 }
 
+.foreground h2 {
+  opacity: 0.6;
+}
+
 .foreground img {
     box-shadow: 0px 0px 12px 0px black;
     border-radius: 5px;
+    width: auto;
+    height: auto;
+    max-width: 75cqw;
+    min-height: 50cqh;
+    max-height: 60cqh;
 }

apps/timer40k/app/page.tsx

@@ -5,18 +5,24 @@ import { env as environment } from './env';
 export default function Home() {
   return (
     <Display {...{
-      yes: {
+      releasedImage: {
         src: '/yes.jpg',
         width: '688',
         height: '1159',
       },
-      no: {
+      upcomingImage: {
         src: '/no.jpg',
         width: '800',
         height: '518',
       },
+      earlyReleaseImage: {
+        src: '/maybe.png',
+        width: '2062',
+        height: '1798',
+      },
       releaseDate: environment.TIMER_40K_RELEASE_DATE,
+      earlyReleaseDate: environment.TIMER_40K_EARLY_RELEASE_DATE,
     }}
     />
   );
-}
+}