FreakU
/
canvas
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update event info details to reflect event end

This commit is contained in:
Grant 2024-07-19 10:29:10 -06:00
parent 97e09a18e5
commit cef63dee14
2 changed files with 8 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
packages/client/src/components/EventInfoOverlay.tsx
View File

@ -2,8 +2,6 @@ import React, { useEffect, useRef } from "react";
import { useAppContext } from "../contexts/AppContext"; import { useAppContext } from "../contexts/AppContext";
import { Button } from "@nextui-org/react"; import { Button } from "@nextui-org/react";
const EVENT_START = 1720756800000; // midnight 7/12/2024 eastern
/** /**
* *oh god the terrible code* * *oh god the terrible code*
* *
@ -15,51 +13,6 @@ const EVENT_START = 1720756800000; // midnight 7/12/2024 eastern
*/ */
export const EventInfoOverlay = ({ children }: React.PropsWithChildren) => { export const EventInfoOverlay = ({ children }: React.PropsWithChildren) => {
const { setInfoSidebar, setSettingsSidebar } = useAppContext(); 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 ( return (
<div <div
@ -70,7 +23,7 @@ export const EventInfoOverlay = ({ children }: React.PropsWithChildren) => {
> >
<div> <div>
<h1 className="text-4xl font-bold">Canvas 2024</h1> <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>
<div className="flex-grow" /> <div className="flex-grow" />

9
packages/client/src/components/Toolbar/Palette.tsx
View File

@ -69,11 +69,16 @@ export const Palette = () => {
{!user && ( {!user && (
<div className="pallete-user-overlay"> <div className="pallete-user-overlay">
{import.meta.env.VITE_INCLUDE_EVENT_INFO ? ( {import.meta.env.VITE_INCLUDE_EVENT_INFO ? (
<>The event hasn't started yet</> <>The event has ended</>
) : ( ) : (
<div className="flex gap-3 items-center"> <div className="flex gap-3 items-center">
You are not logged in 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 Login
</Button> </Button>
</div> </div>