add countdown

src/renderer/lib/time.ts

@@ -18,3 +18,23 @@ export function convertFrameCountToDurationString(frameCount: number, format: "s
 export function monthDayHourFormat(date: Date): string {
   return format(date, "PP · p");
 }
+
+const formatDistanceLocale: Record<string, string> = {
+  xYears: "{{count}} yrs",
+  xMonths: "{{count}} months",
+  xWeeks: "{{count}} weeks",
+  xDays: "{{count}} days",
+  xHours: "{{count}} hrs",
+  xMinutes: "{{count}} mins",
+  xSeconds: "{{count}} secs",
+};
+
+export const shortEnLocale = {
+  formatDistance: (token: string, count: number) => {
+    const replacement = formatDistanceLocale[token];
+    if (replacement) {
+      return replacement.replace("{{count}}", count.toString());
+    }
+    return "";
+  },
+};

src/renderer/pages/home/sidebar/slippi_store.tsx

@@ -1,10 +1,14 @@
-import { Button } from "@mui/material";
+import { Button, Typography } from "@mui/material";
 import * as stylex from "@stylexjs/stylex";
+import { formatDuration, intervalToDuration, isBefore } from "date-fns";
 import React from "react";
 
 import { ExternalLink } from "@/components/external_link";
+import { shortEnLocale } from "@/lib/time";
 import shopImage from "@/styles/images/shop-image.png";
 
+const SHOP_CLOSES_AT = new Date("2024-02-28T08:00:00.000Z");
+
 const styles = stylex.create({
   container: {
     position: "relative",
@@ -19,21 +23,29 @@ const styles = stylex.create({
   },
   buttonContainer: {
     position: "absolute",
-    top: "160px",
+    top: "150px",
     left: "40px",
     width: "220px !important",
   },
   closeDate: {
     position: "absolute",
-    top: "210px",
-    left: "75px",
+    fontWeight: "bold",
+    top: "200px",
     width: "100%",
     color: "white",
-    fontSize: "16px",
+    fontSize: 15,
+    textAlign: "center",
   },
 });
 
-export const SlippiStore = React.memo(function SlippiStore() {
+const InternalSlippiStore = React.memo(function InternalSlippiStore({
+  shopOpen,
+  countdown,
+}: {
+  shopOpen: boolean;
+  countdown: string;
+}) {
+  const buttonText = shopOpen ? "Click to Shop" : "Shop closed";
   return (
     <div {...stylex.props(styles.container)}>
       <img src={shopImage} {...stylex.props(styles.image)} />
@@ -45,11 +57,43 @@ export const SlippiStore = React.memo(function SlippiStore() {
           fullWidth={true}
           LinkComponent={ExternalLink}
           href="https://start.gg/slippi/shop"
+          disabled={!shopOpen}
         >
-          Click to Shop
+          {buttonText}
         </Button>
       </div>
-      <div {...stylex.props(styles.closeDate)}>Store Ends: 2/27/24</div>
+      {countdown && (
+        <div {...stylex.props(styles.closeDate)}>
+          <Typography variant="overline" sx={{ lineHeight: "initial" }}>
+            Stop closes in
+          </Typography>
+          <Typography fontWeight="bold">{countdown}</Typography>
+        </div>
+      )}
     </div>
   );
 });
+
+export const SlippiStore = React.memo(function SlippiStore() {
+  const [shopOpen, setShopOpen] = React.useState(true);
+  const [countdown, setCountdown] = React.useState<string>("");
+
+  React.useEffect(() => {
+    const endDate = SHOP_CLOSES_AT;
+    const interval = setInterval(() => {
+      const now = new Date();
+      const duration = intervalToDuration({ start: now, end: endDate });
+
+      if (isBefore(endDate, now)) {
+        setShopOpen(false);
+        clearInterval(interval);
+      } else {
+        setCountdown(formatDuration(duration, { locale: shortEnLocale }));
+      }
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return <InternalSlippiStore shopOpen={shopOpen} countdown={countdown} />;
+});