123

Fooxboy · Oct 28, 2023 · 2e83934 · 2e83934
1 parent 5f003a8
commit 2e83934
Show file tree

Hide file tree

Showing 15 changed files with 834 additions and 1 deletion.
diff --git a/MyOwnGame.Frontend/index.html b/MyOwnGame.Frontend/index.html
@@ -6,7 +6,7 @@
     <title>Vite App</title>
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/6.0.1/signalr.js"></script>
-    <script src="url_utils.js"></script>
+    <script src="scripts/url_utils.js"></script>
     <script src="scripts/cookies.js"></script>
     <script src="scripts/page_routing.js"></script>
     <script src="scripts/page.js"></script>

diff --git a/MyOwnGame.Frontend/public/pages/loading/loading.html b/MyOwnGame.Frontend/public/pages/loading/loading.html
@@ -0,0 +1,53 @@
+<div class="loading-container">
+	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+	<g transform="rotate(0 50 50)">
+	  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#85a2b6">
+	    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.9166666666666666s" repeatCount="indefinite"></animate>
+	  </rect>
+	</g><g transform="rotate(30 50 50)">
+	  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#85a2b6">
+	    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.8333333333333334s" repeatCount="indefinite"></animate>
+	  </rect>
+	</g><g transform="rotate(60 50 50)">
+	  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#85a2b6">
+	    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.75s" repeatCount="indefinite"></animate>
+	  </rect>
+	</g><g transform="rotate(90 50 50)">
+	  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#85a2b6">
+	    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.6666666666666666s" repeatCount="indefinite"></animate>
+	  </rect>
+	</g><g transform="rotate(120 50 50)">
+	  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#85a2b6">
+	    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5833333333333334s" repeatCount="indefinite"></animate>
+	  </rect>
+	</g><g transform="rotate(150 50 50)">
+	  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#85a2b6">
+	    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite"></animate>
+	  </rect>
+	</g><g transform="rotate(180 50 50)">
+	  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#85a2b6">
+	    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.4166666666666667s" repeatCount="indefinite"></animate>
+	  </rect>
+	</g><g transform="rotate(210 50 50)">
+	  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#85a2b6">
+	    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.3333333333333333s" repeatCount="indefinite"></animate>
+	  </rect>
+	</g><g transform="rotate(240 50 50)">
+	  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#85a2b6">
+	    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.25s" repeatCount="indefinite"></animate>
+	  </rect>
+	</g><g transform="rotate(270 50 50)">
+	  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#85a2b6">
+	    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.16666666666666666s" repeatCount="indefinite"></animate>
+	  </rect>
+	</g><g transform="rotate(300 50 50)">
+	  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#85a2b6">
+	    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.08333333333333333s" repeatCount="indefinite"></animate>
+	  </rect>
+	</g><g transform="rotate(330 50 50)">
+	  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#85a2b6">
+	    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animate>
+	  </rect>
+	</g>
+	<!-- [ldio] generated by https://loading.io/ --></svg>
+</div>
diff --git a/MyOwnGame.Frontend/public/pages/loading/loading.scss b/MyOwnGame.Frontend/public/pages/loading/loading.scss
@@ -0,0 +1,5 @@
+.loading-container {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
diff --git a/MyOwnGame.Frontend/public/pages/lobby/lobby.html b/MyOwnGame.Frontend/public/pages/lobby/lobby.html
@@ -0,0 +1,37 @@
+<div id="content">
+	<div class="side-panel">
+		<div id="admin-panel">
+			<!-- dynamic -->
+		</div>
+		<div id="tools">
+			<div class="button" onclick="disconnect()">Отключиться</div>
+			<input type="text" id="invite-field" class="textfield">
+			<br>
+		</div>
+	</div>
+	<div id="center-panel">
+		<div id="field">
+			<div id="questions">
+				<!-- dynamic -->
+			</div>
+			<div id="text-question">
+				<div id="text-content"></div>
+			</div>
+			<div id="image-question">
+				<div id="image-content"></div>
+			</div>
+			<div id="music-question">
+				<div id="music-content">
+					Музыка
+					<input type="range" min="0" max="100" value="100" onchange="setVolume(this.value)">
+				</div>
+			</div>
+		</div>
+		<div id="players">
+			<!-- dynamic -->
+		</div>
+	</div>
+	<div class="side-panel">
+
+	</div>
+<div>
diff --git a/MyOwnGame.Frontend/public/pages/lobby/lobby.js b/MyOwnGame.Frontend/public/pages/lobby/lobby.js
@@ -0,0 +1,208 @@
+let audio;
+let isAdmin;
+let canChooseAnswer;
+
+/*
+======================
+    Initialization
+======================
+*/
+
+session.players.forEach(player => {
+	addPlayer(player);
+});
+if(session.currentRound)
+	setRound(session.currentRound);
+if(session.selectQuestionPlayer)
+	setPlayerSelecting(session.selectQuestionPlayer);
+
+// DEBUG
+if(isAdmin){
+	session.gameInfo.rounds.forEach((round, i) => {
+		document.querySelector("#tools").innerHTML += `
+			<div class="button" onclick="requestRound(${i})">${round.name}</div>
+		`;
+	});
+}
+
+document.querySelector("#invite-field").value = `${window.location.href}?invite=${session.id}`;
+
+
+/*
+======================
+	  From API
+======================
+*/
+
+function addPlayer(player){
+	const imageUrl = `${address}/avatars/${player.avatarImage}`;
+
+	if(player.isAdmin){
+		isAdmin = player.id == userId;
+		const adminPanel = document.querySelector("#admin-panel");
+		if(!adminPanel) {
+			adminPanel = document.createElement("div");
+			adminPanel.classList = "admin-panel";
+			document.querySelector("#left-panel").appendChild(adminPanel);
+		}
+
+		adminPanel.innerHTML = `
+			<div class="admin-label">Ведущий</div>
+			<div class="admin-image" style="background-image: url('${imageUrl}')"></div>
+			<div class="admin-name">${player.name}</div>
+		`;
+	} else {
+		let profilePane = document.querySelector(`#player-${player.id}`);
+		if(!profilePane) {
+			profilePane = document.createElement("div");
+			profilePane.classList = "player";
+			profilePane.id = `player-${player.id}`;
+			document.querySelector("#players").appendChild(profilePane);
+
+			profilePane.innerHTML = `
+				<div class="player-status"></div>
+				<div class="player-info">
+					<div class="player-image"></div>
+					<div class="player-name"></div>
+				</div>
+				<div class="player-score"></div>
+			`;
+		}
+		profilePane.querySelector(".player-image").style.backgroundImage = `url('${imageUrl}')`;
+		profilePane.querySelector(".player-name").innerHTML = player.name;
+		profilePane.querySelector(".player-score").innerHTML = player.score;
+
+		if(player.isDisconnected)
+			setPlayerOffline(player);
+		else if(session.selectQuestionPlayer && player.id == session.selectQuestionPlayer.id)
+			setPlayerSelecting(player);
+		else
+			setPlayerStatus(player.id, null);
+	}
+}
+
+function removePlayer(player){
+	if(player.isAdmin)
+		document.querySelector("#admin-panel")?.remove();
+	else
+		document.querySelector(`#player-${player.id}`)?.remove();
+}
+
+function setRound(roundInfo){
+	const questions = document.querySelector("#questions");
+	questions.innerHTML = "";
+
+	roundInfo.themes.forEach((theme, i) => {
+		let themePanel = document.createElement("div");
+		themePanel.classList = "theme-line";
+		themePanel.id = `theme-${i}`;
+		questions.appendChild(themePanel);
+
+		themePanel.innerHTML += `
+			<div class="theme-name">${theme.name}</div>
+		`;
+
+		theme.prices.forEach((price, r) => {
+			themePanel.innerHTML += `
+				<div class="price" id="price-${r}" onclick="requestPrice(${i}, ${r})">${roundInfo.isFinal ? "удалить" : price.price}</div>
+			`;
+		});
+	});
+
+	console.log(roundInfo);
+}
+
+function setPlayerSelecting(player){
+	setPlayerStatus(player.id, "выбирает", "rgba(100, 200, 100, 1)", "rgba(0, 90, 0, 1)");
+	canChooseAnswer = player.id == userId;
+	document.body.classList.toggle("can-choose-price", canChooseAnswer);
+}
+
+function setPlayerOffline(player){
+	setPlayerStatus(player.id, "отключен", "rgba(100, 100, 100, 1)", "rgba(200, 200, 200, 1)");
+}
+
+function showQuestion(question, type, time, position){
+	console.log("Showing question:");
+	console.log(question);
+	console.log("With type:");
+	console.log(type);
+	console.log("At position:");
+	console.log(position);
+
+	const priceElement = document.querySelector(`#theme-${position.themeNumber} #price-${position.questionNumber}`);
+	priceElement.classList.add("selected");
+
+	setTimeout(() => {
+		priceElement.classList.remove("selected");
+		processQuestionPart(question, 0);
+	}, 1000);
+}
+
+/*
+======================
+	  Functions
+======================
+*/
+
+function getPlayerStatus(id){
+	return document.querySelector(`#player-${id} .player-status`)?.innerHTML;
+}
+
+function setPlayerStatus(id, status, bg, color){
+	const profilePane = document.querySelector(`#player-${id}`);
+	if(profilePane){
+		profilePane.classList.toggle("has-status", status != null);
+
+		const statusPanel = profilePane.querySelector(".player-status");
+		statusPanel.innerHTML = status;
+		statusPanel.style.backgroundColor = bg;
+		statusPanel.style.color = color;
+	}
+}
+
+function requestRound(roundIndex){
+	connection.invoke("ChangeRound", roundIndex);
+}
+
+function requestPrice(theme, price){
+	connection.invoke("SelectQuestion", theme, price);
+}
+
+function setVolume(volume){
+	audio.volume = volume / 100;
+}
+
+function processQuestionPart(parts, i){
+	if(i == parts.length){
+		return;
+	}
+	const part = parts[i];
+
+	const questions = document.querySelector(`#questions`);
+	const imageQuestion = document.querySelector(`#image-question`);
+	const textQuestion = document.querySelector(`#text-question`);
+	const musicQuestion = document.querySelector(`#music-question`);
+
+	questions.style.display = "none";
+	textQuestion.style.display = part.type == 1 ? "flex" : "none";
+	musicQuestion.style.display = part.type == 2 ? "flex" : "none";
+	imageQuestion.style.display = part.type == 3 ? "flex" : "none";
+
+	if(part.type == 1){
+		textQuestion.querySelector(`#text-content`).textContent = part.text;
+		setTimeout(() => processQuestionPart(parts, i+1), part.text.length * 200);
+	}
+	if(part.type == 2){
+		audio = new Audio(`${address}/content/${session.id}/${part.url}`);
+		audio.addEventListener("loadedmetadata", () => {
+			setTimeout(() => processQuestionPart(parts, i+1), audio.duration * 1000);
+		});
+		audio.play();
+	}
+	if(part.type == 3){
+		imageQuestion.querySelector(`#image-content`).style.backgroundImage 
+			= `url("${address}/content/${session.id}/${part.url}")`;
+		setTimeout(() => processQuestionPart(parts, i+1), 3000);
+	}
+}