Implementation

Panduan Implementasi

6 langkah — dari connect sampai game jalan multiplayer.

Platform

Game Type

Join

Masuk ke room — dibuat otomatis jika belum ada.

await mabarin.room.join(roomId, game)

Send

Relay event + data ke semua member.

mabarin.room.send({ action, ...data })

Terima event dari pemain lain.

mabarin.room.on('room:message', ({ from, payload }) => ...)

from = userId pengirim · payload = object dari send() // e.g. payload.action · payload.x · payload.cell

Setup

Tambahkan SDK ke HTML game kamu — satu baris cukup.

html

<!-- Tambahkan di <head> -->
<script src="https://cdn.jsdelivr.net/npm/@mabar/sdk/dist/mabar.min.js"></script>

<!-- npm (untuk bundler seperti Vite/Webpack): npm install @mabar/sdk -->

Initialize

Inisialisasi sekali saja — API key dari Mabarin Dashboard.

javascript

const mabarin = new Mabar.MabarClient();
// npm/ESM: import { MabarClient } from '@mabar/sdk'; const mabarin = new MabarClient();

// (Opsional) Login dulu untuk dapat userId
const user = await mabarin.auth.login(email, password);
// atau register: await mabarin.auth.register(email, password, displayName);

await mabarin.initialize({
  apiKey: 'YOUR_API_KEY',   // salin dari Mabarin Dashboard
  userId: user?.uid,         // optional
  name:   user?.displayName,
});

Join Room

Masuk ke room — room dibuat otomatis jika belum ada. Bagikan roomId ke pemain lain.

javascript

const roomId = 'game-room-01';  // ID bebas — bagikan ke pemain lain
await mabarin.room.join(roomId, 'my-game');

// ► Tampilkan roomId di UI agar pemain lain bisa join room yang sama

→Tidak ada create/join terpisah — semua pemain join dengan roomId yang sama. Room dibuat jika belum ada.

Lobby — Track Pemain

Dengarkan pemain yang masuk dan keluar.

javascript

const players = {};   // { userId: name }

mabarin.room.on('room:joined', ({ userId, name }) => {
  players[userId] = name;
  addToLobbyUI(userId, name);
});

mabarin.room.on('room:left', ({ userId }) => {
  delete players[userId];
  removeFromLobbyUI(userId);
});

Ready & Start

Semua pemain tandai ready, host mulai game.

javascript

// Semua pemain panggil ini saat siap
mabarin.room.setReady(true);

// Host mulai game → semua pemain terima 'room:started'
mabarin.room.start();   // ← host only

mabarin.room.on('room:started', () => {
  showGameBoard();
  myTurn = true;   // tentukan siapa giliran pertama di logic kamu
});

→room.start() hanya bisa dipanggil oleh player yang pertama kali join room (host).

Send & Receive

Kirim giliran — semua event di-relay ke player lain via room:message.

javascript

// ── Kirim aksi kamu ────────────────────────────────────
mabarin.room.send({ action: 'end_turn', cell: 4 });
mabarin.room.send({ action: 'game_over', winner: 'Alice' });

// ── Terima dari pemain lain ─────────────────────────────
mabarin.room.on('room:message', ({ from, payload }) => {
  // from   = userId pengirim
  // payload = object dari send()
  if (payload.action === 'end_turn') {
    myTurn = true;
    drawOpponentMove(payload.cell);
  }
  if (payload.action === 'game_over') {
    showResult(payload.winner);
  }
});

// ── Selesai ─────────────────────────────────────────────
mabarin.room.leave();

Full Example— copy, sesuaikan, jalankan

Tic-Tac-Toe — Turn-Based 1v1

Copy, sesuaikan renderBoard() dan checkWin(), jalankan di browser.

javascript

// HTML: <script src="https://cdn.jsdelivr.net/npm/@mabar/sdk/dist/mabar.min.js"></script>

const mabarin = new Mabar.MabarClient();
let myTurn = false;
const board = new Array(9).fill(null);

async function init() {
  const user = await mabarin.auth.login(email, password);
  await mabarin.initialize({ apiKey: 'YOUR_API_KEY', userId: user.uid, name: user.displayName });

  await mabarin.room.join('ttt-room-01', 'tictactoe');
  // ► Atau join room yang dibuat host: await mabarin.room.join('ttt-room-02', 'tictactoe')

  mabarin.room.on('room:joined', ({ userId, name }) => {
    addToLobby(userId, name);
  });

  mabarin.room.on('room:left', ({ userId }) => {
    removeFromLobby(userId);
  });

  mabarin.room.on('room:started', () => {
    myTurn = true;   // host giliran pertama
    showBoard();
  });

  mabarin.room.on('room:message', ({ from, payload }) => {
    if (payload.action === 'end_turn') {
      board[payload.cell] = 'O';
      renderBoard();
      myTurn = true;
    }
    if (payload.action === 'game_over') {
      alert(payload.winner ? payload.winner + ' menang!' : 'Draw!');
    }
  });

  mabarin.room.setReady(true);
}

async function onCellClick(cell) {
  if (!myTurn || board[cell]) return;
  board[cell] = 'X';
  renderBoard();
  myTurn = false;

  const me = mabarin.auth.currentUser?.displayName ?? 'Player';
  if (checkWin('X'))             mabarin.room.send({ action: 'game_over', winner: me });
  else if (board.every(Boolean)) mabarin.room.send({ action: 'game_over', winner: null });
  else                           mabarin.room.send({ action: 'end_turn', cell });
}

function onStartClick() { mabarin.room.start(); }  // host only

function renderBoard() { /* update tampilan 3x3 grid */ }
function showBoard()   { /* tampilkan game board */ }
function addToLobby(id, name)    { /* tambah ke UI lobby */ }
function removeFromLobby(id)     { /* hapus dari UI lobby */ }

function checkWin(p) {
  const lines = [[0,1,2],[3,4,5],[6,7,8],[0,3,6],[1,4,7],[2,5,8],[0,4,8],[2,4,6]];
  return lines.some(([a,b,c]) => board[a]===p && board[b]===p && board[c]===p);
}

init();