diff --git a/projects/common/src/utils/time-utils.ts b/projects/common/src/utils/time-utils.ts index 26c14ac..569d25b 100644 --- a/projects/common/src/utils/time-utils.ts +++ b/projects/common/src/utils/time-utils.ts @@ -9,7 +9,7 @@ export function timeAgo(input: Date) { const now = new Date().getTime(); const deltaSeconds = Math.floor((now - inputDate) / 1000); // Get time difference in seconds - if (deltaSeconds <= 60) { + if (deltaSeconds <= 10) { return "just now"; } diff --git a/projects/website/src/components/score/score-feed/score-feed.tsx b/projects/website/src/components/score/score-feed/score-feed.tsx index 7123862..ef07ab2 100644 --- a/projects/website/src/components/score/score-feed/score-feed.tsx +++ b/projects/website/src/components/score/score-feed/score-feed.tsx @@ -1,14 +1,15 @@ "use client"; -import { useScoreSaberWebsocket } from "@/hooks/use-scoresaber-websocket"; import { useEffect, useState } from "react"; import ScoreSaberPlayerScoreToken from "@ssr/common/types/token/scoresaber/score-saber-player-score-token"; import Score from "@/components/score/score"; import { parseDate } from "@ssr/common/utils/time-utils"; import Link from "next/link"; +import { useWebSocket } from "@/hooks/use-websocket"; +import { ScoreSaberWebsocketMessageToken } from "@ssr/common/types/token/scoresaber/websocket/scoresaber-websocket-message"; export default function ScoreFeed() { - const { connected, message } = useScoreSaberWebsocket(); + const { connected, message } = useWebSocket("wss://scoresaber.com/ws"); const [scores, setScores] = useState([]); useEffect(() => { @@ -21,7 +22,7 @@ export default function ScoreFeed() { } setScores(prev => { - const newScores = [...prev, message.commandData]; + const newScores = [...prev, commandData]; if (newScores.length > 8) { newScores.pop(); } diff --git a/projects/website/src/hooks/use-scoresaber-websocket.ts b/projects/website/src/hooks/use-websocket.ts similarity index 63% rename from projects/website/src/hooks/use-scoresaber-websocket.ts rename to projects/website/src/hooks/use-websocket.ts index 668ef45..db10c8a 100644 --- a/projects/website/src/hooks/use-scoresaber-websocket.ts +++ b/projects/website/src/hooks/use-websocket.ts @@ -1,12 +1,14 @@ import { useEffect, useRef, useState } from "react"; -import { ScoreSaberWebsocketMessageToken } from "@ssr/common/types/token/scoresaber/websocket/scoresaber-websocket-message"; /** - * Connects to the ScoreSaber websocket. + * Generic WebSocket hook for connecting and handling WebSocket messages of type T. + * + * @param url - The WebSocket server URL. + * @param reconnectDelay - Optional delay (in milliseconds) before attempting to reconnect (default is 5000ms). */ -export const useScoreSaberWebsocket = () => { +export const useWebSocket = (url: string, reconnectDelay: number = 5000) => { const [connected, setConnected] = useState(false); - const [message, setMessage] = useState(null); // Store the incoming message + const [message, setMessage] = useState(null); // Store the incoming message of type T const socketRef = useRef(null); const reconnectTimeoutRef = useRef(null); const [mounted, setMounted] = useState(false); @@ -21,21 +23,20 @@ export const useScoreSaberWebsocket = () => { } const connectWebSocket = () => { - socketRef.current = new WebSocket("wss://scoresaber.com/ws"); + socketRef.current = new WebSocket(url); socketRef.current.onopen = () => { setConnected(true); }; socketRef.current.onmessage = event => { - // Ignore welcome message - if (event.data === "Connected to the ScoreSaber WSS") { - return; + try { + // Handle incoming messages and store them in state as type T + const messageData: T = JSON.parse(event.data); + setMessage(messageData); + } catch (error) { + console.error("Error parsing WebSocket message:", error); } - - // Handle incoming messages here and store them in state - const messageData = JSON.parse(event.data); - setMessage(messageData); // Store the message in the state }; socketRef.current.onclose = () => { @@ -53,10 +54,10 @@ export const useScoreSaberWebsocket = () => { if (reconnectTimeoutRef.current) { clearTimeout(reconnectTimeoutRef.current); } - // Try reconnecting after 5 seconds + // Try reconnecting after the specified delay reconnectTimeoutRef.current = setTimeout(() => { connectWebSocket(); - }, 5000); + }, reconnectDelay); }; // Initialize WebSocket connection @@ -72,7 +73,7 @@ export const useScoreSaberWebsocket = () => { clearTimeout(reconnectTimeoutRef.current); } }; - }, [mounted]); + }, [mounted, url, reconnectDelay]); return { connected, message }; };