Guides

Multi-joueurs avec des invitations

Copier la page

Une salle à deux joueurs. Créez-la sur votre serveur, invitez un ami dedans avec le sélecteur d'amis de Lia ou un lien, et placez les deux joueurs dans la même salle.

L'idée : une salle a un id, et cet id est dans l'invitation's startParam. Qui que ce soit qui ouvre l'invitation ouvre votre application avec cette startParam, et votre page les rejoint dans la salle. Lia'son Lia XO fonctionne ainsi.

#1. Créer une salle sur votre serveur

server.js

app.post("/api/rooms", async (req, res) => {
  const playerId = await playerFrom(req.body.session); // see Verify on your server
  if (!playerId) return res.status(401).end();
  const room = "room-" + crypto.randomUUID().replace(/-/g, "").slice(0, 10);
  await db.createRoom(room, { host: playerId, players: [playerId] });
  res.json({ room });
});

app.post("/api/rooms/join", async (req, res) => {
  const playerId = await playerFrom(req.body.session);
  if (!playerId) return res.status(401).end();
  const room = await db.room(req.body.room);
  if (!room) return res.status(404).json({ error: "no_room" });
  if (room.players.length >= 2 && !room.players.includes(playerId)) return res.status(409).json({ error: "full" });
  await db.addPlayer(req.body.room, playerId);
  res.json({ room: req.body.room });
});

Les identifiants de salle doivent correspondre à un startParam : 1 à 64 lettres, chiffres, _ et -.

#2. Inviter un ami

game.js

async function playWithAFriend() {
  const { room } = await api("/api/rooms", {});
  showWaiting(room);
  const { invited } = await Lia.inviteFriend({ startParam: room });
  if (!invited) Lia.toast("Share the link to invite someone");
}

// Or a link to send anywhere: opens your app in Lia, or the App Store without it.
async function shareRoom(room) {
  await Lia.share("Play with me: " + Lia.inviteLink(room));
}

Chaque ami choisi reçoit une carte dans leur Lia chat. Lia ne permet qu'aux personnes d'inviter leurs amis, et uniquement des amis qui peuvent ouvrir votre application (pendant qu'elle's dans le test, uniquement vos testeurs).

#3. Atterrir dans la salle

Lisez le startParam lors de l'ouverture de votre application, et écoutez-en un qui arrive pendant qu'elle's'ouvre (la personne clique sur une deuxième invitation) :

function route(startParam) {
  if (startParam && startParam.startsWith("room-")) joinRoom(startParam);
}

Lia.init().then(function () {
  route(Lia.startParam);
  Lia.ready();
});
Lia.on("startParam", function (data) { route(data.startParam); });

async function joinRoom(room) {
  try {
    await api("/api/rooms/join", { room });
    openTable(room);
  } catch (error) {
    Lia.toast(error.message === "full" ? "That game is full" : "That game has ended");
  }
}

Un startParam n'est qu'un indice : n'importe qui peut créer un lien avec n'importe quel startParam, donc votre serveur décide si la salle existe et si le joueur peut s'y joindre.

#4. Jouez en direct

Connectez les deux joueurs à votre serveur (un WebSocket est habituel), et vérifiez chaque joueur'la session avant de les rejoindre à la salle. Tant qu'un jeu est en cours :

Lia.enableClosingConfirmation(); // "Leave the game?" if they close
Lia.disableVerticalSwipes();     // a swipe down won't close the sheet mid move
Lia.onPause(function () { socket.send(JSON.stringify({ type: "away" })); });
Lia.onResume(function () { socket.send(JSON.stringify({ type: "back" })); });

#5. À votre tour, par notification

Quand'quelqu'un'le déplacement et ils'vous avez quitté votre application, un notification avec la salle comme startParam qui les ramène directement :

{ "playerId": "p_3f9c0a6d1b2e4f5a6b7c", "text": "@kofi played. Your move.", "startParam": "room-a81c2e09f4" }

#Tables publiques

Les invitations sont pour des amis. Pour permettre à n'importe qui sur Lia de rejoindre, listez également la salle dans la hall alors qu'il attend :

server.js

// When the room is made: list it (as the host, with one seat taken).
await lia("POST", "/lobby/tables", { tableId: room, hostPlayerId: playerId, seats: 2, taken: 1, title: "Quick game" });

// When someone joins from the lobby: seat them through Lia first (it refuses blocked players and full tables).
app.post("/api/rooms/sit", async (req, res) => {
  const playerId = await playerFrom(req.body.session);
  if (!playerId) return res.status(401).end();
  try {
    const { full } = await lia("POST", `/lobby/tables/${encodeURIComponent(req.body.room)}/sit`, { playerId });
    await db.addPlayer(req.body.room, playerId);
    if (full) startGame(req.body.room);
    res.json({ room: req.body.room });
  } catch (error) {
    res.status(409).json({ error: error.data?.error ?? "failed" }); // full, not_found, own_table
  }
});

// When the game starts or the room closes: take it out (safe to repeat).
await lia("DELETE", `/lobby/tables/${encodeURIComponent(room)}`);

Dans votre page, affichez les tables ouvertes, et installez les personnes ayant choisi votre table en Lia'son propre salon (ils arrivent avec le startParam lobby-<table id>):

const { tables } = await Lia.lobby.tables();
renderTables(tables, (table) => api("/api/rooms/sit", { room: table.id }));

function route(startParam) {
  if (startParam?.startsWith("lobby-")) return api("/api/rooms/sit", { room: startParam.slice(6) }).then(openTable);
  if (startParam?.startsWith("room-")) return joinRoom(startParam);
}

Les étrangers peuvent'ne pas discuter par Lia, les blocages sont respectés, et les joueurs peuvent rapport les uns les autres.

#Limites à connaître

Une personne peut inviter 20 amis dans votre application par jour, donc les invitations restent quelque chose que les gens accueillent dans leurs messages.
Un hôte peut avoir 3 tables publiques ouvertes dans votre application à la fois, et une liste dure au maximum une heure.
Lia.inviteFriend() réponses { invited }, jamais qui a été invité : votre serveur apprend qui a rejoint lorsqu'ils rejoignent.

Traduit automatiquement. L'anglais est la source de vérité. Lire en anglais