Learn the embed by playing it, then wire the events.

/**
 * GamesIKnow embed listener (parent page)
 * Handles lifecycle events (GAME_STARTED, GAME_COMPLETED) and
 * version 1 gameplay events (move, finish, 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") {
    console.log("Match completed (signed)", {
      game: data.game,
      outcome: data.outcome, // player_1 | player_2 | ai_bot | draw
      winner: data.winner,
      players: data.players,
      resultId: data.resultId,
      signedToken: data.signedToken,
    });

    // Send resultId + signedToken to YOUR backend, then verify:
    // POST https://api.gamesiknow.com/embed/results/verify
    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;
      case "finish": {
        const result = data.payload?.result;
        console.log("Finish", result?.outcome, result?.winner, result?.players);
        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`;
}