Merge branch 'UserSelectAvatar' into 'custom-server'

Mööööörge

See merge request !1

client/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);

client/SkribblMenu.js

+import SkribblAvatar from "./SkribblAvatar.js";
+import SkribblCanvas from "./SkribblCanvas.js";
+
+
 /**
  * Custom element `<skribbl-menu>` for the name selection menu that appears when first entering a game.
  */
@@ -13,12 +17,126 @@ export default class SkribblMenu extends HTMLElement {
 					border-radius: 10px;
 					padding: 15px;
 				}
+				.arrow-button {
+					margin: auto;
+					text-align: center;
+					display:inline-block;
+					border:none;
+					height:34px;
+					width:34px;
+					background: url('/res/selectArrows.png');
+					background-size: 54px;
+					background-repeat: no-repeat;
+					cursor: pointer;
+				}
+				.arrow-left{
+					background-position: 0px 0px;
+				}
+
+				.arrow-right{
+					background-position: -24px 0px;
+				}
+
+				.middle-aligned{
+					margin: auto;
+					text-align: center;
+					display:inline-block;
+				}
+				#ColorButtons{
+					text-align: center;
+				}
+				.generic-button{
+					padding: 8px 25px;
+					font-size: 20px;
+					background: orange;
+					color: white;
+					border: none;
+					border-radius: 4px;
+					cursor: pointer;
+				}
+
+				.name-input{
+					padding: 8px 25px;
+					font-size: 20px;
+				}
+
+			
+
+				.container-left-arrows{
+					display:flex;
+					flex-direction: column;
+				}
+				.container-right-arrows{
+					display:flex;
+					flex-direction: column;
+				}
+				.container-customize-avatar{
+					display:flex;
+					justify-content: center;
+					position: relative;
+				}
+
+			
+
 			</style>
-			<input type="text">
-			<button>Play</button>
+			<div class="container-customize-avatar">
+
+			<div class="container" id="ColorButtons"> 
+			<div class="container-left-arrows">
+			<button  id="arrow-left-eyes" class="arrow-button arrow-left"></button>
+			<button  id="arrow-left-mouth" class="arrow-button arrow-left"></button>
+			</div>
+			</div>
+
+			<div id="avatar-container"></div>
+
+			<div class="container" id="ColorButtons"> 
+			<div class="container-right-arrows">
+			<button id="arrow-right-eyes" class="arrow-button arrow-right"></button>
+			<button id="arrow-right-mouth" class="arrow-button arrow-right"></button>
+			</div>
+			</div>
+
+			
+
+
+			</div>
+			
+			<div class="middle-aligned">
+			<input type="text" class="name-input" placeholder="Your Name">
+			<button id="play-button" class ="generic-button">Play</button>
+			</div>
+
+
 		`;
+		this._avatarContainer = this.shadowRoot.getElementById("avatar-container");
+		this._avatar = new SkribblAvatar();
+		this._avatarContainer.append(this._avatar);
+
+		this._selectEyesLeftButton = this.shadowRoot.querySelector("#arrow-left-eyes");
+		this._selectEyesLeftButton.addEventListener("click",e=>{
+			this._avatar.changeEye(false);
+
+		});
+
+		this._selectEyesRightButton = this.shadowRoot.querySelector("#arrow-right-eyes");
+		this._selectEyesRightButton.addEventListener("click",e=>{
+			this._avatar.changeEye(true);
+		});
+
+		this._selectMouthLeftButton = this.shadowRoot.querySelector("#arrow-left-mouth");
+		this._selectMouthLeftButton.addEventListener("click",e=>{
+			this._avatar.changeMouth(false);
+
+		});
+
+		this._selectMouthRightButton = this.shadowRoot.querySelector("#arrow-right-mouth");
+		this._selectMouthRightButton.addEventListener("click",e=>{
+			this._avatar.changeMouth(true);
+		});
+
 		this._nameInput = this.shadowRoot.querySelector("input");
-		this._playButton = this.shadowRoot.querySelector("button");
+		this._playButton = this.shadowRoot.querySelector("#play-button");
 		/** @type {Promise<{name:string}>} */
 		this._proceedPromise = new Promise(resolve=>{
 			this._playButton.addEventListener("click",e=>{

startEverythingUp.sh

+#!/bin/sh
+cd client/
+php -S localhost:8080
+cd ..
+