Updated publlic_html to the latest styling

public_html/CSS/animations.css

+#ellipse:after {
+    animation: ellipse 2s infinite;
+    content: "";
+}
+
+@keyframes ellipse {
+    0%   {content: ""; }
+    25%  {content: "."; }
+    50%  {content: ".."; }
+    75%  {content: "..."; }
+    100% {content: ""; }
+}
+
+.modal {
+    display: none;
+    position: fixed; 
+    z-index: 1; 
+    padding-top: 20%; 
+    left: 0;
+    top: 0;
+    width: 100%; 
+    height: 100%; 
+    overflow: auto; 
+    background-color: rgb(0,0,0);
+    background-color: rgba(0,0,0,0.4);
+}
+
+.modal-content {
+    position: relative;
+    background-color: rgb(43, 43, 43);
+    margin: auto;
+    padding: 0;
+    border: 1px solid black;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    width: 50%;
+    min-width: 400px;
+    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
+    -webkit-animation-name: animatetop;
+    -webkit-animation-duration: 0.4s;
+    animation-name: animatetop;
+    animation-duration: 0.4s
+}
+
+@-webkit-keyframes animatetop {
+    from {top:-300px; opacity:0} 
+    to {top:0; opacity:1}
+}
+
+@keyframes animatetop {
+    from {top:-300px; opacity:0}
+    to {top:0; opacity:1}
+}
+
+.close {
+    color: white;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+    color: white;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.modal-header {
+    padding: 2px 16px;
+    background-color: rgb(43, 43, 43);
+    color: white;
+}
+
+.modal-body {
+    padding: 2px 16px;
+    color: white;
+}
+
+.modal-footer {
+    padding: 2px 16px;
+    background-color: rgb(43, 43, 43);
+    color: white;
+}
+
+.shake {
+    animation: shake 0.75s ease infinite;
+    transform-origin: 50% 50%;
+    animation-iteration-count: 1;
+}
+
+@keyframes shake {
+    0%  { transform: translate(5px, 0px)}
+    10% { transform: translate(-5px, 0px) }
+    20% { transform: translate(5px, 0px)}
+    30% { transform: translate(-5px, 0px)}
+    40% { transform: translate(5px, 0px)}
+    50% { transform: translate(-5px, 0px) }
+    60% { transform: translate(5px, 0px)}
+    70% { transform: translate(-5px, 0px) }
+    80% { transform: translate(5px, 0px)}
+    90% { transform: translate(-5px, 0px)}
+    100% { transform: translate(0px, 0px) }
+}
+.winner1 {
+    animation: winner 2.5s ease infinite;
+    transform-origin: 50% 50%;
+    animation-iteration-count: 1;
+}
+.winner2 {
+    animation: winner 2.25s ease infinite;
+    transform-origin: 50% 50%;
+    animation-iteration-count: 1;
+}
+.winner3 {
+    animation: winner 2s ease infinite;
+    transform-origin: 50% 50%;
+    animation-iteration-count: 1;
+}
+.winner4 {
+    animation: winner 1.75s ease infinite;
+    transform-origin: 50% 50%;
+    animation-iteration-count: 1;
+}
+.winner5 {
+    animation: winner 1.5s ease infinite;
+    transform-origin: 50% 50%;
+    animation-iteration-count: 1;
+}
+
+@keyframes winner {
+    0%  { transform: translate(0px, 0px)}
+    10% { transform: translate(0px, -25px) }
+    20% { transform: translate(0px, 0px)}
+    30% { transform: translate(0px, -20px)}
+    40% { transform: translate(0px, 0px)}
+    50% { transform: translate(0px, -15px) }
+    60% { transform: translate(0px, 0px)}
+    70% { transform: translate(0px, -10px) }
+    80% { transform: translate(0px, 0px)}
+    90% { transform: translate(0px, -5px)}
+    100% { transform: translate(0px, 0px) }
+}

public_html/CSS/game.css

+#gameboard {
+    display: grid;
+    grid-template-rows: repeat(6, 60px);
+    row-gap: 0px;
+}
+
+.word-guess {
+    display: grid;
+    grid-template-rows: 55px;
+    grid-template-columns: repeat(5, 55px);
+    column-gap: 5px;
+    padding-top: 0%;
+    border: none;
+}
+
+.letter-guess {
+    text-align: center;
+    text-transform: uppercase;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-size: 40px;
+    font-weight: bolder;
+}
+
+input.keyboard {
+    text-transform: uppercase;
+}
+
+.opponent-square {
+    width: 20px;
+    height: 20px;
+    border: 2px solid white;
+}
+
+#keyboard {
+    position: fixed;
+    background-color: rgb(43, 43, 43);
+    bottom: 0;
+    width: 100%;
+    text-align: center;
+    padding-top: 5px;
+}
+
+.keyboardKey {
+    height: 58px;
+    min-width: 44px;
+    max-width: 44px;
+    margin: 3px;
+    border-radius: 3px;
+    border: none;
+    color: black;
+    background: whitesmoke;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-weight: bold;
+    font-size: 24px;
+    cursor: pointer;
+    vertical-align: top;
+}
+
+.keyboardKey-wide {
+    min-width: 66px;
+    max-width: 66px;
+}

public_html/CSS/general.css

+html {
+    height: 100%;
+}
+
+body {
+    background-color: rgba(0, 0, 0, 0.9);
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+
+h1 {
+    color: white;
+    font-size: 80px;
+    font-family: serif;
+    text-align: center;
+    padding-top: 5%;
+}
+
+span, #text {
+    color: white;
+    font-family: serif;
+    text-align: center;
+}
+
+div {
+    text-align: center;
+}
+
+div.container {
+    display: flex;
+    justify-content: center;
+}
+
+button {
+    color: white;
+    background-color: black;
+    border: solid white;
+    transition-duration: .33s;
+}
+
+button:hover {
+    color: black;
+    background-color: white;
+    cursor: pointer;
+}
+
+button:disabled,
+button[disabled]{
+    color: white;
+    background-color: black;
+    border: solid white;
+}
+
+#newGameButton, #joinGameButton {
+    width: 245px; 
+    height: 80px; 
+    margin-top: 10px;
+    font-size: 30px;
+    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+    text-align: center;
+}
+
+#gameCodeInput {
+    color: white;
+    background-color: black;
+    font-size: 30px;
+    font-family: serif;
+    text-align: center;
+    text-transform: uppercase; 
+    width: 245px;
+    height: 60px;
+}
+
+#gameCodeInput::placeholder {
+    color: rgba(255, 255, 255, 0.7);
+    font-size: 20px;
+    font-family: serif;
+    text-align: center;
+}

public_html/JS/game.js

+const rows = 6;
+const cols = 5;
+let gameboard = document.getElementById("gameboard");
+for (let i = 0; i < rows; i++) {
+    let inputGroup = document.createElement("fieldset");
+    inputGroup.classList.add("word-guess");
+    inputGroup.setAttribute("id", `guess-${i}`);
+    if (i > 0) {
+        inputGroup.disabled = true;
+    }
+    for (let j = 0; j < cols; j++) {
+        let letterInput = document.createElement("input");
+        if (i + j === 0) {
+            letterInput.autofocus = true;
+            letterInput.setAttribute("id", "current");
+        }
+        if (i === 0) {
+            letterInput.required = true;
+        }
+        letterInput.setAttribute("type", "text");
+        letterInput.setAttribute("maxlength", "1");
+        // https://stackoverflow.com/questions/19508183/how-to-force-input-to-only-allow-alpha-letters
+        // https://stackoverflow.com/questions/2257070/detect-numbers-or-letters-with-jquery-javascript
+        letterInput.setAttribute("onkeydown", "return /^[a-z]|[\b]$/i.test(event.key);");
+        // https://stackoverflow.com/questions/12805803/disable-copy-paste-in-html-input-fields
+        letterInput.onpaste = e => e.preventDefault();
+        letterInput.classList.add("letter-guess");
+        inputGroup.append(letterInput);
+    }
+    gameboard.append(inputGroup);
+}
+
+let opponentGameboard = document.getElementById("opponent-gameboard");
+for (let i = 0; i < rows; i++) {
+    let row = document.createElement("tr");
+    row.classList.add("opponent-guess");
+    row.setAttribute("id", `opponent-guess-${i}`);
+    for (let j = 0; j < cols; j++) {
+        let cell = document.createElement("td");
+        cell.classList.add("opponent-square");
+        cell.style.backgroundColor = "lightgray";
+        row.append(cell);
+    }
+    opponentGameboard.append(row);
+}
+
+let keyboard = document.getElementById("keyboard");
+const keys = ["q", "w", "e", "r", "t", "y", "u", "i", "o", "p",
+"a", "s", "d", "f", "g", "h", "j", "k", "l",
+"\u23CE", "z", "x", "c", "v", "b", "n", "m", "\u232B"];
+for (let key of keys) {
+    if (key === "a" || key === "\u23CE") {
+        let newLine = document.createElement("br");
+        keyboard.append(newLine);
+    }
+    let keyButton = document.createElement("input");
+    keyButton.textContent = key;
+    keyButton.setAttribute("id", key);
+    keyButton.classList.add("keyboard");
+    keyButton.classList.add("keyboardKey")
+    keyButton.setAttribute("value", key);
+    keyButton.setAttribute("type", "button");
+    if (key === "\u23CE") {
+        keyButton.setAttribute("onclick", "submit();");
+    } else if (key === "\u232B") {
+        keyButton.setAttribute("onclick", "del();");
+    } else {
+        keyButton.setAttribute("onclick", "input(this);");
+    }
+    keyboard.append(keyButton);
+}
+
+let submitButton = document.getElementById("ENTER");
+const socket = io({
+    query: {
+        gameId: sessionStorage.getItem("gameId"),
+        playerId: sessionStorage.getItem("playerId")
+    }
+});
+let correct = false;
+let guess = "";
+let guessNum = 0;
+let oppGuessNum = 0;
+
+// calculate score
+function getScore(guessNum, first) {
+    let score = 300 - (50 * (guessNum));
+    if (first) {
+        score += 100;
+    }
+    return score;
+}
+// Handle the end of each round, could improve later
+function handleEnd(pScore, oScore) {
+    let modal = document.getElementById("my-pop");
+    let yesButton = document.getElementById("yes-button");
+    let noButton = document.getElementById("no-button");
+    let stateHeader = document.getElementById("pop-state");
+    let scoreBody = document.getElementById("pop-score");
+    let close = document.getElementsByClassName("close")[0];
+    let headerTxt;
+    let txt;
+    if (pScore > oScore) {
+        headerTxt = "WINNER!";
+    }
+    else if ( pScore < oScore) {
+        headerTxt = "LOSER!";
+    } else {
+        headerTxt = "DRAW!"
+    }
+    stateHeader.innerText = headerTxt;
+    txt =  '<div style="font-weight: bold;font-size: 18px;">STATISTICS</div><br>';
+    txt += `<div> <span style="margin-right:25px; left-padding: 100px;">YOUR SCORE: ${pScore}</span>`;
+    txt += `<span style="margin-left:25px; right-padding: 100px;">OPPONENT'S SCORE: ${oScore}</span></div><br><br>`;
+    txt += '<div style="font-weight: bold;font-size: 18px;">PLAY AGAIN?</div><br>';
+    scoreBody.innerHTML = txt;
+    setTimeout(() => {
+        modal.style.display = "block";
+    }, 3000);
+    
+    close.onclick = function() {
+        modal.style.display = "none";
+        socket.emit("done playing", sessionStorage.getItem("gameId"));
+        window.location.replace("/");
+    }
+    window.onclick = function(event) {
+        if (event.target == modal) {
+            modal.style.display = "none";
+            socket.emit("done playing", sessionStorage.getItem("gameId"));
+            window.location.replace("/");
+        }
+    }
+    noButton.onclick = function() {
+        modal.style.display = "none";
+        socket.emit("done playing", sessionStorage.getItem("gameId"));
+        window.location.replace("/");
+    }
+    yesButton.onclick = function() {
+        socket.emit("play again", sessionStorage.getItem("gameId"));
+        yesButton.disabled = true;
+        txt += '<br><div>WAITING FOR THE OTHER PLAYER</div><br>';
+        scoreBody.innerHTML = txt;
+    }
+}
+// checks for end of game
+function checkEnd(guessNum, oppGuessNum, oppCorrect, playerCorrect) {
+    if ((guessNum === 6 && oppGuessNum === 6) || 
+        (oppCorrect === 5 && guessNum === 6) ||
+        (oppCorrect === 5 && playerCorrect === 1) ||
+        (playerCorrect === 1 && oppGuessNum === 6)) {
+        sessionStorage.removeItem("oppScore");
+        sessionStorage.removeItem("oppGuessNum");
+        sessionStorage.removeItem("enteredOppColors");
+        sessionStorage.removeItem("playerScore");                  
+        sessionStorage.removeItem("playerGuessNum");               
+        sessionStorage.removeItem("enteredWords");
+        sessionStorage.removeItem("enteredPlayerColors");
+        return 1;
+    }
+    return 0;
+}
+// function for animations
+function doAnimation(element, animation) {
+    element.classList.remove(animation);
+    element.offsetWidth;
+    element.classList.add(animation);
+}
+let oppScore = 0;
+let playerScore = 0;
+let playerFirst = 0;
+let oppFirst = 0;
+let oppCorrect = 0;
+let playerCorrect = 0;
+if (sessionStorage.getItem("playerScore") !== null) {
+    playerScore = Number(sessionStorage.getItem("playerScore"));
+    document.getElementById("p-score").innerHTML = `SCORE: ${playerScore}`;
+}
+if (sessionStorage.getItem("oppScore") !== null) {
+    oppScore = Number(sessionStorage.getItem("oppScore"));
+    document.getElementById("o-score").innerHTML = `OPPONENT'S SCORE: ${oppScore}`;
+}
+if (sessionStorage.getItem("playerGuessNum") !== null) {
+    guessNum = Number(sessionStorage.getItem("playerGuessNum"));
+}
+if (sessionStorage.getItem("oppGuessNum") !== null) {
+    oppGuessNum = Number(sessionStorage.getItem("oppGuessNum"));
+}
+
+// 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;
+    for (let letter of currentGuess.childNodes) {
+        guess += letter.value;
+    }
+    if (guess.length === 5) {
+        socket.emit("submit word", guess.toLowerCase(), sessionStorage.getItem("gameId"));
+    } else {
+        // alert("Not enough letters.");
+        doAnimation(currentGuess, "shake");
+        guess = "";
+    }
+}
+
+function del() {
+    let inputBox = document.getElementById("current");
+    if (inputBox.value.length === 0 && inputBox.previousElementSibling) {
+        inputBox.previousElementSibling.value = "";
+    } else {
+        inputBox.value = "";
+    }
+    if (inputBox.previousElementSibling) {
+        inputBox.removeAttribute("id");
+        inputBox.previousElementSibling.setAttribute("id", "current");
+        inputBox.previousElementSibling.focus();
+    }
+}
+
+function input(e) {
+    let inputBox = document.getElementById("current");
+    let val = (e.type === "button" ? e.value : e.key);
+    if (inputBox.value.length === 1) {
+        if (inputBox.nextElementSibling) {
+            inputBox.nextElementSibling.value = val;
+        }
+    } else {
+        inputBox.value = val;
+    }
+    if (inputBox.nextElementSibling) {
+        inputBox.removeAttribute("id");
+        inputBox.nextElementSibling.setAttribute("id", "current");
+        inputBox.nextElementSibling.focus();
+    }
+}
+
+document.addEventListener("keydown", function (e) {
+    if (!e.repeat && guessNum < 6 && !correct) {
+        if (/^[a-z]$/i.test(e.key)) {
+            input(e);
+        } else if (e.key === "Backspace") {
+            del();
+        } else if (e.key === "Enter") {
+            submit();
+        }
+    }
+    e.preventDefault();
+    e.stopPropagation();
+});
+
+document.addEventListener("click", () => {
+    if (guessNum < 6 && !correct) {
+        document.getElementById("current").focus();
+    }
+});
+
+const colorDict = {
+    0: "gray",
+    1: "yellow",
+    2: "green"
+};
+// const rightLetterRightSpot = "green";
+// const rightLetterWrongSpot = "yellow";
+// const wrongLetterWrongSpot = "gray";
+
+// Saves and pulls the player's progress after refreshing
+let enteredWords = [];
+let enteredPlayerColors = [];
+if (sessionStorage.getItem("enteredWords") !== null && 
+    sessionStorage.getItem("enteredPlayerColors") !== null) {
+    enteredWords = sessionStorage.getItem("enteredWords").split(",");
+    enteredPlayerColors = sessionStorage.getItem("enteredPlayerColors").split(",");
+    for (let idx in enteredWords) {
+        let currentGuess = document.getElementById(`guess-${idx}`);
+        let currentColors = enteredPlayerColors[idx].split("-");
+        for (let i = 0; i < 5; i++) {
+            currentGuess.childNodes[i].value = enteredWords[idx][i];
+            currentGuess.childNodes[i].style.backgroundColor = colorDict[Number(currentColors[i])];
+            let keyButton = document.getElementById(currentGuess.childNodes[i].value);
+            keyButton.style.backgroundColor = colorDict[Number(currentColors[i])];
+            let inputBox = document.getElementById("current");
+            if (inputBox.value.length === 1) {
+                if (inputBox.nextElementSibling) {
+                    inputBox.nextElementSibling.value = enteredWords[idx][i];
+                }
+            } else {
+                inputBox.value = enteredWords[idx][i];
+            }
+            if (inputBox.nextElementSibling) {
+                inputBox.removeAttribute("id");
+                inputBox.nextElementSibling.setAttribute("id", "current");
+                inputBox.nextElementSibling.focus();
+            }
+        }
+        currentGuess.disabled = true;
+        if (enteredWords.length < 6 && enteredPlayerColors[enteredWords.length-1] !== '2-2-2-2-2') {
+            document.getElementById("current").removeAttribute("id");
+            let nextGuess = document.getElementById(`guess-${enteredWords.length}`);
+            nextGuess.disabled = false;
+            nextGuess.firstChild.setAttribute("id", "current");
+            nextGuess.firstChild.focus();
+            let children = nextGuess.children;
+            for (let child of children) {
+                child.value = '';
+            }
+        } else {
+            let keyboard = document.getElementById("keyboard");
+            for (let key of keyboard.childNodes) {
+                key.disabled = true;
+            }
+            playerCorrect = 1;
+        }
+    }
+}
+// Saves and pulls the Opponents's gameboard progress after refreshing
+let enteredOppColors = [];
+if (sessionStorage.getItem("enteredOppColors") !== null) {
+    enteredOppColors = sessionStorage.getItem("enteredOppColors").split(",");
+    for (let idx in enteredOppColors) {
+        let currentOppColors = enteredOppColors[idx].split("-");
+        let oppGuess = document.getElementById(`opponent-guess-${idx}`);
+        for (let [index, cell] of oppGuess.childNodes.entries()) {
+            cell.style.backgroundColor = colorDict[Number(currentOppColors[index])];
+        }
+        if (enteredOppColors[idx] === "2-2-2-2-2") {
+            oppCorrect = 5;
+        }
+    }
+} 
+if (checkEnd(guessNum, oppGuessNum, oppCorrect, playerCorrect)) {
+    location.reload();
+}
+socket.on("correct word", () => {
+    // alert("Correct word!");
+    let currentGuess = document.getElementById(`guess-${guessNum++}`);
+    let currentWord = '';
+    for (let letterInput of currentGuess.childNodes) {
+        letterInput.style.backgroundColor = colorDict[2];
+        let keyButton = document.getElementById(letterInput.value.toLowerCase());
+        keyButton.style.backgroundColor = colorDict[2];
+        currentWord += letterInput.value;
+    }
+    doAnimation(currentGuess.childNodes[0], "winner1");
+    doAnimation(currentGuess.childNodes[1], "winner2");
+    doAnimation(currentGuess.childNodes[2], "winner3");
+    doAnimation(currentGuess.childNodes[3], "winner4");
+    doAnimation(currentGuess.childNodes[4], "winner5");
+    enteredWords.push(currentWord.toLowerCase());
+    enteredPlayerColors.push('2-2-2-2-2');
+    currentGuess.lastChild.removeAttribute("id");
+    currentGuess.disabled = true;
+    correct = true;
+    let keyboard = document.getElementById("keyboard");
+    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.innerText = `SCORE: ${playerScore}`;
+    sessionStorage.setItem("playerScore", playerScore);
+    sessionStorage.setItem("playerGuessNum", guessNum);
+    sessionStorage.setItem("enteredWords", enteredWords.join());
+    sessionStorage.setItem("enteredPlayerColors", enteredPlayerColors.join());
+    playerCorrect = 1;
+    if (checkEnd(guessNum, oppGuessNum, oppCorrect, playerCorrect)) {
+        handleEnd(playerScore, oppScore);
+    }
+});
+
+
+socket.on("update opponent", (colors) => {
+    let oppGuess = document.getElementById(`opponent-guess-${oppGuessNum++}`);
+    oppCorrect = 0;
+    for (let [index, cell] of oppGuess.childNodes.entries()) {
+        cell.style.backgroundColor = colorDict[colors[index]];
+        if (colors[index] === 2) {
+            oppCorrect++;
+        }
+    }
+    enteredOppColors.push(colors.join('-'));
+    if (oppCorrect === 5) {
+        if (playerFirst === 0) {
+            oppFirst = 1;
+        }
+        oppScore = getScore(oppGuessNum - 1, oppFirst);
+    } else {
+        oppScore = getScore(oppGuessNum, oppFirst);
+    }
+    let oScore = document.getElementById("o-score");
+    oScore.innerText = `OPPONENT'S SCORE: ${oppScore}`;
+    sessionStorage.setItem("oppScore", oppScore);
+    sessionStorage.setItem("oppGuessNum", oppGuessNum);
+    sessionStorage.setItem("enteredOppColors", enteredOppColors.join());
+    if (checkEnd(guessNum, oppGuessNum, oppCorrect, playerCorrect)) {
+        handleEnd(playerScore, oppScore);
+    }
+});
+
+socket.on("incorrect word", (colors) => {
+    // alert("Incorrect word.");
+    let currentGuess = document.getElementById(`guess-${guessNum++}`);
+    doAnimation(document.getElementById("gameboard"), "shake");
+    let currentWord = '';
+    for (let [index, letterInput] of currentGuess.childNodes.entries()) {
+        letterInput.style.backgroundColor = colorDict[colors[index]];
+        let keyButton = document.getElementById(letterInput.value.toLowerCase());
+        if (keyButton.style.backgroundColor !== "green") {
+            if (keyButton.style.backgroundColor === "yellow" && colors[index] > 1) {
+                keyButton.style.backgroundColor = colorDict[colors[index]];
+            } else if (keyButton.style.backgroundColor === "") {
+                keyButton.style.backgroundColor = colorDict[colors[index]];
+            }
+        }
+        currentWord += letterInput.value;
+    }
+    enteredWords.push(currentWord.toLowerCase());
+    enteredPlayerColors.push(colors.join('-'));
+    currentGuess.lastChild.removeAttribute("id");
+    currentGuess.disabled = true;
+    if (guessNum < 6) {
+        let nextGuess = document.getElementById(`guess-${guessNum}`);
+        nextGuess.disabled = false;
+        nextGuess.firstChild.setAttribute("id", "current");
+        nextGuess.firstChild.focus();
+        guess = "";
+    } else {
+        // alert("No more guesses");
+        let keyboard = document.getElementById("keyboard");
+        for (let key of keyboard.childNodes) {
+            key.disabled = true;
+        }
+    }
+    playerScore = getScore(guessNum, playerFirst);
+    let pScore = document.getElementById("p-score");
+    pScore.innerText = `SCORE: ${playerScore}`;
+    sessionStorage.setItem("playerScore", playerScore);
+    sessionStorage.setItem("playerGuessNum", guessNum);
+    sessionStorage.setItem("enteredWords", enteredWords.join());
+    sessionStorage.setItem("enteredPlayerColors", enteredPlayerColors.join());
+    if (checkEnd(guessNum, oppGuessNum, oppCorrect, playerCorrect)) {
+        handleEnd(playerScore, oppScore);
+    }
+});
+socket.on("invalid word", () => {
+    // alert("Invalid word.");
+    let currentGuess = document.getElementById(`guess-${guessNum}`);
+    doAnimation(currentGuess, "shake");
+    for (let letterInput of currentGuess.childNodes) {
+        letterInput.value = "";
+    }
+    guess = "";
+    currentGuess.lastChild.removeAttribute("id");
+    currentGuess.firstChild.setAttribute("id", "current");
+    currentGuess.firstChild.focus();
+});
+socket.on("play again confirmed", (again) => {
+    if (again == 1) {
+        window.location.reload();
+    }
+});
+socket.on("Player is ready", () => {
+    let scoreBody = document.getElementById("pop-score");
+    scoreBody.innerHTML += '<br><div>THE OTHER PLAYER IS READY</div><br>';
+});
+socket.on("play again cancelled", () => {
+    let scoreBody = document.getElementById("pop-score");
+    let yesButton = document.getElementById("yes-button");
+    scoreBody.innerHTML += '<br><div>THE OTHER PLAYER WON\'T PLAY AGAIN</div><br>';
+    yesButton.disabled = true;
+});

public_html/index.html

 <!DOCTYPE html>
 <html lang="en">
+
+<link href="/CSS/animations.css" rel="stylesheet">
+<link href="/CSS/general.css" rel="stylesheet">
+
+
 <head>
   <meta charset="UTF-8">
   <title>REMAP</title>
-        <style>
-            .button {
-                border: none;
-                color: white;
-                padding: 16px 32px;
-                text-align: center;
-                text-decoration: none;
-                display: flex;
-                font-size: 16px;
-                margin: 4px 2px;
-                transition-duration: 0.4s;
-                cursor: pointer;
-            }
-            .buttons {
-                background-color: white;
-                flex: 1;
-                color: black;
-                border: 2px solid #4CAF50;
-            }
-            .buttons:hover {
-                background-color: #4CAF50;
-                flex: 1;
-                color: white;
-            }
-            #waitingScreen {
-                display: none;
-            }
-        </style>
 </head>
+
+
 <body>
-        <div id="homeScreen">
   <h1>REMAP</h1>
-            <button type="submit" class="button buttons" id="newGameButton">Create New Game</button>
-            <div>OR</div>
-            <div class="form-group">
-                <input type="text" placeholder="Enter Game Code" id="gameCodeInput"/>
+
+  <div id="homeScreen" >
+    <div>
+      <button id="newGameButton">CREATE GAME</button>
+    </div>
+
+    <div id="text" style="font-size: 50px; margin: 20px">OR</div>
+
+    <div>
+      <input type="text" id="gameCodeInput" placeholder="Enter Game Code" maxlength="5">
+    </div>
+
+    <div>
+      <button id="joinGameButton">JOIN GAME</button>
     </div>
-            <button type="submit" class="button buttons" id="joinGameButton">Join Game</button>
   </div>
-        <div id="waitingScreen">
-            <div style="display: flex; justify-content: center; margin: 0 auto;">
-                <h1>Your room code is: <span id="gameCodeDisplay"></span></h1>
+
+  <div id="waitingScreen" style="display: none;">
+    <div>
+      <div id="text" style="font-size: 60px; margin: 30px">Your room code is: <span id="gameCodeDisplay"></span></h1>
     </div>
-            <h2 style="display: flex; justify-content: center; margin: 0 auto;">Waiting for more players to join.</h2>
+
+    <br>
+
+    <div id="text" style="font-size: 20px;">Waiting for more players to join<span id="ellipse"></span>
   </div>
+
   <script src="/socket.io/socket.io.js"></script>
-        <script src="client.js"></script>
+  <script src="/JS/client.js"></script>
+
 </body>
+
 </html>