huncholanetest
FIRST_NAME LAST_NAMEauthored 2 files changed, +18 -26
+2-1index.html
| @@ -4,12 +4,13 @@ | ||
| 4 | 4 | <meta charset="UTF-8" /> |
| 5 | 5 | <link rel="icon" type="image/x-icon" href="/favicon.ico" /> |
| 6 | 6 | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| 7 | - <title>VFL Countdown Update</title> | |
| 7 | + <title>VFL Countdown</title> | |
| 8 | 8 | <meta name="description" content="safdasdf" /> |
| 9 | 9 | <meta property="og:url" content="https://vflcountdown.com" /> |
| 10 | 10 | <meta property="og:type" content="website" /> |
| 11 | 11 | <meta property="og:description" content="asdfsdafa" /> |
| 12 | 12 | <meta property="og:image" content="/favicon.ico" /> |
| 13 | + <meta property="og:video" content="/goalpost.mp4" /> | |
| 13 | 14 | <meta name="twitter:card" content="summary_large_image" /> |
| 14 | 15 | <meta property="twitter:domain" content="vflcountdown.com" /> |
| 15 | 16 | <meta property="twitter:url" content="https://vflcountdown.com" /> |
+16-25src/components/Card.tsx
| @@ -2,50 +2,41 @@ import React, { useState } from "react"; | ||
| 2 | 2 | import TimeBlock from "./TimeBlock"; |
| 3 | 3 | import { schedule } from "../assets/schedule.json"; |
| 4 | 4 | import convertMiliseconds from "./convertInterval"; |
| 5 | -import { Helmet } from "react-helmet"; | |
| 6 | 5 | const { games } = schedule; |
| 7 | 6 | |
| 7 | +const nextGame = () => { | |
| 8 | + return games[0]; | |
| 9 | +}; | |
| 10 | + | |
| 8 | 11 | type Props = { |
| 9 | 12 | children?: React.ReactNode; |
| 10 | 13 | }; |
| 11 | 14 | |
| 12 | 15 | const Card = (props: Props) => { |
| 13 | - const [days, setDays] = useState(0); | |
| 14 | - const [hours, setHours] = useState(0); | |
| 15 | - const [minutes, setMinutes] = useState(0); | |
| 16 | - const [seconds, setSeconds] = useState(0); | |
| 17 | - const description = "Countdown Till The Vols Get To Ball"; | |
| 18 | - | |
| 19 | - const nextGame = () => { | |
| 20 | - return games[0]; | |
| 21 | - }; | |
| 22 | - | |
| 23 | 16 | const game = nextGame(); |
| 24 | 17 | const date = new Date(game.date); |
| 25 | 18 | const time = game.time; |
| 26 | - | |
| 27 | - setInterval(() => { | |
| 19 | + const getDiff = () => { | |
| 28 | 20 | const now = new Date(); |
| 29 | 21 | const ms = date.getTime() - now.getTime(); |
| 30 | 22 | const diff = convertMiliseconds(ms); |
| 31 | - setDays(diff.d); | |
| 32 | - setHours(diff.h); | |
| 33 | - setMinutes(diff.m); | |
| 34 | - setSeconds(diff.s); | |
| 23 | + document.title = `${diff.d}:${diff.h}:${diff.m}:${diff.s}`; | |
| 24 | + return diff; | |
| 25 | + }; | |
| 26 | + const [countdown, setCountdown] = useState(getDiff()); | |
| 27 | + | |
| 28 | + setInterval(() => { | |
| 29 | + setCountdown(getDiff()); | |
| 35 | 30 | }, 1000); |
| 36 | 31 | |
| 37 | 32 | return ( |
| 38 | 33 | <div className="h-screen w-screen"> |
| 39 | - <Helmet> | |
| 40 | - <title>Helmet</title> | |
| 41 | - <meta property="og:title" content="Helmet" /> | |
| 42 | - </Helmet> | |
| 43 | 34 | <div className="absolute px-1 mx-auto w-11/12 right-0 left-0 bg-slate-400 top-16 bg-opacity-40 rounded-md shadow-sm"> |
| 44 | 35 | <div className="flex"> |
| 45 | - <TimeBlock value={days} unit="DAYS" /> | |
| 46 | - <TimeBlock value={hours} unit="HOURS" /> | |
| 47 | - <TimeBlock value={minutes} unit="MINS" /> | |
| 48 | - <TimeBlock value={seconds} unit="SECS" /> | |
| 36 | + <TimeBlock value={countdown.d} unit="DAYS" /> | |
| 37 | + <TimeBlock value={countdown.h} unit="HOURS" /> | |
| 38 | + <TimeBlock value={countdown.m} unit="MINS" /> | |
| 39 | + <TimeBlock value={countdown.s} unit="SECS" /> | |
| 49 | 40 | </div> |
| 50 | 41 | <div className="flex justify-between w-full"> |
| 51 | 42 | <img |