Skip to content
Snippets Groups Projects
Commit 35f8d9af authored by deepdigger's avatar deepdigger
Browse files

move creation of buttonlogic in for-loop

parent 1cf14b8c
1 merge request!8Merge Changes into custom-server, mainly paint-functionality
Hide whitespace changes
Inline Side-by-side
client/ui/SkribblCanvasContainer.js
+ 57
− 162
View file @ 35f8d9af
......@@ -70,24 +70,7 @@ export default class SkribblCanvasContainer extends CustomElement {
<slot name="overlay"></slot>
</div>
<div id="controls">
<!--Color settings & stuff goes here.-->
<div id = "darkred" class = "button colorButton" style="background: DarkRed"> </div>
<div id = "red" class = "button colorButton" style="background: Firebrick"> </div>
<div id = "orange" class = "button colorButton" style="background: orange"> </div>
<div id = "yellow" class = "button colorButton" style="background: yellow"> </div>
<div id = "lightgreen" class = "button colorButton" style="background: YellowGreen"> </div>
<div id = "green" class = "button colorButton" style="background: ForestGreen"> </div>
<div id = "lightblue" class = "button colorButton" style="background: SkyBlue"> </div>
<div id = "blue" class = "button colorButton" style="background: SlateBlue"> </div>
<div id = "purple" class = "button colorButton" style="background: BlueViolet"> </div>
<div id = "pink" class = "button colorButton" style="background: pink"> </div>
<div id = "lightbrown" class = "button colorButton" style="background: SandyBrown"> </div>
<div id = "darkbrown" class = "button colorButton" style="background: SaddleBrown"> </div>
<div id = "black" class = "button colorButton" style="background: black"> </div>
<div id = "darkgrey" class = "button colorButton" style="background: DarkGrey"> </div>
<div id = "lightgrey" class = "button colorButton" style="background: LightGrey"> </div>
<div id = "white" class = "button colorButton" style="background: white"> </div>
<div id = "widthS" class = "button widthButton" style="background: white"> dünn </div>
<div id = "widthM" class = "button widthButton" style="background: white"> mittel </div>
<div id = "widthL" class = "button widthButton" style="background: white"> dick </div>
......@@ -96,16 +79,42 @@ export default class SkribblCanvasContainer extends CustomElement {
<div id = "pen" class = "button drawButton" style="background:white"> malen </div>
<div id = "erasor" class = "button drawButton" style="background: white"> radieren </div>
<div id = "changeBackgroundColor" class = "button drawButton" style="background: white"> Hintergrund färben </div>
//@todo:
</div>
`;
//@todo: vierter Button für Fill
this.colors =["darkred", "DarkRed",
"red", "Firebrick",
"orange", "orange",
"yellow", "yellow",
"lightgreen", "YellowGreen",
"green", "ForestGreen",
"lightblue", "SkyBlue",
"blue", "SlateBlue",
"purple", "BlueViolet",
"pink", "pink",
"lightbrown", "SandyBrown",
"darkbrown", "SaddleBrown",
"black", "black",
"darkgrey", "DarkGrey",
"lightgrey","LightGrey",
"white","white"];
let buttonString = "";
for (let i = 0;i<this.colors.length; i+=2){
buttonString += "<div id = \""+this.colors[i]+"\" class = \"button colorButton\" style=\"background: "+this.colors[i+1]+"\"> </div>";
console.log(buttonString);
}
this._canvas = new SkribblCanvas(client);
this._container = this.shadowRoot.getElementById("container");
this._container.insertBefore(this._canvas,this._container.firstChild);
this._controls = this.shadowRoot.getElementById("controls");
this._controls.insertAdjacentHTML("afterbegin", buttonString);
client.state.onChange(state=>{
/** whether the player should currently be allowed to draw on the canvas */
let allowToDraw = state.hasGameStarted&&state.drawingPlayer==state.playerIndex&&typeof state.word=="string";
......@@ -116,131 +125,31 @@ export default class SkribblCanvasContainer extends CustomElement {
//Logik fuer die Buttons zur Farbauswahl
let Farbe = "black";
this._darkredButton = this.shadowRoot.querySelector("#darkred");
this._darkredButton.addEventListener("click",e=>{
this._canvas.color = "DarkRed";
this.allColorButtonsBorderTransparent();
this.shadowRoot.getElementById("darkred").style.borderColor = Farbe;
});
this._redButton = this.shadowRoot.querySelector("#red");
this._redButton.addEventListener("click",e=>{
this._canvas.color = "Firebrick";
this.allColorButtonsBorderTransparent();
this.shadowRoot.getElementById("red").style.borderColor = Farbe;
});
this._orangeButton = this.shadowRoot.querySelector("#orange");
this._orangeButton.addEventListener("click",e=>{
this._canvas.color = "orange";
this.allColorButtonsBorderTransparent();
this.shadowRoot.getElementById("orange").style.borderColor = Farbe;
});
this._yellowButton = this.shadowRoot.querySelector("#yellow");
this._yellowButton.addEventListener("click",e=>{
this._canvas.color = "yellow";
this.allColorButtonsBorderTransparent();
this.shadowRoot.getElementById("yellow").style.borderColor = Farbe;
});
this._lightgreenButton = this.shadowRoot.querySelector("#lightgreen");
this._lightgreenButton.addEventListener("click",e=>{
this._canvas.color = "YellowGreen";
this.allColorButtonsBorderTransparent();
this.shadowRoot.getElementById("lightgreen").style.borderColor = Farbe;
});
this._greenButton = this.shadowRoot.querySelector("#green");
this._greenButton.addEventListener("click",e=>{
this._canvas.color = "ForestGreen";
this.allColorButtonsBorderTransparent();
this.shadowRoot.getElementById("green").style.borderColor = Farbe;
});
this._lightblueButton = this.shadowRoot.querySelector("#lightblue");
this._lightblueButton.addEventListener("click",e=>{
this._canvas.color = "SkyBlue";
this.allColorButtonsBorderTransparent();
this.shadowRoot.getElementById("lightblue").style.borderColor = Farbe;
});
this._blueButton = this.shadowRoot.querySelector("#blue");
this._blueButton.addEventListener("click",e=>{
this._canvas.color = "SlateBlue";
this.allColorButtonsBorderTransparent();
this.shadowRoot.getElementById("blue").style.borderColor = Farbe;
});
this._purpleButton = this.shadowRoot.querySelector("#purple");
this._purpleButton.addEventListener("click",e=>{
this._canvas.color = "BlueViolet";
this.allColorButtonsBorderTransparent();
this.shadowRoot.getElementById("purple").style.borderColor = Farbe;
});
this._pinkButton = this.shadowRoot.querySelector("#pink");
this._pinkButton.addEventListener("click",e=>{
this._canvas.color = "pink";
this.allColorButtonsBorderTransparent();
this.shadowRoot.getElementById("pink").style.borderColor = Farbe;
});
this._lightbrownButton = this.shadowRoot.querySelector("#lightbrown");
this._lightbrownButton.addEventListener("click",e=>{
this._canvas.color = "SandyBrown";
this.allColorButtonsBorderTransparent();
this.shadowRoot.getElementById("lightbrown").style.borderColor = Farbe;
});
this._darkbrownButton = this.shadowRoot.querySelector("#darkbrown");
this._darkbrownButton.addEventListener("click",e=>{
this._canvas.color = "SaddleBrown";
this.allColorButtonsBorderTransparent();
this.shadowRoot.getElementById("darkbrown").style.borderColor = Farbe;
});
this._blackButton = this.shadowRoot.querySelector("#black");
this._blackButton.addEventListener("click",e=>{
this._canvas.color = "black";
this.allColorButtonsBorderTransparent();
this.shadowRoot.getElementById("black").style.borderColor = "white";
});
this._darkgreyButton = this.shadowRoot.querySelector("#darkgrey");
this._darkgreyButton.addEventListener("click",e=>{
this._canvas.color = "DarkGrey";
this.allColorButtonsBorderTransparent();
this.shadowRoot.getElementById("darkgrey").style.borderColor = Farbe;
});
this._lightgreyButton = this.shadowRoot.querySelector("#lightgrey");
this._lightgreyButton.addEventListener("click",e=>{
this._canvas.color = "LightGrey";
this.allColorButtonsBorderTransparent();
this.shadowRoot.getElementById("lightgrey").style.borderColor = Farbe;
});
this._whiteButton = this.shadowRoot.querySelector("#white");
this._whiteButton.addEventListener("click",e=>{
this._canvas.color = "white";
this.allColorButtonsBorderTransparent();
this.shadowRoot.getElementById("white").style.borderColor = Farbe;
});
//Logik fuer Buttons zur Auswahl der Stiftdicke
for(let i = 0;i<this.colors.length;i+=2){
this._coolButton = this.shadowRoot.querySelector("#"+this.colors[i]);
this._coolButton.addEventListener("click",e=>{
this._canvas.color = this.colors[i+1];
this.allColorButtonsBorderTransparent();
this.shadowRoot.getElementById(this.colors[i]).style.borderColor = Farbe;
});
}
//Logik fuer Buttons zur Auswahl der Stiftdicke
//@todo: Stiftdicke bestimmen
this._widthSDrawButton = this.shadowRoot.querySelector("#widthS");
this._widthSDrawButton.addEventListener("click",e=>{
this._canvas.radius = 10;
this.allWidthButtonsBorderTransparent();
this.shadowRoot.getElementById("widthS").style.borderColor = Farbe;
});
this._widthMDrawButton = this.shadowRoot.querySelector("#widthM");
this._widthMDrawButton.addEventListener("click",e=>{
this._canvas.radius = 10;
this.allWidthButtonsBorderTransparent();
this.shadowRoot.getElementById("widthM").style.borderColor = Farbe;
});
this._widthLDrawButton = this.shadowRoot.querySelector("#widthL");
this._widthLDrawButton.addEventListener("click",e=>{
this._canvas.radius = 30;
this.allWidthButtonsBorderTransparent();
this.shadowRoot.getElementById("widthL").style.borderColor = Farbe;
});
this._widthXLDrawButton = this.shadowRoot.querySelector("#widthXL");
this._widthXLDrawButton.addEventListener("click",e=>{
this._canvas.radius = 50;
this.allWidthButtonsBorderTransparent();
this.shadowRoot.getElementById("widthXL").style.borderColor = Farbe;
});
//Logik fuer Buttons (Radieren und Malen)
this.penDrawButtons = ["widthS",
"widthM",
"widthL",
"widthXL"];
let penDrawButtonsSize = [5,10,30,50];
for(let i = 0;i<this.penDrawButtons.length;i+=1){
this._widthSDrawButton = this.shadowRoot.querySelector("#"+this.penDrawButtons[i]);
this._widthSDrawButton.addEventListener("click",e=>{
this._canvas.radius = penDrawButtonsSize[i];
this.allWidthButtonsBorderTransparent();
this.shadowRoot.getElementById(this.penDrawButtons[i]).style.borderColor = Farbe;
});
}
//Logik fuer Buttons (Radieren und Malen)
this._penButton = this.shadowRoot.querySelector("#pen");
this._penButton.addEventListener("click",e=>{
this._canvas.penActive = true;
......@@ -267,32 +176,18 @@ export default class SkribblCanvasContainer extends CustomElement {
*/
allColorButtonsBorderTransparent() {
this.shadowRoot.getElementById("darkred").style.borderColor = "transparent";
this.shadowRoot.getElementById("red").style.borderColor = "transparent";
this.shadowRoot.getElementById("orange").style.borderColor = "transparent";
this.shadowRoot.getElementById("yellow").style.borderColor = "transparent";
this.shadowRoot.getElementById("lightgreen").style.borderColor = "transparent";
this.shadowRoot.getElementById("green").style.borderColor = "transparent";
this.shadowRoot.getElementById("lightblue").style.borderColor = "transparent";
this.shadowRoot.getElementById("blue").style.borderColor = "transparent";
this.shadowRoot.getElementById("purple").style.borderColor = "transparent";
this.shadowRoot.getElementById("pink").style.borderColor = "transparent";
this.shadowRoot.getElementById("lightbrown").style.borderColor = "transparent";
this.shadowRoot.getElementById("darkbrown").style.borderColor = "transparent";
this.shadowRoot.getElementById("black").style.borderColor = "transparent";
this.shadowRoot.getElementById("darkgrey").style.borderColor = "transparent";
this.shadowRoot.getElementById("lightgrey").style.borderColor = "transparent";
this.shadowRoot.getElementById("white").style.borderColor = "transparent";
for(let i = 0; i<this.colors.length;i+=2){
this.shadowRoot.getElementById(this.colors[i]).style.borderColor = "transparent";
}
}
/**
* changes bordercolor of all Widthbuttons to transparent
*/
allWidthButtonsBorderTransparent() {
this.shadowRoot.getElementById("widthS").style.borderColor = "transparent";
this.shadowRoot.getElementById("widthM").style.borderColor = "transparent";
this.shadowRoot.getElementById("widthL").style.borderColor = "transparent";
this.shadowRoot.getElementById("widthXL").style.borderColor = "transparent";
for(let i = 0; i<this.penDrawButtons.length;i+=1){
this.shadowRoot.getElementById(this.penDrawButtons[i]).style.borderColor = "transparent";
}
}
/**
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment