SkribblAvatar.js

import { SkribblCanvasOverlay } from "./SkribblCanvas.js";

/**
 * Custom element `<skribbl-avatar>` to remember how the player looks like and for configuration.
 */
 export default class SkribblAvatar extends HTMLElement {
	constructor(){
		super();
		this.attachShadow({mode:"open"});
        this.shadowRoot.innerHTML = `
			<style>
				:host {
					display: block;
					position: relative;
					overflow: hidden;
					background: #ffffff;
					border-radius: 5px;
				}
				.container-character{
					border: 2px solid #777;
					border-radius: 10px;
				}
                .character-eyes{
					height: 34px;
					width: 34px;
					background:url("/res/MouthsAndEyes.png");
					background-position: 10px 0;
				}
				.character-mouth{
					height: 34px;
					width: 34x;
					background:url("/res/MouthsAndEyes.png");
					background-position: 0px -52px;
				}
			</style>

			<div class="container-character">
			<div id="eyes" class="character-eyes"  alt="CharacterLook"></div>
			<div id="mouth" class="character-mouth"  alt="CharacterLook"></div>
			</div>
		`;
		this.eyesDisplacement = 10;
		this.mouthDisplacement = 0;
	}

	/** @param {boolean} toTheRight */
	changeEye(toTheRight) {
		let displacement = 80;

		if (toTheRight){
			this.eyesDisplacement += displacement;
		}else{
			this.eyesDisplacement -= displacement;
		}
		const eye = this.shadowRoot.getElementById("eyes");
		eye.style.backgroundPositionX = this.eyesDisplacement+"px";
	}

	/** @param {boolean} toTheRight */
	changeMouth(toTheRight) {
		let displacement = 80;

		if (toTheRight){
			this.mouthDisplacement += displacement;
		}else{
			this.mouthDisplacement -= displacement;
		}
		const mouth = this.shadowRoot.getElementById("mouth");
		mouth.style.backgroundPositionX = this.mouthDisplacement+"px";
	}

	/** @param {string} unique_title */
	getStyleSheet(unique_title) {
		for(var i=0; i<document.styleSheets.length; i++) {
		  var sheet = document.styleSheets[i];
		  if(sheet.title == unique_title) {
			return sheet;
		  }
		}
	  }

}


customElements.define("skribbl-avatar",SkribblAvatar);