116 lines
4.9 KiB
JavaScript
116 lines
4.9 KiB
JavaScript
"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
|