Skip to content
Snippets Groups Projects
Commit 2a8d25c7 authored by Makarios Abouseif's avatar Makarios Abouseif
Browse files

Updated game.html, to have the player's and the opponent's scores display live

parent b8bd3819
Branches
No related tags found
1 merge request!4Merging into Master
Show whitespace changes
Inline Side-by-side
Showing
with 44 additions and 1 deletion
public_html/game.html
+ 44
− 1
View file @ 2a8d25c7
......@@ -42,6 +42,10 @@
</head>
<body>
<h1>REMAP</h1>
<div id="p-score">SCORE: 300</div>
<br>
<div id="o-score">OPPONENT'S SCORE: 300</div>
<br>
<div id="gameboard"></div>
<table id="opponent-gameboard"></table>
<div id="keyboard"></div>
......@@ -125,6 +129,20 @@
let guessNum = 0;
let oppGuessNum = 0;
// Calculate score
function getScore(guessNum, first) {
let score = 300 - (50 * (guessNum));
if (first) {
score += 100;
}
return score;
}
let oppScore = 0;
let playerScore = 0;
let playerFirst = 0;
let oppFirst = 0;
// https://support.microsoft.com/en-us/topic/how-to-build-a-virtual-keyboard-in-an-html-page-5b815ae2-c43c-c7a6-b4a2-f801b760ba3a
function submit() {
let currentGuess = document.getElementById("current").parentElement;
......@@ -205,15 +223,37 @@
for (let key of keyboard.childNodes) {
key.disabled = true;
}
if (oppFirst === 0) {
playerFirst = 1;
}
playerScore = getScore(guessNum - 1, playerFirst);
let pScore = document.getElementById("p-score");
pScore.innerHTML = `SCORE: ${playerScore}`;
});
// demo of how to change opponent's board
socket.on("update opponent", (colors) => {
let oppGuess = document.getElementById(`opponent-guess-${oppGuessNum++}`);
let correct = 0;
for (let [index, cell] of oppGuess.childNodes.entries()) {
cell.style.backgroundColor = colors[index];
if (colors[index] === 'green') {
correct++;
}
}
console.log(correct);
if (correct === 5) {
if (playerFirst === 0) {
oppFirst = 1;
}
oppScore = getScore(oppGuessNum - 1, oppFirst);
}
else {
oppScore = getScore(oppGuessNum, oppFirst);
}
let oScore = document.getElementById("o-score");
oScore.innerHTML = `OPPONENT'S SCORE: ${oppScore}`;
console.log(oppScore);
});
socket.on("incorrect word", (colors) => {
......@@ -240,6 +280,9 @@
key.disabled = true;
}
}
playerScore = getScore(guessNum, playerFirst);
let pScore = document.getElementById("p-score");
pScore.innerHTML = `SCORE: ${playerScore}`;
});
socket.on("invalid word", () => {
......
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment