hytopia/examples/custom-ui/assets/ui/index.html

The HYTOPIA SDK makes it easy for developers to create massively multiplayer games using JavaScript or TypeScript.

<script>
  // Handle received data from server
  hytopia.onData(data => {
    if (data.type === 'playerList') {
      const { list } = data;

      // Update player count
      document.getElementById('player-count').textContent = `Players Connected: ${list.length}`;

      // Clear and rebuild player list
      const playerListElement = document.getElementById('player-list');
      playerListElement.innerHTML = '';

      // Add each player to the list
      list.forEach(player => {
        const pos = player.position;
        const playerRow = document.createElement('div');
        playerRow.className = 'player-row';
        playerRow.textContent = `${player.username}: x:${pos.x.toFixed(1)}, y:${pos.y.toFixed(1)}, z:${pos.z.toFixed(1)}`;
        playerListElement.appendChild(playerRow);
      });
    }
  });

  // Send data to server on teleport btn press
  document.getElementById('teleport-btn').addEventListener('click', () => {
    // We can send any arbitrary object to the server. We as the developer define
    // whatever schema we want to use for data between client and server.
    // For now we'll just use a "type" property we made up so the server knows
    // what to do with the data.
    hytopia.sendData({ type: 'teleport' });
  });
</script>

<div id="player-panel">
  <div id="player-count">Players Connected: 0</div>
  <div id="player-list"></div>
  <button id="teleport-btn">Click to Teleport!</button>
</div>

<style>
  #player-panel {
    position: absolute;
    right: 20px;
    top: 20px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 15px;
    border-radius: 8px;
    min-width: 200px;
    font-family: Arial, sans-serif;
    letter-spacing: 0.5px;
  }
  .player-row {
    margin: 8px 0;
  }
  #teleport-btn {
    width: 100%;
    padding: 8px;
    margin-top: 15px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: Arial, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  #teleport-btn:hover {
    background-color: #45a049;
  }
</style>