78 lines
1.8 KiB
TypeScript
78 lines
1.8 KiB
TypeScript
import { useState, useEffect } from "react";
|
|
|
|
type GameObject = {
|
|
game: string;
|
|
startedOn: number;
|
|
finishedAt?: number;
|
|
finished: boolean;
|
|
};
|
|
|
|
export default function GameComponent() {
|
|
const [game, setGame] = useState<GameObject | null>(null);
|
|
const [failedFetch, setFailedFetch] = useState(false);
|
|
|
|
useEffect(() => {
|
|
async function fetchGame() {
|
|
const response = await fetch(
|
|
"https://api.alexav.gg/v4/tracker/latestGame"
|
|
);
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
if (data.data && data.data.game) {
|
|
setGame(data.data as GameObject);
|
|
} else setFailedFetch(true);
|
|
} else setFailedFetch(true);
|
|
}
|
|
|
|
setTimeout(() => {
|
|
fetchGame();
|
|
}, 60000);
|
|
fetchGame();
|
|
}, []);
|
|
|
|
if (game) {
|
|
const dateOrTime = () => {
|
|
if (game.finished && game.finishedAt) {
|
|
const currentDate = new Date();
|
|
const finishedDate = new Date(game.finishedAt);
|
|
|
|
if (
|
|
currentDate.toLocaleDateString() === finishedDate.toLocaleDateString()
|
|
) {
|
|
return `last played ${game.game} at ${finishedDate.toLocaleTimeString()}`;
|
|
} else {
|
|
return `last played ${game.game} on ${finishedDate.toLocaleDateString()}`;
|
|
}
|
|
} else {
|
|
return `playing ${game.game}`;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="flex align-middle">
|
|
<a
|
|
className="hover:underline"
|
|
href={`https://medal.tv/u/alexav`}
|
|
target="_blank"
|
|
>
|
|
<h1 className="lowercase">{dateOrTime()}</h1>
|
|
</a>
|
|
</div>
|
|
);
|
|
} else {
|
|
if (failedFetch) {
|
|
return (
|
|
<div>
|
|
<p>not playing anything</p>
|
|
</div>
|
|
);
|
|
} else {
|
|
return (
|
|
<div>
|
|
<p>loading game..</p>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
}
|