From dee19298b88355c701ee85f135cad147ef1d5946 Mon Sep 17 00:00:00 2001
From: rishit-singh <rsrishitsingh@gmail.com>
Date: Mon, 21 Aug 2023 23:10:09 -0700
Subject: [PATCH] Added Timer

---
 frontend/src/app/hacks/Body.tsx      |  8 ++++
 frontend/src/app/hacks/IconLabel.tsx |  2 +-
 frontend/src/app/hacks/Timer.tsx     | 72 ++++++++++++++++++++++++++++
 frontend/src/app/hacks/page.tsx      |  2 +
 frontend/tailwind.config.js          |  2 +-
 5 files changed, 84 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/app/hacks/Body.tsx
 create mode 100644 frontend/src/app/hacks/Timer.tsx

diff --git a/frontend/src/app/hacks/Body.tsx b/frontend/src/app/hacks/Body.tsx
new file mode 100644
index 0000000..a69d413
--- /dev/null
+++ b/frontend/src/app/hacks/Body.tsx
@@ -0,0 +1,8 @@
+import {Timer} from "@/app/hacks/Timer";
+
+export function Body()
+{
+    return <div className={"bg-hacks-bg-black"}>
+       <Timer EndTime={new Date(2023, 8, 23, 8, 0, 0)}/> 
+    </div>
+}
\ No newline at end of file
diff --git a/frontend/src/app/hacks/IconLabel.tsx b/frontend/src/app/hacks/IconLabel.tsx
index 45b6002..d408747 100644
--- a/frontend/src/app/hacks/IconLabel.tsx
+++ b/frontend/src/app/hacks/IconLabel.tsx
@@ -4,6 +4,6 @@ export function IconLabel({iconSrc, label, height, width}: {iconSrc: string, lab
 {
     return <div className={"grid grid-cols-2"}>
         <Image src={iconSrc as string} alt={"Image"} height={height as number} width={width as number} className={"self-center justify-self-end"}></Image>
-        <span className={"text-lg text-white self-center ml-2"}>{label}</span>
+        <span className={"text-lg max-[850px]:text-xs text-white self-center ml-2"}>{label}</span>
     </div>; 
 }
\ No newline at end of file
diff --git a/frontend/src/app/hacks/Timer.tsx b/frontend/src/app/hacks/Timer.tsx
new file mode 100644
index 0000000..6553e69
--- /dev/null
+++ b/frontend/src/app/hacks/Timer.tsx
@@ -0,0 +1,72 @@
+"use client";
+
+import {Component, useState} from "react";
+
+class TimeStamp
+{
+    public readonly Days: number;
+    public readonly Hours: number;
+    public readonly Minutes: number;
+    public readonly Seconds: number;
+
+    public constructor(days: number, hours: number, minutes: number, seconds: number)
+    {
+        this.Days = days;
+        this.Hours = hours;
+        this.Seconds = seconds;
+        this.Minutes = minutes;
+    }
+}
+
+interface TimerProps
+{
+    EndTime: Date;
+}
+
+interface TimerState
+{
+    CurrentTimeStamp: TimeStamp; 
+}
+
+export class Timer extends Component<TimerProps, TimerState>
+{
+    protected TimeDifference: number;
+    
+    protected Days: number; 
+    
+    public Tick(): void 
+    {
+        setInterval(()=> {
+            this.UpdateTimeStamp();
+            if(this.TimeDifference > 0)
+                this.TimeDifference -= 1;
+        }, 1000);
+    }
+   
+    public UpdateTimeStamp(): void {
+        let seconds: number = Math.floor(this.TimeDifference % 60),
+            minutes: number = Math.floor((this.TimeDifference % 3600) / 60),
+            hours: number = Math.floor((this.TimeDifference % 86400) / 3600),
+            days: number = Math.floor(this.TimeDifference / (3600 * 24));
+        
+        this.setState({CurrentTimeStamp: new TimeStamp(days, hours, minutes, seconds)});
+    }  
+    
+    public componentWillMount() {
+        this.TimeDifference = Math.abs(this.props.EndTime - new Date()) / 1000;
+        this.setState({CurrentTime: this.TimeDifference, CurrentTimeStamp: new TimeStamp(0,0,0,0)});
+        this.Tick();
+    }
+
+    render()
+    {
+        return <div className={"text-white text-3xl"}>
+            {this.state.CurrentTimeStamp.Days}d {this.state.CurrentTimeStamp.Hours}h {this.state.CurrentTimeStamp.Minutes}m {this.state.CurrentTimeStamp.Seconds}s
+        </div>       
+    }
+    
+    constructor(props: TimerProps)
+    {
+        super(props);
+    }
+}
\ No newline at end of file
diff --git a/frontend/src/app/hacks/page.tsx b/frontend/src/app/hacks/page.tsx
index 5a3ced9..1dcdc8d 100644
--- a/frontend/src/app/hacks/page.tsx
+++ b/frontend/src/app/hacks/page.tsx
@@ -1,8 +1,10 @@
 import {Header} from "./Header";
+import {Body} from "@/app/hacks/Body";
 
 export default function Page()
 {
     return <div className={"grid grid-rows-[30vh_70vh] bg-navs-bg-black h-full font-audiowide"}>
         <Header/>
+        <Body/>
     </div>;
 }
\ No newline at end of file
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index d0fe62a..3f3779a 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -20,7 +20,7 @@ module.exports = {
         "nav-bar-black": "#010101",
         "body-gray": "#171717",
         "hacks-nav-black": "#202020",
-        "hacks-bg-black": "#1E1E1E"
+        "hacks-bg-black": "#212121"
       },
       fontFamily: {
         "audiowide": ["audiowide", "regular"]