feat: track time left in day

frontend/src/App.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useMediaQuery } from 'react-responsive'
 import './App.css';
 import Canvas from './canvas/Canvas.js';
@@ -52,6 +52,31 @@ function App() {
     setPixelSelectedMode(true);
   }
 
+  const [timeLeftInDay, setTimeLeftInDay] = useState('');
+  const startTime = "15:00";
+  const [hours, minutes] = startTime.split(":");
+
+
+  useEffect(() => {
+    const calculateTimeLeft = () => {
+      const now = new Date();
+      const nextDayStart = new Date(now);
+      nextDayStart.setDate(now.getDate() + 1);
+      nextDayStart.setUTCHours(parseInt(hours), parseInt(minutes), 0, 0);
+
+      const difference = nextDayStart - now;
+      const hoursFinal = Math.floor((difference / (1000 * 60 * 60)) % 24);
+      const minutesFinal = Math.floor((difference / 1000 / 60) % 60);
+      const secondsFinal = Math.floor((difference / 1000) % 60);
+
+      const formattedTimeLeft = `${hoursFinal.toString().padStart(2, '0')}:${minutesFinal.toString().padStart(2, '0')}:${secondsFinal.toString().padStart(2, '0')}`;
+      setTimeLeftInDay(formattedTimeLeft);
+    };
+
+    const interval = setInterval(calculateTimeLeft, 1000);
+    return () => clearInterval(interval);
+  })
+
   // Tabs
   const tabs = ['Canvas', 'Quests', 'Vote', 'Templates', 'NFTs', 'Account'];
   const [activeTab, setActiveTab] = useState(tabs[0]);
@@ -66,7 +91,7 @@ function App() {
         { (!isPortrait ? pixelSelectedMode : pixelSelectedMode && activeTab === tabs[0]) && (
           <SelectedPixelPanel selectedPositionX={selectedPositionX} selectedPositionY={selectedPositionY} clearPixelSelection={clearPixelSelection} pixelPlacedBy={pixelPlacedBy} />
         )}
-        <TabPanel activeTab={activeTab} setActiveTab={setActiveTab} getDeviceTypeInfo={getDeviceTypeInfo} />
+        <TabPanel activeTab={activeTab} setActiveTab={setActiveTab} getDeviceTypeInfo={getDeviceTypeInfo} timeLeftInDay={timeLeftInDay} />
       </div>
       <div className="App__footer">
         <PixelSelector selectedColorId={selectedColorId} setSelectedColorId={setSelectedColorId} getDeviceTypeInfo={getDeviceTypeInfo} />

frontend/src/tabs/TabPanel.js

@@ -9,12 +9,16 @@ import Account from './Account.js';
 
 const TabPanel = props => {
   return (
-    <div className='TabPanel'>
-      { props.activeTab === 'Quests' && <Quests /> }
-      { props.activeTab === 'Vote' && <Voting /> }
-      { props.activeTab === 'Templates' && <Templates /> }
-      { props.activeTab === 'NFTs' && <NFTs /> }
-      { props.activeTab === 'Account' && <Account /> }
+    <div className="TabPanel">
+      {props.activeTab === "Quests" && (
+        <Quests timeLeftInDay={props.timeLeftInDay} />
+      )}
+      {props.activeTab === "Vote" && (
+        <Voting timeLeftInDay={props.timeLeftInDay} />
+      )}
+      {props.activeTab === "Templates" && <Templates />}
+      {props.activeTab === "NFTs" && <NFTs />}
+      {props.activeTab === "Account" && <Account />}
     </div>
   );
 }

frontend/src/tabs/Voting.js

@@ -11,42 +11,12 @@ const Voting = props => {
   const [votes, setVotes] = useState(colorVotes);
   const [userVote, setUserVote] = useState(-1);
   // TODO: Pull from API
-  const timeTillVote = '05:14:23';
-  const [time, setTime] = useState(timeTillVote);
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setTime(time => {
-        let timeSplit = time.split(':');
-        let hours = parseInt(timeSplit[0]);
-        let minutes = parseInt(timeSplit[1]);
-        let seconds = parseInt(timeSplit[2]);
-        if (seconds === 0) {
-          if (minutes === 0) {
-            if (hours === 0) {
-              return '00:00:00';
-            }
-            hours--;
-            minutes = 59;
-            seconds = 59;
-          } else {
-            minutes--;
-            seconds = 59;
-          }
-        } else {
-          seconds--;
-        }
-        return `${hours < 10 ? '0' + hours : hours}:${minutes < 10 ? '0' + minutes : minutes}:${seconds < 10 ? '0' + seconds : seconds}`;
-      });
-    }, 1000);
-    return () => clearInterval(interval);
-  }, [time]);
 
   return (
     <BasicTab title="Voting">
       <h2 className="Voting__header">Color Vote</h2>
       <p className="Voting__description">Vote for a new palette color.</p>
-      <p className="Voting__description">Vote closes: {time}</p>
+      <p className="Voting__description">Vote closes: {props.timeLeftInDay}</p>
       <div className="Voting__colors">
         <div className="Voting__colors__item" style={{marginTop: "1.5rem"}}>
           <div style={{gridArea: "vote"}}>Vote</div>

frontend/src/tabs/quests/Quests.js

@@ -56,7 +56,7 @@ const Quests = props => {
       <div style={{height: '70vh', overflowY: 'scroll'}}>
         <div style={{display: 'flex', alignItems: 'center'}}>
           <h2 className="Quests__item__header">Dailys</h2>
-          <p style={{fontSize: "1rem", marginLeft: "1rem"}}>XX:XX:XX</p>
+          <p style={{fontSize: "1rem", marginLeft: "1rem"}}>{props.timeLeftInDay}</p>
         </div>
         {dailyQuests.map((quest, index) => (
           <QuestItem key={index} title={quest.title} description={quest.description} reward={quest.reward} status={quest.status} />