Новые фичи в вебе

MyOwnGame.Frontend/pages/lobby/lobby.js

@@ -76,8 +76,10 @@ function addPlayer(player){
 			`;
 		}
 		profilePane.querySelector(".player-image").style.backgroundImage = `url('${imageUrl}')`;
-		profilePane.querySelector(".player-name").innerHTML = player.name;
-		profilePane.querySelector(".player-score").innerHTML = player.score;
+		profilePane.querySelector(".player-name").innerHTML = player.name;;
+		const scoreElement = profilePane.querySelector(".player-score")
+		scoreElement.innerHTML = player.score;
+		scoreElement.addEventListener("click", () => editPlayerScore(session.players.find(a => a.id == player.id)));
 
 		if(player.isDisconnected)
 			setPlayerOffline(player);
@@ -112,9 +114,18 @@ function setRound(roundInfo){
 		`;
 
 		theme.prices.forEach((price, r) => {
-			themePanel.innerHTML += `
-				<div class="price ${price.isAnswered ? "answered" : ""}" id="price-${r}" onclick="requestPrice(${i}, ${r})">${roundInfo.isFinal ? "удалить" : price.price}</div>
-			`;
+			const button = document.createElement("div");
+			button.id = `price-${r}`;
+			button.classList.add("price");
+			button.classList.toggle("answered", price.isAnswered);
+			button.addEventListener("click", () => {
+				if(roundInfo.isFinal)
+					requestRemoveTheme(i);
+				else if(!price.isAnswered)
+					requestPrice(i, r)
+			});
+			button.textContent = roundInfo.isFinal ? "удалить" : price.price;
+			themePanel.appendChild(button);
 		});
 	});
 
@@ -178,6 +189,16 @@ function skipQuestion(answer) {
 	showAnswer(answer);
 }
 
+function updateScore(player, score){
+	updatePlayers();
+}
+
+function finalThemeRemoved(themes){
+	setRound({
+		themes: themes
+	});
+}
+
 /*
 ======================
 	  Functions
@@ -206,7 +227,12 @@ function updatePlayers() {
 			if(profilePane){
 				profilePane.querySelector(".player-image").style.backgroundImage = `url('${imageUrl}')`;
 				profilePane.querySelector(".player-name").innerHTML = player.name;
-				profilePane.querySelector(".player-score").innerHTML = player.score;
+				const scoreElement = profilePane.querySelector(".player-score");
+				if(scoreElement.textContent != player.score){
+					scoreElement.classList.add("changed");
+					setTimeout(() => scoreElement.classList.remove("changed"), 1000);
+				}
+				scoreElement.innerHTML = player.score;
 			}
 
 			if(session.respondingPlayer && 
@@ -255,6 +281,11 @@ function requestAnswer(){
 	connection.invoke("ReadyToAnswer", new Date().toISOString());
 }
 
+function requestRemoveTheme(themeId){
+	console.log(`Removing theme: ${themeId}`);
+	connection.invoke("RemoveFinalTheme", parseInt(themeId));
+}
+
 function setVolume(volume){
 	window.music.volume = volume / 100;
 }
@@ -322,4 +353,12 @@ function showAnswer(answer) {
 		showContent(null, null);
 	});
 	updatePlayers();
+}
+
+function editPlayerScore(player){
+	if(session.players.find(a => a.id == userId).isAdmin){
+		const newScore = prompt("Введите новый счет", player.score);
+		if(newScore)
+			connection.invoke("SetScore", player.id, parseInt(newScore));
+	}
 }

MyOwnGame.Frontend/pages/lobby/lobby.scss

@@ -156,7 +156,7 @@
 				color: rgba(120, 120, 120, 1.0);
 			}
 
-			.can-choose-price &:hover{
+			.can-choose-price &:hover:not(.answered){
 				background: rgba(240, 240, 240, 1);
 				cursor: pointer;
 			}
@@ -309,9 +309,9 @@
 			background: rgba(240, 240, 240, 1);
 			border-radius: 10px;
 			box-shadow: 0 0 2px 3px rgba(0, 0, 0, 0.2);
+			z-index: 1;
 
 			.player-image {
-				background: url("http://fooxboy.ru:3000/avatars/78afb4bd-1ff8-4d81-8975-715cdc5884fe.png");
 				background-size: cover;
 				border-radius: 999px;
 
@@ -339,7 +339,6 @@
 	    	border-radius: 0 0 10px 10px;
 	    	margin-top: -10px;
 	    	padding-top: 10px;
-	    	z-index: -1;
 
 			height: 45px;
 			font-family: segments;
@@ -350,6 +349,21 @@
 			border: 2px solid rgba(0, 80, 0, 1);
 
 			box-sizing: border-box;
+			user-select: none;
+
+			&.changed {
+				animation: 0.5s ease selectedAnimation;
+			}
+
+			@keyframes selectedAnimation {
+				50% {
+					font-size: 17pt;
+					color: lightgreen;
+				}
+				100% {
+					font-size: 12pt;
+				}
+			}
 		}
 	}
 }

MyOwnGame.Frontend/scripts/page.js

@@ -124,7 +124,8 @@ async function connectToSession(sessionId){
 		connection.on("AcceptAnswer", (player, score, answer) => acceptAnswer(player, score, answer));
 		connection.on("RejectAnswer", (player, score, answer) => rejectAnswer(player, score, answer));
 		connection.on("SkipQuestion", answer => skipQuestion(answer));
-
+		connection.on("ScoreChanged", (player, score) => updateScore(player, score));
+		connection.on("FinalThemeRemoved", (themes) => finalThemeRemoved(themes));
 
 		session["id"] = sessionId;
 		setCookie("last-session", sessionId);