kodenique-game-sdk 1.0.0

package/dist/components/GamePlayerOverlays.js

@@ -0,0 +1,467 @@
+import React from "react";
+export const NetworkIndicator = ({ networkQuality, latency, bitrate, }) => {
+    const qualityLabel = {
+        good: "Excellent",
+        fair: "Fair",
+        poor: "Poor",
+        bad: "Bad",
+    }[networkQuality];
+    return (React.createElement("div", { style: {
+            position: "absolute",
+            top: "15px",
+            right: "15px",
+            display: "flex",
+            alignItems: "center",
+            gap: "8px",
+            background: "rgba(0, 0, 0, 0.7)",
+            padding: "8px 12px",
+            borderRadius: "20px",
+            fontSize: "12px",
+            color: "#fff",
+            zIndex: 5,
+        } },
+        React.createElement("div", { style: {
+                display: "flex",
+                alignItems: "flex-end",
+                gap: "2px",
+                height: "16px",
+            } }, [4, 8, 12, 16].map((height, i) => (React.createElement("div", { key: i, style: {
+                width: "4px",
+                height: `${height}px`,
+                background: networkQuality === "good"
+                    ? "#4ade80"
+                    : networkQuality === "fair" && i < 3
+                        ? "#fbbf24"
+                        : networkQuality === "poor" && i < 2
+                            ? "#ff6b6b"
+                            : networkQuality === "bad" && i < 1
+                                ? "#ff6b6b"
+                                : "#666",
+                borderRadius: "1px",
+                transition: "background 0.3s",
+            } })))),
+        React.createElement("span", null, qualityLabel),
+        latency > 0 && React.createElement("span", null,
+            "~",
+            latency,
+            "ms"),
+        bitrate > 0 && React.createElement("span", null,
+            bitrate,
+            "kbps")));
+};
+export const ErrorOverlay = ({ errorMessage, onRetry, }) => {
+    return (React.createElement("div", { style: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            backgroundColor: "rgba(0, 0, 0, 0.9)",
+            color: "#fff",
+            zIndex: 10,
+            cursor: "pointer",
+        }, onClick: onRetry },
+        React.createElement("div", { style: { fontSize: "48px", marginBottom: "16px" } }, "\uD83D\uDCE1"),
+        React.createElement("div", { style: {
+                fontSize: "20px",
+                fontWeight: "bold",
+                marginBottom: "8px",
+            } }, "Connection Issue"),
+        React.createElement("div", { style: { fontSize: "14px", opacity: 0.7, marginBottom: "20px" } }, errorMessage || "Unable to connect to stream"),
+        React.createElement("div", { style: {
+                padding: "10px 20px",
+                backgroundColor: "#00d4ff",
+                color: "#000",
+                borderRadius: "5px",
+                fontWeight: "bold",
+                fontSize: "16px",
+            } }, "Click to Retry")));
+};
+export const LoadingOverlay = () => {
+    return (React.createElement("div", { style: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            backgroundColor: "rgba(0, 0, 0, 0.7)",
+            color: "#fff",
+            zIndex: 10,
+        } },
+        React.createElement("div", { style: {
+                width: "60px",
+                height: "60px",
+                border: "4px solid rgba(255, 255, 255, 0.2)",
+                borderTopColor: "#00d4ff",
+                borderRadius: "50%",
+                animation: "spin 1s linear infinite",
+            } }),
+        React.createElement("div", { style: { marginTop: "15px", fontSize: "18px" } }, "Connecting..."),
+        React.createElement("div", { style: { marginTop: "5px", fontSize: "14px", opacity: 0.7 } }, "Establishing WebRTC connection"),
+        React.createElement("style", null, `
+        @keyframes spin {
+          to { transform: rotate(360deg); }
+        }
+      `)));
+};
+export const RoundWinnerOverlay = ({ round, game, onComplete, }) => {
+    const [show, setShow] = React.useState(true);
+    React.useEffect(() => {
+        // Auto-hide after 5 seconds
+        const timer = setTimeout(() => {
+            setShow(false);
+            setTimeout(onComplete, 500); // Wait for fade out
+        }, 5000);
+        return () => clearTimeout(timer);
+    }, [onComplete]);
+    if (!show)
+        return null;
+    // Determine winner
+    const isDraw = round.result === "draw";
+    const winnerTeam = game.teams.find(t => t.id === round.winner_team_id);
+    const winnerName = (winnerTeam === null || winnerTeam === void 0 ? void 0 : winnerTeam.team_name) || "Unknown";
+    const winnerColor = (winnerTeam === null || winnerTeam === void 0 ? void 0 : winnerTeam.team_color) || "#FFF";
+    return (React.createElement("div", { style: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            backgroundColor: "rgba(0, 0, 0, 0.9)",
+            zIndex: 100,
+            animation: "fadeIn 0.5s ease-in",
+        } },
+        React.createElement("div", { style: {
+                fontSize: "80px",
+                marginBottom: "20px",
+                animation: "bounce 1s ease infinite",
+            } }, isDraw ? "🤝" : "🏆"),
+        React.createElement("div", { style: {
+                fontSize: "24px",
+                fontWeight: "600",
+                color: "#94a3b8",
+                marginBottom: "10px",
+                textTransform: "uppercase",
+                letterSpacing: "2px",
+            } },
+            "Round ",
+            round.round_number,
+            " Finished"),
+        React.createElement("div", { style: {
+                fontSize: "48px",
+                fontWeight: "bold",
+                color: isDraw ? "#fbbf24" : winnerColor,
+                marginBottom: "20px",
+                textShadow: `0 4px 20px ${isDraw ? "#fbbf24" : winnerColor}80`,
+                animation: "pulse 2s ease infinite",
+            } }, isDraw ? "DRAW!" : `${winnerName} WINS!`),
+        React.createElement("div", { style: {
+                fontSize: "32px",
+                fontWeight: "600",
+                color: "#fff",
+                display: "flex",
+                gap: "20px",
+                alignItems: "center",
+            } },
+            React.createElement("span", { style: { color: game.teams[0].team_color } },
+                game.teams[0].team_name,
+                ": ",
+                round.red_team_score),
+            React.createElement("span", { style: { opacity: 0.5 } }, "-"),
+            React.createElement("span", { style: { color: game.teams[1].team_color } },
+                game.teams[1].team_name,
+                ": ",
+                round.blue_team_score)),
+        !isDraw && (React.createElement("div", { style: {
+                position: "absolute",
+                top: "50%",
+                left: "50%",
+                transform: "translate(-50%, -50%)",
+                pointerEvents: "none",
+            } }, [...Array(20)].map((_, i) => (React.createElement("div", { key: i, style: {
+                position: "absolute",
+                width: "10px",
+                height: "10px",
+                backgroundColor: ["#fbbf24", "#f59e0b", winnerColor, "#4ade80"][i % 4],
+                borderRadius: "50%",
+                animation: `confetti${i % 4} 3s ease-out infinite`,
+                left: `${Math.random() * 100 - 50}px`,
+                top: `${Math.random() * 100 - 50}px`,
+            } }))))),
+        React.createElement("style", null, `
+        @keyframes fadeIn {
+          from { opacity: 0; }
+          to { opacity: 1; }
+        }
+
+        @keyframes bounce {
+          0%, 100% { transform: translateY(0); }
+          50% { transform: translateY(-20px); }
+        }
+
+        @keyframes pulse {
+          0%, 100% {
+            opacity: 1;
+            transform: scale(1);
+          }
+          50% {
+            opacity: 0.8;
+            transform: scale(1.05);
+          }
+        }
+
+        @keyframes confetti0 {
+          0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
+          100% { transform: translate(${Math.random() * 400 - 200}px, ${Math.random() * 400 + 200}px) rotate(720deg); opacity: 0; }
+        }
+
+        @keyframes confetti1 {
+          0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
+          100% { transform: translate(${Math.random() * 400 - 200}px, ${Math.random() * 400 + 200}px) rotate(360deg); opacity: 0; }
+        }
+
+        @keyframes confetti2 {
+          0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
+          100% { transform: translate(${Math.random() * 400 - 200}px, ${Math.random() * 400 + 200}px) rotate(540deg); opacity: 0; }
+        }
+
+        @keyframes confetti3 {
+          0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
+          100% { transform: translate(${Math.random() * 400 - 200}px, ${Math.random() * 400 + 200}px) rotate(900deg); opacity: 0; }
+        }
+      `)));
+};
+export const ScoreOverlay = ({ game, gameTitle, showGameTitle = true, showRound = true, showWinnerAnimation = true, // Default: show animations
+ }) => {
+    const [showWinner, setShowWinner] = React.useState(false);
+    const [finishedRound, setFinishedRound] = React.useState(null);
+    const prevRoundsRef = React.useRef(game.rounds);
+    const isInitialMount = React.useRef(true);
+    const shownAnimationRoundIds = React.useRef(new Set());
+    // Detect when a round becomes finished (only show for NEW finishes, not on initial load!)
+    React.useEffect(() => {
+        // Skip animation detection if disabled
+        if (!showWinnerAnimation) {
+            return;
+        }
+        const prevRounds = prevRoundsRef.current;
+        const currentRounds = game.rounds;
+        // Skip on initial mount - mark all existing finished rounds as already shown
+        if (isInitialMount.current) {
+            isInitialMount.current = false;
+            prevRoundsRef.current = currentRounds;
+            // Mark all already-finished rounds so we don't show animations for them
+            if (currentRounds) {
+                currentRounds.forEach((round) => {
+                    if (round.status === "finished") {
+                        shownAnimationRoundIds.current.add(round.id);
+                    }
+                });
+            }
+            return;
+        }
+        if (currentRounds && prevRounds) {
+            // Check if a new round was created - if so, hide any active animation
+            const newRoundCreated = currentRounds.find((round) => {
+                const prevRound = prevRounds.find((r) => r.id === round.id);
+                return !prevRound;
+            });
+            if (newRoundCreated) {
+                setShowWinner(false);
+                setFinishedRound(null);
+                if (newRoundCreated.status === "finished") {
+                    shownAnimationRoundIds.current.add(newRoundCreated.id);
+                }
+            }
+            // Find newly finished round
+            const newlyFinished = currentRounds.find((round) => {
+                const prevRound = prevRounds.find((r) => r.id === round.id);
+                if (!prevRound)
+                    return false;
+                const wsAction = round._wsAction;
+                const prevWsAction = prevRound._wsAction;
+                // Show animation when round transitions to finished status
+                const isFinishAction = wsAction === "finished" || wsAction === "winner_set";
+                const wasNotFinishActionBefore = prevWsAction !== "finished" && prevWsAction !== "winner_set";
+                const isActuallyFinished = round.status === "finished";
+                const wasNotFinishedBefore = prevRound.status !== "finished";
+                const hasResult = round.result !== null;
+                const notShownYet = !shownAnimationRoundIds.current.has(round.id);
+                // Show animation if:
+                // 1. Action is explicitly "finished" or "winner_set", OR
+                // 2. Status changed to "finished" (for direct updates from backend)
+                const shouldShow = (isFinishAction && wasNotFinishActionBefore) ||
+                    (isActuallyFinished && wasNotFinishedBefore);
+                return shouldShow && hasResult && notShownYet;
+            });
+            if (newlyFinished) {
+                shownAnimationRoundIds.current.add(newlyFinished.id);
+                setFinishedRound(newlyFinished);
+                setShowWinner(true);
+            }
+        }
+        prevRoundsRef.current = currentRounds;
+    }, [game.rounds, showWinnerAnimation]);
+    // Get current round - use the highest round number regardless of status
+    const activeRound = game.rounds && game.rounds.length > 0
+        ? game.rounds.reduce((highest, current) => current.round_number > highest.round_number ? current : highest)
+        : undefined;
+    const currentRoundNumber = activeRound === null || activeRound === void 0 ? void 0 : activeRound.round_number;
+    // Use custom title or game name
+    const displayTitle = gameTitle || game.game_name;
+    // Get team names for "Red vs Blue" display
+    const teamNames = game.teams.length === 2
+        ? `${game.teams[0].team_name} vs ${game.teams[1].team_name}`
+        : game.teams.map((t) => t.team_name).join(" vs ");
+    return (React.createElement(React.Fragment, null,
+        showWinnerAnimation && showWinner && finishedRound && (React.createElement(RoundWinnerOverlay, { round: finishedRound, game: game, onComplete: () => setShowWinner(false) })),
+        React.createElement("div", { style: {
+                position: "absolute",
+                top: "20px",
+                left: "50%",
+                transform: "translateX(-50%)",
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                backgroundColor: "rgba(0, 0, 0, 0.85)",
+                padding: "16px 28px",
+                borderRadius: "12px",
+                zIndex: 5,
+                backdropFilter: "blur(10px)",
+                border: "1px solid rgba(255, 255, 255, 0.1)",
+                minWidth: "400px",
+            } },
+            (showGameTitle || showRound) && (React.createElement("div", { style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "12px",
+                    marginBottom: "12px",
+                    width: "100%",
+                    justifyContent: "center",
+                } },
+                showGameTitle && (React.createElement("div", { style: {
+                        fontSize: "18px",
+                        fontWeight: "bold",
+                        color: "#fff",
+                        letterSpacing: "0.5px",
+                    } }, displayTitle)),
+                showGameTitle && showRound && currentRoundNumber && (React.createElement("div", { style: {
+                        fontSize: "16px",
+                        fontWeight: "bold",
+                        color: "#fff",
+                        opacity: 0.4,
+                    } }, "-")),
+                showRound && currentRoundNumber && (React.createElement("div", { style: {
+                        fontSize: "16px",
+                        fontWeight: "600",
+                        color: "#00d4ff",
+                        backgroundColor: "rgba(0, 212, 255, 0.15)",
+                        padding: "4px 12px",
+                        borderRadius: "6px",
+                        textTransform: "uppercase",
+                        letterSpacing: "0.5px",
+                    } },
+                    "Round ",
+                    currentRoundNumber)),
+                showRound && (activeRound === null || activeRound === void 0 ? void 0 : activeRound.status) === "finished" && activeRound.result && (React.createElement("div", { style: {
+                        fontSize: "12px",
+                        fontWeight: "700",
+                        color: activeRound.result === "draw" ? "#fbbf24" : "#4ade80",
+                        backgroundColor: activeRound.result === "draw" ? "rgba(251, 191, 36, 0.2)" : "rgba(74, 222, 128, 0.2)",
+                        padding: "4px 10px",
+                        borderRadius: "6px",
+                        textTransform: "uppercase",
+                        display: "flex",
+                        alignItems: "center",
+                        gap: "4px",
+                    } }, activeRound.result === "draw" ? "🤝 DRAW" :
+                    activeRound.result === "red_win" ? "🏆 RED WINS" :
+                        activeRound.result === "blue_win" ? "🏆 BLUE WINS" : "")),
+                game.status === "live" && (React.createElement("div", { style: {
+                        fontSize: "11px",
+                        fontWeight: "700",
+                        color: "#4ade80",
+                        backgroundColor: "rgba(74, 222, 128, 0.2)",
+                        padding: "4px 8px",
+                        borderRadius: "6px",
+                        textTransform: "uppercase",
+                        display: "flex",
+                        alignItems: "center",
+                        gap: "4px",
+                    } },
+                    React.createElement("div", { style: {
+                            width: "6px",
+                            height: "6px",
+                            borderRadius: "50%",
+                            backgroundColor: "#4ade80",
+                            animation: "pulse 2s ease-in-out infinite",
+                        } }),
+                    "LIVE")))),
+            React.createElement("div", { style: {
+                    fontSize: "14px",
+                    fontWeight: "600",
+                    color: "#94a3b8",
+                    textTransform: "uppercase",
+                    letterSpacing: "1px",
+                    marginBottom: "14px",
+                } }, teamNames),
+            React.createElement("div", { style: {
+                    display: "flex",
+                    gap: "24px",
+                    alignItems: "center",
+                    justifyContent: "center",
+                } }, game.teams.map((team, index) => {
+                // Use active round scores if available, otherwise fall back to team scores
+                const score = activeRound
+                    ? index === 0
+                        ? activeRound.red_team_score
+                        : activeRound.blue_team_score
+                    : team.current_score;
+                return (React.createElement(React.Fragment, { key: team.id },
+                    index > 0 && (React.createElement("div", { style: {
+                            fontSize: "24px",
+                            fontWeight: "bold",
+                            color: "#fff",
+                            opacity: 0.3,
+                        } }, ":")),
+                    React.createElement("div", { style: {
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "12px",
+                        } },
+                        team.logo_url && (React.createElement("img", { src: team.logo_url, alt: team.team_name, style: {
+                                width: "40px",
+                                height: "40px",
+                                borderRadius: "50%",
+                                objectFit: "cover",
+                                border: `3px solid ${team.team_color}`,
+                                boxShadow: `0 0 12px ${team.team_color}40`,
+                            } })),
+                        React.createElement("div", { style: {
+                                fontSize: "32px",
+                                fontWeight: "bold",
+                                color: "#fff",
+                                textShadow: `0 2px 8px ${team.team_color}40`,
+                                minWidth: "50px",
+                                textAlign: "center",
+                            } }, score))));
+            })),
+            React.createElement("style", null, `
+        @keyframes pulse {
+          0%, 100% { opacity: 1; }
+          50% { opacity: 0.4; }
+        }
+      `))));
+};

package/dist/components/GamePlayerVideo.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface GamePlayerVideoProps {
+    videoRef: React.RefObject<HTMLVideoElement>;
+    controls: boolean;
+}
+export declare const GamePlayerVideo: React.FC<GamePlayerVideoProps>;
+export {};

package/dist/components/GamePlayerVideo.js

@@ -0,0 +1,86 @@
+import React from "react";
+export const GamePlayerVideo = ({ videoRef, controls, }) => {
+    const handleVideoEvent = (eventName, extraInfo) => {
+        const video = videoRef.current;
+        if (!video)
+            return;
+        const info = extraInfo || {
+            readyState: video.readyState,
+            paused: video.paused,
+        };
+        console.log(`[GamePlayer] ${eventName}`, info);
+    };
+    return (React.createElement("video", { ref: videoRef, autoPlay: true, muted: true, playsInline: true, controls: controls, preload: "auto", style: {
+            width: "100%",
+            height: "100%",
+            objectFit: "contain",
+            display: "block",
+            backgroundColor: "#000",
+        }, onLoadedMetadata: () => {
+            const video = videoRef.current;
+            if (video) {
+                handleVideoEvent("📋 Video metadata loaded", {
+                    dimensions: `${video.videoWidth}x${video.videoHeight}`,
+                });
+                if (video.paused) {
+                    video.play().catch(() => { });
+                }
+            }
+        }, onLoadedData: () => {
+            var _a;
+            handleVideoEvent("📦 Video data loaded - readyState:", {
+                readyState: (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.readyState,
+            });
+            const video = videoRef.current;
+            if (video && video.paused) {
+                video.play().catch(() => { });
+            }
+        }, onCanPlay: () => {
+            var _a;
+            handleVideoEvent("🟢 Video can play! ReadyState:", {
+                readyState: (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.readyState,
+            });
+            const video = videoRef.current;
+            if (video && video.paused) {
+                video.play().catch(() => { });
+            }
+        }, onCanPlayThrough: () => {
+            var _a;
+            handleVideoEvent("🟢🟢 Video can play through! ReadyState:", {
+                readyState: (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.readyState,
+            });
+            const video = videoRef.current;
+            if (video && video.paused) {
+                video.play().catch(() => { });
+            }
+        }, onPlaying: () => {
+            handleVideoEvent("🎉 Video is playing!");
+        }, onWaiting: () => {
+            handleVideoEvent("⏳ Video is waiting for data...");
+        }, onStalled: () => {
+            handleVideoEvent("⚠️ Video stalled - may need buffering");
+        }, onSuspend: () => {
+            handleVideoEvent("⏸️ Video data loading suspended");
+        }, onProgress: () => {
+            const video = videoRef.current;
+            if (video && video.buffered.length > 0) {
+                handleVideoEvent("📊 Buffering progress:", {
+                    buffered: `${video.buffered.end(0)} seconds`,
+                });
+            }
+        }, onClick: () => {
+            console.log("[GamePlayer] Video clicked!");
+            const video = videoRef.current;
+            if (video) {
+                if (video.paused) {
+                    console.log("[GamePlayer] Video is paused, playing...");
+                    video
+                        .play()
+                        .catch((e) => console.log("[GamePlayer] Play failed on click:", e));
+                }
+                else {
+                    console.log("[GamePlayer] Video is already playing");
+                }
+            }
+        } }));
+};

package/dist/components/index.d.ts

@@ -0,0 +1,2 @@
+export { GamePlayerVideo } from "./GamePlayerVideo";
+export { NetworkIndicator, ErrorOverlay, LoadingOverlay, ScoreOverlay, } from "./GamePlayerOverlays";

package/dist/components/index.js

@@ -0,0 +1,2 @@
+export { GamePlayerVideo } from "./GamePlayerVideo";
+export { NetworkIndicator, ErrorOverlay, LoadingOverlay, ScoreOverlay, } from "./GamePlayerOverlays";

package/dist/config.d.ts

@@ -0,0 +1,50 @@
+export declare const API_CONFIG: {
+    development: {
+        api_url: string;
+        websocket_url: string;
+        streaming: {
+            serverUrl: string;
+            serverPort: number;
+        };
+    };
+    staging: {
+        api_url: string;
+        websocket_url: string;
+        streaming: {
+            serverUrl: string;
+            serverPort: number;
+        };
+    };
+    production: {
+        api_url: string;
+        websocket_url: string;
+        streaming: {
+            serverUrl: string;
+            serverPort: number;
+        };
+    };
+};
+export declare function getConfig(env?: "development" | "staging" | "production"): {
+    api_url: string;
+    websocket_url: string;
+    streaming: {
+        serverUrl: string;
+        serverPort: number;
+    };
+} | {
+    api_url: string;
+    websocket_url: string;
+    streaming: {
+        serverUrl: string;
+        serverPort: number;
+    };
+} | {
+    api_url: string;
+    websocket_url: string;
+    streaming: {
+        serverUrl: string;
+        serverPort: number;
+    };
+};
+export declare function getWebRTCUrl(serverUrl: string, port: number, streamName: string): string;
+export declare function getWebSocketUrl(env?: "development" | "staging" | "production", token?: string): string;

package/dist/config.js

@@ -0,0 +1,46 @@
+// API Configuration for Game SDK
+export const API_CONFIG = {
+    // Development (local)
+    development: {
+        api_url: "http://localhost:5001/v1/external/games",
+        websocket_url: "ws.kodenique.com",
+        streaming: {
+            serverUrl: "localhost",
+            serverPort: 1985,
+        },
+    },
+    // Staging
+    staging: {
+        api_url: "https://api-stg.wspo.club/v1/external/games",
+        websocket_url: "ws.kodenique.com",
+        streaming: {
+            serverUrl: "143.198.90.133",
+            serverPort: 1985,
+        },
+    },
+    // Production
+    production: {
+        api_url: "https://api.wspo.club/v1/external/games",
+        websocket_url: "ws.kodenique.com",
+        streaming: {
+            serverUrl: "143.198.90.133",
+            serverPort: 1985,
+        },
+    },
+};
+// Helper to get current environment config
+export function getConfig(env = "development") {
+    return API_CONFIG[env];
+}
+// Helper to construct WebRTC URL
+export function getWebRTCUrl(serverUrl, port, streamName) {
+    return `http://${serverUrl}:${port}/rtc/v1/whep/?app=live&stream=${streamName}`;
+}
+// Helper to construct WebSocket URL with token
+export function getWebSocketUrl(env = "development", token) {
+    const baseUrl = API_CONFIG[env].websocket_url;
+    if (token) {
+        return `${baseUrl}?token=${token}`;
+    }
+    return baseUrl;
+}