up

2026-01-24 13:35:11 +07:00
parent 6c3e93636e
commit 65fd0158a3
145 changed files with 10262 additions and 0 deletions
--- a/G102-sequence/sdk/package/dist/kit/react/GameTestPlayer.js
+++ b/G102-sequence/sdk/package/dist/kit/react/GameTestPlayer.js
@@ -0,0 +1,116 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GameTestPlayer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const useGameIframeSDK_1 = require("../../useGameIframeSDK");
+/**
+ * GameTestPlayer - Component test đơn giản
+ *
+ * Chỉ load game data vào iframe, KHÔNG gọi API
+ * Dùng để test game iframe locally
+ *
+ * @example
+ * ```tsx
+ * <GameTestPlayer
+ *   gameUrl="http://localhost:3000/game"
+ *   gameData={[
+ *     { id: 1, question: "What is 2+2?", options: ["3","4","5"], answer: "4" },
+ *     { id: 2, question: "Capital of France?", options: ["London","Paris","Berlin"], answer: "Paris" }
+ *   ]}
+ *   debug={true}
+ *   onLog={(msg, type) => console.log(`[${type}] ${msg}`)}
+ *   onAnswer={(data) => console.log('Answer:', data)}
+ *   onComplete={(result) => console.log('Complete:', result)}
+ * />
+ * ```
+ */
+const GameTestPlayer = ({ gameUrl, gameData, userId = 'test_user', gameId = 'test_game', extraData, endTimeIso, className, style, debug = false, onAnswer, onComplete, onLog, onLeaderboardRequest, mockLeaderboard }) => {
+    const iframeRef = (0, react_1.useRef)(null);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(true);
+    // SDK Hook
+    const { isReady, sendGameData, sendLeaderboard } = (0, useGameIframeSDK_1.useGameIframeSDK)({
+        iframeRef,
+        iframeOrigin: '*',
+        debug,
+        onGameReady: () => {
+            if (onLog)
+                onLog('[TEST] Iframe Ready', 'success');
+            setIsLoading(false);
+        },
+        onAnswerReport: (data) => {
+            if (onLog)
+                onLog(`[TEST] Answer: ${JSON.stringify(data)}`, 'info');
+            if (onAnswer)
+                onAnswer(data);
+        },
+        onFinalResult: (result) => {
+            if (onLog)
+                onLog(`[TEST] Complete: ${JSON.stringify(result)}`, 'success');
+            if (onComplete)
+                onComplete(result);
+        },
+        onLeaderboardRequest: (top) => {
+            if (onLog)
+                onLog(`[TEST] Leaderboard Request: top=${top}`, 'info');
+            if (onLeaderboardRequest)
+                onLeaderboardRequest(top);
+            // Auto send mock leaderboard if provided
+            if (mockLeaderboard) {
+                if (onLog)
+                    onLog(`[TEST] Sending mock leaderboard`, 'info');
+                sendLeaderboard(mockLeaderboard);
+            }
+        }
+    });
+    // Auto send game data when ready
+    (0, react_1.useEffect)(() => {
+        if (isReady && gameData) {
+            const payload = {
+                game_id: String(gameId),
+                user_id: userId,
+                data: gameData,
+                completed_question_ids: [],
+                ...(extraData || {})
+            };
+            if (endTimeIso) {
+                payload.end_time_iso = endTimeIso;
+            }
+            if (onLog)
+                onLog(`[TEST] Sending Game Data: ${gameData.length} items`, 'info');
+            sendGameData(payload);
+        }
+    }, [isReady, gameData, gameId, userId, extraData, endTimeIso, sendGameData, onLog]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative', width: '100%', height: '100%', ...style }, children: [isLoading && ((0, jsx_runtime_1.jsx)("div", { style: {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    backgroundColor: 'rgba(255,255,255,0.9)',
+                    zIndex: 10
+                }, children: (0, jsx_runtime_1.jsxs)("div", { style: { textAlign: 'center' }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                                width: '40px',
+                                height: '40px',
+                                border: '4px solid #e9ecef',
+                                borderTop: '4px solid #007bff',
+                                borderRadius: '50%',
+                                animation: 'spin 1s linear infinite',
+                                margin: '0 auto 1rem'
+                            } }), (0, jsx_runtime_1.jsx)("p", { style: { color: '#6c757d' }, children: "Loading game..." }), (0, jsx_runtime_1.jsx)("style", { children: `
+                            @keyframes spin {
+                                0% { transform: rotate(0deg); }
+                                100% { transform: rotate(360deg); }
+                            }
+                        ` })] }) })), (0, jsx_runtime_1.jsx)("iframe", { ref: iframeRef, src: gameUrl, className: className, style: {
+                    width: '100%',
+                    height: '100%',
+                    border: 'none'
+                }, allowFullScreen: true })] }));
+};
+exports.GameTestPlayer = GameTestPlayer;
+exports.default = exports.GameTestPlayer;
+//# sourceMappingURL=GameTestPlayer.js.map