/**
 * Custom element `<skribbl-settings>` for the settings that appear in the lobby of the game.
 */
export default class SkribblSettings extends HTMLElement {
	constructor(){
		super();
		this.attachShadow({mode:"open"});
		this.shadowRoot.innerHTML = `
			<style>
				:host {
					display: block;
					background: #ffffff;
					border-radius: 10px;
					padding: 15px;
				}
				h2 {
					margin: 0;
					text-align: center;
				}
				select {
					display: block;
					margin: 3px 5px 5px 5px;
					padding: 3px;
					width: 100%;
				}
				button {
					padding: 8px 25px;
					font-size: 20px;
					background: orange;
					color: white;
					border: none;
					border-radius: 4px;
					cursor: pointer;
				}
			</style>
			<h2>Lobby</h2>
			<b>Rounds:</b>
			<select>
				<option value="2">2</option>
				<option value="3" selected="">3</option>
				<option value="4">4</option>
				<option value="5">5</option>
				<option value="6">6</option>
				<option value="7">7</option>
				<option value="8">8</option>
				<option value="9">9</option>
				<option value="10">10</option>
			</select><br>
			<b>Draw time:</b>
			<select>
				<option value="30">30s</option>
				<option value="45">45s</option>
				<option value="60">60s</option>
				<option value="90">90s</option>
				<option value="120">120s</option>
				<option value="180">180s</option>
			</select><br>
			<div style="text-align:center">
				<button>Start Game</button>
			</div>
		`;
		this._roundsInput = this.querySelectorAll("select")[0];
		this._drawTimeInput = this.querySelectorAll("select")[1];
	}

	get settings(){
		return {rounds:parseInt(this._roundsInput.value),drawTime:parseInt(this._drawTimeInput.value)};
	}
}
customElements.define("skribbl-settings",SkribblSettings);