kodenique-game-sdk 1.0.0

package/dist/contexts/GameStreamContext.d.ts

@@ -0,0 +1,24 @@
+import React, { ReactNode } from "react";
+import type { Game } from "../types";
+interface GameStreamContextType {
+    activeGames: Game[];
+    subscribeToGame: (gameId: string) => void;
+    unsubscribeFromGame: (gameId: string) => void;
+    getGame: (gameId: string) => Game | undefined;
+    updateGame: (game: Game) => void;
+    isConnected: boolean;
+    subscribedGameIds: string[];
+}
+interface GameStreamProviderProps {
+    children: ReactNode;
+    socketToken?: string;
+    environment?: 'development' | 'staging' | 'production';
+    websocketUrl?: string;
+    pusherConfig?: {
+        key: string;
+        cluster: string;
+    };
+}
+export declare const GameStreamProvider: React.FC<GameStreamProviderProps>;
+export declare const useGameStreamContext: () => GameStreamContextType;
+export {};

package/dist/contexts/GameStreamContext.js

@@ -0,0 +1,170 @@
+import React, { createContext, useContext, useEffect, useState, useCallback } from "react";
+import { GamePusherClient } from "../lib/pusher";
+import { getWebSocketUrl } from "../config";
+const GameStreamContext = createContext(undefined);
+export const GameStreamProvider = ({ children, socketToken, environment = 'development', websocketUrl: customWebsocketUrl, pusherConfig, }) => {
+    const [activeGames, setActiveGames] = useState([]);
+    const [subscribedGameIds, setSubscribedGameIds] = useState([]);
+    const [isConnected, setIsConnected] = useState(false);
+    const [websocket, setWebsocket] = useState(null);
+    const [pusherClient, setPusherClient] = useState(null);
+    // Determine the WebSocket URL to use
+    const websocketUrl = customWebsocketUrl || (socketToken ? getWebSocketUrl(environment, socketToken) : undefined);
+    // Initialize Pusher connection
+    useEffect(() => {
+        if (!pusherConfig)
+            return;
+        console.log("[GameStreamContext] Initializing Pusher");
+        const client = new GamePusherClient(pusherConfig);
+        client.connect();
+        setPusherClient(client);
+        setIsConnected(client.isConnected());
+        return () => {
+            console.log("[GameStreamContext] Cleaning up Pusher");
+            client.disconnect();
+        };
+    }, [pusherConfig]);
+    // Initialize WebSocket connection
+    useEffect(() => {
+        if (!websocketUrl || pusherConfig)
+            return; // Skip if using Pusher
+        console.log("[GameStreamContext] Connecting to WebSocket:", websocketUrl);
+        const ws = new WebSocket(websocketUrl);
+        ws.onopen = () => {
+            console.log("[GameStreamContext] WebSocket connected");
+            setIsConnected(true);
+        };
+        ws.onclose = () => {
+            console.log("[GameStreamContext] WebSocket disconnected");
+            setIsConnected(false);
+        };
+        ws.onerror = (error) => {
+            console.error("[GameStreamContext] WebSocket error:", error);
+            setIsConnected(false);
+        };
+        ws.onmessage = (event) => {
+            try {
+                const data = JSON.parse(event.data);
+                console.log("[GameStreamContext] Received message:", data);
+                // Handle different message types
+                if (data.type === "game_update") {
+                    updateGame(data.game);
+                }
+                else if (data.type === "game_ended") {
+                    removeGame(data.gameId);
+                }
+                else if (data.type === "score_update") {
+                    updateGameScore(data.gameId, data.scores);
+                }
+            }
+            catch (error) {
+                console.error("[GameStreamContext] Error parsing message:", error);
+            }
+        };
+        setWebsocket(ws);
+        return () => {
+            console.log("[GameStreamContext] Cleaning up WebSocket");
+            ws.close();
+        };
+    }, [websocketUrl, pusherConfig]);
+    // Subscribe to a game
+    const subscribeToGame = useCallback((gameId) => {
+        console.log("[GameStreamContext] Subscribing to game:", gameId);
+        setSubscribedGameIds((prev) => {
+            if (prev.includes(gameId))
+                return prev;
+            return [...prev, gameId];
+        });
+        // Use Pusher if available
+        if (pusherClient) {
+            pusherClient.subscribeToGame(gameId, {
+                onGameUpdate: updateGame,
+                onScoreUpdate: (scores) => updateGameScore(gameId, scores),
+                onStatusUpdate: (status) => {
+                    // Update game status
+                    setActiveGames((prev) => prev.map((g) => (g.id === gameId ? Object.assign(Object.assign({}, g), { status: status }) : g)));
+                },
+                onGameEnded: () => removeGame(gameId),
+            });
+        }
+        // Otherwise use WebSocket
+        else if (websocket && websocket.readyState === WebSocket.OPEN) {
+            websocket.send(JSON.stringify({
+                action: "subscribe",
+                gameId,
+            }));
+        }
+    }, [websocket, pusherClient]);
+    // Unsubscribe from a game
+    const unsubscribeFromGame = useCallback((gameId) => {
+        console.log("[GameStreamContext] Unsubscribing from game:", gameId);
+        setSubscribedGameIds((prev) => prev.filter((id) => id !== gameId));
+        // Use Pusher if available
+        if (pusherClient) {
+            pusherClient.unsubscribeFromGame(gameId);
+        }
+        // Otherwise use WebSocket
+        else if (websocket && websocket.readyState === WebSocket.OPEN) {
+            websocket.send(JSON.stringify({
+                action: "unsubscribe",
+                gameId,
+            }));
+        }
+    }, [websocket, pusherClient]);
+    // Get a specific game
+    const getGame = useCallback((gameId) => {
+        return activeGames.find((game) => game.id === gameId);
+    }, [activeGames]);
+    // Update game data
+    const updateGame = useCallback((game) => {
+        console.log("[GameStreamContext] Updating game:", game.id);
+        setActiveGames((prev) => {
+            const existingIndex = prev.findIndex((g) => g.id === game.id);
+            if (existingIndex >= 0) {
+                // Update existing game
+                const updated = [...prev];
+                updated[existingIndex] = game;
+                return updated;
+            }
+            else {
+                // Add new game
+                return [...prev, game];
+            }
+        });
+    }, []);
+    // Remove game (when ended)
+    const removeGame = useCallback((gameId) => {
+        console.log("[GameStreamContext] Removing game:", gameId);
+        setActiveGames((prev) => prev.filter((g) => g.id !== gameId));
+    }, []);
+    // Update game score only
+    const updateGameScore = useCallback((gameId, scores) => {
+        console.log("[GameStreamContext] Updating score for game:", gameId, scores);
+        setActiveGames((prev) => {
+            return prev.map((game) => {
+                if (game.id === gameId) {
+                    return Object.assign(Object.assign({}, game), { teams: game.teams.map((team, index) => (Object.assign(Object.assign({}, team), { current_score: scores[index] || team.current_score }))) });
+                }
+                return game;
+            });
+        });
+    }, []);
+    const value = {
+        activeGames,
+        subscribeToGame,
+        unsubscribeFromGame,
+        getGame,
+        updateGame,
+        isConnected,
+        subscribedGameIds,
+    };
+    return (React.createElement(GameStreamContext.Provider, { value: value }, children));
+};
+// Custom hook to use game stream context
+export const useGameStreamContext = () => {
+    const context = useContext(GameStreamContext);
+    if (!context) {
+        throw new Error("useGameStreamContext must be used within GameStreamProvider");
+    }
+    return context;
+};

package/dist/examples/GameStreamExample.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+/**
+ * Example 1: Using GameProvider with WebSocket (Recommended)
+ * User only needs to pass their socket token!
+ */
+export declare const GameStreamWithSocketTokenExample: () => React.JSX.Element;
+/**
+ * Example 2: Using custom WebSocket URL (Advanced)
+ */
+export declare const GameStreamWithCustomWebSocketExample: () => React.JSX.Element;
+/**
+ * Example: Multiple games with subscriptions
+ */
+export declare const MultipleGamesExample: () => React.JSX.Element;
+/**
+ * Example: Manual subscription control
+ */
+export declare const ManualSubscriptionExample: React.FC<{
+    gameId: string;
+}>;
+/**
+ * Example: Customizing overlay display
+ */
+export declare const CustomOverlayExample: React.FC<{
+    gameId: string;
+}>;

package/dist/examples/GameStreamExample.js

@@ -0,0 +1,92 @@
+import React from "react";
+import { GamePlayer } from "../GamePlayer";
+import { GameProvider } from "../GameContext";
+import { useGameStream } from "../hooks/useGameStream";
+/**
+ * Example 1: Using GameProvider with WebSocket (Recommended)
+ * User only needs to pass their socket token!
+ */
+export const GameStreamWithSocketTokenExample = () => {
+    return (React.createElement(GameProvider, { access_token: "your-api-access-token", socketToken: "your-socket-auth-token", environment: "production" // or 'staging' or 'development'
+     },
+        React.createElement(GamePlayerWithSubscription, { gameId: "game-123" })));
+};
+/**
+ * Example 2: Using custom WebSocket URL (Advanced)
+ */
+export const GameStreamWithCustomWebSocketExample = () => {
+    return (React.createElement(GameProvider, { access_token: "your-api-access-token", websocketUrl: "wss://your-custom-websocket-server.com?token=abc123" },
+        React.createElement(GamePlayerWithSubscription, { gameId: "game-123" })));
+};
+/**
+ * Component that subscribes to game updates
+ */
+const GamePlayerWithSubscription = ({ gameId }) => {
+    // Subscribe to game updates
+    const { game, isSubscribed, isConnected } = useGameStream({
+        gameId,
+        autoSubscribe: true,
+    });
+    return (React.createElement("div", null,
+        React.createElement("div", { className: "mb-4 flex items-center gap-2" },
+            React.createElement("div", { className: `h-3 w-3 rounded-full ${isConnected ? "bg-green-500" : "bg-red-500"}` }),
+            React.createElement("span", { className: "text-sm" }, isConnected ? "Connected" : "Disconnected"),
+            isSubscribed && (React.createElement("span", { className: "text-sm text-gray-500" },
+                "(Subscribed to ",
+                gameId,
+                ")"))),
+        React.createElement(GamePlayer, { streamUrl: "http://your-stream-server.com/stream", game: game, showScoreOverlay: true, showNetworkIndicator: true, showGameTitle: true, showRound: true, width: "100%", height: "600px" }),
+        game && (React.createElement("div", { className: "mt-4 rounded-lg bg-gray-100 p-4" },
+            React.createElement("h3", { className: "mb-2 text-lg font-bold" }, game.game_name),
+            React.createElement("div", { className: "flex gap-4" }, game.teams.map((team) => (React.createElement("div", { key: team.id, className: "flex-1" },
+                React.createElement("div", { className: "font-semibold", style: { color: team.team_color } }, team.team_name),
+                React.createElement("div", { className: "text-2xl font-bold" }, team.current_score))))),
+            React.createElement("div", { className: "mt-2 text-sm text-gray-600" },
+                "Status: ",
+                game.status)))));
+};
+/**
+ * Example: Multiple games with subscriptions
+ */
+export const MultipleGamesExample = () => {
+    const gameIds = ["game-1", "game-2", "game-3"];
+    return (React.createElement(GameProvider, { access_token: "your-api-access-token", socketToken: "your-socket-auth-token", environment: "production" },
+        React.createElement("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3" }, gameIds.map((gameId) => (React.createElement(GamePlayerWithSubscription, { key: gameId, gameId: gameId }))))));
+};
+/**
+ * Example: Manual subscription control
+ */
+export const ManualSubscriptionExample = ({ gameId, }) => {
+    const { game, isSubscribed, subscribe, unsubscribe } = useGameStream({
+        gameId,
+        autoSubscribe: false, // Don't auto-subscribe
+    });
+    return (React.createElement("div", null,
+        React.createElement("div", { className: "mb-4 flex gap-2" },
+            React.createElement("button", { onClick: subscribe, disabled: isSubscribed, className: "rounded bg-blue-500 px-4 py-2 text-white disabled:bg-gray-300" }, "Subscribe"),
+            React.createElement("button", { onClick: unsubscribe, disabled: !isSubscribed, className: "rounded bg-red-500 px-4 py-2 text-white disabled:bg-gray-300" }, "Unsubscribe"),
+            React.createElement("span", { className: "flex items-center text-sm" }, isSubscribed ? "✓ Subscribed" : "○ Not subscribed")),
+        game && (React.createElement(GamePlayer, { streamUrl: "http://your-stream-server.com/stream", game: game, showScoreOverlay: true, gameTitle: "Custom Game Title", showGameTitle: true, showRound: true }))));
+};
+/**
+ * Example: Customizing overlay display
+ */
+export const CustomOverlayExample = ({ gameId, }) => {
+    const { game } = useGameStream({
+        gameId,
+        autoSubscribe: true,
+    });
+    return (React.createElement("div", { className: "space-y-6" },
+        React.createElement("div", null,
+            React.createElement("h3", { className: "mb-2 font-bold" }, "With Custom Title and Round"),
+            React.createElement(GamePlayer, { game: game, streamUrl: "http://your-stream-server.com/stream", showScoreOverlay: true, gameTitle: "Championship Finals", showGameTitle: true, showRound: true, width: "100%", height: "400px" })),
+        React.createElement("div", null,
+            React.createElement("h3", { className: "mb-2 font-bold" }, "Round and Scores Only"),
+            React.createElement(GamePlayer, { game: game, streamUrl: "http://your-stream-server.com/stream", showScoreOverlay: true, showGameTitle: false, showRound: true, width: "100%", height: "400px" })),
+        React.createElement("div", null,
+            React.createElement("h3", { className: "mb-2 font-bold" }, "Scores Only"),
+            React.createElement(GamePlayer, { game: game, streamUrl: "http://your-stream-server.com/stream", showScoreOverlay: true, showGameTitle: false, showRound: false, width: "100%", height: "400px" })),
+        React.createElement("div", null,
+            React.createElement("h3", { className: "mb-2 font-bold" }, "No Overlay"),
+            React.createElement(GamePlayer, { game: game, streamUrl: "http://your-stream-server.com/stream", showScoreOverlay: false, width: "100%", height: "400px" }))));
+};

package/dist/examples/SimpleAutoSubscribe.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Simple Auto-Subscribe Example
+ *
+ * This example shows the easiest way to use the Game SDK.
+ * Just pass the game object to GamePlayer - the SDK handles everything automatically!
+ */
+import React from 'react';
+declare function App(): React.JSX.Element;
+export default App;

package/dist/examples/SimpleAutoSubscribe.js

@@ -0,0 +1,29 @@
+/**
+ * Simple Auto-Subscribe Example
+ *
+ * This example shows the easiest way to use the Game SDK.
+ * Just pass the game object to GamePlayer - the SDK handles everything automatically!
+ */
+import React from 'react';
+import { GameProvider, GamePlayer, useGames } from '../index';
+function App() {
+    return (React.createElement(GameProvider, { access_token: "your-access-token", socketToken: "your-socket-token", environment: "production" // or "development" or "staging"
+     },
+        React.createElement(GamePage, null)));
+}
+function GamePage() {
+    // Fetch games from API
+    const { games, loading } = useGames({
+        access_token: 'your-access-token',
+        api_url: 'https://api.example.com/v1/external/games'
+    });
+    if (loading)
+        return React.createElement("div", null, "Loading games...");
+    const game = games[0]; // Or select specific game
+    return (React.createElement("div", null,
+        React.createElement("h1", null,
+            "Live Game: ", game === null || game === void 0 ? void 0 :
+            game.game_name),
+        React.createElement(GamePlayer, { game: game, showScoreOverlay: true, showGameTitle: false, showRound: true, autoPlay: true, muted: true, width: "100%", height: "600px" })));
+}
+export default App;

package/dist/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { useWebRTC } from "./useWebRTC";
+export type { UseWebRTCOptions, UseWebRTCReturn } from "./useWebRTC";

package/dist/hooks/index.js

@@ -0,0 +1 @@
+export { useWebRTC } from "./useWebRTC";

package/dist/hooks/useGameStream.d.ts

@@ -0,0 +1,29 @@
+import type { Game } from "../types";
+interface UseGameStreamOptions {
+    gameId?: string;
+    autoSubscribe?: boolean;
+}
+export interface UseGameStreamReturn {
+    game: Game | undefined;
+    isSubscribed: boolean;
+    isConnected: boolean;
+    subscribe: () => void;
+    unsubscribe: () => void;
+    updateGame: (game: Game) => void;
+}
+/**
+ * Hook to subscribe to a specific game's real-time updates
+ *
+ * @example
+ * ```tsx
+ * const { game, isSubscribed, subscribe } = useGameStream({
+ *   gameId: "game-123",
+ *   autoSubscribe: true
+ * });
+ *
+ * // Game data updates automatically via WebSocket
+ * console.log(game?.teams[0].current_score);
+ * ```
+ */
+export declare function useGameStream(options?: UseGameStreamOptions): UseGameStreamReturn;
+export {};

package/dist/hooks/useGameStream.js

@@ -0,0 +1,78 @@
+import { useEffect, useState } from "react";
+import { useGameContext } from "../GameContext";
+/**
+ * Hook to subscribe to a specific game's real-time updates
+ *
+ * @example
+ * ```tsx
+ * const { game, isSubscribed, subscribe } = useGameStream({
+ *   gameId: "game-123",
+ *   autoSubscribe: true
+ * });
+ *
+ * // Game data updates automatically via WebSocket
+ * console.log(game?.teams[0].current_score);
+ * ```
+ */
+export function useGameStream(options = {}) {
+    const { gameId, autoSubscribe = true } = options;
+    const { subscribeToGame, unsubscribeFromGame, getGame, updateGame: updateGameContext, isConnected, subscribedGameIds, activeGames, } = useGameContext();
+    const [game, setGame] = useState(undefined);
+    // Check if currently subscribed
+    const isSubscribed = gameId ? subscribedGameIds.includes(gameId) : false;
+    // Subscribe function
+    const subscribe = () => {
+        if (!gameId)
+            return;
+        subscribeToGame(gameId);
+    };
+    // Unsubscribe function
+    const unsubscribe = () => {
+        if (!gameId)
+            return;
+        unsubscribeFromGame(gameId);
+    };
+    // Auto-subscribe on mount if enabled, but wait for connection
+    useEffect(() => {
+        if (autoSubscribe && gameId && isConnected) {
+            console.log('[useGameStream] Auto-subscribing to game:', gameId);
+            subscribe();
+        }
+        return () => {
+            if (autoSubscribe && gameId) {
+                unsubscribe();
+            }
+        };
+    }, [gameId, autoSubscribe, isConnected]);
+    // Update local game state when context changes
+    useEffect(() => {
+        if (!gameId)
+            return;
+        const currentGame = getGame(gameId);
+        console.log('[useGameStream] Context activeGames changed, updating local game state');
+        console.log('[useGameStream] Current game from context:', currentGame);
+        if (currentGame) {
+            setGame(currentGame);
+        }
+    }, [gameId, activeGames, getGame]);
+    // Listen for game updates - poll every second
+    useEffect(() => {
+        if (!gameId || !isSubscribed)
+            return;
+        const interval = setInterval(() => {
+            const currentGame = getGame(gameId);
+            if (currentGame) {
+                setGame(currentGame);
+            }
+        }, 1000);
+        return () => clearInterval(interval);
+    }, [gameId, isSubscribed, getGame]);
+    return {
+        game,
+        isSubscribed,
+        isConnected,
+        subscribe,
+        unsubscribe,
+        updateGame: updateGameContext,
+    };
+}

package/dist/hooks/useWebRTC.d.ts

@@ -0,0 +1,21 @@
+export interface UseWebRTCOptions {
+    streamUrl?: string;
+    serverUrl?: string;
+    streamName?: string;
+    autoPlay?: boolean;
+    muted?: boolean;
+    onLoad?: () => void;
+    onError?: (error: Error) => void;
+    onConnectionStateChange?: (state: RTCPeerConnectionState) => void;
+}
+export interface UseWebRTCReturn {
+    videoRef: React.RefObject<HTMLVideoElement>;
+    isLoading: boolean;
+    hasError: boolean;
+    errorMessage: string;
+    networkQuality: "good" | "fair" | "poor" | "bad";
+    latency: number;
+    bitrate: number;
+    retry: () => void;
+}
+export declare function useWebRTC(options: UseWebRTCOptions): UseWebRTCReturn;