kodenique-game-sdk 1.0.0

package/dist/GameDebug.js

@@ -0,0 +1,172 @@
+import React, { useState } from 'react';
+import { useGames } from './useGames';
+import { GameProvider } from './GameContext';
+// Component to test different API endpoints
+export const GameDebugPanel = ({ access_token }) => {
+    var _a;
+    const [customUrl, setCustomUrl] = useState('');
+    const [testResults, setTestResults] = useState({});
+    const testEndpoints = [
+        'http://localhost:5001/v1/external/games',
+        'https://api-stg.wspo.club/v1/external/games',
+        'https://api-stg.wspo.club/api/v1/external/games',
+        'https://api-stg.wspo.club/external/games',
+        'https://api-stg.wspo.club/v1/games',
+    ];
+    const testEndpoint = async (url) => {
+        try {
+            const response = await fetch(url, {
+                method: 'GET',
+                headers: {
+                    'Authorization': `Bearer ${access_token}`,
+                    'Content-Type': 'application/json',
+                },
+            });
+            if (response.ok) {
+                const data = await response.json();
+                setTestResults(prev => {
+                    var _a;
+                    return (Object.assign(Object.assign({}, prev), { [url]: `✅ Success! ${((_a = data.data) === null || _a === void 0 ? void 0 : _a.length) || 0} games found` }));
+                });
+            }
+            else {
+                setTestResults(prev => (Object.assign(Object.assign({}, prev), { [url]: `❌ Error ${response.status}: ${response.statusText}` })));
+            }
+        }
+        catch (error) {
+            setTestResults(prev => (Object.assign(Object.assign({}, prev), { [url]: `❌ Failed: ${error instanceof Error ? error.message : 'Unknown error'}` })));
+        }
+    };
+    const testAllEndpoints = () => {
+        setTestResults({});
+        testEndpoints.forEach(url => testEndpoint(url));
+        if (customUrl) {
+            testEndpoint(customUrl);
+        }
+    };
+    return (React.createElement("div", { style: {
+            padding: '20px',
+            backgroundColor: '#f0f0f0',
+            borderRadius: '8px',
+            marginBottom: '20px'
+        } },
+        React.createElement("h3", null, "\uD83D\uDD27 API Debug Panel"),
+        React.createElement("div", { style: { marginBottom: '15px' } },
+            React.createElement("strong", null, "Access Token:"),
+            React.createElement("span", { style: {
+                    color: access_token ? 'green' : 'red',
+                    marginLeft: '10px'
+                } }, access_token ? '✅ Set' : '❌ Missing')),
+        React.createElement("div", { style: { marginBottom: '15px' } },
+            React.createElement("input", { type: "text", placeholder: "Custom API URL to test...", value: customUrl, onChange: (e) => setCustomUrl(e.target.value), style: {
+                    width: '100%',
+                    padding: '8px',
+                    marginBottom: '10px'
+                } }),
+            React.createElement("button", { onClick: testAllEndpoints, style: {
+                    padding: '10px 20px',
+                    backgroundColor: '#007bff',
+                    color: 'white',
+                    border: 'none',
+                    borderRadius: '4px',
+                    cursor: 'pointer'
+                } }, "Test All Endpoints")),
+        React.createElement("div", null,
+            React.createElement("h4", null, "Test Results:"),
+            Object.entries(testResults).length === 0 ? (React.createElement("p", null, "Click \"Test All Endpoints\" to start")) : (React.createElement("ul", { style: { listStyle: 'none', padding: 0 } }, Object.entries(testResults).map(([url, result]) => (React.createElement("li", { key: url, style: {
+                    marginBottom: '8px',
+                    padding: '8px',
+                    backgroundColor: 'white',
+                    borderRadius: '4px'
+                } },
+                React.createElement("strong", null, url),
+                React.createElement("br", null),
+                result)))))),
+        Object.entries(testResults).find(([_, result]) => result.includes('✅')) && (React.createElement("div", { style: {
+                marginTop: '20px',
+                padding: '15px',
+                backgroundColor: '#d4edda',
+                borderRadius: '4px',
+                border: '1px solid #c3e6cb'
+            } },
+            React.createElement("h4", null, "\u2705 Working Configuration:"),
+            React.createElement("pre", { style: {
+                    backgroundColor: 'white',
+                    padding: '10px',
+                    borderRadius: '4px',
+                    overflow: 'auto'
+                } }, `<GameProvider
+  access_token="${access_token}"
+  api_url="${(_a = Object.entries(testResults).find(([_, r]) => r.includes('✅'))) === null || _a === void 0 ? void 0 : _a[0]}"
+>
+  {/* Your app */}
+</GameProvider>`)))));
+};
+// Wrapper component for testing with GameProvider
+export const GameDebugger = () => {
+    const [token, setToken] = useState('');
+    const [apiUrl, setApiUrl] = useState('http://localhost:5001/v1/external/games');
+    const [showDebug, setShowDebug] = useState(true);
+    if (!token) {
+        return (React.createElement("div", { style: { padding: '20px' } },
+            React.createElement("h3", null, "Enter Access Token to Debug"),
+            React.createElement("input", { type: "text", placeholder: "Enter your access token...", value: token, onChange: (e) => setToken(e.target.value), style: { width: '300px', padding: '8px', marginRight: '10px' } }),
+            React.createElement("button", { onClick: () => setToken('test-token') }, "Use Test Token")));
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement("button", { onClick: () => setShowDebug(!showDebug), style: {
+                padding: '8px 16px',
+                marginBottom: '10px',
+                backgroundColor: '#6c757d',
+                color: 'white',
+                border: 'none',
+                borderRadius: '4px',
+                cursor: 'pointer'
+            } },
+            showDebug ? 'Hide' : 'Show',
+            " Debug Panel"),
+        showDebug && React.createElement(GameDebugPanel, { access_token: token }),
+        React.createElement(GameProvider, { access_token: token, api_url: apiUrl },
+            React.createElement(TestGameList, null))));
+};
+// Test component that uses the useGames hook
+const TestGameList = () => {
+    const { games, fetchGames, loading, error } = useGames();
+    const [hasFetched, setHasFetched] = useState(false);
+    const handleFetch = async () => {
+        setHasFetched(true);
+        try {
+            await fetchGames();
+        }
+        catch (err) {
+            console.error('Fetch error:', err);
+        }
+    };
+    return (React.createElement("div", { style: { padding: '20px', backgroundColor: 'white', borderRadius: '8px' } },
+        React.createElement("h3", null, "Game List Test"),
+        React.createElement("button", { onClick: handleFetch, disabled: loading, style: {
+                padding: '10px 20px',
+                backgroundColor: loading ? '#ccc' : '#28a745',
+                color: 'white',
+                border: 'none',
+                borderRadius: '4px',
+                cursor: loading ? 'not-allowed' : 'pointer'
+            } }, loading ? 'Loading...' : 'Fetch Games'),
+        error && (React.createElement("div", { style: {
+                marginTop: '15px',
+                padding: '10px',
+                backgroundColor: '#f8d7da',
+                borderRadius: '4px',
+                color: '#721c24'
+            } },
+            "Error: ",
+            error.message)),
+        hasFetched && !error && !loading && (React.createElement("div", { style: { marginTop: '15px' } },
+            React.createElement("strong", null,
+                "Games Found: ",
+                games.length),
+            games.length > 0 && (React.createElement("ul", null, games.map(game => (React.createElement("li", { key: game.id },
+                game.game_name,
+                " - ",
+                game.status)))))))));
+};

package/dist/GamePlayer.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+import type { Game } from "./types";
+export interface GamePlayerProps {
+    streamUrl?: string;
+    serverUrl?: string;
+    streamName?: string;
+    gameId?: string;
+    game?: Game;
+    showScoreOverlay?: boolean;
+    showNetworkIndicator?: boolean;
+    width?: string | number;
+    height?: string | number;
+    className?: string;
+    style?: React.CSSProperties;
+    autoPlay?: boolean;
+    muted?: boolean;
+    controls?: boolean;
+    onLoad?: () => void;
+    onError?: (error: Error) => void;
+    onConnectionStateChange?: (state: RTCPeerConnectionState) => void;
+    gameTitle?: string;
+    showGameTitle?: boolean;
+    showRound?: boolean;
+    showWinnerAnimation?: boolean;
+}
+export declare const GamePlayer: React.NamedExoticComponent<GamePlayerProps>;

package/dist/GamePlayer.js

@@ -0,0 +1,54 @@
+import React, { memo, useEffect } from "react";
+import { useWebRTC } from "./hooks/useWebRTC";
+import { useGameStream } from "./hooks/useGameStream";
+import { NetworkIndicator, ErrorOverlay, LoadingOverlay, ScoreOverlay, } from "./components/GamePlayerOverlays";
+import { GamePlayerVideo } from "./components/GamePlayerVideo";
+const GamePlayerComponent = ({ streamUrl, serverUrl, streamName, gameId: gameIdProp, game: gameProp, showScoreOverlay = true, showNetworkIndicator = true, width = "100%", height = "600px", className, style, autoPlay = true, muted = true, controls = true, onLoad, onError, onConnectionStateChange, gameTitle, showGameTitle = true, showRound = true, showWinnerAnimation = true, }) => {
+    // Auto-determine gameId from either gameId prop or game.id
+    const gameId = gameIdProp || (gameProp === null || gameProp === void 0 ? void 0 : gameProp.id);
+    // Auto-subscribe to game if gameId is available
+    const { game: gameFromStream, updateGame } = useGameStream({
+        gameId,
+        autoSubscribe: true,
+    });
+    // Initialize context with prop game if available (ensures rounds data is in context)
+    useEffect(() => {
+        var _a;
+        if (gameProp && gameId) {
+            console.log('[GamePlayer] Initializing context with game prop:', gameProp);
+            console.log('[GamePlayer] Game has rounds:', ((_a = gameProp.rounds) === null || _a === void 0 ? void 0 : _a.length) || 0);
+            updateGame(gameProp);
+        }
+    }, [gameProp, gameId, updateGame]);
+    // Use game from stream if available, otherwise use prop
+    const game = gameFromStream || gameProp;
+    const { videoRef, isLoading, hasError, errorMessage, networkQuality, latency, bitrate, retry, } = useWebRTC({
+        streamUrl: streamUrl || (game === null || game === void 0 ? void 0 : game.display_stream_url),
+        serverUrl,
+        streamName,
+        autoPlay,
+        muted,
+        onLoad,
+        onError,
+        onConnectionStateChange,
+    });
+    return (React.createElement("div", { className: className, style: Object.assign({ position: "relative", width,
+            height, backgroundColor: "#000" }, style) },
+        React.createElement(GamePlayerVideo, { videoRef: videoRef, controls: controls }),
+        showNetworkIndicator && !hasError && !isLoading && (React.createElement(NetworkIndicator, { networkQuality: networkQuality, latency: latency, bitrate: bitrate })),
+        hasError && React.createElement(ErrorOverlay, { errorMessage: errorMessage, onRetry: retry }),
+        isLoading && !hasError && React.createElement(LoadingOverlay, null),
+        showScoreOverlay && game && !hasError && !isLoading && (React.createElement(ScoreOverlay, { game: game, gameTitle: gameTitle, showGameTitle: showGameTitle, showRound: showRound, showWinnerAnimation: showWinnerAnimation }))));
+};
+export const GamePlayer = memo(GamePlayerComponent, (prevProps, nextProps) => {
+    var _a, _b;
+    const streamUrlChanged = prevProps.streamUrl !== nextProps.streamUrl;
+    const serverUrlChanged = prevProps.serverUrl !== nextProps.serverUrl;
+    const streamNameChanged = prevProps.streamName !== nextProps.streamName;
+    const gameIdChanged = ((_a = prevProps.game) === null || _a === void 0 ? void 0 : _a.id) !== ((_b = nextProps.game) === null || _b === void 0 ? void 0 : _b.id);
+    const shouldSkipRender = !streamUrlChanged &&
+        !serverUrlChanged &&
+        !streamNameChanged &&
+        !gameIdChanged;
+    return shouldSkipRender;
+});

package/dist/SimplePlayer.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface SimplePlayerProps {
+    url: string;
+    width?: string | number;
+    height?: string | number;
+    className?: string;
+    style?: React.CSSProperties;
+    onLoad?: () => void;
+    onError?: (error: Error) => void;
+}
+export declare const SimplePlayer: React.FC<SimplePlayerProps>;

package/dist/SimplePlayer.js

@@ -0,0 +1,41 @@
+import React, { useEffect, useRef, useState } from 'react';
+export const SimplePlayer = ({ url, width = '100%', height = '600px', className, style, onLoad, onError }) => {
+    const iframeRef = useRef(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [hasError, setHasError] = useState(false);
+    useEffect(() => {
+        setIsLoading(true);
+        setHasError(false);
+    }, [url]);
+    const handleLoad = () => {
+        setIsLoading(false);
+        onLoad === null || onLoad === void 0 ? void 0 : onLoad();
+    };
+    const handleError = () => {
+        setIsLoading(false);
+        setHasError(true);
+        onError === null || onError === void 0 ? void 0 : onError(new Error('Failed to load game'));
+    };
+    return (React.createElement("div", { className: className, style: Object.assign({ position: 'relative', width,
+            height }, style) },
+        isLoading && (React.createElement("div", { style: {
+                position: 'absolute',
+                top: '50%',
+                left: '50%',
+                transform: 'translate(-50%, -50%)',
+                textAlign: 'center',
+                color: '#666'
+            } }, "Loading game...")),
+        hasError && (React.createElement("div", { style: {
+                position: 'absolute',
+                top: '50%',
+                left: '50%',
+                transform: 'translate(-50%, -50%)',
+                textAlign: 'center',
+                color: '#d32f2f'
+            } }, "Failed to load game")),
+        React.createElement("iframe", { ref: iframeRef, src: url, width: width, height: height, style: {
+                border: 'none',
+                display: hasError ? 'none' : 'block'
+            }, allowFullScreen: true, onLoad: handleLoad, onError: handleError, title: "Game Player" })));
+};

package/dist/components/GamePlayerOverlays.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+import type { Game } from "../types";
+interface NetworkIndicatorProps {
+    networkQuality: "good" | "fair" | "poor" | "bad";
+    latency: number;
+    bitrate: number;
+}
+export declare const NetworkIndicator: React.FC<NetworkIndicatorProps>;
+interface ErrorOverlayProps {
+    errorMessage: string;
+    onRetry: () => void;
+}
+export declare const ErrorOverlay: React.FC<ErrorOverlayProps>;
+export declare const LoadingOverlay: React.FC;
+interface RoundWinnerOverlayProps {
+    round: any;
+    game: Game;
+    onComplete: () => void;
+}
+export declare const RoundWinnerOverlay: React.FC<RoundWinnerOverlayProps>;
+interface ScoreOverlayProps {
+    game: Game;
+    gameTitle?: string;
+    showGameTitle?: boolean;
+    showRound?: boolean;
+    showWinnerAnimation?: boolean;
+}
+export declare const ScoreOverlay: React.FC<ScoreOverlayProps>;
+export {};