Pelajari embed dengan memainkannya, lalu hubungkan event-event tersebut.

/**
 * Games I Know embed listener (parent page)
 * Handles lifecycle events (GAME_STARTED, GAME_COMPLETED) and
 * version 1 gameplay events (move, mode_change, ...).
 */
const TRUSTED_ORIGIN = "https://gamesiknow.com"; // or your self-hosted origin

window.addEventListener("message", (event) => {
  if (TRUSTED_ORIGIN !== "*" && event.origin !== TRUSTED_ORIGIN) return;

  const data = event.data;
  if (!data || data.source !== "gamesiknow") return;

  // --- Lifecycle events (flat top-level event name) ---
  if (data.event === "GAME_STARTED") {
    console.log("Match started", {
      game: data.game,
      mode: data.mode,
      partnerId: data.partnerId,
      campaignId: data.campaignId,
    });
    return;
  }

  if (data.event === "GAME_COMPLETED") {
    const winnerLabel = data.winner?.name ?? data.winnerPlayerName ?? null;
    console.log("Match completed", {
      game: data.game,
      outcome: data.outcome, // player_1 | player_2 | ai_bot | draw
      winner: data.winner,
      winnerName: winnerLabel,
      players: data.players,
    });

    if (winnerLabel) {
      document.getElementById("game-winner")!.textContent = `${winnerLabel} won!`;
    } else if (data.outcome === "draw") {
      document.getElementById("game-winner")!.textContent = "Draw";
    }

    // For rewards: send resultId + signedToken to YOUR backend (never call verify from the browser)
    if (data.resultId && data.signedToken) {
      fetch("/api/reward-winner", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({
          resultId: data.resultId,
          signedToken: data.signedToken,
          userId: currentUserId,
        }),
      });
    }
    return;
  }

  if (data.event === "EMBED_FULLSCREEN_CHANGE") {
    document.body.classList.toggle("embed-fullscreen-active", Boolean(data.payload?.active));
    return;
  }

  // --- Gameplay events (version 1 envelope) ---
  if (data.version === 1 && typeof data.event === "string") {
    switch (data.event) {
      case "ready":
        resizeEmbed(data.payload?.embedHeight);
        break;
      case "mode_change":
        console.log("Mode changed", data.payload?.mode);
        break;
      case "move":
        console.log("Move", data.payload);
        break;
      default:
        console.log("Gameplay event", data.event, data.payload);
    }
  }
});

function resizeEmbed(height) {
  const iframe = document.querySelector('iframe[src*="/embed/"]');
  if (iframe && typeof height === "number") iframe.style.height = `${height}px`;
}