SkribblContainer.js

import SkribblClient from "./SkribblClient.js";
import SkribblGameContainer from "./SkribblGameContainer.js";
import SkribblLobby from "./SkribblLobby.js";
import SkribblMenu from "./SkribblMenu.js";

/**
 * Custom element `<skribbl-container>` that functions as a root element for the game, containing and managing both the game and all its menus, taking care of high-level state managment.
 */
export default class SkribblContainer extends HTMLElement {
	/**
	 * 
	 * @param {SkribblClient} client
	 */
	constructor(client){
		super();
		this.attachShadow({mode:"open"});
		this.shadowRoot.innerHTML = `
			<style>
				:host {
					display: block;
					position: fixed;
					top: 0;
					right: 0;
					bottom: 0;
					left: 0;
					--background-color: #bfbfefef;
					background-image: linear-gradient(var(--background-color),var(--background-color)), url(./res/background.png);
				}
				skribbl-menu, skribbl-lobby, skribbl-game-container {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%,-50%);
				}
				skribbl-lobby {
					width: 80%;
					max-width: 1000px;
				}
				skribbl-game-container {
					width: 100%;
					max-width: 1400px;
					box-sizing: border-box;
					padding: 10px;
				}
			</style>
		`;
		(async()=>{
			let menu = new SkribblMenu();
			this.shadowRoot.appendChild(menu);
			let {name} = await menu.awaitProceed();
			await client.join(name);
			menu.remove();
			if (!client.hasGameStarted){
				let lobby = new SkribblLobby(client);
				this.shadowRoot.appendChild(lobby);
				await client.waitUntilGameStarted();
				lobby.remove();
			}
			while(true){
				let game = new SkribblGameContainer(client);
				this.shadowRoot.appendChild(game);
				await client.waitUntilGameEnded();
				game.remove();
				let lobby = new SkribblLobby(client);
				this.shadowRoot.appendChild(lobby);
				await client.waitUntilGameStarted();
				lobby.remove();
			}
		})();
	}
}
customElements.define("skribbl-container",SkribblContainer);