Event2023

.gitignore

@@ -1 +1,2 @@
 node_modules
+build

src/countdown.jsx

@@ -0,0 +1,46 @@
+import React, { useState, useEffect } from 'react';
+import { hackingStarts, hackingEnds } from 'times';
+
+const getDeltaTime = () => {
+    const deltaHackingStarts = hackingStarts - Date.now();
+    if (deltaHackingStarts > 0)
+        return deltaHackingStarts;
+
+    const deltaHackingEnds = Date.now() - hackingEnds;
+
+    return Math.max(deltaHackingEnds, 0);
+};
+
+const getDisplayTime = time => {
+    const _second = 1000;
+    const _minute = _second * 60;
+    const _hour = _minute * 60;
+
+    let hours = Math.floor((time) / _hour);
+    let minutes = Math.floor((time % _hour) / _minute);
+    let seconds = Math.floor((time % _minute) / _second);
+    return [hours, minutes, seconds].map(unit => String(unit).padStart(2, "0"));
+};
+
+const Countdown = () => {
+    const [deltaTime, setDeltaTime] = useState(getDeltaTime());
+
+    useEffect(() => {
+        const interval = setInterval(() => setDeltaTime(getDeltaTime()), 1000);
+
+        return () => clearInterval(interval);
+    }, []);
+
+    const units = ["Hours", "Minutes", "Seconds"];
+
+    return (
+        <div className="countdown">{getDisplayTime(deltaTime).map((quantity, i) => (
+            <div key={i} className="countdownColumn">
+                <div className="quantity">{quantity}</div>
+                <div className="unit">{units[i]}</div>
+            </div>
+        ))}</div>
+    );
+};
+
+export default Countdown;

src/index.css

@@ -7,11 +7,162 @@
   font-weight: 400;
 }
 
-.slide {
-  width: 100vw;
+#root {
+  position: relative;
   height: 100vh;
-  background-size: cover;
+  width: 100vw;
+
+  background-image: url("/assets/landing.svg");
   background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+.overlay {
+  background: rgba(38, 56, 85, 0.24);
+  backdrop-filter: blur(2px);
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100vh;
+  width: 100vw;
+}
+
+.content {
+  position: absolute;
+  left: 4%;
+  right: 4%;
+  top: 8%;
+  bottom: 4%;
+
+  display: flex;
+}
+
+.col {
+  flex: 1;
+  height: 100%;
+  /* background-color: green; */
+}
+
+.col:not(:last-child) {
+  margin-right: 6%;
+}
+
+.logo {
+  width: 80%;
+  margin-bottom: 1.5vw;
+}
+
+.makingMemories {
+  font-weight: 500;
+  font-size: 2.5vw;
+  color: #FCDC8F;
+  text-shadow: 0px 1px 20px rgba(252, 220, 143, 0.76);
+  margin-bottom: 3vw;
+}
+
+.leaderboard {
+  background: rgba(201, 210, 229, 0.91);
+  border-radius: 10px;
+  padding: 2vw;
+}
+
+.leaderboardHeader {
+  color: #0D387C;
+  font-weight: 600;
+  font-size: 2.25vw;
+  text-transform: uppercase;
+  margin-bottom: 2vw;
+}
+
+.leaderboardRow {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.leaderboardRow:not(:last-of-type) {
+  margin-bottom: 0.5vw;
+  padding-bottom: 0.5vw;
+  border-bottom: 1px solid black;
+}
+
+.leaderboardRow .rank {
+  font-size: 1.5vw;
+  font-weight: 600;
+  color: #1D2644;
+  margin-right: 3vw;
+}
+
+.leaderboardRow .username {
+  color: #1D2644;
+  font-size: 1.25vw;
+  font-weight: 600;
+  margin-right: auto;
+}
+
+.leaderboardRow .points {
+  color: #1D2644;
+  font-weight: 600;
+  font-size: 1vw;
+  padding: .1vw 1vw;
+  background: #FFFFFF;
+  border-radius: 20px;
+}
+
+.countdown {
+  display: flex;
+  justify-content: center;
+}
+
+.countdownColumn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.countdownColumn:not(:last-of-type) {
+  margin-right: 1vw;
+}
+
+.countdown .quantity {
+  font-family: sans-serif;
+  font-weight: 900;
+  font-size: 4vw;
+  letter-spacing: 0.1em;
+  color: transparent;
+  -webkit-text-stroke: 0.15vw #FCDC8F;
+  text-shadow: 1px 0px;
+}
+
+.countdown .unit {
+  font-weight: 700;
+  font-size: 0.85vw;
+  text-transform: uppercase;
+
+  color: #FFFFFF;
+}
+
+.upcomingEventsHeader {
+  color: #FCDC8F;
+  text-shadow: 0px 1px 20px rgba(252, 220, 143, 0.7);
+  font-size: 2.5vw;
+  margin-top: 3vw;
+  font-weight: 600;
+}
+
+.upcomingEventsList {
+  display: flex;
+  flex-direction: column;
+}
+
+.upcomingEvent {
+  color: #1D2644;
+  background: rgba(255, 255, 255, 0.92);
+  border-radius: 20px;
+  padding: 2vw;
+  font-size: 0.5vw;
+  width: 100%;
 }
 
 h1 {

src/index.jsx

@@ -1,44 +1,38 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom';
 
-import Slide1 from './slides/slide1';
-// import Slide2 from './slides/slide2';
-import Slide3 from './slides/slide3';
-// import Slide4 from './slides/slide4';
-// import Slide5 from './slides/slide5';
-// import Slide6 from './slides/slide6';
-// import Slide7 from './slides/slide7';
+import Leaderboard from './leaderboard';
+import Countdown from './countdown';
+import UpcomingEvents from './upcoming-events';
 
 import 'index.css';
 
-const slides = [
-  Slide1,
-  // Slide2,
-  Slide3,
-  // Slide4,
-  // Slide5,
-  // Slide6,
-  // Slide7,
-];
-
-// sponsors
-
 const App = () => {
-  const [slideIndex, setSlideIndex] = useState(0);
-
   useEffect(() => {
     const interval = setInterval(() => {
-      setSlideIndex(slideIndex => (slideIndex + 1) % slides.length);
-    }, 10000);
-
-    const interval2 = setInterval(() => {
       window.location.reload();
-    }, 3600000);
-
-    return () => { clearInterval(interval); clearInterval(interval2); };
-  }, [setSlideIndex]);
-
-  return slides[slideIndex];
+    }, 1000 * 60 * 60);
+
+    return () => clearInterval(interval);;
+  }, []);
+
+  return (
+    <>
+      <div className="overlay"></div>
+      <div className="content">
+        <div className="col col1">
+          <img src="/assets/logo.svg" alt="HackIllinois Logo" className="logo" />
+          <p className="makingMemories">making memories</p>
+          <Leaderboard />
+        </div>
+        <div className="col col2">
+          <Countdown />
+          <UpcomingEvents />
+        </div>
+        <div className="col col3"></div>
+      </div>
+    </>
+  );
 };
 
 ReactDOM.render(<App />, document.getElementById('root'));

src/leaderboard.jsx

@@ -0,0 +1,42 @@
+import React, { useState, useEffect, useCallback } from 'react';
+
+const Leaderboard = () => {
+    const [leaderboardData, setLeaderboardData] = useState([]);
+
+    const fetchLeaderboardData = useCallback(async () => {
+        setTimeout(() => setLeaderboardData([
+            { username: "A$H#1020", points: 1600 },
+            { username: "bgrey#912", points: 1600 },
+            { username: "bgrey#912", points: 1600 },
+            { username: "bgrey#912", points: 1600 },
+            { username: "bgrey#912", points: 1600 },
+            { username: "bgrey#912", points: 1600 },
+            { username: "bgrey#912", points: 1600 },
+            { username: "bgrey#912", points: 1600 },
+            { username: "bgrey#912", points: 1600 },
+            { username: "bgrey#912", points: 1600 },
+        ]), 1000 * 3);
+    }, [setLeaderboardData]);
+
+    useEffect(() => {
+        fetchLeaderboardData();
+        const interval = setInterval(() => fetchLeaderboardData(), 1000 * 60);
+
+        return () => clearInterval(interval);
+    }, [fetchLeaderboardData]);
+
+    return (
+        <div className="leaderboard">
+            <div className="leaderboardHeader">Leaderboard</div>
+            {leaderboardData.map(({ username, points }, i) => (
+                <div key={i} className="leaderboardRow">
+                    <span className="rank">{i}</span>
+                    <span className="username">{username}</span>
+                    <span className="points">{points}</span>
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export default Leaderboard;