Merge pull request #708 from aslams2020/AvatarFix

✔️Fixed Avatars Not Displaying During Avatar Selection
ChromeGaming · Aug 6, 2024 · 62bbf21 · 62bbf21
2 parents 54b5ace + 5f9cd97
commit 62bbf21
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 55 deletions.
diff --git a/js/game.js b/js/game.js
@@ -368,28 +368,30 @@ function renderPlayerInputs(count) {
 		"magenta",
 		"orange",
 	];
+
 	for (let i = 1; i <= count; i++) {
 		const div = document.createElement("div");
 		div.classList.add("player-input");
-		div.innerHTML = `<label for="playerName${i}" class="player-label ${
-			colors[i - 1]
-		}">Player ${i}</label>
+		div.innerHTML = `<label for="playerName${i}" class="player-label ${colors[i - 1]
+			}">Player ${i}</label>
+
 		<div class="avatar">
 		<img src="/assets/avatars/${i}.png" alt="avatar" class="player-avatar" id="avatar${i}">
+
 		<button id="${i}" class="edit-avatar"><i class="fa-solid fa-pencil"></i></button>
 		</div>
+
 		<input type="text" id="playerName${i}" placeholder="Player ${i}" value="Player ${i}" class="playerNames">
 		<div class="player-colors">
 		${colors
-			.map(
-				(color, index) =>
-					`<label class="rad-label">
-						<input type="radio" class="playerColor" name="color${i}" value="${color}" ${
-						index === i - 1 ? "checked" : ""
-					} onclick="validateColor(this)">
+				.map(
+					(color, index) =>
+						`<label class="rad-label">
+						<input type="radio" class="playerColor" name="color${i}" value="${color}" ${index === i - 1 ? "checked" : ""
+						} onclick="validateColor(this)">
 					<div class="rad-design ${color}"></div></label>`
-			)
-			.join("")}
+				)
+				.join("")}
 			</div>
 		`;
 		playerInputsDiv.appendChild(div);

diff --git a/styles/game.style.css b/styles/game.style.css
@@ -262,9 +262,11 @@ body {
 	.overlay {
 		overflow-y: auto;
 	}
+
 	.overlay a {
 		font-size: 20px;
 	}
+
 	.overlay .closebtn {
 		font-size: 40px;
 		top: 15px;
@@ -370,11 +372,9 @@ body {
 	border-radius: 10px;
 	border-style: double;
 	font-weight: 600;
-	background-image: linear-gradient(
-		rgb(54, 53, 53),
-		rgb(0, 0, 0),
-		rgb(54, 54, 54)
-	);
+	background-image: linear-gradient(rgb(54, 53, 53),
+			rgb(0, 0, 0),
+			rgb(54, 54, 54));
 	color: rgb(164, 164, 162);
 	font-family: Verdana, Geneva, Tahoma, sans-serif;
 	border-color: rgb(0, 0, 0);
@@ -408,14 +408,14 @@ body {
 	background: #fff;
 }
 
-#back-btn > svg {
+#back-btn>svg {
 	margin-right: 5px;
 	margin-left: 5px;
 	font-size: 20px;
 	transition: all 0.4s ease-in;
 }
 
-#back-btn:hover > svg {
+#back-btn:hover>svg {
 	font-size: 1.2em;
 	transform: translateX(-5px);
 }
@@ -484,56 +484,44 @@ body {
 	transition: 0.3s;
 }
 
-.playerColor:checked + .rad-design::before {
+.playerColor:checked+.rad-design::before {
 	transform: scale(0);
 }
 
 .pink {
-	background: linear-gradient(
-		to right bottom,
-		hsl(0, 97%, 62%),
-		hsl(297, 97%, 62%)
-	);
+	background: linear-gradient(to right bottom,
+			hsl(0, 97%, 62%),
+			hsl(297, 97%, 62%));
 }
 
 .skyblue {
-	background: linear-gradient(
-		to right bottom,
-		hsl(223, 100%, 88%),
-		hsl(189, 100%, 75%)
-	);
+	background: linear-gradient(to right bottom,
+			hsl(223, 100%, 88%),
+			hsl(189, 100%, 75%));
 }
 
 .yellow {
-	background: linear-gradient(
-		to right bottom,
-		hsl(38, 100%, 50%),
-		hsl(47, 97%, 62%)
-	);
+	background: linear-gradient(to right bottom,
+			hsl(38, 100%, 50%),
+			hsl(47, 97%, 62%));
 }
 
 .lightgreen {
-	background: linear-gradient(
-		to right bottom,
-		hsl(136, 97%, 62%),
-		hsl(88, 97%, 62%)
-	);
+	background: linear-gradient(to right bottom,
+			hsl(136, 97%, 62%),
+			hsl(88, 97%, 62%));
 }
 
 .magenta {
-	background: linear-gradient(
-		to right bottom,
-		hsl(286, 97%, 62%),
-		hsl(252, 97%, 62%)
-	);
+	background: linear-gradient(to right bottom,
+			hsl(286, 97%, 62%),
+			hsl(252, 97%, 62%));
 }
 
 .orange {
-	background: linear-gradient(
-		to right bottom,
-		hsl(21, 100%, 50%),
-		hsl(20, 100%, 50%)
-	);
+	background: linear-gradient(to right bottom,
+			hsl(21, 100%, 50%),
+			hsl(20, 100%, 50%));
 }
 
 /* Playar Avatars */
@@ -702,8 +690,7 @@ body {
 	font-weight: bold;
 	border-radius: 30px;
 	text-shadow: 2px 2px 3px rgb(136 0 136 / 50%);
-	background: linear-gradient(
-			15deg,
+	background: linear-gradient(15deg,
 			#880088,
 			#aa2068,
 			#cc3f47,
@@ -712,9 +699,7 @@ body {
 			#de6f3d,
 			#cc3f47,
 			#aa2068,
-			#880088
-		)
-		no-repeat;
+			#880088) no-repeat;
 	background-size: 300%;
 	color: #fff;
 	border: none;
@@ -1205,4 +1190,4 @@ body {
 	#timer {
 		font-size: 1.5rem;
 	}
-}
+}