Merge pull request #273 from sivaprasath2004/sivaprasath-closes-issue…

…-231

[Feature] : User cliked Indicates color

js/box.js

@@ -1,5 +1,4 @@
 class Box {
-
 	constructor(row, column) {
 		this.row = row
 		this.column = column
@@ -38,17 +37,17 @@ class Box {
 		return null
 	}
 
+
 	fillEdge(edge) {
 		edge.fill()
 	}
-
 	fill(color) {
 		if (!this.filled) {
 			this.filled = true
 			this.remainingEdges = 0
 			this.ui.style.background = color
 			this.ui.classList.add("filled")
-
+			
 			Game.instance.invokeEvent("boxFill", this)
 		}
 	}

js/edge.js

@@ -13,10 +13,11 @@ class Edge {
 	}
 
 	//Filling edge
-	fill() {
+		fill() {
+		const player=document.querySelector(".name").textContent
 		if (!this.filled) {
 			this.filled = true
-			this.ui.classList.add("filled")
+			player==="Player 1"? this.ui.classList.add("Player_1"):player==="Player 2"?this.ui.classList.add("Player_2"):player==="Player 3"?this.ui.classList.add("Player_3"):player==="Player 4"?this.ui.classList.add("Player_4"):player==="Player 5"?this.ui.classList.add("Player_5"):this.ui.classList.add("Player_6")
 
 			Game.instance.invokeEvent("edgeFill", this)
 		}

style.css

@@ -155,11 +155,16 @@ a {
     transform: scale(0.7, 3);
 }
 
-.edge.filled {
-    background: #111;
+.Player_1,.Player_2,.Player_3,.Player_4,.Player_5,.Player_6{
     pointer-events: none;
     z-index: 10;
 }
+.Player_1{background: pink;}
+.Player_2{background: skyblue;}
+.Player_3{background: lightgreen;}
+.Player_4{background: magenta;}
+.Player_5{background: yellow;}
+.Player_6{background: orange;}
 
 .players {
     position: absolute;