lobby.js

Simply create multiplayer games using phones as controllers.

Demo

Scan the QR code in the top right corner to join as a player.

Waiting for events...

Getting started

Add the lobby.js web component to your HTML:

// lobby.html
<lobby-js
  id="lobby"
  controller="https://www.example.com/controller.js"
/>
<script type="module" src="https://lobbyjs.popp.xyz/lobby.js"></script>

Create a seperate page for the controller and in include the controller web component:

// controller.html
<lobby-js-controller
  id="controller"
/>
<script type="module" src="https://lobbyjs.popp.xyz/lobby.js"></script>

Listen for events:

// lobby.html
const lobby = document.getElementById('lobby');
lobby.addEventListener('lobby-event', (event) => {
  const { name, data } = event.detail;
  console.log('Lobby Event:', name, data);
});

Send events from the controller:

// controller.html
const controller = document.getElementById('controller');
controller.sendEvent('up');