UI & SFX

index.html

@@ -90,6 +90,9 @@
     <div class="center">
         <div id="join-menu" class="join-menu"><input type="text" id="room-id" placeholder="Room ID"><button
                 id="join-submit">Join</button></div>
+        <h2 id="stats"></h2>
+        <h2 id="clock"></h2>
+        <h4 id="turn"></h4>
     </div>
     <div class="center">
         <canvas class="game" id="canvas"></canvas>
@@ -113,11 +116,17 @@
             let mHouse = [0, 0];
             const textures = {};
 
+            const piecemoveSound = new Audio("/static/piecemove.mp3");
+            //const endgameSound = new Audio("/static/endgame.mp3");
+
             let color = 0;
             let turn = 0;
+            let state = -1;
+            let start_time = undefined;
             let ready = false;
             let letterMap = '        ';
             let numberMap = '        ';
+            let oldBoard = undefined;
             let board = undefined;
             let UID = undefined;
             let ROOM_ID = undefined;
@@ -125,6 +134,82 @@
             let selected = undefined;
             let moves = [];
 
+            function handleVisibilityChange() {
+                if (document.visibilityState === 'visible') {
+                    let link = document.querySelector("link[rel~='icon']");
+
+                    link.href = "/favicon.ico";
+                    link.type = "image/x-icon";
+                }
+            }
+
+            document.addEventListener('visibilitychange', handleVisibilityChange);
+
+            function boardOnChange() {
+                if (JSON.stringify(board) !== JSON.stringify(oldBoard)) {
+                    if (document.visibilityState !== 'visible') {
+                        let link = document.querySelector("link[rel~='icon']");
+
+                        link.href = "/favicon_update.ico";
+                        link.type = "image/x-icon";
+                    }
+                    console.log("PLAYING SOUND!!");
+                    piecemoveSound.currentTime = Math.round(Math.random() * 4) * 0.5;
+                    piecemoveSound.play()
+                        .then(() => {
+                            setTimeout(() => {
+                                piecemoveSound.pause();
+                            }, 400);
+                        })
+                        .catch(error => {
+                            console.error("Playback failed:", error);
+                        });
+                    oldBoard = structuredClone(board);
+                }
+            }
+
+            function setUI() {
+                if (ready) {
+                    if (state == -1) {
+                        document.getElementById('stats').textCotnent = "";
+                        const now = new Date();
+                        const differenceMs = Math.abs(start_time.getTime() - now.getTime());
+                        const totalSeconds = Math.floor(differenceMs / 1000);
+
+                        const minutes = Math.floor(totalSeconds / 60);
+                        const seconds = totalSeconds % 60;
+
+                        const paddedMinutes = String(minutes).padStart(2, '0');
+                        const paddedSeconds = String(seconds).padStart(2, '0');
+
+                        document.getElementById('clock').textCotnent = `${paddedMinutes}:${paddedSeconds}`;
+
+                        if (UID === undefined || turn != color) {
+                            if (turn == 0) {
+                                document.getElementById('turn').textCotnent = "White's Turn";
+                            } else if (turn == 0) {
+                                document.getElementById('turn').textCotnent = "Black's Turn";
+                            }
+                        } else if (turn == color) {
+                            document.getElementById('turn').textCotnent = "Your Turn";
+                        }
+                    } else {
+                        document.getElementById('turn').textCotnent = "";
+                        if (state == 0) {
+                            document.getElementById('stats').textCotnent = "Tie";
+                        } else if (state == 1) {
+                            document.getElementById('stats').textCotnent = "White Won";
+                        } else if (state == 2) {
+                            document.getElementById('stats').textCotnent = "Black Won";
+                        }
+                    }
+                } else {
+                    document.getElementById('turn').textCotnent = "";
+                    document.getElementById('clock').textCotnent = "";
+                    document.getElementById('stats').textCotnent = "Waiting for Opponent";
+                }
+            }
+
             canvas.addEventListener('mousemove', (e) => {
                 const rect = canvas.getBoundingClientRect();
                 const x = ((e.clientX - rect.left) / rect.width) * width;