import SkribblClient from "./SkribblClient.js";
import SkribblPlayerList from "./SkribblPlayerList.js";
import SkribblSettings from "./SkribblSettings.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: flex;
				}
				skribbl-settings {
					width: 60%;
				}
				skribbl-player-list {
					width: 40%;
				}
			</style>
		`;
		this._settings = new SkribblSettings();
		this._playerList = new SkribblPlayerList(client);
		this.shadowRoot.append(this._settings,this._playerList);
	}
}
customElements.define("skribbl-lobby",SkribblLobby);