SkribblCanvas.js

/**
 * Custom element `<skribbl-canvas>` for the canvas that can be drawn on by whoever is currently drawing.
 * @todo implement as actual canvas and not just container element
 */
export default class SkribblCanvas extends HTMLElement {
	constructor(){
		super();
		this.attachShadow({mode:"open"});
		this.shadowRoot.innerHTML = `
			<style>
				:host {
					display: block;
					position: relative;
					overflow: hidden;
					background: #ffffff;
					border-radius: 5px;
				}
				svg {
					display: block;
					width: 100%;
				}
			</style>
			<!-- invisible svg to maintain an aspect ratio of 960:720, aka 4:3 -->
			<svg viewBox="0 0 960 720"></svg>
			<slot name="overlay"></slot>
		`;
	}

	set overlay(overlay){
		if (this._overlay){
			this._overlay.remove();
		}
		this._overlay = overlay;
		if (overlay){
			overlay.slot = "overlay";
			this.appendChild(overlay);
		}
	}

	/**
	 * @type {SkribblCanvasOverlay}
	 */
	get overlay(){
		return this._overlay;
	}
}
/**
 * Custom element `<skribbl-canvas-overlay>` for overlays on the `<skribbl-canvas>`-element.
 */
export class SkribblCanvasOverlay extends HTMLElement {
	/**
	 * Constructs a new SkribblCanvasOverlay and appends the given nodes or strings to it.
	 * @param {...(string|Node)} nodes
	 */
	constructor(...nodes){
		super();
		this.attachShadow({mode:"open"});
		this.shadowRoot.innerHTML = `
			<style>
				:host {
					display: block;
					position: absolute;
					top: 0;
					right: 0;
					bottom: 0;
					left: 0;
					background: #000000bf;
					color: #ffffff;
				}
				#contents {
					position: absolute;
					left: 50%;
					top: 50%;
					max-width: 80%;
					transform: translate(-50%,-50%);
					text-align: center;
					font-size: 1.3em;
				}
				::slotted(button) {
					padding: 3px 5px;
					margin: 3px;
					border: none;
					border-radius: 3px;
					background: #dfdfdf;
					color: #000000;
					font-size: 1em;
				}
				::slotted(button:hover) {
					cursor: pointer;
				}
			</style>
			<div id="contents">
				<slot></slot>
			</div>
		`;
		this.append(...nodes);
	}
}
customElements.define("skribbl-canvas",SkribblCanvas);
customElements.define("skribbl-canvas-overlay",SkribblCanvasOverlay);