Ludo Game<\/title>\n\n <style>\n body {\n font-family: sans-serif;\n display: flex;\n flex-direction: column;\n align-items: center;\n background-color: #f0f0f0;\n margin: 0;\n padding: 20px;\n }\n\n h1 {\n color: #333;\n }\n\n .game-container {\n display: flex;\n flex-wrap: wrap; \/* Allow controls to wrap below board on small screens *\/\n justify-content: center; \/* Center items when wrapped *\/\n gap: 30px;\n align-items: flex-start;\n }\n\n .board {\n width: 600px; \/* Adjust size as needed *\/\n height: 600px;\n min-width: 600px; \/* Prevent shrinking too much *\/\n min-height: 600px;\n background-color: #fff;\n border: 3px solid #555;\n position: relative; \/* Crucial for positioning cells *\/\n display: grid;\n \/* Precise grid for Ludo board layout *\/\n grid-template-columns: repeat(15, 1fr);\n grid-template-rows: repeat(15, 1fr);\n }\n\n \/* --- Player Base Styling --- *\/\n .player-base {\n \/* Use grid areas for bases *\/\n border: 2px solid #888;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 5px; \/* Add some padding *\/\n }\n .base-inner {\n width: 80%; \/* Make inner slightly smaller *\/\n height: 80%;\n background-color: rgba(255, 255, 255, 0.6); \/* Slightly transparent white *\/\n border-radius: 10px;\n display: grid;\n grid-template-columns: 1fr 1fr;\n grid-template-rows: 1fr 1fr;\n gap: 5px;\n padding: 5px;\n justify-items: center;\n align-items: center;\n }\n\n .red-base { grid-area: 1 \/ 1 \/ 7 \/ 7; background-color: #ffcccc; } \/* Rows 1-6, Cols 1-6 *\/\n .green-base { grid-area: 1 \/ 10 \/ 7 \/ 16; background-color: #ccffcc; } \/* Rows 1-6, Cols 10-15 *\/\n .yellow-base { grid-area: 10 \/ 10 \/ 16 \/ 16; background-color: #ffffcc; } \/* Rows 10-15, Cols 10-15 *\/\n .blue-base { grid-area: 10 \/ 1 \/ 16 \/ 7; background-color: #ccccff; } \/* Rows 10-15, Cols 1-6 *\/\n\n\n \/* --- Center Home --- *\/\n .center-home {\n grid-area: 7 \/ 7 \/ 10 \/ 10; \/* Rows 7-9, Cols 7-9 *\/\n background-color: #eee;\n position: relative;\n overflow: hidden; \/* Clip the triangles *\/\n display: flex; \/* Use flexbox for easier centering if needed *\/\n justify-content: center;\n align-items: center;\n }\n .home-triangle {\n position: absolute;\n width: 0;\n height: 0;\n border-style: solid;\n }\n \/* Position and shape triangles (adjust size relative to center home) *\/\n .red-home-path { border-width: 0 60px 120px 60px; border-color: transparent transparent #ff7777 transparent; top: 0; left: 50%; transform: translateX(-50%); }\n .green-home-path { border-width: 60px 0 60px 120px; border-color: transparent transparent transparent #77ff77; top: 50%; right: 0; transform: translateY(-50%); }\n .yellow-home-path { border-width: 120px 60px 0 60px; border-color: #ffff77 transparent transparent transparent; bottom: 0; left: 50%; transform: translateX(-50%); }\n .blue-home-path { border-width: 60px 120px 60px 0; border-color: transparent #7777ff transparent transparent; top: 50%; left: 0; transform: translateY(-50%); }\n\n\n \/* --- Cell Styling --- *\/\n .cell {\n border: 1px solid #ccc;\n box-sizing: border-box; \/* Include border in size *\/\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 12px; \/* Slightly larger *\/\n font-weight: bold;\n position: relative; \/* For token positioning inside *\/\n overflow: hidden; \/* Prevent tokens overflowing visually *\/\n background-color: white; \/* Default *\/\n }\n\n \/* --- Path Cell Positioning (CRITICAL - Needs full implementation) --- *\/\n \/* This requires manually placing each cell using grid-column and grid-row *\/\n \/* Example placements (replace with YOUR full layout) *\/\n\n \/* Red Path Start & Home Lane *\/\n #cell-0 { grid-column: 7; grid-row: 2; background-color: #ffdddd; } \/* Red Start *\/\n #cell-1 { grid-column: 7; grid-row: 3; }\n #cell-2 { grid-column: 7; grid-row: 4; }\n #cell-3 { grid-column: 7; grid-row: 5; }\n #cell-4 { grid-column: 7; grid-row: 6; }\n #cell-5 { grid-column: 6; grid-row: 7; }\n #cell-6 { grid-column: 5; grid-row: 7; }\n #cell-7 { grid-column: 4; grid-row: 7; }\n #cell-8 { grid-column: 3; grid-row: 7; }\n #cell-9 { grid-column: 2; grid-row: 7; }\n #cell-10 { grid-column: 1; grid-row: 7; }\n #cell-11 { grid-column: 1; grid-row: 8; } \/* Turn towards Green *\/\n #cell-12 { grid-column: 1; grid-row: 9; } \/* Next to Green Start *\/\n \/* Red Home Path *\/\n #cell-red-h1 { grid-column: 8; grid-row: 2; background-color: #ffaaaa; }\n #cell-red-h2 { grid-column: 8; grid-row: 3; background-color: #ffaaaa; }\n #cell-red-h3 { grid-column: 8; grid-row: 4; background-color: #ffaaaa; }\n #cell-red-h4 { grid-column: 8; grid-row: 5; background-color: #ffaaaa; }\n #cell-red-h5 { grid-column: 8; grid-row: 6; background-color: #ffaaaa; }\n #cell-red-h6 { grid-column: 8; grid-row: 7; background-color: #ff8888; } \/* Red Finish *\/\n #cell-51 { grid-column: 7; grid-row: 1; } \/* Cell before red home path *\/\n\n\n \/* Green Path Start & Home Lane *\/\n #cell-13 { grid-column: 2; grid-row: 9; background-color: #ddffdd; } \/* Green Start *\/\n #cell-14 { grid-column: 3; grid-row: 9; }\n #cell-15 { grid-column: 4; grid-row: 9; }\n #cell-16 { grid-column: 5; grid-row: 9; }\n #cell-17 { grid-column: 6; grid-row: 9; }\n #cell-18 { grid-column: 7; grid-row: 10; }\n #cell-19 { grid-column: 7; grid-row: 11; }\n #cell-20 { grid-column: 7; grid-row: 12; }\n #cell-21 { grid-column: 7; grid-row: 13; }\n #cell-22 { grid-column: 7; grid-row: 14; }\n #cell-23 { grid-column: 7; grid-row: 15; }\n #cell-24 { grid-column: 8; grid-row: 15; } \/* Turn towards Yellow *\/\n #cell-25 { grid-column: 9; grid-row: 15; } \/* Next to Yellow Start *\/\n \/* Green Home Path *\/\n #cell-green-h1 { grid-column: 2; grid-row: 8; background-color: #aaffaa; }\n #cell-green-h2 { grid-column: 3; grid-row: 8; background-color: #aaffaa; }\n #cell-green-h3 { grid-column: 4; grid-row: 8; background-color: #aaffaa; }\n #cell-green-h4 { grid-column: 5; grid-row: 8; background-color: #aaffaa; }\n #cell-green-h5 { grid-column: 6; grid-row: 8; background-color: #aaffaa; }\n #cell-green-h6 { grid-column: 7; grid-row: 8; background-color: #88ff88; } \/* Green Finish *\/\n #cell-12 { grid-column: 1; grid-row: 9; } \/* Cell before green home path *\/\n\n\n \/* Yellow Path Start & Home Lane *\/\n #cell-26 { grid-column: 9; grid-row: 14; background-color: #ffffdd; } \/* Yellow Start *\/\n #cell-27 { grid-column: 9; grid-row: 13; }\n #cell-28 { grid-column: 9; grid-row: 12; }\n #cell-29 { grid-column: 9; grid-row: 11; }\n #cell-30 { grid-column: 9; grid-row: 10; }\n #cell-31 { grid-column: 10; grid-row: 9; }\n #cell-32 { grid-column: 11; grid-row: 9; }\n #cell-33 { grid-column: 12; grid-row: 9; }\n #cell-34 { grid-column: 13; grid-row: 9; }\n #cell-35 { grid-column: 14; grid-row: 9; }\n #cell-36 { grid-column: 15; grid-row: 9; }\n #cell-37 { grid-column: 15; grid-row: 8; } \/* Turn towards Blue *\/\n #cell-38 { grid-column: 15; grid-row: 7; } \/* Next to Blue Start *\/\n \/* Yellow Home Path *\/\n #cell-yellow-h1 { grid-column: 8; grid-row: 14; background-color: #ffffaa; }\n #cell-yellow-h2 { grid-column: 8; grid-row: 13; background-color: #ffffaa; }\n #cell-yellow-h3 { grid-column: 8; grid-row: 12; background-color: #ffffaa; }\n #cell-yellow-h4 { grid-column: 8; grid-row: 11; background-color: #ffffaa; }\n #cell-yellow-h5 { grid-column: 8; grid-row: 10; background-color: #ffffaa; }\n #cell-yellow-h6 { grid-column: 8; grid-row: 9; background-color: #ffff88; } \/* Yellow Finish *\/\n #cell-25 { grid-column: 9; grid-row: 15; } \/* Cell before yellow home path *\/\n\n\n \/* Blue Path Start & Home Lane *\/\n #cell-39 { grid-column: 14; grid-row: 7; background-color: #ddddff; } \/* Blue Start *\/\n #cell-40 { grid-column: 13; grid-row: 7; }\n #cell-41 { grid-column: 12; grid-row: 7; }\n #cell-42 { grid-column: 11; grid-row: 7; }\n #cell-43 { grid-column: 10; grid-row: 7; }\n #cell-44 { grid-column: 9; grid-row: 6; }\n #cell-45 { grid-column: 9; grid-row: 5; }\n #cell-46 { grid-column: 9; grid-row: 4; }\n #cell-47 { grid-column: 9; grid-row: 3; }\n #cell-48 { grid-column: 9; grid-row: 2; }\n #cell-49 { grid-column: 9; grid-row: 1; }\n #cell-50 { grid-column: 8; grid-row: 1; } \/* Turn towards Red *\/\n \/* #cell-51 defined with Red path *\/\n \/* Blue Home Path *\/\n #cell-blue-h1 { grid-column: 14; grid-row: 8; background-color: #aaaaff; }\n #cell-blue-h2 { grid-column: 13; grid-row: 8; background-color: #aaaaff; }\n #cell-blue-h3 { grid-column: 12; grid-row: 8; background-color: #aaaaff; }\n #cell-blue-h4 { grid-column: 11; grid-row: 8; background-color: #aaaaff; }\n #cell-blue-h5 { grid-column: 10; grid-row: 8; background-color: #aaaaff; }\n #cell-blue-h6 { grid-column: 9; grid-row: 8; background-color: #8888ff; } \/* Blue Finish *\/\n #cell-38 { grid-column: 15; grid-row: 7; } \/* Cell before blue home path *\/\n\n\n \/* --- Safe Spots --- *\/\n \/* Define safe spots (adjust cell IDs as per standard Ludo) *\/\n #cell-0, #cell-8, #cell-13, #cell-21, #cell-26, #cell-34, #cell-39, #cell-47 {\n \/* Using background image for star *\/\n background-image: url('data:image\/svg+xml;utf8,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" fill=\"gray\" class=\"bi bi-star-fill\" viewBox=\"0 0 16 16\"><path d=\"M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z\"\/><\/svg>');\n background-repeat: no-repeat;\n background-position: center;\n background-size: 60%;\n }\n \/* Ensure start cells also have their color *\/\n #cell-0 { background-color: #ffdddd; }\n #cell-13 { background-color: #ddffdd; }\n #cell-26 { background-color: #ffffdd; }\n #cell-39 { background-color: #ddddff; }\n\n\n \/* --- Token Styling --- *\/\n .token {\n width: 70%;\n height: 70%;\n border-radius: 50%;\n border: 1px solid #333;\n box-shadow: 1px 1px 3px rgba(0,0,0,0.5);\n position: absolute; \/* Allow positioning within cells\/base *\/\n \/* Centering within the parent cell\/base spot *\/\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n cursor: pointer;\n transition: all 0.3s ease; \/* For movement animation *\/\n z-index: 10; \/* Tokens on top *\/\n }\n .token.red { background-color: red; }\n .token.green { background-color: limegreen; }\n .token.yellow { background-color: gold; }\n .token.blue { background-color: dodgerblue; }\n\n .token.selectable { \/* Style for tokens that can be moved *\/\n outline: 3px solid black;\n transform: translate(-50%, -50%) scale(1.1); \/* Combine transforms *\/\n z-index: 11; \/* Bring selectable token slightly forward *\/\n }\n\n \/* Stacking indicator (adjust appearance as needed) *\/\n .token.stacked-2 {\n box-shadow: 3px 3px 5px rgba(0,0,0,0.6);\n border-width: 2px;\n \/* Optional: slightly offset stacked tokens *\/\n \/* transform: translate(-55%, -55%); *\/\n }\n .token.stacked-3, .token.stacked-4 { \/* Treat 3 and 4 the same visually *\/\n box-shadow: 5px 5px 7px rgba(0,0,0,0.7);\n border-width: 3px;\n \/* Optional: further offset *\/\n \/* transform: translate(-60%, -60%); *\/\n }\n \/* Ensure base tokens aren't affected by stacking styles initially *\/\n .base-inner .token {\n position: relative; \/* Override absolute for grid layout in base *\/\n top: auto;\n left: auto;\n transform: none; \/* Reset transform *\/\n }\n\n\n \/* --- Controls Styling --- *\/\n .controls {\n display: flex;\n flex-direction: column;\n align-items: center;\n background-color: #ddd;\n padding: 20px;\n border-radius: 8px;\n min-width: 150px;\n box-shadow: 2px 2px 5px rgba(0,0,0,0.2);\n }\n\n .player-indicator {\n font-size: 1.2em;\n font-weight: bold;\n margin-bottom: 15px;\n padding: 5px 10px;\n border-radius: 4px;\n color: white;\n text-shadow: 1px 1px 2px rgba(0,0,0,0.5);\n }\n #current-player.red { background-color: red; }\n #current-player.green { background-color: limegreen; }\n #current-player.yellow { background-color: gold; color: #333; text-shadow: none; } \/* Adjust text color for yellow *\/\n #current-player.blue { background-color: dodgerblue; }\n\n\n .dice-area {\n display: flex;\n flex-direction: column;\n align-items: center;\n margin-bottom: 15px;\n }\n\n .dice {\n width: 60px;\n height: 60px;\n background-color: white;\n border: 2px solid #555;\n border-radius: 5px;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 2em;\n font-weight: bold;\n margin-bottom: 10px;\n color: #333;\n }\n\n #roll-dice-btn {\n padding: 10px 20px;\n font-size: 1em;\n cursor: pointer;\n background-color: #4CAF50;\n color: white;\n border: none;\n border-radius: 5px;\n transition: background-color 0.2s;\n }\n #roll-dice-btn:hover:not(:disabled) {\n background-color: #45a049;\n }\n #roll-dice-btn:disabled {\n background-color: #aaa;\n cursor: not-allowed;\n }\n\n .message-area {\n margin-top: 15px;\n font-style: italic;\n color: #555;\n text-align: center;\n min-height: 3em; \/* Reserve space *\/\n width: 100%;\n }\n\n <\/style>\n <\/head>\n<body>\n <h1>Ludo Game<\/h1>\n\n <div class=\"game-container\">\n <div class=\"board\">\n <div class=\"player-base red-base\" id=\"base-red\">\n <div class=\"base-inner\">\n <\/div>\n <\/div>\n <div class=\"player-base green-base\" id=\"base-green\">\n <div class=\"base-inner\">\n <\/div>\n <\/div>\n <div class=\"player-base yellow-base\" id=\"base-yellow\">\n <div class=\"base-inner\">\n <\/div>\n <\/div>\n <div class=\"player-base blue-base\" id=\"base-blue\">\n <div class=\"base-inner\">\n <\/div>\n <\/div>\n\n <div class=\"center-home\">\n <div class=\"home-triangle red-home-path\"><\/div>\n <div class=\"home-triangle green-home-path\"><\/div>\n <div class=\"home-triangle yellow-home-path\"><\/div>\n <div class=\"home-triangle blue-home-path\"><\/div>\n <\/div>\n\n <div class=\"cell path\" id=\"cell-0\">S<\/div> <div class=\"cell path\" id=\"cell-1\"><\/div> <div class=\"cell path\" id=\"cell-2\"><\/div> <div class=\"cell path\" id=\"cell-3\"><\/div> <div class=\"cell path\" id=\"cell-4\"><\/div> <div class=\"cell path\" id=\"cell-5\"><\/div> <div class=\"cell path\" id=\"cell-6\"><\/div> <div class=\"cell path\" id=\"cell-7\"><\/div> <div class=\"cell path\" id=\"cell-8\">S<\/div> <div class=\"cell path\" id=\"cell-9\"><\/div> <div class=\"cell path\" id=\"cell-10\"><\/div> <div class=\"cell path\" id=\"cell-11\"><\/div> <div class=\"cell path\" id=\"cell-12\"><\/div>\n <div class=\"cell path\" id=\"cell-13\">S<\/div> <div class=\"cell path\" id=\"cell-14\"><\/div> <div class=\"cell path\" id=\"cell-15\"><\/div> <div class=\"cell path\" id=\"cell-16\"><\/div> <div class=\"cell path\" id=\"cell-17\"><\/div> <div class=\"cell path\" id=\"cell-18\"><\/div> <div class=\"cell path\" id=\"cell-19\"><\/div> <div class=\"cell path\" id=\"cell-20\"><\/div> <div class=\"cell path\" id=\"cell-21\">S<\/div> <div class=\"cell path\" id=\"cell-22\"><\/div> <div class=\"cell path\" id=\"cell-23\"><\/div> <div class=\"cell path\" id=\"cell-24\"><\/div> <div class=\"cell path\" id=\"cell-25\"><\/div>\n <div class=\"cell path\" id=\"cell-26\">S<\/div> <div class=\"cell path\" id=\"cell-27\"><\/div> <div class=\"cell path\" id=\"cell-28\"><\/div> <div class=\"cell path\" id=\"cell-29\"><\/div> <div class=\"cell path\" id=\"cell-30\"><\/div> <div class=\"cell path\" id=\"cell-31\"><\/div> <div class=\"cell path\" id=\"cell-32\"><\/div> <div class=\"cell path\" id=\"cell-33\"><\/div> <div class=\"cell path\" id=\"cell-34\">S<\/div> <div class=\"cell path\" id=\"cell-35\"><\/div> <div class=\"cell path\" id=\"cell-36\"><\/div> <div class=\"cell path\" id=\"cell-37\"><\/div> <div class=\"cell path\" id=\"cell-38\"><\/div>\n <div class=\"cell path\" id=\"cell-39\">S<\/div> <div class=\"cell path\" id=\"cell-40\"><\/div> <div class=\"cell path\" id=\"cell-41\"><\/div> <div class=\"cell path\" id=\"cell-42\"><\/div> <div class=\"cell path\" id=\"cell-43\"><\/div> <div class=\"cell path\" id=\"cell-44\"><\/div> <div class=\"cell path\" id=\"cell-45\"><\/div> <div class=\"cell path\" id=\"cell-46\"><\/div> <div class=\"cell path\" id=\"cell-47\">S<\/div> <div class=\"cell path\" id=\"cell-48\"><\/div> <div class=\"cell path\" id=\"cell-49\"><\/div> <div class=\"cell path\" id=\"cell-50\"><\/div> <div class=\"cell path\" id=\"cell-51\"><\/div>\n\n <div class=\"cell home-path red-home-path\" id=\"cell-red-h1\"><\/div> <div class=\"cell home-path red-home-path\" id=\"cell-red-h2\"><\/div> <div class=\"cell home-path red-home-path\" id=\"cell-red-h3\"><\/div> <div class=\"cell home-path red-home-path\" id=\"cell-red-h4\"><\/div> <div class=\"cell home-path red-home-path\" id=\"cell-red-h5\"><\/div> <div class=\"cell home-path red-home-path\" id=\"cell-red-h6\">F<\/div>\n <div class=\"cell home-path green-home-path\" id=\"cell-green-h1\"><\/div> <div class=\"cell home-path green-home-path\" id=\"cell-green-h2\"><\/div> <div class=\"cell home-path green-home-path\" id=\"cell-green-h3\"><\/div> <div class=\"cell home-path green-home-path\" id=\"cell-green-h4\"><\/div> <div class=\"cell home-path green-home-path\" id=\"cell-green-h5\"><\/div> <div class=\"cell home-path green-home-path\" id=\"cell-green-h6\">F<\/div>\n <div class=\"cell home-path yellow-home-path\" id=\"cell-yellow-h1\"><\/div> <div class=\"cell home-path yellow-home-path\" id=\"cell-yellow-h2\"><\/div> <div class=\"cell home-path yellow-home-path\" id=\"cell-yellow-h3\"><\/div> <div class=\"cell home-path yellow-home-path\" id=\"cell-yellow-h4\"><\/div> <div class=\"cell home-path yellow-home-path\" id=\"cell-yellow-h5\"><\/div> <div class=\"cell home-path yellow-home-path\" id=\"cell-yellow-h6\">F<\/div>\n <div class=\"cell home-path blue-home-path\" id=\"cell-blue-h1\"><\/div> <div class=\"cell home-path blue-home-path\" id=\"cell-blue-h2\"><\/div> <div class=\"cell home-path blue-home-path\" id=\"cell-blue-h3\"><\/div> <div class=\"cell home-path blue-home-path\" id=\"cell-blue-h4\"><\/div> <div class=\"cell home-path blue-home-path\" id=\"cell-blue-h5\"><\/div> <div class=\"cell home-path blue-home-path\" id=\"cell-blue-h6\">F<\/div>\n <\/div>\n\n <div class=\"controls\">\n <div class=\"player-indicator\">\n Turn: <span id=\"current-player\">Red<\/span>\n <\/div>\n <div class=\"dice-area\">\n <div id=\"dice\" class=\"dice\">?<\/div>\n <button id=\"roll-dice-btn\">Roll Dice<\/button>\n <\/div>\n <div id=\"message\" class=\"message-area\">Roll the dice to start!<\/div>\n <\/div>\n <\/div>\n\n <script>\n document.addEventListener('DOMContentLoaded', () => {\n \/\/ --- Game State Variables ---\n const players = ['red', 'green', 'yellow', 'blue'];\n let currentPlayerIndex = 0;\n let diceValue = 0;\n let rolled = false;\n let playerCanMove = false; \/\/ Track if current player has valid moves after roll\n\n \/\/ Position Legend:\n \/\/ -1: Base\n \/\/ 0-51: Main Track (absolute positions)\n \/\/ 101-106: Red Home Path\n \/\/ 201-206: Green Home Path\n \/\/ 301-306: Yellow Home Path\n \/\/ 401-406: Blue Home Path\n \/\/ 999: Finished (Home)\n const tokenPositions = {\n red: [-1, -1, -1, -1],\n green: [-1, -1, -1, -1],\n yellow: [-1, -1, -1, -1],\n blue: [-1, -1, -1, -1]\n };\n\n \/\/ Map player color to their specific constants\n const playerDetails = {\n red: { startIndex: 0, homeEntryIndex: 51, homePathBase: 100 },\n green: { startIndex: 13, homeEntryIndex: 12, homePathBase: 200 },\n yellow: { startIndex: 26, homeEntryIndex: 25, homePathBase: 300 },\n blue: { startIndex: 39, homeEntryIndex: 38, homePathBase: 400 }\n };\n const totalTrackCells = 52;\n const homePathLength = 6;\n\n \/\/ Define safe spots (absolute track indices)\n const safeSpots = [0, 8, 13, 21, 26, 34, 39, 47]; \/\/ Standard safe spots (start positions are safe)\n\n \/\/ --- DOM Elements ---\n const diceElement = document.getElementById('dice');\n const rollButton = document.getElementById('roll-dice-btn');\n const playerIndicator = document.getElementById('current-player');\n const messageElement = document.getElementById('message');\n const boardElement = document.querySelector('.board');\n\n \/\/ --- Functions ---\n\n function initGame() {\n currentPlayerIndex = 0;\n rolled = false;\n diceValue = 0;\n diceElement.textContent = '?';\n rollButton.disabled = false;\n playerCanMove = false;\n\n \/\/ Clear existing tokens from board (important for restart)\n document.querySelectorAll('.token').forEach(t => t.remove());\n \/\/ Clear base inner containers\n document.querySelectorAll('.base-inner').forEach(bi => bi.innerHTML = '');\n\n \/\/ Reset token positions data and create token elements\n for (const color of players) {\n tokenPositions[color] = [-1, -1, -1, -1];\n for (let i = 0; i < 4; i++) {\n createTokenElement(color, i);\n }\n }\n\n renderBoard(); \/\/ Place tokens visually\n updatePlayerIndicator();\n setMessage(`${capitalize(players[currentPlayerIndex])}'s turn. Roll the dice!`);\n }\n\n \/\/ Create a token HTML element\n function createTokenElement(color, index) {\n const tokenId = `${color}-${index}`;\n const tokenElement = document.createElement('div');\n tokenElement.id = tokenId;\n tokenElement.classList.add('token', color);\n tokenElement.addEventListener('click', handleTokenClick); \/\/ Add listener\n \/\/ Append to base initially (renderBoard will move it if needed)\n const baseInner = document.getElementById(`base-${color}`).querySelector('.base-inner');\n if (baseInner) {\n baseInner.appendChild(tokenElement);\n } else {\n console.error(`Base inner element not found for ${color}`);\n }\n }\n\n \/\/ Update the visual display of all tokens based on tokenPositions\n function renderBoard() {\n \/\/ Clear only the tokens from cells, not bases\n document.querySelectorAll('.cell .token').forEach(t => t.remove());\n\n \/\/ Get all token elements (might exist in base or elsewhere)\n const allTokenElements = {};\n players.forEach(color => {\n for (let i = 0; i < 4; i++) {\n const tokenId = `${color}-${i}`;\n allTokenElements[tokenId] = document.getElementById(tokenId);\n }\n });\n\n\n for (const color of players) {\n const baseInner = document.getElementById(`base-${color}`).querySelector('.base-inner');\n \/\/ Detach all tokens of this color first before placing them\n tokenPositions[color].forEach((pos, index) => {\n const tokenId = `${color}-${index}`;\n const tokenElement = allTokenElements[tokenId];\n if(tokenElement) tokenElement.remove(); \/\/ Remove from current parent\n });\n\n\n \/\/ Re-place tokens based on their position\n tokenPositions[color].forEach((pos, index) => {\n const tokenId = `${color}-${index}`;\n const tokenElement = allTokenElements[tokenId];\n\n if (!tokenElement) {\n console.error(`Token element ${tokenId} not found during render!`);\n return;\n }\n\n let targetParent = null;\n\n if (pos === -1) { \/\/ In base\n targetParent = baseInner;\n } else if (pos >= 0 && pos < totalTrackCells) { \/\/ On main track\n const cellId = `cell-${pos}`;\n targetParent = document.getElementById(cellId);\n } else if (pos >= 101 && pos < 999) { \/\/ On home path\n const playerBase = playerDetails[color].homePathBase;\n const homePathIndex = pos - playerBase; \/\/ 101->1, 201->1 etc.\n const cellId = `cell-${color}-h${homePathIndex}`;\n targetParent = document.getElementById(cellId);\n } else if (pos === 999) { \/\/ Finished\n \/\/ For now, just place in the center home visually (no special logic yet)\n targetParent = document.querySelector('.center-home');\n \/\/ Optional: add a class to finished tokens\n tokenElement.classList.add('finished');\n }\n\n if (targetParent) {\n targetParent.appendChild(tokenElement);\n \/\/ Apply stacking styles if needed (check targetParent AFTER appending)\n updateStackingStyles(targetParent);\n } else if (pos !== 999) { \/\/ Don't log error for finished tokens without a specific area\n \/\/ console.warn(`Target parent not found for ${tokenId} at position ${pos}`);\n \/\/ If a cell ID is wrong, it might end up here.\n }\n });\n }\n }\n\n \/\/ Update stacking styles for tokens within a specific cell\/parent\n function updateStackingStyles(cellElement) {\n if (!cellElement || !cellElement.querySelectorAll) return; \/\/ Safety check\n\n const tokensInCell = cellElement.querySelectorAll('.token');\n tokensInCell.forEach(t => t.classList.remove('stacked-2', 'stacked-3', 'stacked-4')); \/\/ Clear existing\n\n if (tokensInCell.length > 1) {\n const stackClass = tokensInCell.length >= 4 ? 'stacked-4' : (tokensInCell.length === 3 ? 'stacked-3' : 'stacked-2');\n tokensInCell.forEach(t => t.classList.add(stackClass));\n }\n }\n\n\n function rollDice() {\n if (rolled) return;\n\n diceValue = Math.floor(Math.random() * 6) + 1;\n \/\/ diceValue = 6; \/\/ DEBUG: Force roll 6\n diceElement.textContent = diceValue;\n rolled = true; \/\/ Mark as rolled\n rollButton.disabled = true; \/\/ Disable button until move or switch\n\n const currentPlayer = players[currentPlayerIndex];\n const movableTokens = getMovableTokens(currentPlayer, diceValue);\n playerCanMove = movableTokens.length > 0; \/\/ Update flag\n\n highlightMovableTokens([], false); \/\/ Clear previous highlights\n\n if (playerCanMove) {\n setMessage(`${capitalize(currentPlayer)}, click a token to move ${diceValue}.`);\n highlightMovableTokens(movableTokens, true);\n \/\/ Button remains disabled, waiting for token click\n } else {\n setMessage(`No possible moves for ${capitalize(currentPlayer)}. ${diceValue !== 6 ? 'Switching player.' : 'Roll again (no move).'}`);\n \/\/ If no moves AND not a 6, switch player after delay\n if (diceValue !== 6) {\n setTimeout(switchPlayer, 1200);\n } else {\n \/\/ Rolled 6 but no moves (e.g., start blocked), allow re-roll\n rolled = false; \/\/ Allow rolling again\n rollButton.disabled = false; \/\/ Enable button\n \/\/ Don't switch player yet\n }\n }\n }\n\n \/\/ Get tokens that can move based on the dice roll\n function getMovableTokens(player, roll) {\n const possible = [];\n const positions = tokenPositions[player];\n const details = playerDetails[player];\n\n positions.forEach((pos, index) => {\n if (pos === 999) return; \/\/ Finished tokens cannot move\n\n let targetPos = -2; \/\/ -2 signifies an initially invalid\/uncalculated target\n\n if (pos === -1) { \/\/ Token is in base\n if (roll === 6) {\n targetPos = details.startIndex;\n \/\/ Check if start position is blocked by OWN token(s)\n \/\/ Ludo rule: You cannot start if your start square has >= 2 of your own tokens (blockade)\n const tokensAtStart = positions.filter(p => p === targetPos).length;\n if (tokensAtStart >= 2) {\n targetPos = -2; \/\/ Cannot move out if start is blockaded by self\n }\n \/\/ Also check if start pos has ONE opponent token (capture allowed)\n \/\/ or multiple opponent tokens (blockade by opponent) - more complex rules\n }\n } else { \/\/ Token is on the board (main track or home path)\n if (pos >= details.homePathBase && pos < details.homePathBase + homePathLength) {\n \/\/ --- Token is in its Home Path ---\n const currentHomeStep = pos - details.homePathBase; \/\/ 1 to 6\n if (currentHomeStep + roll <= homePathLength) {\n targetPos = pos + roll;\n if (targetPos === details.homePathBase + homePathLength) {\n targetPos = 999; \/\/ Reached finish!\n }\n } else {\n targetPos = -2; \/\/ Overshot finish\n }\n } else {\n \/\/ --- Token is on the Main Track ---\n const stepsBeforeHome = (details.homeEntryIndex + totalTrackCells - pos) % totalTrackCells; \/\/ Steps remaining until passing home entry\n\n if (roll > stepsBeforeHome + 1) { \/\/ Will enter or pass home entry\n const stepsIntoHome = roll - (stepsBeforeHome + 1);\n if (stepsIntoHome < homePathLength) { \/\/ Can land within home path\n targetPos = details.homePathBase + 1 + stepsIntoHome; \/\/ Base + step number (1-based)\n if (targetPos === details.homePathBase + homePathLength) {\n targetPos = 999; \/\/ Landed exactly on finish\n }\n } else {\n targetPos = -2; \/\/ Overshot home path entirely\n }\n } else { \/\/ Stays on main track\n targetPos = (pos + roll) % totalTrackCells;\n }\n }\n\n \/\/ Check if target is blocked by OWN tokens (blockade)\n if (targetPos !== -2 && targetPos !== 999) { \/\/ Don't check finished or invalid\n const tokensAtTarget = positions.filter(p => p === targetPos).length;\n if (tokensAtTarget >= 2) {\n targetPos = -2; \/\/ Cannot land on own blockade\n }\n }\n }\n\n\n \/\/ Add to possible moves if target is valid\n if (targetPos !== -2) {\n possible.push({ index, currentPos: pos, targetPos });\n }\n });\n return possible;\n }\n\n function highlightMovableTokens(tokensToHighlight, addHighlight) {\n document.querySelectorAll('.token.selectable').forEach(t => t.classList.remove('selectable'));\n\n if (addHighlight) {\n const currentPlayer = players[currentPlayerIndex];\n tokensToHighlight.forEach(move => {\n const tokenId = `${currentPlayer}-${move.index}`;\n document.getElementById(tokenId)?.classList.add('selectable');\n });\n }\n }\n\n function handleTokenClick(event) {\n const token = event.target;\n if (!token.classList.contains('token') || !token.classList.contains('selectable')) {\n \/\/ Ignore clicks on non-tokens or non-selectable tokens\n return;\n }\n\n const tokenId = token.id;\n const [color, indexStr] = tokenId.split('-');\n const index = parseInt(indexStr, 10);\n const currentPlayer = players[currentPlayerIndex];\n\n \/\/ Double check it's the right player and state (though selectable class should handle most)\n if (color !== currentPlayer || !rolled || !playerCanMove) {\n console.warn(\"Invalid state for token click.\");\n return;\n }\n\n \/\/ Find the specific move calculation for this token\n const movableTokens = getMovableTokens(currentPlayer, diceValue);\n const move = movableTokens.find(m => m.index === index);\n\n if (!move) {\n console.error(\"Clicked selectable token, but move calculation not found!\");\n return;\n }\n\n \/\/ --- Execute the Move ---\n const oldPos = tokenPositions[currentPlayer][index];\n const newPos = move.targetPos;\n tokenPositions[currentPlayer][index] = newPos; \/\/ Update data\n\n \/\/ --- Capture Logic ---\n let captureOccurred = false;\n if (newPos >= 0 && newPos < totalTrackCells && !safeSpots.includes(newPos)) { \/\/ Check captures only on main track & non-safe spots\n players.forEach((opponentColor, opponentIndex) => {\n if (opponentColor === currentPlayer) return; \/\/ Skip self\n\n tokenPositions[opponentColor] = tokenPositions[opponentColor].map((oppPos, oppIndex) => {\n if (oppPos === newPos) {\n console.log(`${capitalize(currentPlayer)} captured ${capitalize(opponentColor)}'s token!`);\n captureOccurred = true;\n return -1; \/\/ Send opponent token back to base\n }\n return oppPos;\n });\n });\n }\n\n\n \/\/ --- Render and Check Win ---\n highlightMovableTokens([], false); \/\/ Remove highlights immediately\n renderBoard(); \/\/ Update visual position (including captured tokens)\n\n if (newPos === 999) {\n if (checkWinCondition(currentPlayer)) {\n setMessage(`${capitalize(currentPlayer)} Wins! Game Over!`);\n rollButton.disabled = true; \/\/ End game\n rolled = true; \/\/ Prevent further actions\n playerCanMove = false;\n return; \/\/ End turn sequence\n }\n }\n\n \/\/ --- Determine Next Step (Switch Player or Roll Again) ---\n const rolledSix = (diceValue === 6);\n const getsAnotherTurn = rolledSix || captureOccurred; \/\/ Standard Ludo rule\n\n if (getsAnotherTurn) {\n setMessage(`${capitalize(currentPlayer)} ${rolledSix ? 'rolled 6' : 'captured'}. Roll again!`);\n rolled = false; \/\/ Reset roll state\n playerCanMove = false; \/\/ Reset move state until next roll\n rollButton.disabled = false; \/\/ Enable button\n diceElement.textContent = '?';\n \/\/ Player remains the same\n } else {\n setMessage(`Moved token. Switching player.`);\n setTimeout(switchPlayer, 500); \/\/ Short delay before switching\n }\n }\n\n function checkWinCondition(player) {\n return tokenPositions[player].every(pos => pos === 999);\n }\n\n function switchPlayer() {\n highlightMovableTokens([], false); \/\/ Ensure no highlights remain\n currentPlayerIndex = (currentPlayerIndex + 1) % players.length;\n rolled = false;\n diceValue = 0;\n playerCanMove = false;\n diceElement.textContent = '?';\n rollButton.disabled = false;\n updatePlayerIndicator();\n setMessage(`${capitalize(players[currentPlayerIndex])}'s turn. Roll the dice!`);\n }\n\n function updatePlayerIndicator() {\n const currentPlayer = players[currentPlayerIndex];\n const span = playerIndicator.querySelector('span'); \/\/ Get the inner span\n if (span) {\n span.textContent = capitalize(currentPlayer);\n \/\/ Update class on the PARENT div for background color\n playerIndicator.className = 'player-indicator'; \/\/ Clear previous colors\n playerIndicator.classList.add(currentPlayer);\n }\n }\n\n function setMessage(msg) {\n messageElement.textContent = msg;\n }\n\n function capitalize(str) {\n return str.charAt(0).toUpperCase() + str.slice(1);\n }\n\n \/\/ --- Event Listeners ---\n rollButton.addEventListener('click', rollDice);\n\n \/\/ --- Game Initialization ---\n initGame(); \/\/ Start the game\n });\n <\/script>\n <\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Ludo Game Ludo Game S S S S S S S S F F F F Turn: Red ? Roll Dice Roll the dice to start!<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-262","post","type-post","status-publish","format-standard","hentry","category-blog"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/askqustion.in\/index.php?rest_route=\/wp\/v2\/posts\/262","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/askqustion.in\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/askqustion.in\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/askqustion.in\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/askqustion.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=262"}],"version-history":[{"count":1,"href":"https:\/\/askqustion.in\/index.php?rest_route=\/wp\/v2\/posts\/262\/revisions"}],"predecessor-version":[{"id":263,"href":"https:\/\/askqustion.in\/index.php?rest_route=\/wp\/v2\/posts\/262\/revisions\/263"}],"wp:attachment":[{"href":"https:\/\/askqustion.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=262"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/askqustion.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=262"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/askqustion.in\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=262"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":262,"date":"2025-04-13T08:20:15","date_gmt":"2025-04-13T08:20:15","guid":{"rendered":"https:\/\/askqustion.in\/?p=262"},"modified":"2025-04-13T08:20:17","modified_gmt":"2025-04-13T08:20:17","slug":"ask-question-ludo","status":"publish","type":"post","link":"https:\/\/askqustion.in\/?p=262","title":{"rendered":"Ask question ludo !"},"content":{"rendered":"\n\n\n\n \n \n Ludo Game<\/title>\n\n <style>\n body {\n font-family: sans-serif;\n display: flex;\n flex-direction: column;\n align-items: center;\n background-color: #f0f0f0;\n margin: 0;\n padding: 20px;\n }\n\n h1 {\n color: #333;\n }\n\n .game-container {\n display: flex;\n flex-wrap: wrap; \/* Allow controls to wrap below board on small screens *\/\n justify-content: center; \/* Center items when wrapped *\/\n gap: 30px;\n align-items: flex-start;\n }\n\n .board {\n width: 600px; \/* Adjust size as needed *\/\n height: 600px;\n min-width: 600px; \/* Prevent shrinking too much *\/\n min-height: 600px;\n background-color: #fff;\n border: 3px solid #555;\n position: relative; \/* Crucial for positioning cells *\/\n display: grid;\n \/* Precise grid for Ludo board layout *\/\n grid-template-columns: repeat(15, 1fr);\n grid-template-rows: repeat(15, 1fr);\n }\n\n \/* --- Player Base Styling --- *\/\n .player-base {\n \/* Use grid areas for bases *\/\n border: 2px solid #888;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 5px; \/* Add some padding *\/\n }\n .base-inner {\n width: 80%; \/* Make inner slightly smaller *\/\n height: 80%;\n background-color: rgba(255, 255, 255, 0.6); \/* Slightly transparent white *\/\n border-radius: 10px;\n display: grid;\n grid-template-columns: 1fr 1fr;\n grid-template-rows: 1fr 1fr;\n gap: 5px;\n padding: 5px;\n justify-items: center;\n align-items: center;\n }\n\n .red-base { grid-area: 1 \/ 1 \/ 7 \/ 7; background-color: #ffcccc; } \/* Rows 1-6, Cols 1-6 *\/\n .green-base { grid-area: 1 \/ 10 \/ 7 \/ 16; background-color: #ccffcc; } \/* Rows 1-6, Cols 10-15 *\/\n .yellow-base { grid-area: 10 \/ 10 \/ 16 \/ 16; background-color: #ffffcc; } \/* Rows 10-15, Cols 10-15 *\/\n .blue-base { grid-area: 10 \/ 1 \/ 16 \/ 7; background-color: #ccccff; } \/* Rows 10-15, Cols 1-6 *\/\n\n\n \/* --- Center Home --- *\/\n .center-home {\n grid-area: 7 \/ 7 \/ 10 \/ 10; \/* Rows 7-9, Cols 7-9 *\/\n background-color: #eee;\n position: relative;\n overflow: hidden; \/* Clip the triangles *\/\n display: flex; \/* Use flexbox for easier centering if needed *\/\n justify-content: center;\n align-items: center;\n }\n .home-triangle {\n position: absolute;\n width: 0;\n height: 0;\n border-style: solid;\n }\n \/* Position and shape triangles (adjust size relative to center home) *\/\n .red-home-path { border-width: 0 60px 120px 60px; border-color: transparent transparent #ff7777 transparent; top: 0; left: 50%; transform: translateX(-50%); }\n .green-home-path { border-width: 60px 0 60px 120px; border-color: transparent transparent transparent #77ff77; top: 50%; right: 0; transform: translateY(-50%); }\n .yellow-home-path { border-width: 120px 60px 0 60px; border-color: #ffff77 transparent transparent transparent; bottom: 0; left: 50%; transform: translateX(-50%); }\n .blue-home-path { border-width: 60px 120px 60px 0; border-color: transparent #7777ff transparent transparent; top: 50%; left: 0; transform: translateY(-50%); }\n\n\n \/* --- Cell Styling --- *\/\n .cell {\n border: 1px solid #ccc;\n box-sizing: border-box; \/* Include border in size *\/\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 12px; \/* Slightly larger *\/\n font-weight: bold;\n position: relative; \/* For token positioning inside *\/\n overflow: hidden; \/* Prevent tokens overflowing visually *\/\n background-color: white; \/* Default *\/\n }\n\n \/* --- Path Cell Positioning (CRITICAL - Needs full implementation) --- *\/\n \/* This requires manually placing each cell using grid-column and grid-row *\/\n \/* Example placements (replace with YOUR full layout) *\/\n\n \/* Red Path Start & Home Lane *\/\n #cell-0 { grid-column: 7; grid-row: 2; background-color: #ffdddd; } \/* Red Start *\/\n #cell-1 { grid-column: 7; grid-row: 3; }\n #cell-2 { grid-column: 7; grid-row: 4; }\n #cell-3 { grid-column: 7; grid-row: 5; }\n #cell-4 { grid-column: 7; grid-row: 6; }\n #cell-5 { grid-column: 6; grid-row: 7; }\n #cell-6 { grid-column: 5; grid-row: 7; }\n #cell-7 { grid-column: 4; grid-row: 7; }\n #cell-8 { grid-column: 3; grid-row: 7; }\n #cell-9 { grid-column: 2; grid-row: 7; }\n #cell-10 { grid-column: 1; grid-row: 7; }\n #cell-11 { grid-column: 1; grid-row: 8; } \/* Turn towards Green *\/\n #cell-12 { grid-column: 1; grid-row: 9; } \/* Next to Green Start *\/\n \/* Red Home Path *\/\n #cell-red-h1 { grid-column: 8; grid-row: 2; background-color: #ffaaaa; }\n #cell-red-h2 { grid-column: 8; grid-row: 3; background-color: #ffaaaa; }\n #cell-red-h3 { grid-column: 8; grid-row: 4; background-color: #ffaaaa; }\n #cell-red-h4 { grid-column: 8; grid-row: 5; background-color: #ffaaaa; }\n #cell-red-h5 { grid-column: 8; grid-row: 6; background-color: #ffaaaa; }\n #cell-red-h6 { grid-column: 8; grid-row: 7; background-color: #ff8888; } \/* Red Finish *\/\n #cell-51 { grid-column: 7; grid-row: 1; } \/* Cell before red home path *\/\n\n\n \/* Green Path Start & Home Lane *\/\n #cell-13 { grid-column: 2; grid-row: 9; background-color: #ddffdd; } \/* Green Start *\/\n #cell-14 { grid-column: 3; grid-row: 9; }\n #cell-15 { grid-column: 4; grid-row: 9; }\n #cell-16 { grid-column: 5; grid-row: 9; }\n #cell-17 { grid-column: 6; grid-row: 9; }\n #cell-18 { grid-column: 7; grid-row: 10; }\n #cell-19 { grid-column: 7; grid-row: 11; }\n #cell-20 { grid-column: 7; grid-row: 12; }\n #cell-21 { grid-column: 7; grid-row: 13; }\n #cell-22 { grid-column: 7; grid-row: 14; }\n #cell-23 { grid-column: 7; grid-row: 15; }\n #cell-24 { grid-column: 8; grid-row: 15; } \/* Turn towards Yellow *\/\n #cell-25 { grid-column: 9; grid-row: 15; } \/* Next to Yellow Start *\/\n \/* Green Home Path *\/\n #cell-green-h1 { grid-column: 2; grid-row: 8; background-color: #aaffaa; }\n #cell-green-h2 { grid-column: 3; grid-row: 8; background-color: #aaffaa; }\n #cell-green-h3 { grid-column: 4; grid-row: 8; background-color: #aaffaa; }\n #cell-green-h4 { grid-column: 5; grid-row: 8; background-color: #aaffaa; }\n #cell-green-h5 { grid-column: 6; grid-row: 8; background-color: #aaffaa; }\n #cell-green-h6 { grid-column: 7; grid-row: 8; background-color: #88ff88; } \/* Green Finish *\/\n #cell-12 { grid-column: 1; grid-row: 9; } \/* Cell before green home path *\/\n\n\n \/* Yellow Path Start & Home Lane *\/\n #cell-26 { grid-column: 9; grid-row: 14; background-color: #ffffdd; } \/* Yellow Start *\/\n #cell-27 { grid-column: 9; grid-row: 13; }\n #cell-28 { grid-column: 9; grid-row: 12; }\n #cell-29 { grid-column: 9; grid-row: 11; }\n #cell-30 { grid-column: 9; grid-row: 10; }\n #cell-31 { grid-column: 10; grid-row: 9; }\n #cell-32 { grid-column: 11; grid-row: 9; }\n #cell-33 { grid-column: 12; grid-row: 9; }\n #cell-34 { grid-column: 13; grid-row: 9; }\n #cell-35 { grid-column: 14; grid-row: 9; }\n #cell-36 { grid-column: 15; grid-row: 9; }\n #cell-37 { grid-column: 15; grid-row: 8; } \/* Turn towards Blue *\/\n #cell-38 { grid-column: 15; grid-row: 7; } \/* Next to Blue Start *\/\n \/* Yellow Home Path *\/\n #cell-yellow-h1 { grid-column: 8; grid-row: 14; background-color: #ffffaa; }\n #cell-yellow-h2 { grid-column: 8; grid-row: 13; background-color: #ffffaa; }\n #cell-yellow-h3 { grid-column: 8; grid-row: 12; background-color: #ffffaa; }\n #cell-yellow-h4 { grid-column: 8; grid-row: 11; background-color: #ffffaa; }\n #cell-yellow-h5 { grid-column: 8; grid-row: 10; background-color: #ffffaa; }\n #cell-yellow-h6 { grid-column: 8; grid-row: 9; background-color: #ffff88; } \/* Yellow Finish *\/\n #cell-25 { grid-column: 9; grid-row: 15; } \/* Cell before yellow home path *\/\n\n\n \/* Blue Path Start & Home Lane *\/\n #cell-39 { grid-column: 14; grid-row: 7; background-color: #ddddff; } \/* Blue Start *\/\n #cell-40 { grid-column: 13; grid-row: 7; }\n #cell-41 { grid-column: 12; grid-row: 7; }\n #cell-42 { grid-column: 11; grid-row: 7; }\n #cell-43 { grid-column: 10; grid-row: 7; }\n #cell-44 { grid-column: 9; grid-row: 6; }\n #cell-45 { grid-column: 9; grid-row: 5; }\n #cell-46 { grid-column: 9; grid-row: 4; }\n #cell-47 { grid-column: 9; grid-row: 3; }\n #cell-48 { grid-column: 9; grid-row: 2; }\n #cell-49 { grid-column: 9; grid-row: 1; }\n #cell-50 { grid-column: 8; grid-row: 1; } \/* Turn towards Red *\/\n \/* #cell-51 defined with Red path *\/\n \/* Blue Home Path *\/\n #cell-blue-h1 { grid-column: 14; grid-row: 8; background-color: #aaaaff; }\n #cell-blue-h2 { grid-column: 13; grid-row: 8; background-color: #aaaaff; }\n #cell-blue-h3 { grid-column: 12; grid-row: 8; background-color: #aaaaff; }\n #cell-blue-h4 { grid-column: 11; grid-row: 8; background-color: #aaaaff; }\n #cell-blue-h5 { grid-column: 10; grid-row: 8; background-color: #aaaaff; }\n #cell-blue-h6 { grid-column: 9; grid-row: 8; background-color: #8888ff; } \/* Blue Finish *\/\n #cell-38 { grid-column: 15; grid-row: 7; } \/* Cell before blue home path *\/\n\n\n \/* --- Safe Spots --- *\/\n \/* Define safe spots (adjust cell IDs as per standard Ludo) *\/\n #cell-0, #cell-8, #cell-13, #cell-21, #cell-26, #cell-34, #cell-39, #cell-47 {\n \/* Using background image for star *\/\n background-image: url('data:image\/svg+xml;utf8,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" fill=\"gray\" class=\"bi bi-star-fill\" viewBox=\"0 0 16 16\"><path d=\"M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z\"\/><\/svg>');\n background-repeat: no-repeat;\n background-position: center;\n background-size: 60%;\n }\n \/* Ensure start cells also have their color *\/\n #cell-0 { background-color: #ffdddd; }\n #cell-13 { background-color: #ddffdd; }\n #cell-26 { background-color: #ffffdd; }\n #cell-39 { background-color: #ddddff; }\n\n\n \/* --- Token Styling --- *\/\n .token {\n width: 70%;\n height: 70%;\n border-radius: 50%;\n border: 1px solid #333;\n box-shadow: 1px 1px 3px rgba(0,0,0,0.5);\n position: absolute; \/* Allow positioning within cells\/base *\/\n \/* Centering within the parent cell\/base spot *\/\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n cursor: pointer;\n transition: all 0.3s ease; \/* For movement animation *\/\n z-index: 10; \/* Tokens on top *\/\n }\n .token.red { background-color: red; }\n .token.green { background-color: limegreen; }\n .token.yellow { background-color: gold; }\n .token.blue { background-color: dodgerblue; }\n\n .token.selectable { \/* Style for tokens that can be moved *\/\n outline: 3px solid black;\n transform: translate(-50%, -50%) scale(1.1); \/* Combine transforms *\/\n z-index: 11; \/* Bring selectable token slightly forward *\/\n }\n\n \/* Stacking indicator (adjust appearance as needed) *\/\n .token.stacked-2 {\n box-shadow: 3px 3px 5px rgba(0,0,0,0.6);\n border-width: 2px;\n \/* Optional: slightly offset stacked tokens *\/\n \/* transform: translate(-55%, -55%); *\/\n }\n .token.stacked-3, .token.stacked-4 { \/* Treat 3 and 4 the same visually *\/\n box-shadow: 5px 5px 7px rgba(0,0,0,0.7);\n border-width: 3px;\n \/* Optional: further offset *\/\n \/* transform: translate(-60%, -60%); *\/\n }\n \/* Ensure base tokens aren't affected by stacking styles initially *\/\n .base-inner .token {\n position: relative; \/* Override absolute for grid layout in base *\/\n top: auto;\n left: auto;\n transform: none; \/* Reset transform *\/\n }\n\n\n \/* --- Controls Styling --- *\/\n .controls {\n display: flex;\n flex-direction: column;\n align-items: center;\n background-color: #ddd;\n padding: 20px;\n border-radius: 8px;\n min-width: 150px;\n box-shadow: 2px 2px 5px rgba(0,0,0,0.2);\n }\n\n .player-indicator {\n font-size: 1.2em;\n font-weight: bold;\n margin-bottom: 15px;\n padding: 5px 10px;\n border-radius: 4px;\n color: white;\n text-shadow: 1px 1px 2px rgba(0,0,0,0.5);\n }\n #current-player.red { background-color: red; }\n #current-player.green { background-color: limegreen; }\n #current-player.yellow { background-color: gold; color: #333; text-shadow: none; } \/* Adjust text color for yellow *\/\n #current-player.blue { background-color: dodgerblue; }\n\n\n .dice-area {\n display: flex;\n flex-direction: column;\n align-items: center;\n margin-bottom: 15px;\n }\n\n .dice {\n width: 60px;\n height: 60px;\n background-color: white;\n border: 2px solid #555;\n border-radius: 5px;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 2em;\n font-weight: bold;\n margin-bottom: 10px;\n color: #333;\n }\n\n #roll-dice-btn {\n padding: 10px 20px;\n font-size: 1em;\n cursor: pointer;\n background-color: #4CAF50;\n color: white;\n border: none;\n border-radius: 5px;\n transition: background-color 0.2s;\n }\n #roll-dice-btn:hover:not(:disabled) {\n background-color: #45a049;\n }\n #roll-dice-btn:disabled {\n background-color: #aaa;\n cursor: not-allowed;\n }\n\n .message-area {\n margin-top: 15px;\n font-style: italic;\n color: #555;\n text-align: center;\n min-height: 3em; \/* Reserve space *\/\n width: 100%;\n }\n\n <\/style>\n <\/head>\n<body>\n <h1>Ludo Game<\/h1>\n\n <div class=\"game-container\">\n <div class=\"board\">\n <div class=\"player-base red-base\" id=\"base-red\">\n <div class=\"base-inner\">\n <\/div>\n <\/div>\n <div class=\"player-base green-base\" id=\"base-green\">\n <div class=\"base-inner\">\n <\/div>\n <\/div>\n <div class=\"player-base yellow-base\" id=\"base-yellow\">\n <div class=\"base-inner\">\n <\/div>\n <\/div>\n <div class=\"player-base blue-base\" id=\"base-blue\">\n <div class=\"base-inner\">\n <\/div>\n <\/div>\n\n <div class=\"center-home\">\n <div class=\"home-triangle red-home-path\"><\/div>\n <div class=\"home-triangle green-home-path\"><\/div>\n <div class=\"home-triangle yellow-home-path\"><\/div>\n <div class=\"home-triangle blue-home-path\"><\/div>\n <\/div>\n\n <div class=\"cell path\" id=\"cell-0\">S<\/div> <div class=\"cell path\" id=\"cell-1\"><\/div> <div class=\"cell path\" id=\"cell-2\"><\/div> <div class=\"cell path\" id=\"cell-3\"><\/div> <div class=\"cell path\" id=\"cell-4\"><\/div> <div class=\"cell path\" id=\"cell-5\"><\/div> <div class=\"cell path\" id=\"cell-6\"><\/div> <div class=\"cell path\" id=\"cell-7\"><\/div> <div class=\"cell path\" id=\"cell-8\">S<\/div> <div class=\"cell path\" id=\"cell-9\"><\/div> <div class=\"cell path\" id=\"cell-10\"><\/div> <div class=\"cell path\" id=\"cell-11\"><\/div> <div class=\"cell path\" id=\"cell-12\"><\/div>\n <div class=\"cell path\" id=\"cell-13\">S<\/div> <div class=\"cell path\" id=\"cell-14\"><\/div> <div class=\"cell path\" id=\"cell-15\"><\/div> <div class=\"cell path\" id=\"cell-16\"><\/div> <div class=\"cell path\" id=\"cell-17\"><\/div> <div class=\"cell path\" id=\"cell-18\"><\/div> <div class=\"cell path\" id=\"cell-19\"><\/div> <div class=\"cell path\" id=\"cell-20\"><\/div> <div class=\"cell path\" id=\"cell-21\">S<\/div> <div class=\"cell path\" id=\"cell-22\"><\/div> <div class=\"cell path\" id=\"cell-23\"><\/div> <div class=\"cell path\" id=\"cell-24\"><\/div> <div class=\"cell path\" id=\"cell-25\"><\/div>\n <div class=\"cell path\" id=\"cell-26\">S<\/div> <div class=\"cell path\" id=\"cell-27\"><\/div> <div class=\"cell path\" id=\"cell-28\"><\/div> <div class=\"cell path\" id=\"cell-29\"><\/div> <div class=\"cell path\" id=\"cell-30\"><\/div> <div class=\"cell path\" id=\"cell-31\"><\/div> <div class=\"cell path\" id=\"cell-32\"><\/div> <div class=\"cell path\" id=\"cell-33\"><\/div> <div class=\"cell path\" id=\"cell-34\">S<\/div> <div class=\"cell path\" id=\"cell-35\"><\/div> <div class=\"cell path\" id=\"cell-36\"><\/div> <div class=\"cell path\" id=\"cell-37\"><\/div> <div class=\"cell path\" id=\"cell-38\"><\/div>\n <div class=\"cell path\" id=\"cell-39\">S<\/div> <div class=\"cell path\" id=\"cell-40\"><\/div> <div class=\"cell path\" id=\"cell-41\"><\/div> <div class=\"cell path\" id=\"cell-42\"><\/div> <div class=\"cell path\" id=\"cell-43\"><\/div> <div class=\"cell path\" id=\"cell-44\"><\/div> <div class=\"cell path\" id=\"cell-45\"><\/div> <div class=\"cell path\" id=\"cell-46\"><\/div> <div class=\"cell path\" id=\"cell-47\">S<\/div> <div class=\"cell path\" id=\"cell-48\"><\/div> <div class=\"cell path\" id=\"cell-49\"><\/div> <div class=\"cell path\" id=\"cell-50\"><\/div> <div class=\"cell path\" id=\"cell-51\"><\/div>\n\n <div class=\"cell home-path red-home-path\" id=\"cell-red-h1\"><\/div> <div class=\"cell home-path red-home-path\" id=\"cell-red-h2\"><\/div> <div class=\"cell home-path red-home-path\" id=\"cell-red-h3\"><\/div> <div class=\"cell home-path red-home-path\" id=\"cell-red-h4\"><\/div> <div class=\"cell home-path red-home-path\" id=\"cell-red-h5\"><\/div> <div class=\"cell home-path red-home-path\" id=\"cell-red-h6\">F<\/div>\n <div class=\"cell home-path green-home-path\" id=\"cell-green-h1\"><\/div> <div class=\"cell home-path green-home-path\" id=\"cell-green-h2\"><\/div> <div class=\"cell home-path green-home-path\" id=\"cell-green-h3\"><\/div> <div class=\"cell home-path green-home-path\" id=\"cell-green-h4\"><\/div> <div class=\"cell home-path green-home-path\" id=\"cell-green-h5\"><\/div> <div class=\"cell home-path green-home-path\" id=\"cell-green-h6\">F<\/div>\n <div class=\"cell home-path yellow-home-path\" id=\"cell-yellow-h1\"><\/div> <div class=\"cell home-path yellow-home-path\" id=\"cell-yellow-h2\"><\/div> <div class=\"cell home-path yellow-home-path\" id=\"cell-yellow-h3\"><\/div> <div class=\"cell home-path yellow-home-path\" id=\"cell-yellow-h4\"><\/div> <div class=\"cell home-path yellow-home-path\" id=\"cell-yellow-h5\"><\/div> <div class=\"cell home-path yellow-home-path\" id=\"cell-yellow-h6\">F<\/div>\n <div class=\"cell home-path blue-home-path\" id=\"cell-blue-h1\"><\/div> <div class=\"cell home-path blue-home-path\" id=\"cell-blue-h2\"><\/div> <div class=\"cell home-path blue-home-path\" id=\"cell-blue-h3\"><\/div> <div class=\"cell home-path blue-home-path\" id=\"cell-blue-h4\"><\/div> <div class=\"cell home-path blue-home-path\" id=\"cell-blue-h5\"><\/div> <div class=\"cell home-path blue-home-path\" id=\"cell-blue-h6\">F<\/div>\n <\/div>\n\n <div class=\"controls\">\n <div class=\"player-indicator\">\n Turn: <span id=\"current-player\">Red<\/span>\n <\/div>\n <div class=\"dice-area\">\n <div id=\"dice\" class=\"dice\">?<\/div>\n <button id=\"roll-dice-btn\">Roll Dice<\/button>\n <\/div>\n <div id=\"message\" class=\"message-area\">Roll the dice to start!<\/div>\n <\/div>\n <\/div>\n\n <script>\n document.addEventListener('DOMContentLoaded', () => {\n \/\/ --- Game State Variables ---\n const players = ['red', 'green', 'yellow', 'blue'];\n let currentPlayerIndex = 0;\n let diceValue = 0;\n let rolled = false;\n let playerCanMove = false; \/\/ Track if current player has valid moves after roll\n\n \/\/ Position Legend:\n \/\/ -1: Base\n \/\/ 0-51: Main Track (absolute positions)\n \/\/ 101-106: Red Home Path\n \/\/ 201-206: Green Home Path\n \/\/ 301-306: Yellow Home Path\n \/\/ 401-406: Blue Home Path\n \/\/ 999: Finished (Home)\n const tokenPositions = {\n red: [-1, -1, -1, -1],\n green: [-1, -1, -1, -1],\n yellow: [-1, -1, -1, -1],\n blue: [-1, -1, -1, -1]\n };\n\n \/\/ Map player color to their specific constants\n const playerDetails = {\n red: { startIndex: 0, homeEntryIndex: 51, homePathBase: 100 },\n green: { startIndex: 13, homeEntryIndex: 12, homePathBase: 200 },\n yellow: { startIndex: 26, homeEntryIndex: 25, homePathBase: 300 },\n blue: { startIndex: 39, homeEntryIndex: 38, homePathBase: 400 }\n };\n const totalTrackCells = 52;\n const homePathLength = 6;\n\n \/\/ Define safe spots (absolute track indices)\n const safeSpots = [0, 8, 13, 21, 26, 34, 39, 47]; \/\/ Standard safe spots (start positions are safe)\n\n \/\/ --- DOM Elements ---\n const diceElement = document.getElementById('dice');\n const rollButton = document.getElementById('roll-dice-btn');\n const playerIndicator = document.getElementById('current-player');\n const messageElement = document.getElementById('message');\n const boardElement = document.querySelector('.board');\n\n \/\/ --- Functions ---\n\n function initGame() {\n currentPlayerIndex = 0;\n rolled = false;\n diceValue = 0;\n diceElement.textContent = '?';\n rollButton.disabled = false;\n playerCanMove = false;\n\n \/\/ Clear existing tokens from board (important for restart)\n document.querySelectorAll('.token').forEach(t => t.remove());\n \/\/ Clear base inner containers\n document.querySelectorAll('.base-inner').forEach(bi => bi.innerHTML = '');\n\n \/\/ Reset token positions data and create token elements\n for (const color of players) {\n tokenPositions[color] = [-1, -1, -1, -1];\n for (let i = 0; i < 4; i++) {\n createTokenElement(color, i);\n }\n }\n\n renderBoard(); \/\/ Place tokens visually\n updatePlayerIndicator();\n setMessage(`${capitalize(players[currentPlayerIndex])}'s turn. Roll the dice!`);\n }\n\n \/\/ Create a token HTML element\n function createTokenElement(color, index) {\n const tokenId = `${color}-${index}`;\n const tokenElement = document.createElement('div');\n tokenElement.id = tokenId;\n tokenElement.classList.add('token', color);\n tokenElement.addEventListener('click', handleTokenClick); \/\/ Add listener\n \/\/ Append to base initially (renderBoard will move it if needed)\n const baseInner = document.getElementById(`base-${color}`).querySelector('.base-inner');\n if (baseInner) {\n baseInner.appendChild(tokenElement);\n } else {\n console.error(`Base inner element not found for ${color}`);\n }\n }\n\n \/\/ Update the visual display of all tokens based on tokenPositions\n function renderBoard() {\n \/\/ Clear only the tokens from cells, not bases\n document.querySelectorAll('.cell .token').forEach(t => t.remove());\n\n \/\/ Get all token elements (might exist in base or elsewhere)\n const allTokenElements = {};\n players.forEach(color => {\n for (let i = 0; i < 4; i++) {\n const tokenId = `${color}-${i}`;\n allTokenElements[tokenId] = document.getElementById(tokenId);\n }\n });\n\n\n for (const color of players) {\n const baseInner = document.getElementById(`base-${color}`).querySelector('.base-inner');\n \/\/ Detach all tokens of this color first before placing them\n tokenPositions[color].forEach((pos, index) => {\n const tokenId = `${color}-${index}`;\n const tokenElement = allTokenElements[tokenId];\n if(tokenElement) tokenElement.remove(); \/\/ Remove from current parent\n });\n\n\n \/\/ Re-place tokens based on their position\n tokenPositions[color].forEach((pos, index) => {\n const tokenId = `${color}-${index}`;\n const tokenElement = allTokenElements[tokenId];\n\n if (!tokenElement) {\n console.error(`Token element ${tokenId} not found during render!`);\n return;\n }\n\n let targetParent = null;\n\n if (pos === -1) { \/\/ In base\n targetParent = baseInner;\n } else if (pos >= 0 && pos < totalTrackCells) { \/\/ On main track\n const cellId = `cell-${pos}`;\n targetParent = document.getElementById(cellId);\n } else if (pos >= 101 && pos < 999) { \/\/ On home path\n const playerBase = playerDetails[color].homePathBase;\n const homePathIndex = pos - playerBase; \/\/ 101->1, 201->1 etc.\n const cellId = `cell-${color}-h${homePathIndex}`;\n targetParent = document.getElementById(cellId);\n } else if (pos === 999) { \/\/ Finished\n \/\/ For now, just place in the center home visually (no special logic yet)\n targetParent = document.querySelector('.center-home');\n \/\/ Optional: add a class to finished tokens\n tokenElement.classList.add('finished');\n }\n\n if (targetParent) {\n targetParent.appendChild(tokenElement);\n \/\/ Apply stacking styles if needed (check targetParent AFTER appending)\n updateStackingStyles(targetParent);\n } else if (pos !== 999) { \/\/ Don't log error for finished tokens without a specific area\n \/\/ console.warn(`Target parent not found for ${tokenId} at position ${pos}`);\n \/\/ If a cell ID is wrong, it might end up here.\n }\n });\n }\n }\n\n \/\/ Update stacking styles for tokens within a specific cell\/parent\n function updateStackingStyles(cellElement) {\n if (!cellElement || !cellElement.querySelectorAll) return; \/\/ Safety check\n\n const tokensInCell = cellElement.querySelectorAll('.token');\n tokensInCell.forEach(t => t.classList.remove('stacked-2', 'stacked-3', 'stacked-4')); \/\/ Clear existing\n\n if (tokensInCell.length > 1) {\n const stackClass = tokensInCell.length >= 4 ? 'stacked-4' : (tokensInCell.length === 3 ? 'stacked-3' : 'stacked-2');\n tokensInCell.forEach(t => t.classList.add(stackClass));\n }\n }\n\n\n function rollDice() {\n if (rolled) return;\n\n diceValue = Math.floor(Math.random() * 6) + 1;\n \/\/ diceValue = 6; \/\/ DEBUG: Force roll 6\n diceElement.textContent = diceValue;\n rolled = true; \/\/ Mark as rolled\n rollButton.disabled = true; \/\/ Disable button until move or switch\n\n const currentPlayer = players[currentPlayerIndex];\n const movableTokens = getMovableTokens(currentPlayer, diceValue);\n playerCanMove = movableTokens.length > 0; \/\/ Update flag\n\n highlightMovableTokens([], false); \/\/ Clear previous highlights\n\n if (playerCanMove) {\n setMessage(`${capitalize(currentPlayer)}, click a token to move ${diceValue}.`);\n highlightMovableTokens(movableTokens, true);\n \/\/ Button remains disabled, waiting for token click\n } else {\n setMessage(`No possible moves for ${capitalize(currentPlayer)}. ${diceValue !== 6 ? 'Switching player.' : 'Roll again (no move).'}`);\n \/\/ If no moves AND not a 6, switch player after delay\n if (diceValue !== 6) {\n setTimeout(switchPlayer, 1200);\n } else {\n \/\/ Rolled 6 but no moves (e.g., start blocked), allow re-roll\n rolled = false; \/\/ Allow rolling again\n rollButton.disabled = false; \/\/ Enable button\n \/\/ Don't switch player yet\n }\n }\n }\n\n \/\/ Get tokens that can move based on the dice roll\n function getMovableTokens(player, roll) {\n const possible = [];\n const positions = tokenPositions[player];\n const details = playerDetails[player];\n\n positions.forEach((pos, index) => {\n if (pos === 999) return; \/\/ Finished tokens cannot move\n\n let targetPos = -2; \/\/ -2 signifies an initially invalid\/uncalculated target\n\n if (pos === -1) { \/\/ Token is in base\n if (roll === 6) {\n targetPos = details.startIndex;\n \/\/ Check if start position is blocked by OWN token(s)\n \/\/ Ludo rule: You cannot start if your start square has >= 2 of your own tokens (blockade)\n const tokensAtStart = positions.filter(p => p === targetPos).length;\n if (tokensAtStart >= 2) {\n targetPos = -2; \/\/ Cannot move out if start is blockaded by self\n }\n \/\/ Also check if start pos has ONE opponent token (capture allowed)\n \/\/ or multiple opponent tokens (blockade by opponent) - more complex rules\n }\n } else { \/\/ Token is on the board (main track or home path)\n if (pos >= details.homePathBase && pos < details.homePathBase + homePathLength) {\n \/\/ --- Token is in its Home Path ---\n const currentHomeStep = pos - details.homePathBase; \/\/ 1 to 6\n if (currentHomeStep + roll <= homePathLength) {\n targetPos = pos + roll;\n if (targetPos === details.homePathBase + homePathLength) {\n targetPos = 999; \/\/ Reached finish!\n }\n } else {\n targetPos = -2; \/\/ Overshot finish\n }\n } else {\n \/\/ --- Token is on the Main Track ---\n const stepsBeforeHome = (details.homeEntryIndex + totalTrackCells - pos) % totalTrackCells; \/\/ Steps remaining until passing home entry\n\n if (roll > stepsBeforeHome + 1) { \/\/ Will enter or pass home entry\n const stepsIntoHome = roll - (stepsBeforeHome + 1);\n if (stepsIntoHome < homePathLength) { \/\/ Can land within home path\n targetPos = details.homePathBase + 1 + stepsIntoHome; \/\/ Base + step number (1-based)\n if (targetPos === details.homePathBase + homePathLength) {\n targetPos = 999; \/\/ Landed exactly on finish\n }\n } else {\n targetPos = -2; \/\/ Overshot home path entirely\n }\n } else { \/\/ Stays on main track\n targetPos = (pos + roll) % totalTrackCells;\n }\n }\n\n \/\/ Check if target is blocked by OWN tokens (blockade)\n if (targetPos !== -2 && targetPos !== 999) { \/\/ Don't check finished or invalid\n const tokensAtTarget = positions.filter(p => p === targetPos).length;\n if (tokensAtTarget >= 2) {\n targetPos = -2; \/\/ Cannot land on own blockade\n }\n }\n }\n\n\n \/\/ Add to possible moves if target is valid\n if (targetPos !== -2) {\n possible.push({ index, currentPos: pos, targetPos });\n }\n });\n return possible;\n }\n\n function highlightMovableTokens(tokensToHighlight, addHighlight) {\n document.querySelectorAll('.token.selectable').forEach(t => t.classList.remove('selectable'));\n\n if (addHighlight) {\n const currentPlayer = players[currentPlayerIndex];\n tokensToHighlight.forEach(move => {\n const tokenId = `${currentPlayer}-${move.index}`;\n document.getElementById(tokenId)?.classList.add('selectable');\n });\n }\n }\n\n function handleTokenClick(event) {\n const token = event.target;\n if (!token.classList.contains('token') || !token.classList.contains('selectable')) {\n \/\/ Ignore clicks on non-tokens or non-selectable tokens\n return;\n }\n\n const tokenId = token.id;\n const [color, indexStr] = tokenId.split('-');\n const index = parseInt(indexStr, 10);\n const currentPlayer = players[currentPlayerIndex];\n\n \/\/ Double check it's the right player and state (though selectable class should handle most)\n if (color !== currentPlayer || !rolled || !playerCanMove) {\n console.warn(\"Invalid state for token click.\");\n return;\n }\n\n \/\/ Find the specific move calculation for this token\n const movableTokens = getMovableTokens(currentPlayer, diceValue);\n const move = movableTokens.find(m => m.index === index);\n\n if (!move) {\n console.error(\"Clicked selectable token, but move calculation not found!\");\n return;\n }\n\n \/\/ --- Execute the Move ---\n const oldPos = tokenPositions[currentPlayer][index];\n const newPos = move.targetPos;\n tokenPositions[currentPlayer][index] = newPos; \/\/ Update data\n\n \/\/ --- Capture Logic ---\n let captureOccurred = false;\n if (newPos >= 0 && newPos < totalTrackCells && !safeSpots.includes(newPos)) { \/\/ Check captures only on main track & non-safe spots\n players.forEach((opponentColor, opponentIndex) => {\n if (opponentColor === currentPlayer) return; \/\/ Skip self\n\n tokenPositions[opponentColor] = tokenPositions[opponentColor].map((oppPos, oppIndex) => {\n if (oppPos === newPos) {\n console.log(`${capitalize(currentPlayer)} captured ${capitalize(opponentColor)}'s token!`);\n captureOccurred = true;\n return -1; \/\/ Send opponent token back to base\n }\n return oppPos;\n });\n });\n }\n\n\n \/\/ --- Render and Check Win ---\n highlightMovableTokens([], false); \/\/ Remove highlights immediately\n renderBoard(); \/\/ Update visual position (including captured tokens)\n\n if (newPos === 999) {\n if (checkWinCondition(currentPlayer)) {\n setMessage(`${capitalize(currentPlayer)} Wins! Game Over!`);\n rollButton.disabled = true; \/\/ End game\n rolled = true; \/\/ Prevent further actions\n playerCanMove = false;\n return; \/\/ End turn sequence\n }\n }\n\n \/\/ --- Determine Next Step (Switch Player or Roll Again) ---\n const rolledSix = (diceValue === 6);\n const getsAnotherTurn = rolledSix || captureOccurred; \/\/ Standard Ludo rule\n\n if (getsAnotherTurn) {\n setMessage(`${capitalize(currentPlayer)} ${rolledSix ? 'rolled 6' : 'captured'}. Roll again!`);\n rolled = false; \/\/ Reset roll state\n playerCanMove = false; \/\/ Reset move state until next roll\n rollButton.disabled = false; \/\/ Enable button\n diceElement.textContent = '?';\n \/\/ Player remains the same\n } else {\n setMessage(`Moved token. Switching player.`);\n setTimeout(switchPlayer, 500); \/\/ Short delay before switching\n }\n }\n\n function checkWinCondition(player) {\n return tokenPositions[player].every(pos => pos === 999);\n }\n\n function switchPlayer() {\n highlightMovableTokens([], false); \/\/ Ensure no highlights remain\n currentPlayerIndex = (currentPlayerIndex + 1) % players.length;\n rolled = false;\n diceValue = 0;\n playerCanMove = false;\n diceElement.textContent = '?';\n rollButton.disabled = false;\n updatePlayerIndicator();\n setMessage(`${capitalize(players[currentPlayerIndex])}'s turn. Roll the dice!`);\n }\n\n function updatePlayerIndicator() {\n const currentPlayer = players[currentPlayerIndex];\n const span = playerIndicator.querySelector('span'); \/\/ Get the inner span\n if (span) {\n span.textContent = capitalize(currentPlayer);\n \/\/ Update class on the PARENT div for background color\n playerIndicator.className = 'player-indicator'; \/\/ Clear previous colors\n playerIndicator.classList.add(currentPlayer);\n }\n }\n\n function setMessage(msg) {\n messageElement.textContent = msg;\n }\n\n function capitalize(str) {\n return str.charAt(0).toUpperCase() + str.slice(1);\n }\n\n \/\/ --- Event Listeners ---\n rollButton.addEventListener('click', rollDice);\n\n \/\/ --- Game Initialization ---\n initGame(); \/\/ Start the game\n });\n <\/script>\n <\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Ludo Game Ludo Game S S S S S S S S F F F F Turn: Red ? Roll Dice Roll the dice to start!<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-262","post","type-post","status-publish","format-standard","hentry","category-blog"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/askqustion.in\/index.php?rest_route=\/wp\/v2\/posts\/262","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/askqustion.in\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/askqustion.in\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/askqustion.in\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/askqustion.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=262"}],"version-history":[{"count":1,"href":"https:\/\/askqustion.in\/index.php?rest_route=\/wp\/v2\/posts\/262\/revisions"}],"predecessor-version":[{"id":263,"href":"https:\/\/askqustion.in\/index.php?rest_route=\/wp\/v2\/posts\/262\/revisions\/263"}],"wp:attachment":[{"href":"https:\/\/askqustion.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=262"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/askqustion.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=262"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/askqustion.in\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=262"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}