public/index.html

<!DOCTYPE html>
<html>
  <head>
    <script
        src="https://code.jquery.com/jquery-3.5.1.min.js"
        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
        crossorigin="anonymous"></script>
    <script src="/static/chessBrowserJS.js"></script>
    <script src="/static/chessClient.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <script src="/static/snackBar.js"></script>
    <link rel="stylesheet" href="/static/snackbar.css"/>
    <style>
        body{
            text-align: center;
            background-color: #133337;
        }
        table{
            margin: auto;
        }
        .highlight{
            background-color: coral!important;
        }
        button{
            margin-top: 100px;
            font-size: large;
            cursor: pointer;
            color: white;
            background-color: #008F11;
            padding: 20px;
            text-align: center;
            border: none;
        }
        td{
            height: 60px;
            width: 60px;
            text-align: center;
            font-size: 48px;
            cursor: pointer;
        }
        input[type=text]{
            padding: 10px;
            font-size: large;
        }
        .light-cell{
            background-color: lightblue;
        }
        .dark-cell{
            background-color: grey;
        }
        .selected{
            background-color:orange;
        }
        h2{
            color: white;
            font-size: 48px;
            text-align: center;
            font-family: 'Courier New', Courier, monospace;
        }
        .deactive{
            display: none!important;
        }
        .pawn-promotion-piece{
            display: inline;
            font-size: 48px;
            cursor: pointer;
            padding: 10px;
            text-align: center;
        }
        #waiting{
            color: white;
        }
        
    </style>
    <title></title>
  </head>
  <body>
    <div id="board-ui">
        <h2 id="player"></h2>
        <div id="board"></div>
    </div>
    <div id="pawn-promotion" class="deactive"></div>
    <div id="welcome" class="deactive">
        <h2>Chess</h2>
        <button onclick="createRoom()">Create Game</button><br/><br/>
        <button onclick="setJoinUI()">Join A Game</button>
    </div>
    <div id="join" class="deactive">
        <input type="text" placeholder="Game ID" name="gameId"/><br/>
        <button onclick="joinRoom($('input[name=gameId]').val())">Join Game</button>
    </div>
    <div id="waiting" class="deactive">
        <h2>Waiting for a player</h2>
        <p>
            The Room Id is: <span id="roomId"></span>
        </p><br/>
        <button onclick="window.location.reload()">Leave Room</button>
    </div>
    <div id="snackbar"></div>
    <script>
        let disableMoves = false;
        let countDown;
        function setPlayer(){
            $("h2").css("display", "block");
            if(Players.white == board.player)
                $("#player").text("White's turn to Move");
            else
                $("#player").text("Black's turn to Move");
        }

        function prepForGame(){
            $("#welcome").addClass("deactive");
            $("#waiting").addClass("deactive");
            $("#board-ui").removeClass("deactive");
        }

        function pawnPromotionSetup(){
            $("#pawn-promotion").removeClass("deactive");
            let pieces = {};
            pieces[Players.white] = ['N', 'B', 'R', 'Q'];
            pieces[Players.black] = ['n', 'b', 'r', 'q'];
            pieces[getThisPlayer()].forEach(piece => {
                let element = document.createElement("div");
                element.classList.add("pawn-promotion-piece");
                element.setAttribute("id", piece);
                element.innerHTML = pieceToText[piece];
                document.getElementById("pawn-promotion").appendChild(element);
            });
            disableMoves = true;
        }

        function setBoardState(fen){
            board = new Board(fen);
            postMove(Players);
            setPlayer();
        }

        function handleVictory(){
            $("#player").text("You have won");
        }

        function handleLoss(){
            $("#player").text("You have lost");
        }

        function handleDraw(){
            disableMoves = true;
            $("#player").text("The game has been drawn");
        }

        $("#board").delegate("td", "click", function(){
            if(!disableMoves)
                processClick(socket, this.id, Players);
        });

        $("#pawn-promotion").delegate(".pawn-promotion-piece", "click", function(){
            socket.emit("promotePawn", sessionStorage.getItem("gameId"), this.id);
        });
       
        function createRoom(){
            socket.emit("roomCreate");
        }

        function joinRoom(id){
            console.log(id);
            socket.emit("roomJoin", id);
        }

        function setJoinUI(){
            $("#welcome").addClass("deactive");
            $("#join").removeClass("deactive");
            $("title").html("Enter a valid Game Id");
        }

        function setWaitingRoom(){
            $("#board-ui").addClass("deactive");
            $("#welcome").addClass("deactive");
            $("#join").addClass("deactive");
            $("#waiting").removeClass("deactive");
            $("title").html("Waiting for a room");
        }

        $(document).ready(function(){
            $("#welcome").removeClass("deactive");
            $("title").html("Start a game | Join a game");
        });

        // Socket Event Handlers
        let socket = io();

        socket.on("getGameId", function(gameId){
            sessionStorage.setItem("gameId", gameId);
            $("#roomId").text(gameId);
            setWaitingRoom();
        });

        socket.on("startGame", (fen) => {
            setBoardState(fen);
            prepForGame();
            $("title").html("Chess");
        });

        socket.on("boardUpdated", (fen) => {
            setBoardState(fen);
            if(board.player == getThisPlayer())
                showSnackBar("Your Turn");
        });

        socket.on("playerColor", (player) => {
            sessionStorage.setItem("player", player);
            console.log(player);
            if(player == Players.white)
                showSnackBar("You\'re playing as white");
            else
                showSnackBar("You\'re playing as black");
        });

        socket.on("reJoinSuccess", () => {setBoardState(fen);prepForGame();});

        socket.on("playerJoined", () => showSnackBar("A Player has joined"));

        socket.on("invalidMove", () => alert("That move isn\'t allowed"));

        socket.on("invalidRoomId", () => {
            alert("Invalid Room Id");
        });

        socket.on("startPawnPromotion", (player) => {
            if(player == getThisPlayer())
                pawnPromotionSetup();

            if(player == Players.white)
                $("#player").text("White can promote pawn");
            else
                $("#player").text("Black can promote pawn");
        });

        socket.on("successPawnPromotion", ()=>{
            $("#pawn-promotion").addClass("deactive");
            disableMoves = false;
        });

        socket.on("errorPawnPromotion", () => alert("Invalid Move"));

        socket.on("victory", (player) => {
            disableMoves = true;
            if(getThisPlayer() == player)
                handleVictory();
            else
                handleLoss();
        });

        socket.on("playerDisconnect", function(){
            showSnackBar("A player has disconnected")
        });

        socket.on("endGameDisconnect", function(){
            alert("Other player has disconnected, ending game");
            setWaitingRoom();
        });

        socket.on("startCountDown", function(){
            showSnackBar("Game will begin shortly");
            countDown = setTimeout(() => socket.emit("coutdownFinished", sessionStorage.getItem("gameId")), 5000);
        });

        socket.on("endCountDownDisconnect", function(){
            showSnackBar("The countdown has stopped");
            clearTimeout(countDown);
        });

        socket.on("draw", () => handleDraw());
      </script>
  </body>
</html>