mobile changes, today changes

Author: kenzoengineer

src/App.tsx

@@ -4,8 +4,10 @@ function App() {
   return (
     <div className="p-4">
       <main className="flex items-center justify-center">
-        <div className="w-[74rem]">
-          <h1 className="text-7xl font-bold mb-16 mt-5">Music Monday</h1>
+        <div className="max-md:flex max-md:flex-col max-md:items-center w-[50rem] xl:w-[74rem]">
+          <h1 className="text-6xl md:text-7xl font-bold mb-16 mt-5">
+            Music Monday
+          </h1>
           <PaneGrid />
         </div>
       </main>

src/components/PaneGrid.tsx

@@ -16,14 +16,20 @@ const PaneGrid = () => {
     })();
   }, []);
   return (
-    <div>
+    <div className="">
       <MostRecent />
-      <div className="flex gap-4 flex-wrap">
+      <div className="flex gap-4 flex-wrap max-xl:hidden">
         <Leaderboard entries={entries} />
         <WinHistory entries={entries} />
         <LastSubmission entries={entries} />
         <WebPane entries={entries} />
       </div>
+      <div className="flex gap-4 max-md:flex-col md:flex-wrap max-lg:justify-center max-md:items-center xl:hidden">
+        <Leaderboard entries={entries} />
+        <LastSubmission entries={entries} />
+        <WebPane entries={entries} />
+        <WinHistory entries={entries} />
+      </div>
     </div>
   );
 };

src/components/Panes/MostRecent.tsx

@@ -3,9 +3,14 @@ const ORDER = ["Souren", "Kevin", "Ken", "Artom", "Andrew"];
 const MostRecent = () => {
   const nextMonday = new Date();
   nextMonday.setHours(0, 0, 0, 0);
-  nextMonday.setDate(
-    nextMonday.getDate() + ((8 - nextMonday.getDay()) % 7 || 7)
-  );
+
+  // lets check if today is monday?
+  const isMonday = nextMonday.getDay() === 1;
+  if (!isMonday) {
+    nextMonday.setDate(
+      nextMonday.getDate() + ((8 - nextMonday.getDay()) % 7 || 7)
+    );
+  }
   const formattedMonday = new Intl.DateTimeFormat("en-US", {
     month: "short",
     day: "numeric",
@@ -20,15 +25,18 @@ const MostRecent = () => {
   const nextJudgeIdx = weeksDiff % ORDER.length;
 
   return (
-    <section className="flex gap-10 items-center mb-5">
+    <section className="flex max-md:flex-col gap-10 items-center mb-5">
       <div className="">
         <h2 className="text-md">Upcoming Music Monday</h2>
-        <p className="text-2xl font-bold">
-          {formattedMonday} (#{weeksDiff + 21})
+        <p className="text-2xl font-bold flex items-center">
+          {formattedMonday} (#{weeksDiff + 21}){" "}
+          {isMonday && (
+            <span className="text-xs m-auto text-yellow-300">today!</span>
+          )}
         </p>
       </div>
       <div className="">
-        <h2 className="text-md">Upcoming Judge</h2>
+        <h2 className="text-md">{isMonday ? "Today's" : "Upcoming"} Judge</h2>
         <div className="flex">
           {ORDER.map((x, i) => {
             return (

src/components/Panes/WebPane.tsx

@@ -8,7 +8,11 @@ const WebPane = ({ entries }: GenericPaneProps) => {
       title="Who votes who?"
       description="Number of times a pair has voted for eachother"
     >
-      <Web entries={entries} />
+      <div className="max-md:w-96 flex items-center justify-center">
+        <div className="max-md:scale-75">
+          <Web entries={entries} />
+        </div>
+      </div>
     </Pane>
   );
 };

src/components/Panes/WinHistory.tsx

@@ -2,10 +2,13 @@ import type { Entry, GenericPaneProps, Name } from "../../types";
 import Pane from "../Pane";
 import { Tooltip } from "react-tooltip";
 import SpotifyEmbed from "../SpotifyEmbed";
+import { useWindowDimension } from "../../script";
 
 const SONG_TOOLTIP = "song-tooltip";
 
 const WinHistory = ({ entries }: GenericPaneProps) => {
+  const [w, _] = useWindowDimension();
+  const MAX = w < 768 ? 7 : 30;
   let history: (Entry | "")[] = entries.filter((v) => v.winner);
   if (history.length < 30) {
     history = (Array.from({ length: 30 - history.length }).fill("") as ""[])
@@ -28,14 +31,14 @@ const WinHistory = ({ entries }: GenericPaneProps) => {
     Souren: "bg-yellow-600",
   };
   return (
-    <Pane title="Winner History" description="Last 30 weeks">
+    <Pane title="Winner History" description={`Last ${MAX} weeks`}>
       <div className="flex gap-x-2 mb-4 -mt-2">
         {(Object.keys(colorMap) as (Name | "")[]).map((v) => {
           return <p className={`${colorMap[v]} font-bold`}>{v}</p>;
         })}
       </div>
       <div className="flex">
-        {history.map((v, i) => {
+        {history.slice(-MAX).map((v, i) => {
           if (v === "") {
             return <div className="w-4 h-48 bg-zinc-700 mx-1 rounded-sm" />;
           }

src/script.ts

@@ -1,6 +1,7 @@
 import Papa from "papaparse";
 import csvText from "./winners.csv?raw";
 import type { Entry } from "./types";
+import { useEffect, useState } from "react";
 
 export const processFile = async (): Promise<Entry[]> => {
   const result = Papa.parse(csvText, { header: true, skipEmptyLines: true });
@@ -20,3 +21,30 @@ export const linkToEmbedLink = (link: string) => {
 
   return `https://open.spotify.com/embed/track/${trackId}`;
 };
+
+export const debounce = (fn: Function, ms: number) => {
+  let timer: number | null;
+  return () => {
+    clearTimeout(timer as number);
+    // @ts-ignore
+    timer = setTimeout(function () {
+      timer = null;
+      fn.apply({}, arguments);
+    }, ms);
+  };
+};
+
+export const useWindowDimension = () => {
+  const [dimension, setDimension] = useState([
+    window.innerWidth,
+    window.innerHeight,
+  ]);
+  useEffect(() => {
+    const debouncedResizeHandler = debounce(() => {
+      setDimension([window.innerWidth, window.innerHeight]);
+    }, 300);
+    window.addEventListener("resize", debouncedResizeHandler);
+    return () => window.removeEventListener("resize", debouncedResizeHandler);
+  }, []);
+  return dimension;
+};