Home Page (#740)

gahh i cant believe I'm merging this ugly time display hahaha

frontend2/package.json

@@ -21,6 +21,7 @@
     "react-hot-toast": "^2.4.1",
     "react-markdown": "^8.0.7",
     "react-router-dom": "^6.13.0",
+    "react-social-icons": "^6.10.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

frontend2/src/components/CountdownDigital.tsx

@@ -0,0 +1,61 @@
+import { useQueryClient } from "@tanstack/react-query";
+import React, { useEffect } from "react";
+import { episodeQueryKeys } from "../api/episode/episodeKeys";
+import { useEpisodeId } from "../contexts/EpisodeContext";
+
+interface CountdownDigitalProps {
+  date: Date;
+  title?: string;
+}
+
+const CountdownDigital: React.FC<CountdownDigitalProps> = ({
+  date,
+  title = "",
+}) => {
+  const { episodeId } = useEpisodeId();
+  const queryClient = useQueryClient();
+  const dateHasPassed = date.getTime() < new Date().getTime();
+
+  const days = Math.floor(
+    (date.getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24),
+  );
+  const hours = Math.floor(
+    ((date.getTime() - new Date().getTime()) % (1000 * 60 * 60 * 24)) /
+      (1000 * 60 * 60),
+  );
+  const minutes = Math.floor(
+    ((date.getTime() - new Date().getTime()) % (1000 * 60 * 60)) / (1000 * 60),
+  );
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      void queryClient.refetchQueries({
+        queryKey: episodeQueryKeys.nextTournament({ episodeId }),
+      });
+    }, 1000 * 30);
+    return () => {
+      clearInterval(interval);
+    };
+  }, []);
+
+  if (dateHasPassed) return <div>TODO all zeros</div>;
+  return (
+    <div className="flex max-w-max flex-col gap-1">
+      <span className="text-2xl font-bold">{title}</span>
+      <div className="grid grid-cols-11 grid-rows-2 content-center justify-center gap-2">
+        <div className="col-span-3 self-end text-4xl font-bold">{days}</div>
+        <div className="text-4xl font-bold">:</div>
+        <div className="col-span-3 self-end text-4xl font-bold">{hours}</div>
+        <div className="text-4xl font-bold">:</div>
+        <div className="col-span-3 self-end text-4xl font-bold">{minutes}</div>
+        <div className="col-span-3 self-start">Days</div>
+        <div />
+        <div className="col-span-3 self-start">Hours</div>
+        <div />
+        <div className="col-span-3 self-start">Minutes</div>
+      </div>
+    </div>
+  );
+};
+
+export default CountdownDigital;

frontend2/src/views/Home.tsx

@@ -1,10 +1,64 @@
 import React from "react";
 import { useEpisodeId } from "../contexts/EpisodeContext";
+import { useEpisodeInfo, useNextTournament } from "../api/episode/useEpisode";
+import SectionCard from "../components/SectionCard";
+import CountdownDigital from "../components/CountdownDigital";
+import Spinner from "../components/Spinner";
+import { SocialIcon } from "react-social-icons";
 
 const Home: React.FC = () => {
   const { episodeId } = useEpisodeId();
+  const episode = useEpisodeInfo({ id: episodeId });
+  const nextTournament = useNextTournament({ episodeId });
 
-  return <p>Homepage for {episodeId}</p>;
+  const SOCIAL =
+    "hover:drop-shadow-lg hover:opacity-80 transition-opacity duration-300 ease-in-out";
+
+  return (
+    <div className="p-6">
+      <div className="flex flex-col gap-6 xl:flex-row">
+        <div className="flex w-full flex-col gap-6 xl:w-1/2">
+          <SectionCard title="Next Submission Deadline">
+            {nextTournament.isLoading ? (
+              <Spinner size="md" />
+            ) : nextTournament.isSuccess && nextTournament.data !== null ? (
+              <CountdownDigital date={nextTournament.data.submission_freeze} />
+            ) : (
+              "No upcoming submission deadlines."
+            )}
+          </SectionCard>
+          {/* <SectionCard title="Match Statistics">MATCH STATISTICS (TODO)</SectionCard> */}
+          {/* <SectionCard title="Current Ranking">
+            RANKINGS GRAPH (TODO)
+          </SectionCard> */}
+        </div>
+        <div className="flex w-full flex-col gap-6 xl:w-1/2">
+          <SectionCard title="Welcome!">
+            <span>Welcome to {episode.data?.name_long}!</span>
+            <span>{episode.data?.blurb}</span>
+          </SectionCard>
+          <SectionCard title="Social Medias">
+            <div className="flex w-full flex-row items-center gap-10">
+              <SocialIcon
+                url="https://www.github.com/battlecode"
+                className={SOCIAL}
+              />
+              <SocialIcon
+                url="https://www.youtube.com/@MITBattlecode"
+                className={SOCIAL}
+              />
+              <SocialIcon
+                url="https://www.instagram.com/mitbattlecode"
+                className={SOCIAL}
+              />
+              <SocialIcon url="https://discord.gg/N86mxkH" className={SOCIAL} />
+            </div>
+          </SectionCard>
+          {/* <SectionCard title="Announcements">ANNOUNCEMENTS (TODO)</SectionCard> */}
+        </div>
+      </div>
+    </div>
+  );
 };
 
 export default Home;