Quickstart — tu primer juego web

En 5 minutos tienes un juego que reacciona a eventos de TikTok Live, corriendo en tu máquina con eventos simulados. No necesitas estar en vivo para desarrollar.

1. Crea el proyecto

npm create tikxander-game

Elige una plantilla (empieza con vanilla o phaser) y un nombre. Esto genera un proyecto Vite con el SDK @tikxander/live-events ya cableado.

2. Instala el SDK desde el feed

El SDK vive en nuestro feed privado (Azure Artifacts). Copia el snippet .npmrc desde la card Credencial del feed de tu dashboard y pégalo en la raíz del proyecto. Luego:

npm install

3. Corre en modo desarrollo con eventos simulados

En una terminal:

npm run dev

En otra, el simulador de eventos:

npm run mock

El mock inyecta chat, gift, join, like, follow y live_status en el mismo canal que usarías en vivo. Tu juego no distingue un evento simulado de uno real (salvo el campo opcional sim: true del envelope).

4. El bucle mínimo

import { createClient } from '@tikxander/live-events';

const tx = createClient(); // detecta transporte del manifest (local-ws por defecto)

tx.on('init', ({ config }) => {
  // config llega RESUELTA (defaults del manifest ⊕ lo que guardó el streamer)
  console.log('comando de join:', config.comando_join);
});

tx.on('gift', ({ user, giftName, diamonds, count }) => {
  // intensidad = diamonds * count del streak
  spawnParticles(user.username, diamonds * count);
});

tx.on('chat', ({ user, message }) => {
  if (message.trim().toUpperCase() === 'JOIN') addPlayer(user);
});

5. Publica

Cuando tu juego esté listo, ve a Mis Apps → Nueva app, luego Nueva versión y sigue el wizard de 4 pasos: sube tu manifest.json, tu build o repo, completa la ficha y envía a revisión. Un admin la aprueba y queda disponible en Community.

Regla de oro del modo demo: soporta ?txmode=demo. Cuando la URL trae ese parámetro, tu juego NO conecta al agente: escucha postMessage del parent (tx:init/tx:config/tx:event) y responde tx:ready. El SDK ya lo maneja por ti si usas createClient().