feat(timer40k): display day, hour and minutes until deadline

apps/timer40k/app/Display.tsx

@@ -15,6 +15,27 @@ export type DisplayProperties = {
   releaseDate: string,
   earlyReleaseDate: string,
 };
+
+const getNumber = (input: number) => Number.parseInt(`${Math.abs(input)}`, 10);
+
+const computeDisplayDiff = (
+  now: number,
+  input: string,
+) => {
+  let current = dayjs(now);
+  const target = dayjs(input);
+  const days = current.diff(target, 'day');
+  current = current.add(Math.abs(days), 'day');
+  const hours = current.diff(target, 'hour');
+  current = current.add(Math.abs(hours), 'hour');
+  const minutes = current.diff(target, 'minute');
+  return [
+    (days && `${getNumber(days)} days`),
+    (hours && `${getNumber(hours)} hours`),
+    (minutes && `${getNumber(minutes)} minutes`),
+  ].filter(Boolean).join(', ');
+};
+
 export function Display({
   releasedImage,
   earlyReleaseImage,
@@ -43,6 +64,10 @@ export function Display({
     || (earlyReleaseDiff >= 0 && earlyReleaseImage)
     || upcomingImage
   ) as any;
+  const releaseText = computeDisplayDiff(time, releaseDate);
+  const earlyReleaseText = earlyReleaseDate
+    ? computeDisplayDiff(time, earlyReleaseDate)
+    : undefined;
   return (
     <>
       <div className="background">
@@ -53,13 +78,13 @@ export function Display({
         <h1>
           {releaseDiff >= 0
             ? String.raw`It's released, what are you doing here?`
-            : `Releasing in ${Number.parseInt(`${0 - releaseDiff}`, 10)} days`}
+            : `Releasing in ${releaseText}`}
         </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`}
+              : `Early release in in ${earlyReleaseText}`}
           </h2>
         )}
       </div>