diff --git a/src/components/landing/discord-status.tsx b/src/components/landing/discord-status.tsx index 6d2d916..05d8ae4 100644 --- a/src/components/landing/discord-status.tsx +++ b/src/components/landing/discord-status.tsx @@ -191,8 +191,8 @@ const Username = ({ const SpotifyActivity = ({ spotify }: { spotify: Spotify }): ReactElement => { const trackUrl: string = `https://open.spotify.com/track/${spotify.track_id}`; - const startTimestamp: number = spotify.timestamps.start; // Example start timestamp - const endTimestamp: number = spotify.timestamps.end; // Example end timestamp + const startTimestamp: number = spotify.timestamps.start; + const endTimestamp: number = spotify.timestamps.end; const [songProgress, setSongProgress] = useState(); const songDuration: number = endTimestamp - startTimestamp; @@ -250,31 +250,52 @@ const SpotifyActivity = ({ spotify }: { spotify: Spotify }): ReactElement => { ); }; -const GameActivity = ({ activity }: { activity: Activity }): ReactElement => ( -
-
- {/* Artwork */} - {`Game +const GameActivity = ({ activity }: { activity: Activity }): ReactElement => { + const startTimestamp: number = activity.timestamps?.start || Date.now(); + const [activityProgress, setActivityProgress] = useState< + string | undefined + >(); - {/* Activity Info */} -
-

{activity.name}

-

{activity.details}

-

- {activity.state} -

+ // Update the activity progress every second + useEffect(() => { + const interval = setInterval(() => { + setActivityProgress( + moment(Date.now() - startTimestamp).format("h:m:ss") + ); + }, 1000); + return () => clearInterval(interval); + }, [startTimestamp]); + return ( +
+
+ {/* Artwork */} + {`Game + + {/* Activity Info */} +
+

{activity.name}

+

+ {activity.details} +

+

+ {activity.state} +

+
+
+ + {/* Activity Progress & Logo */} +
+

{activityProgress}

+
- - {/* Activity Logo */} - -
-); + ); +}; export default DiscordStatus; diff --git a/src/components/landing/footer.tsx b/src/components/landing/footer.tsx new file mode 100644 index 0000000..e69de29