SkribblLobby.js

import SkribblClient from "./SkribblClient.js";

/**
 * Custom element `<skribbl-lobby>` for the lobby of a game.
 */
export default class SkribblLobby extends HTMLElement {
	/**
	 * @param {SkribblClient} client
	 */
	constructor(client){
		super();
		this.attachShadow({mode:"open"});
		this.shadowRoot.innerHTML = `
			<style>
				:host {
					display: block;
					background: #ffffff;
					border-radius: 10px;
					padding: 15px;
				}
			</style>
			Players: <span></span>
		`;
		this._jens = this.shadowRoot.querySelector("span");
		client.onPlayersListChange(players=>{
			this._jens.innerText = players.join(", ");
		});
	}
}
customElements.define("skribbl-lobby",SkribblLobby);