usegamigameapi 1.0.0

package/dist/index.d.mts

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,177 @@
+"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
+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
+});

package/dist/index.mjs

@@ -0,0 +1,150 @@
+// 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
+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
+};

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "usegamigameapi",
+  "version": "1.0.0",
+  "description": "",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": ["dist"],
+  "peerDependencies": {
+    "react": ">=16.8"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "tsup"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "commonjs",
+  "dependencies": {
+    "react": "^19.2.3"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.8",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
+  }
+}