From 56066425a0f3063e68ac29b9a39aff175d3be4db Mon Sep 17 00:00:00 2001
From: Hannes Reichle <reichleh@hu-berlin.de>
Date: Fri, 19 Mar 2021 16:58:38 +0100
Subject: [PATCH] added Avatarclass changed avatar selector at start of game
made play-buttons in same design as other game stuff
---
client/SkribblAvatar.js | 85 +++++++++++++++++++++++++++++++++++++++++
client/SkribblMenu.js | 67 +++++++++++++++++++-------------
2 files changed, 126 insertions(+), 26 deletions(-)
create mode 100644 client/SkribblAvatar.js
diff --git a/client/SkribblAvatar.js b/client/SkribblAvatar.js
new file mode 100644
index 0000000..bfb898c
--- /dev/null
+++ b/client/SkribblAvatar.js
@@ -0,0 +1,85 @@
+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);
diff --git a/client/SkribblMenu.js b/client/SkribblMenu.js
index 5a1bbd0..3dc1c39 100644
--- a/client/SkribblMenu.js
+++ b/client/SkribblMenu.js
@@ -1,3 +1,7 @@
+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.
*/
@@ -56,20 +60,7 @@ export default class SkribblMenu extends HTMLElement {
font-size: 20px;
}
- .character-eyes{
- height: 34px;
- width: 34px;
- background:url("/res/MouthsAndEyes.png");
- background-position: -70px 0;
- }
-
-
- .character-mouth{
- height: 44px;
- width: 44px;
- background:url("/res/MouthsAndEyes.png");
- background-position: -70px -52px;
- }
+
.container-left-arrows{
display:flex;
@@ -85,33 +76,30 @@ export default class SkribblMenu extends HTMLElement {
position: relative;
}
- .container-character{
- border: 2px solid #777;
- border-radius: 10px;
- }
+
</style>
<div class="container-customize-avatar">
<div class="container" id="ColorButtons">
<div class="container-left-arrows">
- <button class="arrow-button arrow-left"></button>
- <button class="arrow-button arrow-left"></button>
+ <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 class="container-character">
- <div class="character-eyes" alt="CharacterLook"></div>
- <div class="character-mouth" alt="CharacterLook"></div>
- </div>
+ <div id="avatar-container"></div>
<div class="container" id="ColorButtons">
<div class="container-right-arrows">
- <button class="arrow-button arrow-right"></button>
- <button class="arrow-button arrow-right"></button>
+ <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">
@@ -119,7 +107,34 @@ export default class SkribblMenu extends HTMLElement {
<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("#play-button");
/** @type {Promise<{name:string}>} */
--
GitLab