Update bg3.js

Amit30swgoh · Sep 26, 2024 · bbdbbdd · bbdbbdd
1 parent ac4e921
commit bbdbbdd
Showing 1 changed file with 51 additions and 24 deletions.
diff --git a/26.9-backgammon/bg3.js b/26.9-backgammon/bg3.js
@@ -6,25 +6,30 @@ document.addEventListener("DOMContentLoaded", () => {
     let currentPlayer = "yellow";
     let diceRolls = [];
     let activePiece = null;
-    const playerPieces = { yellow: [], white: [] };
     const maxBoardPositions = 24;
 
     // Dice Roll Functionality
     function rollDice() {
-        const dice1 = Math.floor(Math.random() * 6) + 1;
-        const dice2 = Math.floor(Math.random() * 6) + 1;
+        const dice1 = getRandomDiceRoll();
+        const dice2 = getRandomDiceRoll();
         diceRolls = [dice1, dice2];
         updateDiceDisplay(dice1, dice2);
         enablePieceSelection();
     }
 
+    // Generate random dice roll
+    function getRandomDiceRoll() {
+        return Math.floor(Math.random() * 6) + 1;
+    }
+
+    // Update dice display
     function updateDiceDisplay(dice1, dice2) {
         document.getElementById("dice1").textContent = dice1;
         document.getElementById("dice2").textContent = dice2;
         animateDiceRolls();
     }
 
-    // Animate the dice rolls visually
+    // Animate dice rolls
     function animateDiceRolls() {
         const diceElements = [document.getElementById("dice1"), document.getElementById("dice2")];
         diceElements.forEach(dice => {
@@ -35,7 +40,7 @@ document.addEventListener("DOMContentLoaded", () => {
         });
     }
 
-    // Piece Selection - allowing the player to select one of their pieces
+    // Enable piece selection
     function enablePieceSelection() {
         const pieces = document.querySelectorAll(`.${currentPlayer}-piece`);
         pieces.forEach(piece => {
@@ -54,36 +59,43 @@ document.addEventListener("DOMContentLoaded", () => {
         const currentPosition = getCurrentPosition(piece);
         diceRolls.forEach(dice => {
             const newPosition = calculateNewPosition(currentPosition, dice);
-            if (newPosition >= 0 && newPosition < maxBoardPositions) {
+            if (isValidPosition(newPosition)) {
                 const target = board.children[newPosition];
                 highlightTargetPosition(target);
             }
         });
     }
 
+    // Get the current position of a piece
     function getCurrentPosition(piece) {
         return Array.from(board.children).indexOf(piece.parentElement);
     }
 
+    // Calculate new position based on dice roll
     function calculateNewPosition(currentPosition, diceRoll) {
         return currentPlayer === "yellow"
             ? currentPosition + diceRoll
             : currentPosition - diceRoll;
     }
 
+    // Validate new position
+    function isValidPosition(newPosition) {
+        return newPosition >= 0 && newPosition < maxBoardPositions;
+    }
+
+    // Highlight the target position
     function highlightTargetPosition(target) {
         target.style.border = "2px solid #00ff00";
         target.addEventListener("click", () => movePieceToTarget(target));
     }
 
+    // Move piece to target position
     function movePieceToTarget(target) {
         if (activePiece && target) {
             target.appendChild(activePiece);
-            activePiece.style.transition = "transform 0.5s ease";
-            activePiece.style.transform = "scale(1.1)";
+            animatePieceMove(activePiece);
 
             setTimeout(() => {
-                activePiece.style.transform = "scale(1)";
                 resetHighlights();
                 activePiece = null;
                 diceRolls.shift(); // Use up the dice
@@ -92,23 +104,42 @@ document.addEventListener("DOMContentLoaded", () => {
         }
     }
 
-    // Reset highlights after a move
+    // Animate piece movement
+    function animatePieceMove(piece) {
+        piece.style.transition = "transform 0.5s ease";
+        piece.style.transform = "scale(1.1)";
+        setTimeout(() => {
+            piece.style.transform = "scale(1)";
+        }, 500);
+    }
+
+    // Reset highlighted positions
     function resetHighlights() {
         const triangles = document.querySelectorAll(".triangle");
         triangles.forEach(triangle => {
             triangle.style.border = "none";
         });
     }
 
-    // End the player's turn and switch to the next player
+    // End turn and switch players
     function endTurn() {
         currentPlayer = currentPlayer === "yellow" ? "white" : "yellow";
         alert(`${currentPlayer === "yellow" ? 'Yellow' : 'White'}'s Turn!`);
         showPlayerTooltip();
     }
 
-    // Show a tooltip at the beginning of each turn
+    // Show a tooltip for the current player
     function showPlayerTooltip() {
+        const tooltip = createTooltip(`${currentPlayer === "yellow" ? 'Yellow' : 'White'}'s Turn! Roll the dice to continue.`);
+        document.body.appendChild(tooltip);
+
+        setTimeout(() => {
+            tooltip.remove();
+        }, 3000);
+    }
+
+    // Create tooltip element
+    function createTooltip(message) {
         const tooltip = document.createElement("div");
         tooltip.id = "player-tooltip";
         tooltip.style.position = "absolute";
@@ -121,25 +152,21 @@ document.addEventListener("DOMContentLoaded", () => {
         tooltip.style.borderRadius = "5px";
         tooltip.style.boxShadow = "0 0 10px rgba(0,0,0,0.5)";
         tooltip.style.fontSize = "1.2rem";
-        tooltip.textContent = `${currentPlayer === "yellow" ? 'Yellow' : 'White'}'s Turn! Roll the dice to continue.`;
+        tooltip.textContent = message;
 
-        document.body.appendChild(tooltip);
-
-        setTimeout(() => {
-            tooltip.remove();
-        }, 3000);
+        return tooltip;
     }
 
-    // Rule Validation - Checking if moves are legal
+    // Validate moves based on current rules
     function isValidMove(piece, targetPosition) {
         const currentPosition = getCurrentPosition(piece);
         if (currentPlayer === "yellow" && currentPosition >= targetPosition) return false;
         if (currentPlayer === "white" && currentPosition <= targetPosition) return false;
-        // Add more logic for valid moves here...
+        // Additional move validation logic can go here
         return true;
     }
 
-    // Detect when a player wins
+    // Check win condition
     function checkWinCondition() {
         const yellowPieces = document.querySelectorAll(".yellow-piece");
         const whitePieces = document.querySelectorAll(".white-piece");
@@ -153,14 +180,14 @@ document.addEventListener("DOMContentLoaded", () => {
         }
     }
 
-    // Reset the game board after a win
+    // Reset the game after a win
     function resetGame() {
         location.reload(); // Reload the page to reset the game
     }
 
-    // Add event listener for dice roll button
+    // Add event listener for rolling dice
     rollBtn.addEventListener("click", rollDice);
 
-    // Initialize the tooltip for the first player
+    // Show initial player tooltip
     showPlayerTooltip();
 });