SkribblGameContainer.js

import SkribblCanvas, {SkribblCanvasOverlay} from "./SkribblCanvas.js";
import SkribblChat from "./SkribblChat.js";
import SkribblClient from "./SkribblClient.js";
import SkribblPlayerList from "./SkribblPlayerList.js";

/**
 * Custom element `<skribbl-game-container>` for an actual ongoing skribbl game, that is, a container for the chat, canvas, playerlist etc.
 * @todo ui to show how much time is left
 * @todo add space between underscores, to make counting letters easier
 */
export default class SkribblGameContainer extends HTMLElement {
	/**
	 * @param {SkribblClient} client
	 */
	constructor(client){
		super();
		this.attachShadow({mode:"open"});
		this.shadowRoot.innerHTML = `
			<style>
				:host {
					display: block;
					--inner-margin: 5px;
				}
				#header{
					display: flex;
					background: #ffffff;
					border-radius: 10px 10px 5px 5px;
					padding: 5px 10px 5px 10px;
					font-size: 1.25em;
					font-wheight: bold;
					margin-bottom: var(--inner-margin);
				}
				#word {
					flex-grow: 1;
					text-align: center;
				}
				#body {
					display: flex;
				}
				skribbl-player-list {
					width: 150px;
					flex-shrink: 1;
					flex-grow: 0;
				}
				skribbl-canvas {
					width: 250px;
					flex-shrink: 1;
					flex-grow: 1;
					margin-left: var(--inner-margin);
					margin-right: var(--inner-margin);
				}
				skribbl-chat {
					width: 300px;
					flex-shrink: 1;
					flex-grow: 0;
				}
			</style>
			<div id="header">
				<span id="rounds"></span>
				<span id="word">Word: ____________ ____</span>
			</div>
			<div id="body"></div>
		`;
		this._client = client;
		this._rounds = this.shadowRoot.getElementById("rounds");
		this._word = this.shadowRoot.getElementById("word");
		this._body = this.shadowRoot.getElementById("body");
		this._playerList = new SkribblPlayerList(client,{compact:true});
		this._canvas = new SkribblCanvas();
		this._chat = new SkribblChat(client);
		this._body.append(this._playerList,this._canvas,this._chat);
		/** @param {import("./SkribblClient.js").GameState} state */
		this._onStateChangeCallback = state=>{
			if (state.hasGameStarted){
				this._rounds.textContent = `Round ${state.round}/${state.rounds}`;
				if (state.word===null){
					this._canvas.overlay = new SkribblCanvasOverlay(`${state.players[state.drawingPlayer].name} is choosing a word.`);
				}else if(Array.isArray(state.word)){
					let overlay = new SkribblCanvasOverlay();
					overlay.innerHTML = "Choose a word to draw:<br>";
					state.word.forEach((word,index)=>{
						let button = document.createElement("button");
						button.textContent = word;
						button.addEventListener("click",e=>{
							this._client.chooseWord(index);
							button.disabled = true;
						});
						overlay.appendChild(button);
					});
					this._canvas.overlay = overlay;
				}else{
					this._canvas.overlay = null;
					this._word.textContent = state.word;
				}
			}
		}
	}

	connectedCallback(){
		this._client.onStateChange(this._onStateChangeCallback);
	}

	disconnectedCallback(){
		this._client.removeOnStateChangeCallback(this._onStateChangeCallback);
	}
}
customElements.define("skribbl-game-container",SkribblGameContainer);