{"id":1535,"date":"2026-03-13T09:50:39","date_gmt":"2026-03-13T09:50:39","guid":{"rendered":"https:\/\/cricketpromo.com\/?page_id=1535"},"modified":"2026-03-13T09:50:54","modified_gmt":"2026-03-13T09:50:54","slug":"elementor-1535","status":"publish","type":"page","link":"https:\/\/cricketpromo.com\/ur\/elementor-1535\/","title":{"rendered":"Elementor #1535"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nbetjee Ludo<\/title>\r\n<style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;600;700;800;900&display=swap');\r\n\r\n * { margin: 0; padding: 0; box-sizing: border-box; }\r\n\r\n :root {\r\n \/* betjee brand colors *\/\r\n --b8-orange: #F5A623;\r\n --b8-orange-dark: #D4891A;\r\n --jee-blue: #B0D4DB;\r\n --jee-blue-dark: #7FB5C0;\r\n --navy: #2C3E6B;\r\n --navy-deep: #1A2744;\r\n --accent-red: #E63946;\r\n --bg: #0B0E1A;\r\n --bg-gradient-1: #0B0E1A;\r\n --bg-gradient-2: #111832;\r\n --bg-gradient-3: #0D1225;\r\n --card-bg: rgba(28, 40, 74, 0.85);\r\n --card-border: rgba(44, 62, 107, 0.5);\r\n\r\n \/* game token colors *\/\r\n --red: #E63946;\r\n --green: #2D6A4F;\r\n --yellow: #F5A623;\r\n --blue: #1D3557;\r\n --red-light: #FFCDD2;\r\n --green-light: #B7E4C7;\r\n --yellow-light: #FFE0B2;\r\n --blue-light: #BBDEFB;\r\n }\r\n\r\n body {\r\n font-family: 'Poppins', sans-serif;\r\n background: var(--bg);\r\n color: #fff;\r\n min-height: 100vh;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n overflow-x: hidden;\r\n padding: 10px;\r\n position: relative;\r\n }\r\n\r\n \/* Animated betjee gradient background *\/\r\n body::before {\r\n content: '';\r\n position: fixed;\r\n top: 0; left: 0; right: 0; bottom: 0;\r\n background:\r\n radial-gradient(ellipse at 20% 20%, rgba(245,166,35,0.08) 0%, transparent 50%),\r\n radial-gradient(ellipse at 80% 80%, rgba(176,212,219,0.06) 0%, transparent 50%),\r\n radial-gradient(ellipse at 50% 50%, rgba(44,62,107,0.1) 0%, transparent 60%),\r\n linear-gradient(135deg, var(--bg-gradient-1) 0%, var(--bg-gradient-2) 50%, var(--bg-gradient-3) 100%);\r\n z-index: -2;\r\n animation: bgShift 8s ease-in-out infinite alternate;\r\n }\r\n\r\n @keyframes bgShift {\r\n 0% { opacity: 1; }\r\n 50% { opacity: 0.85; }\r\n 100% { opacity: 1; }\r\n }\r\n\r\n \/* Subtle floating particles effect *\/\r\n body::after {\r\n content: '';\r\n position: fixed;\r\n top: 0; left: 0; right: 0; bottom: 0;\r\n background-image:\r\n radial-gradient(2px 2px at 10% 15%, rgba(245,166,35,0.15) 0%, transparent 100%),\r\n radial-gradient(2px 2px at 30% 70%, rgba(176,212,219,0.12) 0%, transparent 100%),\r\n radial-gradient(1.5px 1.5px at 60% 25%, rgba(245,166,35,0.1) 0%, transparent 100%),\r\n radial-gradient(2px 2px at 85% 55%, rgba(176,212,219,0.1) 0%, transparent 100%),\r\n radial-gradient(1px 1px at 45% 90%, rgba(245,166,35,0.12) 0%, transparent 100%),\r\n radial-gradient(1.5px 1.5px at 75% 10%, rgba(176,212,219,0.08) 0%, transparent 100%);\r\n z-index: -1;\r\n animation: particleFloat 12s ease-in-out infinite alternate;\r\n }\r\n\r\n @keyframes particleFloat {\r\n 0% { transform: translateY(0); }\r\n 100% { transform: translateY(-15px); }\r\n }\r\n\r\n \/* ===== betjee LOGO ===== *\/\r\n .logo-container {\r\n margin: 8px 0 2px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 0;\r\n user-select: none;\r\n }\r\n\r\n .logo-svg { height: 48px; width: auto; }\r\n\r\n .game-title {\r\n font-size: 1.1rem;\r\n font-weight: 700;\r\n color: var(--jee-blue);\r\n letter-spacing: 3px;\r\n text-transform: uppercase;\r\n margin-left: 8px;\r\n text-shadow: 0 0 20px rgba(176,212,219,0.3);\r\n }\r\n\r\n .subtitle {\r\n font-size: 0.65rem;\r\n color: rgba(176,212,219,0.5);\r\n text-align: center;\r\n margin-bottom: 8px;\r\n letter-spacing: 3px;\r\n text-transform: uppercase;\r\n }\r\n\r\n \/* --- Player Setup --- *\/\r\n #setup-screen {\r\n background: var(--card-bg);\r\n backdrop-filter: blur(12px);\r\n border: 1px solid var(--card-border);\r\n border-radius: 16px;\r\n padding: 24px;\r\n max-width: 400px;\r\n width: 100%;\r\n margin-top: 12px;\r\n box-shadow: 0 8px 32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);\r\n }\r\n\r\n #setup-screen h2 {\r\n font-size: 1.1rem;\r\n margin-bottom: 16px;\r\n text-align: center;\r\n color: var(--b8-orange);\r\n text-shadow: 0 0 20px rgba(245,166,35,0.2);\r\n }\r\n\r\n .player-option {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n padding: 10px 14px;\r\n margin-bottom: 8px;\r\n border-radius: 10px;\r\n background: rgba(255,255,255,0.03);\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n border: 2px solid transparent;\r\n }\r\n\r\n .player-option.selected {\r\n border-color: var(--b8-orange);\r\n background: rgba(245,166,35,0.06);\r\n }\r\n\r\n .player-option:hover { background: rgba(255,255,255,0.06); }\r\n\r\n .player-dot {\r\n width: 28px; height: 28px; border-radius: 50%;\r\n flex-shrink: 0;\r\n box-shadow: 0 2px 8px rgba(0,0,0,0.3);\r\n }\r\n\r\n .player-option input {\r\n background: transparent;\r\n border: 1px solid rgba(176,212,219,0.2);\r\n color: #fff;\r\n padding: 6px 10px;\r\n border-radius: 6px;\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 0.85rem;\r\n flex: 1;\r\n outline: none;\r\n }\r\n\r\n .player-option input:focus {\r\n border-color: var(--b8-orange);\r\n }\r\n\r\n .btn {\r\n display: block;\r\n width: 100%;\r\n padding: 12px;\r\n margin-top: 16px;\r\n border: none;\r\n border-radius: 10px;\r\n font-family: 'Poppins', sans-serif;\r\n font-weight: 700;\r\n font-size: 1rem;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n }\r\n\r\n .btn-brand {\r\n background: linear-gradient(135deg, var(--b8-orange), var(--b8-orange-dark));\r\n color: #0B0E1A;\r\n box-shadow: 0 4px 20px rgba(245,166,35,0.3);\r\n }\r\n\r\n .btn-brand:hover { transform: translateY(-2px); box-shadow: 0 6px 28px rgba(245,166,35,0.4); }\r\n .btn-brand:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }\r\n\r\n \/* --- Game Screen --- *\/\r\n #game-screen { display: none; width: 100%; max-width: 500px; }\r\n\r\n .game-info {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 8px 4px;\r\n margin-bottom: 6px;\r\n }\r\n\r\n .current-player-display {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n font-weight: 600;\r\n font-size: 0.9rem;\r\n }\r\n\r\n .current-player-dot {\r\n width: 18px; height: 18px; border-radius: 50%;\r\n box-shadow: 0 0 10px rgba(255,255,255,0.3);\r\n }\r\n\r\n .message-area {\r\n font-size: 0.75rem;\r\n color: var(--jee-blue);\r\n text-align: right;\r\n max-width: 50%;\r\n opacity: 0.8;\r\n }\r\n\r\n \/* --- Board --- *\/\r\n .board-wrapper {\r\n position: relative;\r\n width: 100%;\r\n padding-bottom: 100%;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .board-canvas {\r\n position: absolute;\r\n top: 0; left: 0;\r\n width: 100%; height: 100%;\r\n border-radius: 12px;\r\n box-shadow: 0 4px 32px rgba(0,0,0,0.6), 0 0 60px rgba(44,62,107,0.15);\r\n cursor: pointer;\r\n }\r\n\r\n \/* --- Dice Area --- *\/\r\n .dice-area {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 16px;\r\n padding: 12px;\r\n }\r\n\r\n .dice-container {\r\n width: 64px; height: 64px;\r\n perspective: 200px;\r\n cursor: pointer;\r\n }\r\n\r\n .dice {\r\n width: 100%; height: 100%;\r\n background: linear-gradient(135deg, #fff 0%, #f0f0f0 100%);\r\n border-radius: 12px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 1.8rem;\r\n font-weight: 800;\r\n color: var(--navy-deep);\r\n box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 0 20px rgba(245,166,35,0.1);\r\n transition: transform 0.3s;\r\n user-select: none;\r\n }\r\n\r\n .dice.rolling {\r\n animation: diceRoll 0.5s ease-out;\r\n }\r\n\r\n @keyframes diceRoll {\r\n 0% { transform: rotateX(0) rotateY(0) scale(1); }\r\n 25% { transform: rotateX(180deg) rotateY(90deg) scale(0.9); }\r\n 50% { transform: rotateX(360deg) rotateY(180deg) scale(1.05); }\r\n 75% { transform: rotateX(540deg) rotateY(270deg) scale(0.95); }\r\n 100% { transform: rotateX(720deg) rotateY(360deg) scale(1); }\r\n }\r\n\r\n .roll-btn {\r\n padding: 10px 28px;\r\n border: none;\r\n border-radius: 10px;\r\n font-family: 'Poppins', sans-serif;\r\n font-weight: 700;\r\n font-size: 0.9rem;\r\n cursor: pointer;\r\n background: linear-gradient(135deg, var(--b8-orange), var(--b8-orange-dark));\r\n color: var(--navy-deep);\r\n box-shadow: 0 4px 20px rgba(245,166,35,0.3);\r\n transition: all 0.2s;\r\n text-transform: uppercase;\r\n }\r\n\r\n .roll-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 28px rgba(245,166,35,0.4); }\r\n .roll-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }\r\n\r\n \/* --- Score Panel --- *\/\r\n .score-panel {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));\r\n gap: 6px;\r\n margin-top: 8px;\r\n }\r\n\r\n .score-card {\r\n background: var(--card-bg);\r\n backdrop-filter: blur(8px);\r\n border-radius: 10px;\r\n padding: 8px 10px;\r\n text-align: center;\r\n border: 2px solid transparent;\r\n transition: all 0.3s;\r\n }\r\n\r\n .score-card.active {\r\n box-shadow: 0 0 16px rgba(245,166,35,0.25);\r\n }\r\n\r\n .score-card .name {\r\n font-size: 0.7rem;\r\n font-weight: 600;\r\n margin-bottom: 2px;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n }\r\n\r\n .score-card .tokens-home {\r\n font-size: 0.65rem;\r\n color: rgba(176,212,219,0.6);\r\n }\r\n\r\n \/* --- Winner Modal --- *\/\r\n .modal-overlay {\r\n display: none;\r\n position: fixed;\r\n top: 0; left: 0; width: 100%; height: 100%;\r\n background: rgba(11,14,26,0.9);\r\n z-index: 1000;\r\n justify-content: center;\r\n align-items: center;\r\n backdrop-filter: blur(6px);\r\n }\r\n\r\n .modal-overlay.show { display: flex; }\r\n\r\n .modal-content {\r\n background: var(--card-bg);\r\n backdrop-filter: blur(16px);\r\n border-radius: 20px;\r\n padding: 32px;\r\n text-align: center;\r\n max-width: 340px;\r\n width: 90%;\r\n box-shadow: 0 8px 48px rgba(245,166,35,0.15);\r\n border: 2px solid var(--b8-orange);\r\n }\r\n\r\n .modal-content .trophy { font-size: 4rem; margin-bottom: 12px; }\r\n .modal-content h2 { color: var(--b8-orange); margin-bottom: 8px; font-size: 1.4rem; }\r\n .modal-content p { color: var(--jee-blue); margin-bottom: 20px; opacity: 0.7; }\r\n\r\n \/* --- Footer branding --- *\/\r\n .footer-brand {\r\n margin-top: 12px;\r\n font-size: 0.6rem;\r\n color: rgba(176,212,219,0.3);\r\n letter-spacing: 2px;\r\n text-transform: uppercase;\r\n }\r\n\r\n \/* --- Responsive --- *\/\r\n @media (max-width: 400px) {\r\n .logo-svg { height: 38px; }\r\n .game-title { font-size: 0.9rem; }\r\n .dice-container { width: 52px; height: 52px; }\r\n .dice { font-size: 1.5rem; border-radius: 10px; }\r\n .roll-btn { padding: 8px 20px; font-size: 0.8rem; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- betjee Logo (SVG recreation) -->\r\n<div class=\"logo-container\">\r\n <svg class=\"logo-svg\" viewbox=\"0 0 380 90\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <!-- Shadow\/outline layer -->\r\n <text x=\"8\" y=\"72\" font-family=\"Poppins, Arial Black, sans-serif\" font-weight=\"900\" font-size=\"76\" font-style=\"italic\" fill=\"#1A2744\" stroke=\"#1A2744\" stroke-width=\"8\" stroke-linejoin=\"round\">betjee<\/text>\r\n <!-- Navy outline -->\r\n <text x=\"8\" y=\"72\" font-family=\"Poppins, Arial Black, sans-serif\" font-weight=\"900\" font-size=\"76\" font-style=\"italic\" fill=\"none\" stroke=\"#2C3E6B\" stroke-width=\"5\" stroke-linejoin=\"round\">betjee<\/text>\r\n <!-- Orange \"bet\" -->\r\n <text x=\"8\" y=\"72\" font-family=\"Poppins, Arial Black, sans-serif\" font-weight=\"900\" font-size=\"76\" font-style=\"italic\" fill=\"url(#orangeGrad)\">bet<\/text>\r\n <!-- Blue \"jee\" -->\r\n <text x=\"172\" y=\"72\" font-family=\"Poppins, Arial Black, sans-serif\" font-weight=\"900\" font-size=\"76\" font-style=\"italic\" fill=\"url(#blueGrad)\">jee<\/text>\r\n <!-- Red accent bar on top of \"j\" -->\r\n <rect x=\"175\" y=\"6\" width=\"18\" height=\"12\" rx=\"2\" fill=\"#E63946\"\/>\r\n <defs>\r\n <lineargradient id=\"orangeGrad\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\r\n <stop offset=\"0%\" stop-color=\"#FFC947\"\/>\r\n <stop offset=\"100%\" stop-color=\"#E8951D\"\/>\r\n <\/lineargradient>\r\n <lineargradient id=\"blueGrad\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\r\n <stop offset=\"0%\" stop-color=\"#D4EEF2\"\/>\r\n <stop offset=\"100%\" stop-color=\"#8CBFC9\"\/>\r\n <\/lineargradient>\r\n <\/defs>\r\n <\/svg>\r\n <span class=\"game-title\">Ludo<\/span>\r\n<\/div>\r\n<div class=\"subtitle\">Classic Board Game<\/div>\r\n\r\n<!-- Setup Screen -->\r\n<div id=\"setup-screen\">\r\n <h2>Select Players<\/h2>\r\n <div class=\"player-option selected\" data-player=\"0\" onclick=\"togglePlayer(0)\">\r\n <div class=\"player-dot\" style=\"background:var(--red)\"><\/div>\r\n <input type=\"text\" value=\"Player 1\" onclick=\"event.stopPropagation()\" data-input=\"0\">\r\n <\/div>\r\n <div class=\"player-option selected\" data-player=\"1\" onclick=\"togglePlayer(1)\">\r\n <div class=\"player-dot\" style=\"background:var(--green)\"><\/div>\r\n <input type=\"text\" value=\"Player 2\" onclick=\"event.stopPropagation()\" data-input=\"1\">\r\n <\/div>\r\n <div class=\"player-option\" data-player=\"2\" onclick=\"togglePlayer(2)\">\r\n <div class=\"player-dot\" style=\"background:var(--yellow)\"><\/div>\r\n <input type=\"text\" value=\"Player 3\" onclick=\"event.stopPropagation()\" data-input=\"2\">\r\n <\/div>\r\n <div class=\"player-option\" data-player=\"3\" onclick=\"togglePlayer(3)\">\r\n <div class=\"player-dot\" style=\"background:var(--blue)\"><\/div>\r\n <input type=\"text\" value=\"Player 4\" onclick=\"event.stopPropagation()\" data-input=\"3\">\r\n <\/div>\r\n <button class=\"btn btn-brand\" onclick=\"startGame()\">Start Game<\/button>\r\n<\/div>\r\n\r\n<!-- Game Screen -->\r\n<div id=\"game-screen\">\r\n <div class=\"game-info\">\r\n <div class=\"current-player-display\">\r\n <div class=\"current-player-dot\" id=\"current-dot\"><\/div>\r\n <span id=\"current-name\">Player 1<\/span>'s turn\r\n <\/div>\r\n <div class=\"message-area\" id=\"message\">Roll the dice!<\/div>\r\n <\/div>\r\n\r\n <div class=\"board-wrapper\">\r\n <canvas class=\"board-canvas\" id=\"board-canvas\"><\/canvas>\r\n <\/div>\r\n\r\n <div class=\"dice-area\">\r\n <div class=\"dice-container\" onclick=\"rollDice()\">\r\n <div class=\"dice\" id=\"dice-face\">\ud83c\udfb2<\/div>\r\n <\/div>\r\n <button class=\"roll-btn\" id=\"roll-btn\" onclick=\"rollDice()\">Roll<\/button>\r\n <\/div>\r\n\r\n <div class=\"score-panel\" id=\"score-panel\"><\/div>\r\n<\/div>\r\n\r\n<!-- Winner Modal -->\r\n<div class=\"modal-overlay\" id=\"winner-modal\">\r\n <div class=\"modal-content\">\r\n <div class=\"trophy\">\ud83c\udfc6<\/div>\r\n <h2 id=\"winner-name\">Player Wins!<\/h2>\r\n <p>Mubarak ho! Congratulations!<\/p>\r\n <button class=\"btn btn-brand\" onclick=\"resetGame()\">Play Again<\/button>\r\n <\/div>\r\n<\/div>\r\n\r\n<div class=\"footer-brand\">Powered by betjee<\/div>\r\n\r\n<script>\r\n\/\/ ============== GAME CONSTANTS ==============\r\nconst COLORS = ['#E63946', '#2D6A4F', '#F5A623', '#1D3557'];\r\nconst COLOR_LIGHT = ['#FFCDD2', '#B7E4C7', '#FFE0B2', '#BBDEFB'];\r\nconst COLOR_NAMES = ['Red', 'Green', 'Yellow', 'Blue'];\r\n\r\n\/\/ Global path (52 cells) \u2014 [col, row] on a 15x15 grid\r\nconst GLOBAL_PATH = [\r\n [6,13],[6,12],[6,11],[6,10],[6,9],[6,8],\r\n [5,8],[4,8],[3,8],[2,8],[1,8],[0,8],\r\n [0,7],[0,6],\r\n [1,6],[2,6],[3,6],[4,6],[5,6],\r\n [6,6],[6,5],[6,4],[6,3],[6,2],[6,1],[6,0],\r\n [7,0],[8,0],\r\n [8,1],[8,2],[8,3],[8,4],[8,5],[8,6],\r\n [9,6],[10,6],[11,6],[12,6],[13,6],[14,6],\r\n [14,7],[14,8],\r\n [13,8],[12,8],[11,8],[10,8],[9,8],\r\n [8,8],[8,9],[8,10],[8,11],[8,12],[8,13],[8,14],\r\n [7,14],[7,13]\r\n];\r\n\r\nconst START_INDEX = [0, 13, 26, 39];\r\n\r\nconst HOME_PATHS = [\r\n [[7,13],[7,12],[7,11],[7,10],[7,9],[7,8]],\r\n [[1,7],[2,7],[3,7],[4,7],[5,7],[6,7]],\r\n [[7,1],[7,2],[7,3],[7,4],[7,5],[7,6]],\r\n [[13,7],[12,7],[11,7],[10,7],[9,7],[8,7]]\r\n];\r\n\r\nconst HOME_ENTRY_INDEX = [50, 11, 24, 37];\r\n\r\nconst BASE_POSITIONS = [\r\n [[1.5,10.5],[4.5,10.5],[1.5,13.5],[4.5,13.5]],\r\n [[1.5,1.5],[4.5,1.5],[1.5,4.5],[4.5,4.5]],\r\n [[10.5,1.5],[13.5,1.5],[10.5,4.5],[13.5,4.5]],\r\n [[10.5,10.5],[13.5,10.5],[10.5,13.5],[13.5,13.5]]\r\n];\r\n\r\nconst SAFE_INDICES = [0, 8, 13, 21, 26, 34, 39, 47];\r\n\r\n\/\/ ============== GAME STATE ==============\r\nlet players = [];\r\nlet currentPlayerIdx = 0;\r\nlet diceValue = 0;\r\nlet diceRolled = false;\r\nlet canRoll = true;\r\nlet consecutiveSixes = 0;\r\nlet selectedToken = -1;\r\nlet awaitingTokenSelection = false;\r\nlet gameOver = false;\r\nlet animating = false;\r\n\r\nlet tokens = [];\r\n\r\nlet canvas, ctx;\r\nlet cellSize;\r\nlet boardSize;\r\n\r\n\/\/ ============== SETUP ==============\r\nfunction togglePlayer(idx) {\r\n if (idx < 2) return;\r\n const el = document.querySelector(`.player-option[data-player=\"${idx}\"]`);\r\n el.classList.toggle('selected');\r\n}\r\n\r\nfunction startGame() {\r\n const selected = document.querySelectorAll('.player-option.selected');\r\n if (selected.length < 2) return;\r\n\r\n players = [];\r\n tokens = [];\r\n\r\n selected.forEach(el => {\r\n const idx = parseInt(el.dataset.player);\r\n const name = el.querySelector('input').value.trim() || `Player ${idx + 1}`;\r\n players.push({ index: idx, name, color: COLORS[idx], colorLight: COLOR_LIGHT[idx], tokensHome: 0 });\r\n const playerTokens = [];\r\n for (let t = 0; t < 4; t++) {\r\n playerTokens.push({ position: 'base', trackIndex: -1, homeStretchIndex: -1 });\r\n }\r\n tokens.push(playerTokens);\r\n });\r\n\r\n currentPlayerIdx = 0;\r\n diceValue = 0;\r\n diceRolled = false;\r\n canRoll = true;\r\n consecutiveSixes = 0;\r\n gameOver = false;\r\n animating = false;\r\n awaitingTokenSelection = false;\r\n\r\n document.getElementById('setup-screen').style.display = 'none';\r\n document.getElementById('game-screen').style.display = 'block';\r\n\r\n initCanvas();\r\n buildScorePanel();\r\n updateUI();\r\n drawBoard();\r\n}\r\n\r\nfunction initCanvas() {\r\n canvas = document.getElementById('board-canvas');\r\n const wrapper = canvas.parentElement;\r\n const size = wrapper.clientWidth;\r\n const dpr = window.devicePixelRatio || 1;\r\n canvas.width = size * dpr;\r\n canvas.height = size * dpr;\r\n canvas.style.width = size + 'px';\r\n canvas.style.height = size + 'px';\r\n ctx = canvas.getContext('2d');\r\n ctx.scale(dpr, dpr);\r\n boardSize = size;\r\n cellSize = size \/ 15;\r\n\r\n canvas.addEventListener('click', onCanvasClick);\r\n window.addEventListener('resize', () => {\r\n const s = wrapper.clientWidth;\r\n const d = window.devicePixelRatio || 1;\r\n canvas.width = s * d;\r\n canvas.height = s * d;\r\n canvas.style.width = s + 'px';\r\n canvas.style.height = s + 'px';\r\n ctx.setTransform(1,0,0,1,0,0);\r\n ctx.scale(d, d);\r\n boardSize = s;\r\n cellSize = s \/ 15;\r\n drawBoard();\r\n });\r\n}\r\n\r\n\/\/ ============== DRAWING ==============\r\nfunction drawBoard() {\r\n const cs = cellSize;\r\n ctx.clearRect(0, 0, boardSize, boardSize);\r\n\r\n \/\/ Board background\r\n ctx.fillStyle = '#F5F0E1';\r\n ctx.beginPath();\r\n roundRect(ctx, 0, 0, boardSize, boardSize, 10);\r\n ctx.fill();\r\n\r\n \/\/ Draw base yards\r\n drawBaseYard(0, 0, 9, cs, '#E63946', '#FFCDD2');\r\n drawBaseYard(0, 0, 0, cs, '#2D6A4F', '#B7E4C7');\r\n drawBaseYard(9*cs, 0, 0, cs, '#F5A623', '#FFE0B2');\r\n drawBaseYard(9*cs, 9*cs, 0, cs, '#1D3557', '#BBDEFB');\r\n\r\n \/\/ Draw grid cells\r\n for (let r = 0; r < 15; r++) {\r\n for (let c = 0; c < 15; c++) {\r\n if (c < 6 && r < 6) continue;\r\n if (c > 8 && r < 6) continue;\r\n if (c < 6 && r > 8) continue;\r\n if (c > 8 && r > 8) continue;\r\n if (c >= 6 && c <= 8 && r >= 6 && r <= 8) continue;\r\n drawCell(c, r, cs);\r\n }\r\n }\r\n\r\n \/\/ Draw home stretch colored paths\r\n HOME_PATHS.forEach((path, pi) => {\r\n const pColor = COLORS[pi];\r\n const inGame = players.some(p => p.index === pi);\r\n path.forEach(([c, r]) => {\r\n ctx.fillStyle = inGame ? pColor : '#ccc';\r\n ctx.globalAlpha = 0.35;\r\n ctx.fillRect(c * cs, r * cs, cs, cs);\r\n ctx.globalAlpha = 1;\r\n ctx.strokeStyle = '#ccc';\r\n ctx.lineWidth = 0.5;\r\n ctx.strokeRect(c * cs, r * cs, cs, cs);\r\n });\r\n });\r\n\r\n \/\/ Draw center triangle home\r\n drawCenterHome(cs);\r\n\r\n \/\/ Draw safe stars\r\n SAFE_INDICES.forEach(si => {\r\n const [c, r] = GLOBAL_PATH[si];\r\n drawStar(c * cs + cs\/2, r * cs + cs\/2, cs * 0.3, '#FFD700');\r\n });\r\n\r\n \/\/ Draw arrows at start positions\r\n START_INDEX.forEach((si, pi) => {\r\n const inGame = players.some(p => p.index === pi);\r\n if (!inGame) return;\r\n const [c, r] = GLOBAL_PATH[si];\r\n ctx.fillStyle = COLORS[pi];\r\n ctx.globalAlpha = 0.6;\r\n ctx.font = `${cs * 0.5}px Poppins`;\r\n ctx.textAlign = 'center';\r\n ctx.textBaseline = 'middle';\r\n ctx.fillText('\u25b6', c * cs + cs\/2, r * cs + cs\/2);\r\n ctx.globalAlpha = 1;\r\n });\r\n\r\n \/\/ Draw tokens\r\n drawAllTokens(cs);\r\n}\r\n\r\nfunction drawBaseYard(x, y, offsetR, cs, color, lightColor) {\r\n ctx.fillStyle = color;\r\n ctx.globalAlpha = 0.15;\r\n ctx.fillRect(x, y + offsetR * cs, 6 * cs, 6 * cs);\r\n ctx.globalAlpha = 1;\r\n\r\n ctx.strokeStyle = color;\r\n ctx.lineWidth = 2;\r\n ctx.strokeRect(x, y + offsetR * cs, 6 * cs, 6 * cs);\r\n\r\n const inX = x + cs * 0.8;\r\n const inY = y + offsetR * cs + cs * 0.8;\r\n const inW = 4.4 * cs;\r\n const inH = 4.4 * cs;\r\n ctx.fillStyle = '#F5F0E1';\r\n ctx.beginPath();\r\n roundRect(ctx, inX, inY, inW, inH, 8);\r\n ctx.fill();\r\n ctx.strokeStyle = color;\r\n ctx.lineWidth = 1.5;\r\n ctx.beginPath();\r\n roundRect(ctx, inX, inY, inW, inH, 8);\r\n ctx.stroke();\r\n\r\n const spotPositions = [[1.5, 1.5], [4.5, 1.5], [1.5, 4.5], [4.5, 4.5]];\r\n spotPositions.forEach(([sc, sr]) => {\r\n const cx = x + sc * cs;\r\n const cy = y + offsetR * cs + sr * cs;\r\n ctx.beginPath();\r\n ctx.arc(cx, cy, cs * 0.38, 0, Math.PI * 2);\r\n ctx.fillStyle = lightColor;\r\n ctx.fill();\r\n ctx.strokeStyle = color;\r\n ctx.lineWidth = 1;\r\n ctx.stroke();\r\n });\r\n}\r\n\r\nfunction drawCell(c, r, cs) {\r\n const x = c * cs;\r\n const y = r * cs;\r\n ctx.fillStyle = '#F5F0E1';\r\n ctx.fillRect(x, y, cs, cs);\r\n ctx.strokeStyle = '#ddd';\r\n ctx.lineWidth = 0.5;\r\n ctx.strokeRect(x, y, cs, cs);\r\n}\r\n\r\nfunction drawCenterHome(cs) {\r\n const cx = 7.5 * cs;\r\n const cy = 7.5 * cs;\r\n\r\n drawTriangle(cx, cy, 6*cs, 9*cs, 9*cs, 9*cs, COLORS[0]);\r\n drawTriangle(cx, cy, 6*cs, 6*cs, 6*cs, 9*cs, COLORS[1]);\r\n drawTriangle(cx, cy, 6*cs, 6*cs, 9*cs, 6*cs, COLORS[2]);\r\n drawTriangle(cx, cy, 9*cs, 6*cs, 9*cs, 9*cs, COLORS[3]);\r\n\r\n ctx.beginPath();\r\n ctx.arc(cx, cy, cs * 0.8, 0, Math.PI * 2);\r\n ctx.fillStyle = '#F5F0E1';\r\n ctx.fill();\r\n ctx.strokeStyle = '#ccc';\r\n ctx.lineWidth = 1;\r\n ctx.stroke();\r\n\r\n \/\/ betjee text in center instead of HOME\r\n ctx.fillStyle = '#2C3E6B';\r\n ctx.font = `bold italic ${cs * 0.3}px Poppins`;\r\n ctx.textAlign = 'center';\r\n ctx.textBaseline = 'middle';\r\n ctx.fillText('betjee', cx, cy);\r\n}\r\n\r\nfunction drawTriangle(cx, cy, x1, y1, x2, y2, color) {\r\n ctx.beginPath();\r\n ctx.moveTo(cx, cy);\r\n ctx.lineTo(x1, y1);\r\n ctx.lineTo(x2, y2);\r\n ctx.closePath();\r\n ctx.fillStyle = color;\r\n ctx.globalAlpha = 0.5;\r\n ctx.fill();\r\n ctx.globalAlpha = 1;\r\n ctx.strokeStyle = '#fff';\r\n ctx.lineWidth = 1;\r\n ctx.stroke();\r\n}\r\n\r\nfunction drawStar(cx, cy, r, color) {\r\n const spikes = 5;\r\n const outerRadius = r;\r\n const innerRadius = r * 0.45;\r\n ctx.beginPath();\r\n for (let i = 0; i < spikes * 2; i++) {\r\n const radius = i % 2 === 0 ? outerRadius : innerRadius;\r\n const angle = (Math.PI \/ 2 * 3) + (i * Math.PI \/ spikes);\r\n const x = cx + Math.cos(angle) * radius;\r\n const y = cy + Math.sin(angle) * radius;\r\n if (i === 0) ctx.moveTo(x, y);\r\n else ctx.lineTo(x, y);\r\n }\r\n ctx.closePath();\r\n ctx.fillStyle = color;\r\n ctx.globalAlpha = 0.7;\r\n ctx.fill();\r\n ctx.globalAlpha = 1;\r\n}\r\n\r\nfunction drawAllTokens(cs) {\r\n players.forEach((player, pi) => {\r\n tokens[pi].forEach((token, ti) => {\r\n const pos = getTokenPixelPos(pi, ti, cs);\r\n if (!pos) return;\r\n drawToken(pos.x, pos.y, cs, player.color, player.colorLight, pi, ti);\r\n });\r\n });\r\n}\r\n\r\nfunction getTokenPixelPos(playerIdx, tokenIdx, cs) {\r\n const token = tokens[playerIdx][tokenIdx];\r\n const playerColorIdx = players[playerIdx].index;\r\n\r\n if (token.position === 'base') {\r\n const [c, r] = BASE_POSITIONS[playerColorIdx][tokenIdx];\r\n return { x: c * cs, y: r * cs };\r\n }\r\n\r\n if (token.position === 'track') {\r\n const globalIdx = (START_INDEX[playerColorIdx] + token.trackIndex) % 52;\r\n const [c, r] = GLOBAL_PATH[globalIdx];\r\n const offset = getStackOffset(playerIdx, tokenIdx, cs);\r\n return { x: c * cs + cs\/2 + offset.x, y: r * cs + cs\/2 + offset.y };\r\n }\r\n\r\n if (token.position === 'home_stretch') {\r\n const [c, r] = HOME_PATHS[playerColorIdx][token.homeStretchIndex];\r\n const offset = getStackOffset(playerIdx, tokenIdx, cs);\r\n return { x: c * cs + cs\/2 + offset.x, y: r * cs + cs\/2 + offset.y };\r\n }\r\n\r\n if (token.position === 'home') {\r\n const cx = 7.5 * cs;\r\n const cy = 7.5 * cs;\r\n const angles = [0, Math.PI\/2, Math.PI, Math.PI*1.5];\r\n const a = angles[tokenIdx] + (players[playerIdx].index * 0.3);\r\n return { x: cx + Math.cos(a) * cs * 0.4, y: cy + Math.sin(a) * cs * 0.4 };\r\n }\r\n\r\n return null;\r\n}\r\n\r\nfunction getStackOffset(playerIdx, tokenIdx, cs) {\r\n const offsets = [{x:0, y:0}, {x: cs*0.12, y:0}, {x:0, y:cs*0.12}, {x:cs*0.12, y:cs*0.12}];\r\n return offsets[tokenIdx % 4] || {x:0, y:0};\r\n}\r\n\r\nfunction drawToken(cx, cy, cs, color, lightColor, pi, ti) {\r\n const r = cs * 0.32;\r\n const isHighlighted = awaitingTokenSelection && pi === currentPlayerIdx && canMoveToken(pi, ti, diceValue);\r\n\r\n if (isHighlighted) {\r\n ctx.beginPath();\r\n ctx.arc(cx, cy, r + 4, 0, Math.PI * 2);\r\n ctx.fillStyle = 'rgba(245,166,35,0.4)';\r\n ctx.fill();\r\n\r\n ctx.beginPath();\r\n ctx.arc(cx, cy, r + 6, 0, Math.PI * 2);\r\n ctx.strokeStyle = '#F5A623';\r\n ctx.lineWidth = 2;\r\n ctx.stroke();\r\n }\r\n\r\n ctx.beginPath();\r\n ctx.arc(cx + 1, cy + 2, r, 0, Math.PI * 2);\r\n ctx.fillStyle = 'rgba(0,0,0,0.2)';\r\n ctx.fill();\r\n\r\n ctx.beginPath();\r\n ctx.arc(cx, cy, r, 0, Math.PI * 2);\r\n const grad = ctx.createRadialGradient(cx - r*0.3, cy - r*0.3, r*0.1, cx, cy, r);\r\n grad.addColorStop(0, lightColor);\r\n grad.addColorStop(1, color);\r\n ctx.fillStyle = grad;\r\n ctx.fill();\r\n ctx.strokeStyle = 'rgba(255,255,255,0.5)';\r\n ctx.lineWidth = 1.5;\r\n ctx.stroke();\r\n\r\n ctx.beginPath();\r\n ctx.arc(cx, cy, r * 0.5, 0, Math.PI * 2);\r\n ctx.fillStyle = color;\r\n ctx.fill();\r\n}\r\n\r\nfunction roundRect(ctx, x, y, w, h, r) {\r\n ctx.moveTo(x + r, y);\r\n ctx.lineTo(x + w - r, y);\r\n ctx.quadraticCurveTo(x + w, y, x + w, y + r);\r\n ctx.lineTo(x + w, y + h - r);\r\n ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);\r\n ctx.lineTo(x + r, y + h);\r\n ctx.quadraticCurveTo(x, y + h, x, y + h - r);\r\n ctx.lineTo(x, y + r);\r\n ctx.quadraticCurveTo(x, y, x + r, y);\r\n}\r\n\r\n\/\/ ============== GAME LOGIC ==============\r\nfunction rollDice() {\r\n if (!canRoll || diceRolled || animating || gameOver) return;\r\n\r\n canRoll = false;\r\n const diceFace = document.getElementById('dice-face');\r\n diceFace.classList.add('rolling');\r\n\r\n diceValue = Math.floor(Math.random() * 6) + 1;\r\n\r\n setTimeout(() => {\r\n diceFace.classList.remove('rolling');\r\n const dots = ['\u2680','\u2681','\u2682','\u2683','\u2684','\u2685'];\r\n diceFace.textContent = dots[diceValue - 1];\r\n diceRolled = true;\r\n\r\n if (diceValue === 6) {\r\n consecutiveSixes++;\r\n if (consecutiveSixes >= 3) {\r\n setMessage('Three 6s! Turn lost.');\r\n consecutiveSixes = 0;\r\n setTimeout(() => nextPlayer(), 800);\r\n return;\r\n }\r\n } else {\r\n consecutiveSixes = 0;\r\n }\r\n\r\n const movable = getMovableTokens(currentPlayerIdx, diceValue);\r\n if (movable.length === 0) {\r\n setMessage('No valid moves!');\r\n setTimeout(() => nextPlayer(), 800);\r\n return;\r\n }\r\n\r\n if (movable.length === 1) {\r\n moveToken(currentPlayerIdx, movable[0], diceValue);\r\n } else {\r\n awaitingTokenSelection = true;\r\n setMessage('Tap a token to move');\r\n drawBoard();\r\n }\r\n }, 500);\r\n}\r\n\r\nfunction getMovableTokens(playerIdx, dice) {\r\n const movable = [];\r\n tokens[playerIdx].forEach((token, ti) => {\r\n if (canMoveToken(playerIdx, ti, dice)) movable.push(ti);\r\n });\r\n return movable;\r\n}\r\n\r\nfunction canMoveToken(playerIdx, tokenIdx, dice) {\r\n const token = tokens[playerIdx][tokenIdx];\r\n const playerColorIdx = players[playerIdx].index;\r\n\r\n if (token.position === 'home') return false;\r\n\r\n if (token.position === 'base') {\r\n return dice === 6;\r\n }\r\n\r\n if (token.position === 'track') {\r\n const newTrackIdx = token.trackIndex + dice;\r\n const homeEntry = HOME_ENTRY_INDEX[playerColorIdx];\r\n const startIdx = START_INDEX[playerColorIdx];\r\n const relativeHome = (homeEntry - startIdx + 52) % 52;\r\n\r\n if (token.trackIndex <= relativeHome && newTrackIdx > relativeHome) {\r\n const overshoot = newTrackIdx - relativeHome - 1;\r\n return overshoot < 6;\r\n }\r\n\r\n if (newTrackIdx >= 52) {\r\n const normalizedCurrent = token.trackIndex;\r\n const normalizedNew = newTrackIdx;\r\n if (normalizedCurrent <= relativeHome && normalizedNew > relativeHome) {\r\n const overshoot = normalizedNew - relativeHome - 1;\r\n return overshoot < 6;\r\n }\r\n return true;\r\n }\r\n\r\n return true;\r\n }\r\n\r\n if (token.position === 'home_stretch') {\r\n const newIdx = token.homeStretchIndex + dice;\r\n return newIdx <= 5;\r\n }\r\n\r\n return false;\r\n}\r\n\r\nfunction moveToken(playerIdx, tokenIdx, dice) {\r\n awaitingTokenSelection = false;\r\n animating = true;\r\n const token = tokens[playerIdx][tokenIdx];\r\n const playerColorIdx = players[playerIdx].index;\r\n let captured = false;\r\n\r\n if (token.position === 'base' && dice === 6) {\r\n token.position = 'track';\r\n token.trackIndex = 0;\r\n captured = checkCapture(playerIdx, tokenIdx);\r\n finishMove(playerIdx, captured);\r\n return;\r\n }\r\n\r\n if (token.position === 'track') {\r\n const homeEntry = HOME_ENTRY_INDEX[playerColorIdx];\r\n const startIdx = START_INDEX[playerColorIdx];\r\n const relativeHome = (homeEntry - startIdx + 52) % 52;\r\n const newTrackIdx = token.trackIndex + dice;\r\n\r\n if (token.trackIndex <= relativeHome && newTrackIdx > relativeHome) {\r\n const homeIdx = newTrackIdx - relativeHome - 1;\r\n if (homeIdx >= 6) {\r\n token.position = 'home';\r\n token.trackIndex = -1;\r\n players[playerIdx].tokensHome++;\r\n if (players[playerIdx].tokensHome === 4) {\r\n finishMove(playerIdx, false);\r\n showWinner(playerIdx);\r\n return;\r\n }\r\n finishMove(playerIdx, false, true);\r\n return;\r\n }\r\n token.position = 'home_stretch';\r\n token.homeStretchIndex = homeIdx;\r\n token.trackIndex = -1;\r\n finishMove(playerIdx, false);\r\n return;\r\n }\r\n\r\n token.trackIndex = newTrackIdx % 52;\r\n captured = checkCapture(playerIdx, tokenIdx);\r\n finishMove(playerIdx, captured);\r\n return;\r\n }\r\n\r\n if (token.position === 'home_stretch') {\r\n const newIdx = token.homeStretchIndex + dice;\r\n if (newIdx >= 6) {\r\n token.position = 'home';\r\n token.homeStretchIndex = -1;\r\n players[playerIdx].tokensHome++;\r\n if (players[playerIdx].tokensHome === 4) {\r\n finishMove(playerIdx, false);\r\n showWinner(playerIdx);\r\n return;\r\n }\r\n finishMove(playerIdx, false, true);\r\n return;\r\n }\r\n token.homeStretchIndex = newIdx;\r\n finishMove(playerIdx, false);\r\n return;\r\n }\r\n}\r\n\r\nfunction checkCapture(playerIdx, tokenIdx) {\r\n const token = tokens[playerIdx][tokenIdx];\r\n if (token.position !== 'track') return false;\r\n\r\n const playerColorIdx = players[playerIdx].index;\r\n const globalIdx = (START_INDEX[playerColorIdx] + token.trackIndex) % 52;\r\n\r\n if (SAFE_INDICES.includes(globalIdx)) return false;\r\n\r\n let captured = false;\r\n players.forEach((otherPlayer, opi) => {\r\n if (opi === playerIdx) return;\r\n tokens[opi].forEach((otherToken, oti) => {\r\n if (otherToken.position !== 'track') return;\r\n const otherGlobalIdx = (START_INDEX[otherPlayer.index] + otherToken.trackIndex) % 52;\r\n if (otherGlobalIdx === globalIdx) {\r\n otherToken.position = 'base';\r\n otherToken.trackIndex = -1;\r\n captured = true;\r\n }\r\n });\r\n });\r\n\r\n return captured;\r\n}\r\n\r\nfunction finishMove(playerIdx, captured, reachedHome) {\r\n animating = false;\r\n drawBoard();\r\n updateScorePanel();\r\n\r\n if (diceValue === 6 || captured || reachedHome) {\r\n if (captured) setMessage('Captured! Roll again!');\r\n else if (reachedHome) setMessage('Token home! Roll again!');\r\n else setMessage('Rolled 6! Roll again!');\r\n diceRolled = false;\r\n canRoll = true;\r\n } else {\r\n setTimeout(() => nextPlayer(), 300);\r\n }\r\n}\r\n\r\nfunction nextPlayer() {\r\n consecutiveSixes = 0;\r\n currentPlayerIdx = (currentPlayerIdx + 1) % players.length;\r\n diceRolled = false;\r\n canRoll = true;\r\n diceValue = 0;\r\n document.getElementById('dice-face').textContent = '\ud83c\udfb2';\r\n setMessage('Roll the dice!');\r\n updateUI();\r\n drawBoard();\r\n}\r\n\r\nfunction onCanvasClick(e) {\r\n if (!awaitingTokenSelection || animating) return;\r\n\r\n const rect = canvas.getBoundingClientRect();\r\n const x = e.clientX - rect.left;\r\n const y = e.clientY - rect.top;\r\n const cs = cellSize;\r\n\r\n const movable = getMovableTokens(currentPlayerIdx, diceValue);\r\n let closestToken = -1;\r\n let closestDist = Infinity;\r\n\r\n movable.forEach(ti => {\r\n const pos = getTokenPixelPos(currentPlayerIdx, ti, cs);\r\n if (!pos) return;\r\n const dist = Math.sqrt((x - pos.x) ** 2 + (y - pos.y) ** 2);\r\n if (dist < cs * 0.8 && dist < closestDist) {\r\n closestDist = dist;\r\n closestToken = ti;\r\n }\r\n });\r\n\r\n if (closestToken >= 0) {\r\n moveToken(currentPlayerIdx, closestToken, diceValue);\r\n }\r\n}\r\n\r\n\/\/ ============== UI ==============\r\nfunction updateUI() {\r\n const player = players[currentPlayerIdx];\r\n document.getElementById('current-dot').style.background = player.color;\r\n document.getElementById('current-name').textContent = player.name;\r\n updateScorePanel();\r\n}\r\n\r\nfunction setMessage(msg) {\r\n document.getElementById('message').textContent = msg;\r\n}\r\n\r\nfunction buildScorePanel() {\r\n const panel = document.getElementById('score-panel');\r\n panel.innerHTML = '';\r\n players.forEach((p, i) => {\r\n const card = document.createElement('div');\r\n card.className = 'score-card';\r\n card.id = `score-${i}`;\r\n card.style.borderColor = p.color;\r\n card.innerHTML = `\r\n <div class=\"name\" style=\"color:${p.color}\">${p.name}<\/div>\r\n <div class=\"tokens-home\">Home: ${p.tokensHome}\/4<\/div>\r\n `;\r\n panel.appendChild(card);\r\n });\r\n updateScorePanel();\r\n}\r\n\r\nfunction updateScorePanel() {\r\n players.forEach((p, i) => {\r\n const card = document.getElementById(`score-${i}`);\r\n if (!card) return;\r\n card.querySelector('.tokens-home').textContent = `Home: ${p.tokensHome}\/4`;\r\n card.classList.toggle('active', i === currentPlayerIdx);\r\n if (i === currentPlayerIdx) {\r\n card.style.borderColor = p.color;\r\n } else {\r\n card.style.borderColor = 'transparent';\r\n }\r\n });\r\n}\r\n\r\nfunction showWinner(playerIdx) {\r\n gameOver = true;\r\n const modal = document.getElementById('winner-modal');\r\n document.getElementById('winner-name').textContent = `${players[playerIdx].name} Wins!`;\r\n modal.classList.add('show');\r\n}\r\n\r\nfunction resetGame() {\r\n document.getElementById('winner-modal').classList.remove('show');\r\n document.getElementById('game-screen').style.display = 'none';\r\n document.getElementById('setup-screen').style.display = 'block';\r\n gameOver = false;\r\n}\r\n\r\ndocument.addEventListener('dblclick', e => e.preventDefault());\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>betjee Ludo betjee betjee bet jee Ludo Classic Board Game Select Players Start Game Player 1’s turn Roll the dice! \ud83c\udfb2 Roll \ud83c\udfc6 Player Wins! Mubarak ho! Congratulations! Play Again Powered by betjee<\/p>","protected":false},"author":8,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1535","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cricketpromo.com\/ur\/wp-json\/wp\/v2\/pages\/1535","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cricketpromo.com\/ur\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cricketpromo.com\/ur\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cricketpromo.com\/ur\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/cricketpromo.com\/ur\/wp-json\/wp\/v2\/comments?post=1535"}],"version-history":[{"count":4,"href":"https:\/\/cricketpromo.com\/ur\/wp-json\/wp\/v2\/pages\/1535\/revisions"}],"predecessor-version":[{"id":1539,"href":"https:\/\/cricketpromo.com\/ur\/wp-json\/wp\/v2\/pages\/1535\/revisions\/1539"}],"wp:attachment":[{"href":"https:\/\/cricketpromo.com\/ur\/wp-json\/wp\/v2\/media?parent=1535"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}