Sans GDevelop : SDK JS & autres moteurs

<script src="https://angonstudio.cloud/angon.js"></script>
<!-- ou : <script src="./angon.js"></script> si vous copiez le fichier -->

// Récupérez votre clé dans l'onglet API du jeu (console Angon)
const loggedIn = await Angon.init({
  apiKey: "sk_live_VOTRE_CLE",
  // baseUrl: "https://votre-console/api/public/v1", // optionnel
  // container: document.getElementById("ui"),        // optionnel, défaut: body
});

// Panneau de connexion préconfiguré — même habillage que votre tableau de bord
if (!loggedIn) {
  Angon.panels.login({ onClose: () => demarrerJeu() });
} else {
  demarrerJeu(); // session restaurée depuis localStorage
}

const app = new PIXI.Application();
await app.init({ resizeTo: window });
document.body.appendChild(app.canvas);

// 1. Panneau de connexion (thème de votre console, localStorage inclus)
await Angon.init({ apiKey: "sk_live_VOTRE_CLE" });
if (!Angon.state.loggedIn) {
  await new Promise((ok) => Angon.panels.login({ onClose: ok }));
}

// 2. Sauvegarde JSON -> Google Drive
await Angon.storage.upload(
  "sauvegarde.json",
  JSON.stringify({ niveau: 5, score: 1500 }),
  "application/json"
);

// 3. Score vers un classement
await Angon.leaderboards.submit("course_infinie", 1500);

// 4. Matchmaking avec le panneau intégré (recherche + écran VS)
Angon.matchmaking.onStatus(({ status, partieId, codeSalon, participants }) => {
  if (status === "matched") {
    // participants = [{ pseudo, avatar, equipe, ... }]
    Angon.room.join(partieId); // ferme le panneau une fois connecté
  }
});
Angon.panels.openMatchmaking("2v2");

// 5. Actions temps réel dans le salon
Angon.room.onMessage((payload) => appliquerCoupAdverse(payload));
Angon.room.send({ x: sprite.x, y: sprite.y });

const Angon = {
  baseUrl: "https://angonstudio.cloud/api/public/v1",
  apiKey: "sk_live_VOTRE_CLE",
  token: localStorage.getItem("angon_token") || "",

  async call(path, method = "GET", body = null) {
    const res = await fetch(this.baseUrl + path, {
      method,
      headers: {
        "Content-Type": "application/json",
        "x-api-key": this.apiKey,
        ...(this.token ? { "x-player-token": this.token } : {}),
      },
      body: body ? JSON.stringify(body) : undefined,
    });
    const json = await res.json().catch(() => null);
    return { ok: res.ok, status: res.status, json };
  },

  async login(email, password) {
    const r = await this.call("/players/login", "POST", { email, password });
    if (r.ok && r.json?.token) {
      this.token = r.json.token;
      localStorage.setItem("angon_token", this.token); // session persistante
    }
    return r;
  },

  logout() {
    this.token = "";
    localStorage.removeItem("angon_token");
  },
};

import { createClient } from "@supabase/supabase-js";

// 1. Config publique (url + clé anon) de votre backend
const cfg = (await Angon.call("/realtime/config")).json;
const supabase = createClient(cfg.url, cfg.key);

// 2. Canal du salon : angon_partie_<partie_id> (partie_id vient du matchmaking)
const channel = supabase.channel(cfg.channel_prefix + partieId);

channel.on("broadcast", { event: "action" }, ({ payload }) => {
  appliquerCoupAdverse(payload); // ex: déplacer un sprite PixiJS
});

await channel.subscribe();
channel.send({ type: "broadcast", event: "action", payload: { x: 3, y: 7 } });