usegamigameapi 1.0.13 → 1.0.15

package/README.md

@@ -1,6 +1,9 @@
 # useGameAPI
 
-A React hook for managing interactive quiz/game flows through iframe communication using postMessage. This hook handles question flow, answer submission, result tracking, and seamless communication between a parent window and an iframe.
+A React hook for managing interactive quiz/game flows through iframe
+communication using postMessage. This hook handles question flow, answer
+submission, result tracking, and seamless communication between a parent window
+and an iframe.
 
 ## Installation
 
@@ -15,25 +18,26 @@ npm install usegamigameapi
 ## Basic Usage
 
 ```tsx
-import { useGameAPI } from 'usegamigameapi';
+import { useGameAPI } from "usegamigameapi";
 
 function QuizComponent() {
   const {
     quiz,
+    username,
     selectedAnswer,
     handleAnswerSelect,
     updateAnswer,
     handleContinue,
     isCompleted,
-    currentResult
+    currentResult,
   } = useGameAPI({
     onAnswerCorrect: ({ currentQuestionIndex }) => {
-      console.log('Correct answer at question', currentQuestionIndex);
+      console.log("Correct answer at question", currentQuestionIndex);
       // Trigger confetti or other celebrations
     },
     onAnswerIncorrect: () => {
-      console.log('Incorrect answer');
-    }
+      console.log("Incorrect answer");
+    },
   });
 
   // Render your quiz UI using the returned state and methods
@@ -46,10 +50,10 @@ function QuizComponent() {
 
 The `useGameAPI` hook accepts an object with the following optional callbacks:
 
-| Parameter | Type | Description |
-|-----------|------|-------------|
-| `onAnswerCorrect` | `(params: { currentQuestionIndex: number }) => void` | Callback fired when the user submits a correct answer |
-| `onAnswerIncorrect` | `() => void` | Callback fired when the user submits an incorrect answer |
+| Parameter           | Type                                                                                                       | Description                                              |
+| ------------------- | ---------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- |
+| `onAnswerCorrect`   | `(params: { currentQuestionIndex: number; correctAnswerId?: number; incorrectAnswerId?: number }) => void` | Callback fired when the user submits a correct answer    |
+| `onAnswerIncorrect` | `(params: { currentQuestionIndex: number; correctAnswerId?: number; incorrectAnswerId?: number }) => void` | Callback fired when the user submits an incorrect answer |
 
 ### Return Values
 
@@ -57,42 +61,44 @@ The hook returns an object with the following properties:
 
 #### State Data
 
-| Property | Type | Description |
-|----------|------|-------------|
-| `quiz` | `any` | The current question data received from the parent window (contains text, audio URL, answers array, etc.) |
-| `currentResult` | `any` | The result object after submitting an answer (contains `isCorrect`, `isLastQuestion`, and explanation) |
-| `answers` | `(boolean \| null)[]` | Array of answer history where each index corresponds to a question (true = correct, false = incorrect, null = unanswered) |
-| `correctCount` | `number` | Total count of correctly answered questions |
-| `currentQuestionIndex` | `number` | Zero-based index of the current question |
+| Property               | Type                  | Description                                                                                                                                    |
+| ---------------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
+| `quiz`                 | `any`                 | The current question data received from the parent window (contains text, audio URL, answers array, etc.)                                      |
+| `currentResult`        | `any`                 | The result object after submitting an answer (contains `isCorrect`, `isLastQuestion`, `correctAnswerId`, `incorrectAnswerId`, and explanation) |
+| `answers`              | `(boolean \| null)[]` | Array of answer history where each index corresponds to a question (true = correct, false = incorrect, null = unanswered)                      |
+| `correctCount`         | `number`              | Total count of correctly answered questions                                                                                                    |
+| `currentQuestionIndex` | `number`              | Zero-based index of the current question                                                                                                       |
+| `username`             | `string`              | The username received from the parent window during initialization                                                                             |
 
 #### State Status
 
-| Property | Type | Description |
-|----------|------|-------------|
-| `selectedAnswer` | `{ id: number; content: string } \| null` | The currently selected answer object |
-| `isSubmitting` | `boolean` | Indicates whether an answer submission is in progress |
-| `hasSubmitted` | `boolean` | Indicates whether the current question has been submitted and is waiting for the Continue action |
-| `isCompleted` | `boolean` | Indicates whether all questions have been completed |
+| Property         | Type                                      | Description                                                                                      |
+| ---------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------------ |
+| `selectedAnswer` | `{ id: number; content: string } \| null` | The currently selected answer object                                                             |
+| `isSubmitting`   | `boolean`                                 | Indicates whether an answer submission is in progress                                            |
+| `hasSubmitted`   | `boolean`                                 | Indicates whether the current question has been submitted and is waiting for the Continue action |
+| `isCompleted`    | `boolean`                                 | Indicates whether all questions have been completed                                              |
 
 #### Methods
 
-| Method | Type | Description |
-|--------|------|-------------|
-| `handleAnswerSelect` | `(answer: { id: number; content: string }) => void` | Selects an answer for the current question. Only works if not submitting and not already submitted |
-| `updateAnswer` | `() => Promise<void>` | Submits the selected answer to the parent window. Returns a promise that resolves immediately |
-| `handleContinue` | `() => void` | Moves to the next question or marks the quiz as completed if it's the last question. Only works after an answer has been submitted |
-| `finish` | `() => void` | Sends a finish signal to the parent window (typically used to resize iframe) |
+| Method               | Type                                                | Description                                                                                                                        |
+| -------------------- | --------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
+| `handleAnswerSelect` | `(answer: { id: number; content: string }) => void` | Selects an answer for the current question. Only works if not submitting and not already submitted                                 |
+| `updateAnswer`       | `() => Promise<void>`                               | Submits the selected answer to the parent window. Returns a promise that resolves immediately                                      |
+| `handleContinue`     | `() => void`                                        | Moves to the next question or marks the quiz as completed if it's the last question. Only works after an answer has been submitted |
+| `finish`             | `() => void`                                        | Sends a finish signal to the parent window (typically used to resize iframe)                                                       |
 
 ## Usage Examples
 
 ### Complete Quiz Flow Example
 
 ```tsx
-import { useGameAPI } from 'usegamigameapi';
+import { useGameAPI } from "usegamigameapi";
 
 function GameQuiz() {
   const {
     quiz,
+    username,
     selectedAnswer,
     currentResult,
     answers,
@@ -104,16 +110,22 @@ function GameQuiz() {
     handleAnswerSelect,
     updateAnswer,
     handleContinue,
-    finish
+    finish,
   } = useGameAPI({
-    onAnswerCorrect: ({ currentQuestionIndex }) => {
+    onAnswerCorrect: ({ currentQuestionIndex, correctAnswerId }) => {
       // Show success animation or confetti
-      console.log(`Question ${currentQuestionIndex + 1} answered correctly!`);
+      console.log(`Question ${currentQuestionIndex + 1} answered correctly!`, {
+        correctAnswerId,
+      });
     },
-    onAnswerIncorrect: () => {
+    onAnswerIncorrect: ({
+      currentQuestionIndex,
+      correctAnswerId,
+      incorrectAnswerId,
+    }) => {
       // Show error feedback
-      console.log('Incorrect answer, try again next time!');
-    }
+      console.log("Incorrect answer", { correctAnswerId, incorrectAnswerId });
+    },
   });
 
   // Show loading state while waiting for first question
@@ -126,7 +138,9 @@ function GameQuiz() {
     return (
       <div>
         <h2>Quiz Completed!</h2>
-        <p>You got {correctCount} out of {answers.length} questions correct.</p>
+        <p>
+          You got {correctCount} out of {answers.length} questions correct.
+        </p>
         <button onClick={finish}>Finish</button>
       </div>
     );
@@ -137,14 +151,15 @@ function GameQuiz() {
       {/* Progress bar */}
       <div>
         Question {currentQuestionIndex + 1} of {answers.length + 1}
-        <div style={{ display: 'flex', gap: '4px' }}>
+        <div style={{ display: "flex", gap: "4px" }}>
           {answers.map((answer, idx) => (
             <div
               key={idx}
               style={{
-                width: '20px',
-                height: '4px',
-                backgroundColor: answer === true ? 'green' : answer === false ? 'red' : 'gray'
+                width: "20px",
+                height: "4px",
+                backgroundColor:
+                  answer === true ? "green" : answer === false ? "red" : "gray",
               }}
             />
           ))}
@@ -163,10 +178,10 @@ function GameQuiz() {
             onClick={() => handleAnswerSelect(answer)}
             disabled={isSubmitting || hasSubmitted}
             style={{
-              backgroundColor: selectedAnswer?.id === answer.id ? '#007bff' : '#f0f0f0',
-              opacity: hasSubmitted ? 0.6 : 1
-            }}
-          >
+              backgroundColor:
+                selectedAnswer?.id === answer.id ? "#007bff" : "#f0f0f0",
+              opacity: hasSubmitted ? 0.6 : 1,
+            }}>
             {answer.content}
           </button>
         ))}
@@ -176,8 +191,7 @@ function GameQuiz() {
       {!hasSubmitted && (
         <button
           onClick={updateAnswer}
-          disabled={!selectedAnswer || isSubmitting}
-        >
+          disabled={!selectedAnswer || isSubmitting}>
           Submit Answer
         </button>
       )}
@@ -185,12 +199,10 @@ function GameQuiz() {
       {/* Result display and Continue button */}
       {hasSubmitted && currentResult && (
         <div>
-          <p>
-            {currentResult.isCorrect ? '✓ Correct!' : '✗ Incorrect'}
-          </p>
+          <p>{currentResult.isCorrect ? "✓ Correct!" : "✗ Incorrect"}</p>
           {currentResult.explanation && <p>{currentResult.explanation}</p>}
           <button onClick={handleContinue}>
-            {currentResult.isLastQuestion ? 'Finish Quiz' : 'Next Question'}
+            {currentResult.isLastQuestion ? "Finish Quiz" : "Next Question"}
           </button>
         </div>
       )}
@@ -205,10 +217,17 @@ function GameQuiz() {
 ### Minimal Example
 
 ```tsx
-import { useGameAPI } from 'usegamigameapi';
+import { useGameAPI } from "usegamigameapi";
 
 function SimpleQuiz() {
-  const { quiz, handleAnswerSelect, updateAnswer, handleContinue, selectedAnswer, hasSubmitted } = useGameAPI();
+  const {
+    quiz,
+    handleAnswerSelect,
+    updateAnswer,
+    handleContinue,
+    selectedAnswer,
+    hasSubmitted,
+  } = useGameAPI();
 
   return (
     <div>
@@ -217,8 +236,7 @@ function SimpleQuiz() {
         <button
           key={answer.id}
           onClick={() => handleAnswerSelect(answer)}
-          disabled={hasSubmitted}
-        >
+          disabled={hasSubmitted}>
           {answer.content}
         </button>
       ))}
@@ -227,9 +245,7 @@ function SimpleQuiz() {
           Submit
         </button>
       )}
-      {hasSubmitted && (
-        <button onClick={handleContinue}>Continue</button>
-      )}
+      {hasSubmitted && <button onClick={handleContinue}>Continue</button>}
     </div>
   );
 }
@@ -237,21 +253,34 @@ function SimpleQuiz() {
 
 ## Architecture
 
-This hook uses a **bridge pattern** to facilitate communication between a parent window (Main Web) and a child iframe (Sub Web) through `window.postMessage`. The communication flow works as follows:
+This hook uses a **bridge pattern** to facilitate communication between a parent
+window (Main Web) and a child iframe (Sub Web) through `window.postMessage`. The
+communication flow works as follows:
 
 ### Communication Flow
 
-1. **Initialization**: When the hook mounts, it sends `SHOW_LO5` to request the first question
-2. **Question Received**: Parent responds with `RETURN_LO5` containing question data
-3. **Answer Submission**: User selects an answer and calls `updateAnswer()`, which sends `UPDATE_ANSWER` with the answer ID
-4. **Result Received**: Parent responds with `RETURN_UPDATE_ANSWER` containing `isCorrect`, `isLastQuestion`, and result data
-5. **Continue**: User calls `handleContinue()` which either requests the next question (`SHOW_LO5`) or marks the quiz as completed
-6. **Finish**: When complete, `finish()` sends `FINISH` to signal completion (typically for iframe resizing)
+1. **Initialization**: When the hook mounts, it listens for `INIT` message from
+   the parent window containing game information (including `username`)
+2. **Start Game**: After initialization, the hook sends `SHOW_LO5` to request
+   the first question
+3. **Question Received**: Parent responds with `RETURN_LO5` containing question
+   data
+4. **Answer Submission**: User selects an answer and calls `updateAnswer()`,
+   which sends `UPDATE_ANSWER` with the answer ID
+5. **Result Received**: Parent responds with `RETURN_UPDATE_ANSWER` containing
+   `isCorrect`, `isLastQuestion`, `correctAnswerId`, `incorrectAnswerId`, and
+   result data
+6. **Continue**: User calls `handleContinue()` which either requests the next
+   question (`SHOW_LO5`) or marks the quiz as completed
+7. **Finish**: When complete, `finish()` sends `FINISH` to signal completion
+   (typically for iframe resizing)
 
 ### Action Types
 
 The bridge uses the following action constants (defined internally):
 
+- `INIT`: Main → Sub - Initialize game with user information (includes
+  `username`)
 - `SHOW_LO5`: Sub → Main - Request a question
 - `RETURN_LO5`: Main → Sub - Send question data
 - `UPDATE_ANSWER`: Sub → Main - Submit selected answer
@@ -260,11 +289,15 @@ The bridge uses the following action constants (defined internally):
 
 ## Notes
 
-- The hook automatically requests the first question when mounted
+- The hook automatically listens for `INIT` message from the parent window when
+  mounted to receive game initialization data (including username)
+- The hook automatically requests the first question after initialization
 - Answer history is tracked in the `answers` array, indexed by question number
-- The hook uses both `useState` and `useRef` to ensure correct closure behavior across renders
+- The hook uses both `useState` and `useRef` to ensure correct closure behavior
+  across renders
 - All communication is asynchronous through postMessage events
-- Make sure your parent window is set up to handle the corresponding postMessage events
+- Make sure your parent window is set up to send `INIT` message with game data
+  and handle the corresponding postMessage events
 
 ## License
 

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "usegamigameapi",
-  "version": "1.0.13",
+  "version": "1.0.15",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "scripts": {
-    "build": "tsup", 
+    "build": "tsup",
     "publish": "npm run build && npm publish --access public"
   },
   "peerDependencies": {
@@ -19,4 +21,4 @@
     "tsup": "^8.5.1",
     "typescript": "^5.9.3"
   }
-}
+}

package/dist/index.d.mts

@@ -1,23 +0,0 @@
-declare function useGameAPI({ onAnswerCorrect, onAnswerIncorrect }: any): {
-    quiz: any;
-    currentResult: any;
-    answers: (boolean | null)[];
-    correctCount: number;
-    currentQuestionIndex: number;
-    selectedAnswer: {
-        id: number;
-        content: string;
-    } | null;
-    isSubmitting: boolean;
-    hasSubmitted: boolean;
-    isCompleted: boolean;
-    handleAnswerSelect: (answer: {
-        id: number;
-        content: string;
-    }) => void;
-    updateAnswer: () => Promise<void>;
-    handleContinue: () => void;
-    finish: () => void;
-};
-
-export { useGameAPI };

package/dist/index.d.ts

@@ -1,23 +0,0 @@
-declare function useGameAPI({ onAnswerCorrect, onAnswerIncorrect }: any): {
-    quiz: any;
-    currentResult: any;
-    answers: (boolean | null)[];
-    correctCount: number;
-    currentQuestionIndex: number;
-    selectedAnswer: {
-        id: number;
-        content: string;
-    } | null;
-    isSubmitting: boolean;
-    hasSubmitted: boolean;
-    isCompleted: boolean;
-    handleAnswerSelect: (answer: {
-        id: number;
-        content: string;
-    }) => void;
-    updateAnswer: () => Promise<void>;
-    handleContinue: () => void;
-    finish: () => void;
-};
-
-export { useGameAPI };

package/dist/index.js

@@ -1,179 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.ts
-var index_exports = {};
-__export(index_exports, {
-  useGameAPI: () => useGameAPI
-});
-module.exports = __toCommonJS(index_exports);
-
-// src/useGameAPI.ts
-var import_react = require("react");
-
-// src/bridge.ts
-var ACTIONS = {
-  SHOW_LO5: "SHOW_LO5",
-  // Sub -> Main: Web con đã sẵn sàng, yêu cầu web cha gửi câu hỏi
-  RETURN_LO5: "RETURN_LO5",
-  // Main -> Sub: Web cha gửi nội dung câu hỏi
-  UPDATE_ANSWER: "UPDATE_ANSWER",
-  // Sub -> Main: Gửi đáp án user chọn cho web cha
-  RETURN_UPDATE_ANSWER: "RETURN_UPDATE_ANSWER",
-  // Main -> Sub: Web cha gửi lại kết quả đúng/sai cho web con
-  FINISH: "FINISH"
-  // Sub -> Main: Yêu cầu resize iframe
-};
-var QuestionBridge = class {
-  constructor() {
-    this.handlers = {};
-    window.addEventListener("message", this.handleMessage.bind(this));
-  }
-  // Hàm nhận message
-  handleMessage(event) {
-    const { type, payload } = event.data;
-    if (this.handlers[type]) {
-      this.handlers[type](payload);
-    }
-  }
-  // Đăng ký hàm xử lý cho từng loại sự kiện (để UI gọi)
-  // stw -> lovable
-  on(type, callback) {
-    this.handlers[type] = callback;
-  }
-  // lovable -> stw
-  // Gửi message lên Main Web
-  send(type, payload = {}) {
-    if (window.parent) {
-      window.parent.postMessage({ type, payload }, "*");
-    }
-  }
-};
-var bridge = new QuestionBridge();
-
-// src/useGameAPI.ts
-console.log("useGameAPI-V1.0.13");
-function useGameAPI({ onAnswerCorrect, onAnswerIncorrect }) {
-  const [currentQuestionIndex, setCurrentQuestionIndex] = (0, import_react.useState)(0);
-  const currentQuestionIndexRef = (0, import_react.useRef)(0);
-  const [selectedAnswer, setSelectedAnswer] = (0, import_react.useState)(null);
-  const [answers, setAnswers] = (0, import_react.useState)([]);
-  const [quiz, setQuiz] = (0, import_react.useState)(null);
-  const [currentResult, setCurrentResult] = (0, import_react.useState)(null);
-  const [correctCount, setCorrectCount] = (0, import_react.useState)(0);
-  const [isSubmitting, setIsSubmitting] = (0, import_react.useState)(false);
-  const [hasSubmitted, setHasSubmitted] = (0, import_react.useState)(false);
-  const [isCompleted, setIsCompleted] = (0, import_react.useState)(false);
-  const isLastQuestionRef = (0, import_react.useRef)(false);
-  const finish = (0, import_react.useCallback)(() => {
-    bridge.send(ACTIONS.FINISH);
-  }, []);
-  const updateAnswer = (0, import_react.useCallback)(async () => {
-    if (!selectedAnswer || isSubmitting) {
-      return;
-    }
-    bridge.send(ACTIONS.UPDATE_ANSWER, selectedAnswer.id);
-    setIsSubmitting(true);
-    setHasSubmitted(true);
-    return Promise.resolve();
-  }, [selectedAnswer, isSubmitting]);
-  const handleContinue = (0, import_react.useCallback)(() => {
-    if (!hasSubmitted) return;
-    if (isLastQuestionRef.current) {
-      setIsCompleted(true);
-    } else {
-      bridge.send(ACTIONS.SHOW_LO5);
-      const nextIndex = currentQuestionIndexRef.current + 1;
-      currentQuestionIndexRef.current = nextIndex;
-      setCurrentQuestionIndex(nextIndex);
-      setSelectedAnswer(null);
-      setIsSubmitting(false);
-      setHasSubmitted(false);
-      setCurrentResult(null);
-    }
-  }, [hasSubmitted]);
-  const handleAnswerSelect = (0, import_react.useCallback)(
-    (answer) => {
-      if (!isSubmitting && !hasSubmitted) {
-        setSelectedAnswer(answer);
-      }
-    },
-    [isSubmitting, hasSubmitted]
-  );
-  (0, import_react.useEffect)(() => {
-    bridge.send(ACTIONS.SHOW_LO5);
-    bridge.on(ACTIONS.RETURN_LO5, (_data) => {
-      setQuiz(_data);
-    });
-    bridge.on(ACTIONS.RETURN_UPDATE_ANSWER, (_data) => {
-      const isCorrect = (_data == null ? void 0 : _data.isCorrect) === true;
-      const isLast = (_data == null ? void 0 : _data.isLastQuestion) === true;
-      isLastQuestionRef.current = isLast;
-      setAnswers((prevAnswers) => {
-        const next = [...prevAnswers];
-        next[currentQuestionIndexRef.current] = isCorrect;
-        return next;
-      });
-      if (isCorrect) {
-        setCorrectCount((prev) => prev + 1);
-        console.log({ currentQuestionIndex: currentQuestionIndexRef.current });
-        onAnswerCorrect == null ? void 0 : onAnswerCorrect({ currentQuestionIndex: currentQuestionIndexRef.current });
-      } else {
-        onAnswerIncorrect == null ? void 0 : onAnswerIncorrect();
-      }
-      setIsSubmitting(false);
-      setCurrentResult(_data);
-    });
-  }, []);
-  return {
-    // State Data
-    quiz,
-    // Dữ liệu câu hỏi hiện tại (để render UI)
-    currentResult,
-    // Kết quả vừa trả lời (để hiện giải thích đúng/sai)
-    answers,
-    // Mảng lịch sử kết quả (để vẽ progress bar)
-    correctCount,
-    // Số câu đúng
-    currentQuestionIndex,
-    // Index hiện tại (để UI biết đang ở câu mấy)
-    // State Status
-    selectedAnswer,
-    // Đáp án đang được chọn
-    isSubmitting,
-    // Trạng thái đang submmit
-    hasSubmitted,
-    isCompleted,
-    // Trạng thái khi hoàn thành câu hỏi cuối
-    // Methods
-    handleAnswerSelect,
-    // Hàm gán đáp án user đã chọn
-    updateAnswer,
-    // Hàm gửi đáp án user chọn lên web cha
-    handleContinue,
-    // Hàm chuyển qua câu hỏi tiếp theo hoặc kết thúc
-    finish
-    // Hàm kết thúc
-  };
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  useGameAPI
-});
-//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/index.ts","../src/useGameAPI.ts","../src/bridge.ts"],"sourcesContent":["export * from \"./useGameAPI\";","import { useState, useCallback, useRef, useEffect } from \"react\";\n// Lưu ý: Đảm bảo đường dẫn import bridge đúng với cấu trúc dự án của bạn\nimport { bridge, ACTIONS } from \"./bridge\";\n\nconsole.log('useGameAPI-V1.0.13');\n\nexport function useGameAPI({ onAnswerCorrect, onAnswerIncorrect }: any) {\n  // ================= STATE =================\n  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0); // State để UI re-render\n  const currentQuestionIndexRef = useRef(0); // Ref để logic chạy đúng trong closure\n\n  const [selectedAnswer, setSelectedAnswer] = useState<{ id: number; content: string } | null>(null);\n  const [answers, setAnswers] = useState<(boolean | null)[]>([]); // Lưu lịch sử đúng/sai\n\n  // Game Status\n  const [quiz, setQuiz] = useState<any>(null); // Data câu hỏi hiện tại từ Main Web\n  const [currentResult, setCurrentResult] = useState<any>(null); // Kết quả trả về sau khi submit\n  const [correctCount, setCorrectCount] = useState(0);\n\n  // Flow Flags\n  const [isSubmitting, setIsSubmitting] = useState(false); // Đang chờ kết quả\n  const [hasSubmitted, setHasSubmitted] = useState(false); // Đã có kết quả, chờ bấm Continue\n  const [isCompleted, setIsCompleted] = useState(false); // Game hoàn tất\n\n  // Biến cờ tạm lưu trạng thái câu cuối cùng từ server trả về\n  const isLastQuestionRef = useRef(false);\n\n  // ================= ACTIONS =================\n\n  const finish = useCallback(() => {\n    bridge.send(ACTIONS.FINISH);\n  }, []);\n\n  // 1. Gửi đáp án lên Main Web\n  const updateAnswer = useCallback(async () => {\n    if (!selectedAnswer || isSubmitting) {\n      return;\n    }\n\n    bridge.send(ACTIONS.UPDATE_ANSWER, selectedAnswer.id);\n    setIsSubmitting(true);\n    setHasSubmitted(true);\n\n    // Trả về promise giả để UI có thể await nếu cần (ví dụ trigger confetti ngay lập tức)\n    return Promise.resolve();\n  }, [selectedAnswer, isSubmitting]);\n\n  // 2. Chuyển câu hỏi hoặc Kết thúc\n  const handleContinue = useCallback(() => {\n    if (!hasSubmitted) return;\n\n    // Check cờ isLastQuestion được set từ lúc nhận kết quả\n    if (isLastQuestionRef.current) {\n      setIsCompleted(true);\n    } else {\n      // Yêu cầu câu hỏi tiếp theo\n      bridge.send(ACTIONS.SHOW_LO5);\n\n      const nextIndex = currentQuestionIndexRef.current + 1;\n      currentQuestionIndexRef.current = nextIndex;\n      setCurrentQuestionIndex(nextIndex); // Sync state for UI\n\n      // Reset state cho câu mới\n      setSelectedAnswer(null);\n      setIsSubmitting(false);\n      setHasSubmitted(false);\n      setCurrentResult(null);\n    }\n  }, [hasSubmitted]);\n\n  // 3. UI Handler: Chọn đáp án\n  const handleAnswerSelect = useCallback(\n    (answer: { id: number; content: string }) => {\n      if (!isSubmitting && !hasSubmitted) {\n        setSelectedAnswer(answer);\n      }\n    },\n    [isSubmitting, hasSubmitted],\n  );\n\n  // ================= LISTENERS =================\n  useEffect(() => {\n    // 1. Start Game: Yêu cầu câu hỏi đầu tiên\n    bridge.send(ACTIONS.SHOW_LO5);\n\n    // 2. Nhận câu hỏi mới\n    bridge.on(ACTIONS.RETURN_LO5, (_data) => {\n      // _data ở đây là nội dung câu hỏi (text, audio url, answers array...)\n      setQuiz(_data);\n    });\n\n    // 3. Nhận kết quả trả lời\n    bridge.on(ACTIONS.RETURN_UPDATE_ANSWER, (_data) => {\n      const isCorrect = _data?.isCorrect === true;\n      const isLast = _data?.isLastQuestion === true;\n\n      // Lưu cờ báo hiệu câu cuối\n      isLastQuestionRef.current = isLast;\n\n      // Cập nhật lịch sử trả lời\n      setAnswers((prevAnswers) => {\n        const next = [...prevAnswers];\n        // Đảm bảo array đủ dài (phòng trường hợp nhảy cóc - dù khó xảy ra)\n        next[currentQuestionIndexRef.current] = isCorrect;\n        return next;\n      });\n\n      // Xử lý đếm đúng\n      if (isCorrect) {\n        setCorrectCount((prev) => prev + 1);\n        console.log({ currentQuestionIndex: currentQuestionIndexRef.current });\n        onAnswerCorrect?.({ currentQuestionIndex: currentQuestionIndexRef.current });\n      } else {\n        onAnswerIncorrect?.();\n      }\n\n      // Update UI Status\n      setIsSubmitting(false);\n      setCurrentResult(_data);\n    });\n  }, []); // Run once on mount\n\n  return {\n    // State Data\n    quiz, // Dữ liệu câu hỏi hiện tại (để render UI)\n    currentResult, // Kết quả vừa trả lời (để hiện giải thích đúng/sai)\n    answers, // Mảng lịch sử kết quả (để vẽ progress bar)\n    correctCount, // Số câu đúng\n    currentQuestionIndex, // Index hiện tại (để UI biết đang ở câu mấy)\n\n    // State Status\n    selectedAnswer, // Đáp án đang được chọn\n    isSubmitting, // Trạng thái đang submmit\n    hasSubmitted,\n    isCompleted, // Trạng thái khi hoàn thành câu hỏi cuối\n\n    // Methods\n    handleAnswerSelect, // Hàm gán đáp án user đã chọn\n    updateAnswer, // Hàm gửi đáp án user chọn lên web cha\n    handleContinue, // Hàm chuyển qua câu hỏi tiếp theo hoặc kết thúc\n    finish, // Hàm kết thúc\n  };\n}\n","// src/bridge.ts\n\n// Định nghĩa các loại action\nexport const ACTIONS = {\n  SHOW_LO5: \"SHOW_LO5\", // Sub -> Main: Web con đã sẵn sàng, yêu cầu web cha gửi câu hỏi\n  RETURN_LO5: \"RETURN_LO5\", // Main -> Sub: Web cha gửi nội dung câu hỏi\n  UPDATE_ANSWER: \"UPDATE_ANSWER\", // Sub -> Main: Gửi đáp án user chọn cho web cha\n  RETURN_UPDATE_ANSWER: \"RETURN_UPDATE_ANSWER\", // Main -> Sub: Web cha gửi lại kết quả đúng/sai cho web con\n  FINISH: \"FINISH\", // Sub -> Main: Yêu cầu resize iframe\n};\n\nclass QuestionBridge {\n  private handlers: Record<string, (payload: any) => void> = {};\n\n  constructor() {\n    // Lắng nghe message từ Main Web\n    window.addEventListener(\"message\", this.handleMessage.bind(this));\n  }\n\n  // Hàm nhận message\n  private handleMessage(event: MessageEvent) {\n    const { type, payload } = event.data;\n    if (this.handlers[type]) {\n      this.handlers[type](payload);\n    }\n  }\n\n  // Đăng ký hàm xử lý cho từng loại sự kiện (để UI gọi)\n  // stw -> lovable\n  on(type: string, callback: (payload: any) => void) {\n    this.handlers[type] = callback;\n  }\n\n  // lovable -> stw\n  // Gửi message lên Main Web\n  send(type: string, payload: any = {}) {\n    if (window.parent) {\n      window.parent.postMessage({ type, payload }, \"*\"); // Thay '*' bằng domain Main Web khi prod\n    }\n  }\n}\n\n// Singleton instance để dùng toàn app\nexport const bridge = new QuestionBridge();\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAyD;;;ACGlD,IAAM,UAAU;AAAA,EACrB,UAAU;AAAA;AAAA,EACV,YAAY;AAAA;AAAA,EACZ,eAAe;AAAA;AAAA,EACf,sBAAsB;AAAA;AAAA,EACtB,QAAQ;AAAA;AACV;AAEA,IAAM,iBAAN,MAAqB;AAAA,EAGnB,cAAc;AAFd,SAAQ,WAAmD,CAAC;AAI1D,WAAO,iBAAiB,WAAW,KAAK,cAAc,KAAK,IAAI,CAAC;AAAA,EAClE;AAAA;AAAA,EAGQ,cAAc,OAAqB;AACzC,UAAM,EAAE,MAAM,QAAQ,IAAI,MAAM;AAChC,QAAI,KAAK,SAAS,IAAI,GAAG;AACvB,WAAK,SAAS,IAAI,EAAE,OAAO;AAAA,IAC7B;AAAA,EACF;AAAA;AAAA;AAAA,EAIA,GAAG,MAAc,UAAkC;AACjD,SAAK,SAAS,IAAI,IAAI;AAAA,EACxB;AAAA;AAAA;AAAA,EAIA,KAAK,MAAc,UAAe,CAAC,GAAG;AACpC,QAAI,OAAO,QAAQ;AACjB,aAAO,OAAO,YAAY,EAAE,MAAM,QAAQ,GAAG,GAAG;AAAA,IAClD;AAAA,EACF;AACF;AAGO,IAAM,SAAS,IAAI,eAAe;;;ADvCzC,QAAQ,IAAI,oBAAoB;AAEzB,SAAS,WAAW,EAAE,iBAAiB,kBAAkB,GAAQ;AAEtE,QAAM,CAAC,sBAAsB,uBAAuB,QAAI,uBAAS,CAAC;AAClE,QAAM,8BAA0B,qBAAO,CAAC;AAExC,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAAiD,IAAI;AACjG,QAAM,CAAC,SAAS,UAAU,QAAI,uBAA6B,CAAC,CAAC;AAG7D,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAc,IAAI;AAC1C,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAc,IAAI;AAC5D,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAS,CAAC;AAGlD,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAS,KAAK;AACtD,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAS,KAAK;AACtD,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,KAAK;AAGpD,QAAM,wBAAoB,qBAAO,KAAK;AAItC,QAAM,aAAS,0BAAY,MAAM;AAC/B,WAAO,KAAK,QAAQ,MAAM;AAAA,EAC5B,GAAG,CAAC,CAAC;AAGL,QAAM,mBAAe,0BAAY,YAAY;AAC3C,QAAI,CAAC,kBAAkB,cAAc;AACnC;AAAA,IACF;AAEA,WAAO,KAAK,QAAQ,eAAe,eAAe,EAAE;AACpD,oBAAgB,IAAI;AACpB,oBAAgB,IAAI;AAGpB,WAAO,QAAQ,QAAQ;AAAA,EACzB,GAAG,CAAC,gBAAgB,YAAY,CAAC;AAGjC,QAAM,qBAAiB,0BAAY,MAAM;AACvC,QAAI,CAAC,aAAc;AAGnB,QAAI,kBAAkB,SAAS;AAC7B,qBAAe,IAAI;AAAA,IACrB,OAAO;AAEL,aAAO,KAAK,QAAQ,QAAQ;AAE5B,YAAM,YAAY,wBAAwB,UAAU;AACpD,8BAAwB,UAAU;AAClC,8BAAwB,SAAS;AAGjC,wBAAkB,IAAI;AACtB,sBAAgB,KAAK;AACrB,sBAAgB,KAAK;AACrB,uBAAiB,IAAI;AAAA,IACvB;AAAA,EACF,GAAG,CAAC,YAAY,CAAC;AAGjB,QAAM,yBAAqB;AAAA,IACzB,CAAC,WAA4C;AAC3C,UAAI,CAAC,gBAAgB,CAAC,cAAc;AAClC,0BAAkB,MAAM;AAAA,MAC1B;AAAA,IACF;AAAA,IACA,CAAC,cAAc,YAAY;AAAA,EAC7B;AAGA,8BAAU,MAAM;AAEd,WAAO,KAAK,QAAQ,QAAQ;AAG5B,WAAO,GAAG,QAAQ,YAAY,CAAC,UAAU;AAEvC,cAAQ,KAAK;AAAA,IACf,CAAC;AAGD,WAAO,GAAG,QAAQ,sBAAsB,CAAC,UAAU;AACjD,YAAM,aAAY,+BAAO,eAAc;AACvC,YAAM,UAAS,+BAAO,oBAAmB;AAGzC,wBAAkB,UAAU;AAG5B,iBAAW,CAAC,gBAAgB;AAC1B,cAAM,OAAO,CAAC,GAAG,WAAW;AAE5B,aAAK,wBAAwB,OAAO,IAAI;AACxC,eAAO;AAAA,MACT,CAAC;AAGD,UAAI,WAAW;AACb,wBAAgB,CAAC,SAAS,OAAO,CAAC;AAClC,gBAAQ,IAAI,EAAE,sBAAsB,wBAAwB,QAAQ,CAAC;AACrE,2DAAkB,EAAE,sBAAsB,wBAAwB,QAAQ;AAAA,MAC5E,OAAO;AACL;AAAA,MACF;AAGA,sBAAgB,KAAK;AACrB,uBAAiB,KAAK;AAAA,IACxB,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA;AAAA,IAEL;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA;AAAA,IAGA;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA,IAGA;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA,EACF;AACF;","names":[]}

package/dist/index.mjs

@@ -1,152 +0,0 @@
-// src/useGameAPI.ts
-import { useState, useCallback, useRef, useEffect } from "react";
-
-// src/bridge.ts
-var ACTIONS = {
-  SHOW_LO5: "SHOW_LO5",
-  // Sub -> Main: Web con đã sẵn sàng, yêu cầu web cha gửi câu hỏi
-  RETURN_LO5: "RETURN_LO5",
-  // Main -> Sub: Web cha gửi nội dung câu hỏi
-  UPDATE_ANSWER: "UPDATE_ANSWER",
-  // Sub -> Main: Gửi đáp án user chọn cho web cha
-  RETURN_UPDATE_ANSWER: "RETURN_UPDATE_ANSWER",
-  // Main -> Sub: Web cha gửi lại kết quả đúng/sai cho web con
-  FINISH: "FINISH"
-  // Sub -> Main: Yêu cầu resize iframe
-};
-var QuestionBridge = class {
-  constructor() {
-    this.handlers = {};
-    window.addEventListener("message", this.handleMessage.bind(this));
-  }
-  // Hàm nhận message
-  handleMessage(event) {
-    const { type, payload } = event.data;
-    if (this.handlers[type]) {
-      this.handlers[type](payload);
-    }
-  }
-  // Đăng ký hàm xử lý cho từng loại sự kiện (để UI gọi)
-  // stw -> lovable
-  on(type, callback) {
-    this.handlers[type] = callback;
-  }
-  // lovable -> stw
-  // Gửi message lên Main Web
-  send(type, payload = {}) {
-    if (window.parent) {
-      window.parent.postMessage({ type, payload }, "*");
-    }
-  }
-};
-var bridge = new QuestionBridge();
-
-// src/useGameAPI.ts
-console.log("useGameAPI-V1.0.13");
-function useGameAPI({ onAnswerCorrect, onAnswerIncorrect }) {
-  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
-  const currentQuestionIndexRef = useRef(0);
-  const [selectedAnswer, setSelectedAnswer] = useState(null);
-  const [answers, setAnswers] = useState([]);
-  const [quiz, setQuiz] = useState(null);
-  const [currentResult, setCurrentResult] = useState(null);
-  const [correctCount, setCorrectCount] = useState(0);
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [hasSubmitted, setHasSubmitted] = useState(false);
-  const [isCompleted, setIsCompleted] = useState(false);
-  const isLastQuestionRef = useRef(false);
-  const finish = useCallback(() => {
-    bridge.send(ACTIONS.FINISH);
-  }, []);
-  const updateAnswer = useCallback(async () => {
-    if (!selectedAnswer || isSubmitting) {
-      return;
-    }
-    bridge.send(ACTIONS.UPDATE_ANSWER, selectedAnswer.id);
-    setIsSubmitting(true);
-    setHasSubmitted(true);
-    return Promise.resolve();
-  }, [selectedAnswer, isSubmitting]);
-  const handleContinue = useCallback(() => {
-    if (!hasSubmitted) return;
-    if (isLastQuestionRef.current) {
-      setIsCompleted(true);
-    } else {
-      bridge.send(ACTIONS.SHOW_LO5);
-      const nextIndex = currentQuestionIndexRef.current + 1;
-      currentQuestionIndexRef.current = nextIndex;
-      setCurrentQuestionIndex(nextIndex);
-      setSelectedAnswer(null);
-      setIsSubmitting(false);
-      setHasSubmitted(false);
-      setCurrentResult(null);
-    }
-  }, [hasSubmitted]);
-  const handleAnswerSelect = useCallback(
-    (answer) => {
-      if (!isSubmitting && !hasSubmitted) {
-        setSelectedAnswer(answer);
-      }
-    },
-    [isSubmitting, hasSubmitted]
-  );
-  useEffect(() => {
-    bridge.send(ACTIONS.SHOW_LO5);
-    bridge.on(ACTIONS.RETURN_LO5, (_data) => {
-      setQuiz(_data);
-    });
-    bridge.on(ACTIONS.RETURN_UPDATE_ANSWER, (_data) => {
-      const isCorrect = (_data == null ? void 0 : _data.isCorrect) === true;
-      const isLast = (_data == null ? void 0 : _data.isLastQuestion) === true;
-      isLastQuestionRef.current = isLast;
-      setAnswers((prevAnswers) => {
-        const next = [...prevAnswers];
-        next[currentQuestionIndexRef.current] = isCorrect;
-        return next;
-      });
-      if (isCorrect) {
-        setCorrectCount((prev) => prev + 1);
-        console.log({ currentQuestionIndex: currentQuestionIndexRef.current });
-        onAnswerCorrect == null ? void 0 : onAnswerCorrect({ currentQuestionIndex: currentQuestionIndexRef.current });
-      } else {
-        onAnswerIncorrect == null ? void 0 : onAnswerIncorrect();
-      }
-      setIsSubmitting(false);
-      setCurrentResult(_data);
-    });
-  }, []);
-  return {
-    // State Data
-    quiz,
-    // Dữ liệu câu hỏi hiện tại (để render UI)
-    currentResult,
-    // Kết quả vừa trả lời (để hiện giải thích đúng/sai)
-    answers,
-    // Mảng lịch sử kết quả (để vẽ progress bar)
-    correctCount,
-    // Số câu đúng
-    currentQuestionIndex,
-    // Index hiện tại (để UI biết đang ở câu mấy)
-    // State Status
-    selectedAnswer,
-    // Đáp án đang được chọn
-    isSubmitting,
-    // Trạng thái đang submmit
-    hasSubmitted,
-    isCompleted,
-    // Trạng thái khi hoàn thành câu hỏi cuối
-    // Methods
-    handleAnswerSelect,
-    // Hàm gán đáp án user đã chọn
-    updateAnswer,
-    // Hàm gửi đáp án user chọn lên web cha
-    handleContinue,
-    // Hàm chuyển qua câu hỏi tiếp theo hoặc kết thúc
-    finish
-    // Hàm kết thúc
-  };
-}
-export {
-  useGameAPI
-};
-//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/useGameAPI.ts","../src/bridge.ts"],"sourcesContent":["import { useState, useCallback, useRef, useEffect } from \"react\";\n// Lưu ý: Đảm bảo đường dẫn import bridge đúng với cấu trúc dự án của bạn\nimport { bridge, ACTIONS } from \"./bridge\";\n\nconsole.log('useGameAPI-V1.0.13');\n\nexport function useGameAPI({ onAnswerCorrect, onAnswerIncorrect }: any) {\n  // ================= STATE =================\n  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0); // State để UI re-render\n  const currentQuestionIndexRef = useRef(0); // Ref để logic chạy đúng trong closure\n\n  const [selectedAnswer, setSelectedAnswer] = useState<{ id: number; content: string } | null>(null);\n  const [answers, setAnswers] = useState<(boolean | null)[]>([]); // Lưu lịch sử đúng/sai\n\n  // Game Status\n  const [quiz, setQuiz] = useState<any>(null); // Data câu hỏi hiện tại từ Main Web\n  const [currentResult, setCurrentResult] = useState<any>(null); // Kết quả trả về sau khi submit\n  const [correctCount, setCorrectCount] = useState(0);\n\n  // Flow Flags\n  const [isSubmitting, setIsSubmitting] = useState(false); // Đang chờ kết quả\n  const [hasSubmitted, setHasSubmitted] = useState(false); // Đã có kết quả, chờ bấm Continue\n  const [isCompleted, setIsCompleted] = useState(false); // Game hoàn tất\n\n  // Biến cờ tạm lưu trạng thái câu cuối cùng từ server trả về\n  const isLastQuestionRef = useRef(false);\n\n  // ================= ACTIONS =================\n\n  const finish = useCallback(() => {\n    bridge.send(ACTIONS.FINISH);\n  }, []);\n\n  // 1. Gửi đáp án lên Main Web\n  const updateAnswer = useCallback(async () => {\n    if (!selectedAnswer || isSubmitting) {\n      return;\n    }\n\n    bridge.send(ACTIONS.UPDATE_ANSWER, selectedAnswer.id);\n    setIsSubmitting(true);\n    setHasSubmitted(true);\n\n    // Trả về promise giả để UI có thể await nếu cần (ví dụ trigger confetti ngay lập tức)\n    return Promise.resolve();\n  }, [selectedAnswer, isSubmitting]);\n\n  // 2. Chuyển câu hỏi hoặc Kết thúc\n  const handleContinue = useCallback(() => {\n    if (!hasSubmitted) return;\n\n    // Check cờ isLastQuestion được set từ lúc nhận kết quả\n    if (isLastQuestionRef.current) {\n      setIsCompleted(true);\n    } else {\n      // Yêu cầu câu hỏi tiếp theo\n      bridge.send(ACTIONS.SHOW_LO5);\n\n      const nextIndex = currentQuestionIndexRef.current + 1;\n      currentQuestionIndexRef.current = nextIndex;\n      setCurrentQuestionIndex(nextIndex); // Sync state for UI\n\n      // Reset state cho câu mới\n      setSelectedAnswer(null);\n      setIsSubmitting(false);\n      setHasSubmitted(false);\n      setCurrentResult(null);\n    }\n  }, [hasSubmitted]);\n\n  // 3. UI Handler: Chọn đáp án\n  const handleAnswerSelect = useCallback(\n    (answer: { id: number; content: string }) => {\n      if (!isSubmitting && !hasSubmitted) {\n        setSelectedAnswer(answer);\n      }\n    },\n    [isSubmitting, hasSubmitted],\n  );\n\n  // ================= LISTENERS =================\n  useEffect(() => {\n    // 1. Start Game: Yêu cầu câu hỏi đầu tiên\n    bridge.send(ACTIONS.SHOW_LO5);\n\n    // 2. Nhận câu hỏi mới\n    bridge.on(ACTIONS.RETURN_LO5, (_data) => {\n      // _data ở đây là nội dung câu hỏi (text, audio url, answers array...)\n      setQuiz(_data);\n    });\n\n    // 3. Nhận kết quả trả lời\n    bridge.on(ACTIONS.RETURN_UPDATE_ANSWER, (_data) => {\n      const isCorrect = _data?.isCorrect === true;\n      const isLast = _data?.isLastQuestion === true;\n\n      // Lưu cờ báo hiệu câu cuối\n      isLastQuestionRef.current = isLast;\n\n      // Cập nhật lịch sử trả lời\n      setAnswers((prevAnswers) => {\n        const next = [...prevAnswers];\n        // Đảm bảo array đủ dài (phòng trường hợp nhảy cóc - dù khó xảy ra)\n        next[currentQuestionIndexRef.current] = isCorrect;\n        return next;\n      });\n\n      // Xử lý đếm đúng\n      if (isCorrect) {\n        setCorrectCount((prev) => prev + 1);\n        console.log({ currentQuestionIndex: currentQuestionIndexRef.current });\n        onAnswerCorrect?.({ currentQuestionIndex: currentQuestionIndexRef.current });\n      } else {\n        onAnswerIncorrect?.();\n      }\n\n      // Update UI Status\n      setIsSubmitting(false);\n      setCurrentResult(_data);\n    });\n  }, []); // Run once on mount\n\n  return {\n    // State Data\n    quiz, // Dữ liệu câu hỏi hiện tại (để render UI)\n    currentResult, // Kết quả vừa trả lời (để hiện giải thích đúng/sai)\n    answers, // Mảng lịch sử kết quả (để vẽ progress bar)\n    correctCount, // Số câu đúng\n    currentQuestionIndex, // Index hiện tại (để UI biết đang ở câu mấy)\n\n    // State Status\n    selectedAnswer, // Đáp án đang được chọn\n    isSubmitting, // Trạng thái đang submmit\n    hasSubmitted,\n    isCompleted, // Trạng thái khi hoàn thành câu hỏi cuối\n\n    // Methods\n    handleAnswerSelect, // Hàm gán đáp án user đã chọn\n    updateAnswer, // Hàm gửi đáp án user chọn lên web cha\n    handleContinue, // Hàm chuyển qua câu hỏi tiếp theo hoặc kết thúc\n    finish, // Hàm kết thúc\n  };\n}\n","// src/bridge.ts\n\n// Định nghĩa các loại action\nexport const ACTIONS = {\n  SHOW_LO5: \"SHOW_LO5\", // Sub -> Main: Web con đã sẵn sàng, yêu cầu web cha gửi câu hỏi\n  RETURN_LO5: \"RETURN_LO5\", // Main -> Sub: Web cha gửi nội dung câu hỏi\n  UPDATE_ANSWER: \"UPDATE_ANSWER\", // Sub -> Main: Gửi đáp án user chọn cho web cha\n  RETURN_UPDATE_ANSWER: \"RETURN_UPDATE_ANSWER\", // Main -> Sub: Web cha gửi lại kết quả đúng/sai cho web con\n  FINISH: \"FINISH\", // Sub -> Main: Yêu cầu resize iframe\n};\n\nclass QuestionBridge {\n  private handlers: Record<string, (payload: any) => void> = {};\n\n  constructor() {\n    // Lắng nghe message từ Main Web\n    window.addEventListener(\"message\", this.handleMessage.bind(this));\n  }\n\n  // Hàm nhận message\n  private handleMessage(event: MessageEvent) {\n    const { type, payload } = event.data;\n    if (this.handlers[type]) {\n      this.handlers[type](payload);\n    }\n  }\n\n  // Đăng ký hàm xử lý cho từng loại sự kiện (để UI gọi)\n  // stw -> lovable\n  on(type: string, callback: (payload: any) => void) {\n    this.handlers[type] = callback;\n  }\n\n  // lovable -> stw\n  // Gửi message lên Main Web\n  send(type: string, payload: any = {}) {\n    if (window.parent) {\n      window.parent.postMessage({ type, payload }, \"*\"); // Thay '*' bằng domain Main Web khi prod\n    }\n  }\n}\n\n// Singleton instance để dùng toàn app\nexport const bridge = new QuestionBridge();\n"],"mappings":"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","names":[]}