@four-leaf-studios/rl-overlay 1.0.2 → 1.0.4

package/dist/index.cjs.js

@@ -22,62 +22,160 @@ function _interopNamespaceDefault(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
-const RLContext = React.createContext(null);
-const RLProvider = ({ children, url = "ws://localhost:49122", }) => {
-    // Strongly-typed storage of known events
-    const dataRef = React.useRef({});
-    const subscribersRef = React.useRef({});
+// useRocketLeagueSocket.ts
+const reducer = (state, action) => ({
+    ...state,
+    [action.type]: action.payload,
+});
+const normalizeEvent = (raw) => {
+    if (typeof raw === "object" && raw !== null) {
+        // { event: "name", data: {...} }
+        if (typeof raw.event === "string" && "data" in raw) {
+            return [[raw.event, raw.data]];
+        }
+        // { "evt1": {...}, "evt2": {...} }
+        return Object.entries(raw);
+    }
+    return [];
+};
+function useRocketLeagueSocket(url = "ws://localhost:49122", options) {
+    const { maxRetries = 5, heartbeatIntervalMs = 30_000 } = options || {};
+    // Reducer state holds the map of eventName → payload
+    const [events, dispatch] = React.useReducer(reducer, {});
+    const [readyState, setReadyState] = React.useState(WebSocket.CLOSED);
+    const [error, setError] = React.useState(null);
+    // Refs for the socket, retry count, and heartbeat timer
+    const socketRef = React.useRef(null);
+    const retryRef = React.useRef(0);
+    const heartbeatRef = React.useRef(undefined);
+    // Expose a send() helper
+    const send = React.useCallback((event, data) => {
+        const sock = socketRef.current;
+        if (sock?.readyState === WebSocket.OPEN) {
+            sock.send(JSON.stringify({ event, data }));
+        }
+        else {
+            console.warn("Cannot send, socket not open:", event);
+        }
+    }, []);
     React.useEffect(() => {
-        const socket = new WebSocket(url);
-        socket.onmessage = (e) => {
-            try {
-                const raw = JSON.parse(e.data);
-                const entries = Array.isArray(raw)
-                    ? raw
-                    : raw.event && raw.data
-                        ? [[raw.event, raw.data]]
-                        : Object.entries(raw);
-                for (const [eventName, payload] of entries) {
-                    // store payload
-                    dataRef.current[eventName] = payload;
-                    // notify subscribers
-                    (subscribersRef.current[eventName] ?? []).forEach((cb) => cb());
+        let isMounted = true;
+        const connect = () => {
+            const ws = new WebSocket(url);
+            socketRef.current = ws;
+            setReadyState(ws.readyState);
+            ws.onopen = () => {
+                if (!isMounted)
+                    return;
+                retryRef.current = 0;
+                setReadyState(ws.readyState);
+                // Start heartbeat to keep alive
+                heartbeatRef.current = window.setInterval(() => {
+                    ws.send(JSON.stringify({ event: "ping" }));
+                }, heartbeatIntervalMs);
+            };
+            ws.onmessage = (e) => {
+                if (!isMounted)
+                    return;
+                let raw;
+                try {
+                    raw = JSON.parse(e.data);
                 }
-            }
-            catch {
-                console.error("Invalid WS data");
-            }
+                catch {
+                    console.error("Invalid JSON from server:", e.data);
+                    return;
+                }
+                // ignore pong replies
+                if (raw.event === "pong")
+                    return;
+                // dispatch each normalized event
+                for (const [evt, payload] of normalizeEvent(raw)) {
+                    dispatch({ type: evt, payload });
+                }
+            };
+            ws.onerror = (ev) => {
+                if (!isMounted)
+                    return;
+                console.error("WebSocket error", ev);
+                setError(ev);
+            };
+            ws.onclose = () => {
+                if (!isMounted)
+                    return;
+                setReadyState(WebSocket.CLOSED);
+                if (heartbeatRef.current !== undefined) {
+                    clearInterval(heartbeatRef.current);
+                }
+                // attempt reconnect
+                if (retryRef.current < maxRetries) {
+                    const backoff = 2 ** retryRef.current * 1000;
+                    retryRef.current += 1;
+                    setTimeout(connect, backoff);
+                }
+                else {
+                    console.warn("Reached max WebSocket retries");
+                }
+            };
         };
+        connect();
         return () => {
-            socket.close();
+            isMounted = false;
+            if (heartbeatRef.current !== undefined) {
+                clearInterval(heartbeatRef.current);
+            }
+            socketRef.current?.close();
         };
-    }, [url]);
-    // Expose stable store API
+    }, [url, maxRetries, heartbeatIntervalMs]);
+    return { events, readyState, error, send };
+}
+
+const RLContext = React.createContext(null);
+const RLProvider = ({ url = "ws://localhost:49122", children }) => {
+    // 1) pull in every event & helpers from the single socket hook
+    const { events: allEvents, send, readyState, error, } = useRocketLeagueSocket(url);
+    // 2) Use a loose-typed ref to avoid union-vs-intersection complaints
+    const dataRef = React.useRef({});
+    const subsRef = React.useRef({});
+    // 3) Sync incoming allEvents into dataRef and notify subscribers
+    React.useEffect(() => {
+        // Force evt to be keyof PayloadStorage for type-narrowing
+        const keys = Object.keys(allEvents);
+        keys.forEach((evt) => {
+            const payload = allEvents[evt];
+            // write into our record (string index)
+            dataRef.current[evt] = payload;
+            // notify anyone subscribed to this key
+            (subsRef.current[evt] || []).forEach((cb) => cb());
+        });
+    }, [allEvents]);
+    // 4) Build the same Store API, casting when reading back
     const store = React.useMemo(() => ({
-        getSnapshot: (eventName) => dataRef.current[eventName],
+        getSnapshot: (eventName) => 
+        // cast from any back to the correct PayloadStorage type
+        dataRef.current[eventName],
         subscribe: (eventName, callback) => {
-            const subs = (subscribersRef.current[eventName] ??= []);
-            subs.push(callback);
+            const arr = (subsRef.current[eventName] ??= []);
+            arr.push(callback);
             return () => {
-                subscribersRef.current[eventName] = subs.filter((c) => c !== callback);
+                subsRef.current[eventName] = arr.filter((c) => c !== callback);
             };
         },
-    }), []);
+        send,
+        readyState,
+        error,
+    }), [send, readyState, error]);
     return jsxRuntime.jsx(RLContext.Provider, { value: store, children: children });
 };
 /**
- * Subscribe to the full event payload. Returns `PayloadStorage[E] | undefined`.
+ * Subscribe to the full payload of an event.
  */
 function useEvent(eventName) {
     const store = React.useContext(RLContext);
     if (!store)
         throw new Error("useEvent must be inside <RLProvider>");
-    // 2) (optional) explicitly tell TS what snapshot type is
     return React.useSyncExternalStore((cb) => store.subscribe(eventName, cb), () => store.getSnapshot(eventName));
 }
-/**
- * Tiny deep-equal for JavaScript values
- */
+/** Tiny deep-equal for selector comparisons */
 function deepEqual(a, b) {
     if (Object.is(a, b))
         return true;
@@ -87,34 +185,21 @@ function deepEqual(a, b) {
         b === null) {
         return false;
     }
-    const aKeys = Object.keys(a);
-    const bKeys = Object.keys(b);
+    const aKeys = Object.keys(a), bKeys = Object.keys(b);
     if (aKeys.length !== bKeys.length)
         return false;
-    for (const key of aKeys) {
-        if (!deepEqual(a[key], b[key]))
-            return false;
-    }
-    return true;
+    return aKeys.every((key) => deepEqual(a[key], b[key]));
 }
 /**
- * Subscribe to a selected slice of the event payload. Only re-renders when that slice changes.
- * Uses a built-in deep-equality check by default (no lodash).
+ * Subscribe to a selected slice of the event payload. Re-renders only on actual changes.
  */
-function useEventSelector(
-/** Event key to subscribe to */
-eventName, 
-/** Selector that picks a slice of the payload */
-selector, 
-/** Equality function to compare selector results; defaults to deepEqual */
-isEqual = deepEqual) {
+function useEventSelector(eventName, selector, isEqual = deepEqual) {
     const store = React.useContext(RLContext);
     const lastRef = React.useRef({});
     const subscribe = React.useCallback((cb) => store.subscribe(eventName, cb), [eventName, store]);
     const getSnapshot = React.useCallback(() => {
         const raw = store.getSnapshot(eventName);
         const next = selector(raw);
-        // deep-equal by default
         if (lastRef.current.val !== undefined &&
             isEqual(next, lastRef.current.val)) {
             return lastRef.current.val;
@@ -125,51 +210,16 @@ isEqual = deepEqual) {
     return React.useSyncExternalStore(subscribe, getSnapshot);
 }
 
-const reducer = (state, action) => ({
-    ...state,
-    [action.type]: action.payload,
-});
-const normalizeEvent = (raw) => {
-    if (typeof raw === "object") {
-        // Format 1: { event: "game:update_state", data: { ... } }
-        if (typeof raw.event === "string" && "data" in raw) {
-            return [[raw.event, raw.data]];
-        }
-        // Format 2: { "game:update_state": { ... }, "game:goal_scored": { ... } }
-        return Object.entries(raw);
-    }
-    return [];
-};
-const useRocketLeagueSocket = (url = "ws://localhost:49122") => {
-    const [state, dispatch] = React.useReducer(reducer, {});
-    React.useEffect(() => {
-        const socket = new WebSocket(url);
-        socket.onmessage = (event) => {
-            try {
-                const rawData = JSON.parse(event.data);
-                const events = normalizeEvent(rawData);
-                events.forEach(([eventName, payload]) => {
-                    dispatch({ type: eventName, payload });
-                });
-            }
-            catch (err) {
-                console.error("WebSocket error: Invalid JSON", err);
-            }
-        };
-        return () => socket.close();
-    }, [url]);
-    return state;
-};
-
+const STATE_LABELS = ["CONNECTING", "OPEN", "CLOSING", "CLOSED"];
 const WebsocketData = () => {
-    const data = useRocketLeagueSocket();
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { style: { fontFamily: "monospace", padding: "1rem" }, children: [jsxRuntime.jsx("h1", { children: "Rocket League Live Events" }), Object.entries(data).map(([event, payload]) => (jsxRuntime.jsxs("div", { style: {
-                        border: "1px solid #ccc",
-                        marginBottom: "1rem",
-                        padding: "0.5rem",
-                        borderRadius: "4px",
-                        backgroundColor: "#f9f9f9",
-                    }, children: [jsxRuntime.jsx("h2", { children: event }), jsxRuntime.jsx("pre", { style: { whiteSpace: "pre-wrap", wordBreak: "break-word" }, children: JSON.stringify(payload, null, 2) })] }, event)))] }) }));
+    const { events, readyState, error } = useRocketLeagueSocket();
+    return (jsxRuntime.jsxs("div", { style: { fontFamily: "monospace", padding: "1rem" }, children: [jsxRuntime.jsx("h1", { children: "Rocket League Live Events" }), jsxRuntime.jsxs("p", { children: [jsxRuntime.jsx("strong", { children: "Connection:" }), " ", STATE_LABELS[readyState] ?? readyState] }), error && (jsxRuntime.jsxs("p", { style: { color: "red" }, children: [jsxRuntime.jsx("strong", { children: "Error:" }), " ", String(error)] })), Object.entries(events).map(([event, payload]) => (jsxRuntime.jsxs("div", { style: {
+                    border: "1px solid #ccc",
+                    marginBottom: "1rem",
+                    padding: "0.5rem",
+                    borderRadius: "4px",
+                    backgroundColor: "#f9f9f9",
+                }, children: [jsxRuntime.jsx("h2", { children: event }), jsxRuntime.jsx("pre", { style: { whiteSpace: "pre-wrap", wordBreak: "break-word" }, children: JSON.stringify(payload, null, 2) })] }, event))), Object.keys(events).length === 0 && jsxRuntime.jsx("p", { children: "No events received yet." })] }));
 };
 
 var BroadcastContext = React.createContext(undefined);
@@ -10321,9 +10371,9 @@ var ScoreboardSeriesBoxComponent = function (_a) {
     var teamSeriesScore = Number(team.series_score) || 0;
     var pointsCount = Math.ceil(bestOf / 2);
     var points = Array.from({ length: pointsCount }, function (_, index) { return index; });
-    var isLefTeam = team.id === 0;
-    var modifier = isLefTeam ? "left" : "right";
-    var teamColor = ((_b = team.color) === null || _b === void 0 ? void 0 : _b.primary_color) || (isLefTeam ? "#0052cc" : "#ff6600");
+    var isLeftTeam = team.id === "0";
+    var modifier = isLeftTeam ? "left" : "right";
+    var teamColor = ((_b = team.color) === null || _b === void 0 ? void 0 : _b.primary_color) || (isLeftTeam ? "#0052cc" : "#ff6600");
     return (React.createElement("div", { className: "series_box ".concat(modifier, "_series_box"), style: { "--team-color": teamColor } }, points.map(function (index) {
         var pointClass = index < teamSeriesScore
             ? "series_score_box_point ".concat(modifier, "_series_score_box_point")