Update bg1.js

Amit30swgoh · Sep 26, 2024 · a2bc98a · a2bc98a
1 parent e640467
commit a2bc98a
Showing 1 changed file with 36 additions and 30 deletions.
diff --git a/26.9-backgammon/bg1.js b/26.9-backgammon/bg1.js
@@ -1,9 +1,15 @@
 // bg1.js - Enhancing UI with animations and 3D effects
 
 document.addEventListener("DOMContentLoaded", () => {
-    // 3D Rotating Board Animation
     const board = document.getElementById("backgammon-board");
+    const leftBar = document.getElementById("left-bar");
+    const rightBar = document.getElementById("right-bar");
+    const dice1 = document.getElementById("dice1");
+    const dice2 = document.getElementById("dice2");
+    const rollBtn = document.getElementById("roll-btn");
+    let currentPlayer = "yellow";
 
+    // 3D Rotating Board Animation
     function addBoardRotation() {
         board.style.transition = "transform 1s ease-in-out";
         board.style.transformStyle = "preserve-3d";
@@ -14,65 +20,65 @@ document.addEventListener("DOMContentLoaded", () => {
         board.style.transform = "rotateX(0deg) rotateY(0deg)";
     }
 
+    // Event listeners for board rotation
     board.addEventListener("mouseenter", addBoardRotation);
     board.addEventListener("mouseleave", resetBoardRotation);
 
-    // Highlight active player's side
-    let currentPlayer = "yellow";
-    const leftBar = document.getElementById("left-bar");
-    const rightBar = document.getElementById("right-bar");
-
+    // Highlight the active player's side
     function highlightActivePlayer() {
+        const yellowShadow = "0px 0px 20px 10px rgba(255, 204, 0, 0.8)";
+        const whiteShadow = "0px 0px 20px 10px rgba(255, 255, 255, 0.8)";
         if (currentPlayer === "yellow") {
-            leftBar.style.boxShadow = "0px 0px 20px 10px rgba(255, 204, 0, 0.8)";
+            leftBar.style.boxShadow = yellowShadow;
             rightBar.style.boxShadow = "none";
         } else {
-            rightBar.style.boxShadow = "0px 0px 20px 10px rgba(255, 255, 255, 0.8)";
+            rightBar.style.boxShadow = whiteShadow;
             leftBar.style.boxShadow = "none";
         }
     }
 
     // Animate dice roll
-    const dice1 = document.getElementById("dice1");
-    const dice2 = document.getElementById("dice2");
-
     function animateDiceRoll(diceElement) {
         diceElement.style.transition = "transform 0.5s ease";
         diceElement.style.transform = "rotateX(360deg)";
+        setTimeout(() => {
+            diceElement.style.transform = "rotateX(0)";
+        }, 500);
     }
 
+    // Event listeners for dice roll animations
     dice1.addEventListener("click", () => animateDiceRoll(dice1));
     dice2.addEventListener("click", () => animateDiceRoll(dice2));
 
-    // Pieces Animation - Adding drag & drop for a more interactive interface
-    const pieces = document.querySelectorAll(".piece");
-
-    pieces.forEach(piece => {
-        piece.style.transition = "transform 0.3s ease, box-shadow 0.3s ease";
-        piece.addEventListener("mouseenter", () => {
-            piece.style.transform = "scale(1.1)";
-            piece.style.boxShadow = "0px 5px 10px rgba(0, 0, 0, 0.5)";
+    // Pieces Animation - Interactive hover effects
+    function animatePieces() {
+        const pieces = document.querySelectorAll(".piece");
+        pieces.forEach(piece => {
+            piece.style.transition = "transform 0.3s ease, box-shadow 0.3s ease";
+            piece.addEventListener("mouseenter", () => {
+                piece.style.transform = "scale(1.1)";
+                piece.style.boxShadow = "0px 5px 10px rgba(0, 0, 0, 0.5)";
+            });
+            piece.addEventListener("mouseleave", () => {
+                piece.style.transform = "scale(1)";
+                piece.style.boxShadow = "none";
+            });
         });
+    }
 
-        piece.addEventListener("mouseleave", () => {
-            piece.style.transform = "scale(1)";
-            piece.style.boxShadow = "none";
-        });
-    });
+    // Call to animate pieces (run when pieces are initialized)
+    animatePieces();
 
     // Roll button 3D bounce effect
-    const rollBtn = document.getElementById("roll-btn");
-
     rollBtn.style.transition = "transform 0.5s ease";
     rollBtn.addEventListener("mousedown", () => {
         rollBtn.style.transform = "scale(0.9)";
     });
-
     rollBtn.addEventListener("mouseup", () => {
         rollBtn.style.transform = "scale(1)";
     });
 
-    // Board background color change on piece moves (color-changing theme)
+    // Board background color change on click
     function changeBoardColor() {
         const colors = ["#2f2f2f", "#3e3e3e", "#4d4d4d"];
         const randomColor = colors[Math.floor(Math.random() * colors.length)];
@@ -81,12 +87,12 @@ document.addEventListener("DOMContentLoaded", () => {
 
     board.addEventListener("click", changeBoardColor);
 
-    // Function to toggle active player
+    // Toggle the active player and highlight the respective side
     function togglePlayer() {
         currentPlayer = currentPlayer === "yellow" ? "white" : "yellow";
         highlightActivePlayer();
     }
 
-    // Initial highlight
+    // Initial highlight of active player
     highlightActivePlayer();
 });