Commit cef63dee authored by Grant's avatar Grant
Browse files

update event info details to reflect event end

parent 97e09a18

packages/client/src/components/EventInfoOverlay.tsx

+1 −48
Original line number Diff line number Diff line
@@ -2,8 +2,6 @@ import React, { useEffect, useRef } from "react"; 
import { useAppContext } from "../contexts/AppContext";

import { Button } from "@nextui-org/react";



const EVENT_START = 1720756800000; // midnight 7/12/2024 eastern



/**

 * *oh god the terrible code*

 *
@@ -15,51 +13,6 @@ const EVENT_START = 1720756800000; // midnight 7/12/2024 eastern 
 */

export const EventInfoOverlay = ({ children }: React.PropsWithChildren) => {

  const { setInfoSidebar, setSettingsSidebar } = useAppContext();

  const $countdown = useRef<HTMLElement | null>(null);



  const getCountdown = () => {

    // date math always confuses me...

    // https://stackoverflow.com/a/7709819



    const now = Date.now();

    const ms = EVENT_START - now;

    const days = Math.floor(ms / (1000 * 60 * 60 * 24));

    const hours = Math.floor((ms % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

    const minutes = Math.floor(

      ((ms % (1000 * 60 * 60 * 24)) % (1000 * 60 * 60)) / (1000 * 60)

    );

    const seconds = Math.round(

      (((ms % (1000 * 60 * 60 * 24)) % (1000 * 60 * 60)) % (1000 * 60)) / 1000

    );



    return [days, hours, minutes, seconds];

  };



  const updateTime = () => {

    if (!$countdown.current) return;



    const [days, hours, minutes, seconds] = getCountdown();



    $countdown.current.innerText = [

      days && days + "d",

      hours && hours + "h",

      minutes && minutes + "m",

      seconds && seconds + "s",

    ]

      .filter((a) => a)

      .join(" ");



    $countdown.current.title = `${days} days ${hours} hours ${minutes} minutes ${seconds} seconds`;

  };



  useEffect(() => {

    var interval = setInterval(updateTime, 1000);

    updateTime();



    return () => {

      clearInterval(interval);

    };

  }, []);



  return (

    <div
@@ -70,7 +23,7 @@ export const EventInfoOverlay = ({ children }: React.PropsWithChildren) => { 
    >

      <div>

        <h1 className="text-4xl font-bold">Canvas 2024</h1>

        <h2 ref={(r) => ($countdown.current = r)} className="text-3xl"></h2>

        <h2 className="text-3xl">Ended July 16th @ 4am UTC</h2>

      </div>



      <div className="flex-grow" />

packages/client/src/components/Toolbar/Palette.tsx

+7 −2
Original line number Diff line number Diff line
@@ -69,11 +69,16 @@ export const Palette = () => { 
      {!user && (

        <div className="pallete-user-overlay">

          {import.meta.env.VITE_INCLUDE_EVENT_INFO ? (

            <>The event hasn't started yet</>

            <>The event has ended</>

          ) : (

            <div className="flex gap-3 items-center">

              You are not logged in

              <Button as={Link} href="/api/login" className="user-login" variant="faded">

              <Button

                as={Link}

                href="/api/login"

                className="user-login"

                variant="faded"

              >

                Login

              </Button>

            </div>