irongit
Sign inRegister
huncholanehuncholane/vflcountdownPublic

trying to use moment

FIRST_NAME LAST_NAMEauthored
parent b92c45acommit 6eb058d721101825fbeb386ecb4640abb267309eBrowse files

3 files changed, +84 -9

+47-1package-lock.json
@@ -9,7 +9,8 @@
99 "version": "0.0.0",
1010 "dependencies": {
1111 "react": "^18.2.0",
12- "react-dom": "^18.2.0"
12+ "react-dom": "^18.2.0",
13+ "react-moment": "^1.1.2"
1314 },
1415 "devDependencies": {
1516 "@types/react": "^18.0.26",
@@ -1528,6 +1529,15 @@
15281529 "url": "https://github.com/sponsors/ljharb"
15291530 }
15301531 },
1532+ "node_modules/moment": {
1533+ "version": "2.29.4",
1534+ "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
1535+ "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
1536+ "peer": true,
1537+ "engines": {
1538+ "node": "*"
1539+ }
1540+ },
15311541 "node_modules/ms": {
15321542 "version": "2.1.2",
15331543 "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -1570,6 +1580,15 @@
15701580 "node": ">=0.10.0"
15711581 }
15721582 },
1583+ "node_modules/object-assign": {
1584+ "version": "4.1.1",
1585+ "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
1586+ "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
1587+ "peer": true,
1588+ "engines": {
1589+ "node": ">=0.10.0"
1590+ }
1591+ },
15731592 "node_modules/object-hash": {
15741593 "version": "3.0.0",
15751594 "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
@@ -1739,6 +1758,17 @@
17391758 "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
17401759 "dev": true
17411760 },
1761+ "node_modules/prop-types": {
1762+ "version": "15.8.1",
1763+ "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
1764+ "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
1765+ "peer": true,
1766+ "dependencies": {
1767+ "loose-envify": "^1.4.0",
1768+ "object-assign": "^4.1.1",
1769+ "react-is": "^16.13.1"
1770+ }
1771+ },
17421772 "node_modules/queue-microtask": {
17431773 "version": "1.2.3",
17441774 "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -1794,6 +1824,22 @@
17941824 "react": "^18.2.0"
17951825 }
17961826 },
1827+ "node_modules/react-is": {
1828+ "version": "16.13.1",
1829+ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
1830+ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
1831+ "peer": true
1832+ },
1833+ "node_modules/react-moment": {
1834+ "version": "1.1.2",
1835+ "resolved": "https://registry.npmjs.org/react-moment/-/react-moment-1.1.2.tgz",
1836+ "integrity": "sha512-lfb+shYXI2tXlQrNUpNr05/1D/kzFj8Isbfp89DQrpZk0fs2JIAnLHWETR0hQS9zvtzwLWlVv0wKLffbue5HoA==",
1837+ "peerDependencies": {
1838+ "moment": "^2.29.0",
1839+ "prop-types": "^15.7.0",
1840+ "react": "^16.0 || ^17.0.0 || ^18.0.0"
1841+ }
1842+ },
17971843 "node_modules/react-refresh": {
17981844 "version": "0.14.0",
17991845 "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",
+2-1package.json
@@ -10,7 +10,8 @@
1010 },
1111 "dependencies": {
1212 "react": "^18.2.0",
13- "react-dom": "^18.2.0"
13+ "react-dom": "^18.2.0",
14+ "react-moment": "^1.1.2"
1415 },
1516 "devDependencies": {
1617 "@types/react": "^18.0.26",
+35-7src/components/Card.tsx
@@ -1,6 +1,7 @@
11 import React, { useState } from "react";
22 import TimeBlock from "./TimeBlock";
33 import { schedule } from "../assets/schedule.json";
4+import Moment from "react-moment";
45 const { games } = schedule;
56
67 type Props = {
@@ -19,15 +20,42 @@ const Card = (props: Props) => {
1920 };
2021
2122 const game = nextGame();
23+ const date = new Date(game.date);
24+ const time = game.time;
25+ console.log(date);
26+
27+ setInterval(() => {
28+ const now = new Date();
29+ const diff = date.getTime() - now.getTime();
30+ }, 1000);
2231
2332 return (
24- <div className="h-screen w-screen relative">
25- <div className="absolute mx-auto w-11/12 h-56 right-0 left-0 bg-slate-400 top-16 opacity-40 rounded-md shadow-sm"></div>
26- <div className="absolute mx-auto w-11/12 h-28 right-0 left-0 top-16 flex px-1">
27- <TimeBlock value={days} unit="DAYS" />
28- <TimeBlock value={hours} unit="HOURS" />
29- <TimeBlock value={minutes} unit="MINS" />
30- <TimeBlock value={minutes} unit="SECS" />
33+ <div className="h-screen w-screen">
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">
35+ <div className="flex">
36+ <TimeBlock value={days} unit="DAYS" />
37+ <TimeBlock value={hours} unit="HOURS" />
38+ <TimeBlock value={minutes} unit="MINS" />
39+ <TimeBlock value={seconds} unit="SECS" />
40+ </div>
41+ <div className="flex justify-between w-full">
42+ <img
43+ src={game.opponent.image.fullpath}
44+ alt={game.opponent.title}
45+ className="w-16"
46+ />
47+ <div>
48+ <div className="text-center text-xl">
49+ {game.at_vs}{" "}
50+ <span className="text-lg">{game.opponent.title}</span>
51+ </div>
52+ <div className="text-center text-md">
53+ {date.toLocaleDateString() + " - " + time}
54+ </div>
55+ <div className="text-center text-lg">{game.facility?.title}</div>
56+ </div>
57+ <img src="/favicon.ico" alt="Tennessee" className="w-16" />
58+ </div>
3159 </div>
3260 </div>
3361 );