[{"_1":2,"_176":-5,"_177":-5},"loaderData",{"_3":4,"_58":59,"_175":-5},"root",{"_5":6,"_21":-5,"_22":-5,"_23":24,"_41":-5,"_42":-5,"_43":-5,"_44":45,"_54":55,"_56":57},"env",{"_7":8,"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20},"SUPABASE_URL","https://hello.websim.com","SUPABASE_ANON_KEY","eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im9jamVmZ2NqamlxeWt3YWR2dnJkIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MTE4MzI5OTMsImV4cCI6MjAyNzQwODk5M30.vsreOYwk8pKsr8NFlzpIzWAiD-vXj6ijv_Bhn1vYtHs","POSTHOG_KEY","phc_VHMOlrdxAbgSZHeF0SdSf07LZLRLAg5pZuTHkJGn050","POSTHOG_API_HOST","https://e.wbsm.ai","POSTHOG_UI_HOST","https://app.posthog.com","NODE_ENV","production","CF_PAGES_COMMIT_SHA","2b500d398db5219be907d48fb18ea3557f88a9d5","authUser","user","snapshotData",{"_25":-5,"_26":-5,"_27":-5,"_28":-5,"_29":-5,"_30":-5,"_31":-5,"_32":-5,"_33":-5,"_34":-5,"_35":-5,"_36":-5,"_37":-5,"_38":-5,"_39":-5,"_40":-5},"lastProjectId","sidebarTab","homepageTab","pinSidebar","settingsOpen","maximized","assetsExpanded","focusedAssetFilename","authError","authErrorCode","authErrorDescription","sidebarWidth","videoMuted","videoVolume","navigationContext","hasSeenFeedOnboarding","plan","balances","rewards","origins",{"_46":47,"_48":49,"_50":51,"_52":53},"origin","https://websim.com","apiOrigin","https://api.websim.com","contentOrigin","https://{PROJECT_ID}.c.websim.com","appDomainOrigin","https://{SUBDOMAIN}.on.websim.com","isMobile",false,"theme","auto","slug",{"_60":61,"_112":113,"_148":149,"_170":171,"_172":-5,"_173":174},"site",{"_62":60,"_63":64,"_65":66,"_67":68,"_69":70,"_71":72,"_73":74,"_84":85,"_86":87,"_88":89,"_94":95,"_105":106,"_107":108,"_109":-5,"_110":111},"_type","id","ofhMPcvj2RmuAxrHC","parent_id","gLJA1OHUJyhb5sZTD","created_at","2025-07-11T02:25:18.35747+00:00","state","done","model","gemini-flash-thinking","lore",{"_75":76,"_77":78,"_79":55,"_80":55,"_81":82,"_83":82},"version",1,"attachments",[],"enableApi","enableMobilePrompt","enableDB",true,"enableLLM2","title","Whiteboard","url","","prompt",{"_90":91,"_92":93},"type","plaintext","text","Vou querer que ao inves desse jogo colaborativo de desenho, tenha o jogo colaborstivo de dama chamado DAMAELO que é esse do codigo abaixo onde podem jogar ate 3 jogadores e cada um escola a sua cor. Ou seja, logo na página inicial depois de colocar o nome e a senha o usuário vai escolher qual é a cor da bolinha que ele vai querer e o segundo usuário não pode escolher a mesma bola que o primeiro e nem o terceiro usuário pode escolher a mesma cor da mesma bola que os demais. O codigo do jogo é: \n\n\n \n \n Damaelo\n \n \n \n \n\n\n

Damaelo

\n Turno de: \n

\n\n \n \n\n \n\n style: body {\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n background: linear-gradient(135deg, #0a0a0a, #2a002a); /* Darker, more futuristic gradient */\n margin: 0;\n font-family: 'Aldrich', sans-serif; /* A sci-fi/game-like font */\n color: #e0f0ff; /* Slightly cooler light bluish-white */\n overflow: hidden; /* Prevent scrollbar from background effects */\n}\n\n/* Optional: Add a subtle animated background pattern for futuristic feel */\nbody::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: \n radial-gradient(circle at 10% 20%, rgba(50, 0, 50, 0.2) 0%, transparent 80%),\n radial-gradient(circle at 90% 80%, rgba(0, 50, 50, 0.2) 0%, transparent 80%);\n opacity: 0.7;\n animation: backgroundPulse 15s infinite alternate;\n pointer-events: none; /* Allow clicks to pass through */\n}\n\n@keyframes backgroundPulse {\n 0% { transform: scale(1); opacity: 0.7; }\n 50% { transform: scale(1.05); opacity: 0.8; }\n 100% { transform: scale(1); opacity: 0.7; }\n}\n\n.game-container {\n text-align: center;\n background-color: rgba(26, 26, 26, 0.8); /* Slightly transparent for depth */\n padding: 30px; /* Increased padding */\n border-radius: 15px; /* More rounded corners */\n box-shadow: 0 0 25px rgba(255, 255, 255, 0.25), 0 0 60px rgba(100, 0, 100, 0.4); /* Enhanced glow */\n border: 1px solid rgba(150, 0, 150, 0.3); /* Subtle border */\n position: relative;\n z-index: 1; /* Ensure it's above the background animation */\n}\n\n#game-title {\n font-family: 'Aldrich', sans-serif;\n color: #ffb6c1; /* Light pink */\n font-size: 3.5em; /* Slightly larger */\n margin-bottom: 20px;\n text-shadow: 0 0 15px #ff69b4, 0 0 30px #ff69b4; /* Stronger pink glow */\n letter-spacing: 2px; /* Add some spacing */\n}\n\n.player-turn {\n font-size: 1.3em; /* Slightly larger */\n margin-bottom: 15px;\n color: #e0f0ff;\n}\n\n#current-player-display {\n font-weight: bold;\n text-transform: uppercase; /* Make player names uppercase */\n animation: pulseGlow 1.5s infinite alternate; /* Add a pulse effect */\n /* Specific colors for each player */\n &[data-player=\"red\"] { color: #ff5555; text-shadow: 0 0 5px #ff0000; }\n &[data-player=\"blue\"] { color: #5555ff; text-shadow: 0 0 5px #0000ff; }\n &[data-player=\"green\"] { color: #55ff55; text-shadow: 0 0 5px #00ff00; }\n}\n\n@keyframes pulseGlow {\n 0% { transform: scale(1); opacity: 1; }\n 100% { transform: scale(1.02); opacity: 0.9; }\n}\n\n#gameCanvas {\n background-color: transparent; /* Board image will be drawn by JS */\n border: 2px solid #777; /* Slightly thicker, subtle border */\n border-radius: 5px;\n display: block; /* Remove extra space below canvas */\n margin: 0 auto;\n box-shadow: 0 0 10px rgba(255, 255, 255, 0.1), 0 0 20px rgba(0, 200, 200, 0.3); /* Light blue/cyan glow */\n}\n\n.game-message {\n margin-top: 20px;\n font-size: 1.2em; /* Slightly larger */\n font-weight: bold;\n color: #a0ffff; /* Brighter cyan color */\n min-height: 1.5em; /* Reserve space to prevent layout shifts */\n text-shadow: 0 0 5px rgba(0, 255, 255, 0.5); /* Cyan glow */\n}\n\n/* Modal Styles */\n.modal {\n display: none; /* Hidden by default */\n position: fixed; /* Stay in place */\n z-index: 100; /* Sit on top */\n left: 0;\n top: 0;\n width: 100%; /* Full width */\n height: 100%; /* Full height */\n overflow: auto; /* Enable scroll if needed */\n background-color: rgba(0,0,0,0.8); /* Black w/ opacity */\n display: flex; /* Use flexbox for centering */\n justify-content: center;\n align-items: center;\n}\n\n.modal-content {\n background-color: rgba(26, 26, 26, 0.95);\n padding: 40px;\n border: 1px solid #888;\n border-radius: 15px;\n box-shadow: 0 0 30px rgba(255, 255, 255, 0.3), 0 0 80px rgba(100, 0, 100, 0.5);\n text-align: center;\n width: 90%;\n max-width: 500px;\n animation: fadeIn 0.5s ease-out;\n color: #e0f0ff;\n}\n\n.modal-content h2 {\n font-family: 'Aldrich', sans-serif;\n color: #ffb6c1;\n font-size: 2.5em;\n margin-bottom: 25px;\n text-shadow: 0 0 10px #ff69b4;\n}\n\n.player-input-group {\n margin-bottom: 20px;\n text-align: left;\n}\n\n.player-input-group label {\n display: block;\n margin-bottom: 8px;\n font-size: 1.1em;\n font-weight: bold;\n}\n\n.player-input-group input[type=\"text\"] {\n width: calc(100% - 20px);\n padding: 12px;\n margin-bottom: 15px;\n border: 1px solid #555;\n border-radius: 8px;\n background-color: #333;\n color: #e0f0ff;\n font-family: 'Aldrich', sans-serif;\n font-size: 1em;\n box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);\n}\n\n.color-options {\n display: flex;\n justify-content: center;\n gap: 10px;\n margin-top: 10px;\n flex-wrap: wrap; /* Allow wrapping for smaller screens */\n}\n\n.color-option {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n cursor: pointer;\n border: 3px solid transparent;\n transition: all 0.2s ease-in-out;\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 0.8em;\n color: rgba(255,255,255,0.7);\n font-weight: bold;\n}\n\n.color-option.red { background-color: #ff5555; }\n.color-option.blue { background-color: #5555ff; }\n.color-option.green { background-color: #55ff55; }\n\n.color-option.selected {\n border-color: #a0ffff;\n box-shadow: 0 0 15px #a0ffff, inset 0 0 8px #a0ffff;\n transform: scale(1.1);\n}\n\n.color-option.unavailable {\n opacity: 0.4;\n cursor: not-allowed;\n border-color: rgba(255, 255, 255, 0.1);\n box-shadow: none;\n transform: none;\n}\n\n.start-button {\n background-color: #ff69b4; /* Pink */\n color: white;\n padding: 15px 30px;\n border: none;\n border-radius: 10px;\n font-family: 'Aldrich', sans-serif;\n font-size: 1.4em;\n cursor: pointer;\n margin-top: 30px;\n transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;\n box-shadow: 0 0 20px rgba(255, 105, 180, 0.6);\n}\n\n.start-button:hover {\n background-color: #ff479e;\n transform: translateY(-2px);\n box-shadow: 0 0 30px rgba(255, 105, 180, 0.8);\n}\n\n.start-button:disabled {\n background-color: #666;\n cursor: not-allowed;\n box-shadow: none;\n transform: none;\n}\n\n.modal-message {\n margin-top: 15px;\n color: #ff5555; /* Error message color */\n font-size: 1em;\n min-height: 1.2em;\n font-weight: bold;\n}\n\n@keyframes fadeIn {\n from { opacity: 0; transform: scale(0.95); }\n to { opacity: 1; transform: scale(1); }\n} e game.js: const canvas = document.getElementById('gameCanvas');\nconst ctx = canvas.getContext('2d');\nconst currentPlayerDisplay = document.getElementById('current-player-display');\nconst gameMessageDisplay = document.getElementById('game-message');\nconst playerSetupModal = document.getElementById('playerSetupModal');\nconst playerInputsContainer = document.getElementById('player-inputs');\nconst startGameButton = document.getElementById('startGameButton');\nconst modalMessageDisplay = document.getElementById('modal-message');\n\nconst BOARD_IMAGE_PATH = 'IMG-20250710-WA0083.jpg';\nconst boardImage = new Image();\nboardImage.src = BOARD_IMAGE_PATH;\n\nconst NODE_RADIUS = 18;\nconst PIECE_RADIUS = 16;\nconst LINE_WIDTH = 2;\nconst HIGHLIGHT_COLOR = 'cyan'; // Changed highlight color for futuristic feel\nconst INVALID_MOVE_COLOR = 'rgba(255, 0, 0, 0.5)';\n\n// Player colors. Will be mapped to player names.\nconst DEFAULT_PLAYER_COLORS = {\n 'red': '#ff5555', // Brighter red\n 'blue': '#5555ff', // Brighter blue\n 'green': '#55ff55' // Brighter green\n};\n\nlet nodes = [];\nlet adj = []; // Adjacency list for connections\nlet currentPlayerColor = null; // Will store the actual color of the current player\nlet currentPlayerName = ''; // Will store the name of the current player\nlet selectedPieceNodeId = null;\nlet possibleMoves = []; // Array of node IDs for possible moves\nlet activePlayers = []; // Stores { name: 'Player X', color: 'red' }\nlet isCaptureSequenceActive = false; // New flag to manage multi-jumps\n\n// Player configuration (names and colors) from the modal\nlet playerConfigurations = []; // Array of { id: N, name: '', color: '' }\n\nconst hSpacing = 35; // Horizontal distance between node centers, slightly reduced for closer balls\nconst vSpacing = hSpacing * Math.sqrt(3) / 2; // Vertical distance for a hex grid-like layout\nconst tolerance = 5; // Tolerance for floating point comparisons of coordinates\n\n// Animation specific variables\nlet animationOffset = 0; // Global for animation state\nconst GLOW_DASH_LENGTH = 15; // Length of dashes for marching ants\nconst GLOW_GAP_LENGTH = 10; // Length of gaps\nconst GLOW_SPEED = 0.5; // Pixels per frame, controls animation speed\n\n// Audio context for sound effects\nlet audioContext;\nlet clickBuffer;\n\nasync function loadSound(url) {\n if (!audioContext) {\n audioContext = new (window.AudioContext || window.webkitAudioContext)();\n }\n try {\n const response = await fetch(url);\n const arrayBuffer = await response.arrayBuffer();\n const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);\n return audioBuffer;\n } catch (error) {\n console.error('Error loading sound:', error);\n return null;\n }\n}\n\nfunction playSound(buffer) {\n if (audioContext && buffer) {\n const source = audioContext.createBufferSource();\n source.buffer = buffer;\n source.connect(audioContext.destination);\n source.start(0);\n }\n}\n\n// Load sound effect once\nloadSound('click.mp3').then(buffer => {\n clickBuffer = buffer;\n});\n\n// --- Board Geometry and Initialization ---\nfunction setupBoard() {\n nodes = [];\n let currentId = 0;\n\n const canvasCenterX = canvas.width / 2;\n\n const numRows = 10; // 10 rows for the triangle\n const boardTotalHeight = (numRows - 1) * vSpacing;\n \n // Move the board higher on the canvas, closer to the title\n const boardTopY = 80; \n \n let tempNodesByRow = [];\n\n // Generate the 10-row triangular grid (55 nodes total) with the base at the top.\n // Row 0 will have 10 nodes, Row 9 will have 1 node.\n for (let r = 0; r < numRows; r++) { // 10 rows (0-indexed: r=0 to r=9)\n const numNodesInRow = numRows - r; // Number of nodes decreases per row (10, 9, ..., 1)\n const rowWidth = (numNodesInRow - 1) * hSpacing;\n const startX = canvasCenterX - rowWidth / 2;\n const currentY = boardTopY + r * vSpacing; // Y increases as we go down\n \n let currentRowNodes = [];\n for (let c = 0; c < numNodesInRow; c++) { // 0-indexed: c=0 to c=numNodesInRow-1\n const node = {\n id: currentId++,\n x: startX + c * hSpacing,\n y: currentY,\n occupiedBy: null // All nodes are initially empty/white\n };\n nodes.push(node); // Add to the flat nodes array\n currentRowNodes.push(node); // Add to the temporary 2D array for easy access\n }\n tempNodesByRow.push(currentRowNodes);\n }\n\n // Assign player pieces - 10 pieces for each player at the three corners (1-2-3-4 triangle)\n // Red Player (Bottom Point) - 1-2-3-4 triangle from the bottom\n const redColor = playerConfigurations.find(p => p.color === 'red')?.color || 'red'; // Default to red\n tempNodesByRow[numRows - 1][0].occupiedBy = redColor; // Row 9, index 0 (1 piece)\n tempNodesByRow[numRows - 2][0].occupiedBy = redColor; // Row 8, index 0\n tempNodesByRow[numRows - 2][1].occupiedBy = redColor; // Row 8, index 1 (2 pieces)\n tempNodesByRow[numRows - 3][0].occupiedBy = redColor; // Row 7, index 0\n tempNodesByRow[numRows - 3][1].occupiedBy = redColor; // Row 7, index 1\n tempNodesByRow[numRows - 3][2].occupiedBy = redColor; // Row 7, index 2 (3 pieces)\n tempNodesByRow[numRows - 4][0].occupiedBy = redColor; // Row 6, index 0\n tempNodesByRow[numRows - 4][1].occupiedBy = redColor; // Row 6, index 1\n tempNodesByRow[numRows - 4][2].occupiedBy = redColor; // Row 6, index 2\n tempNodesByRow[numRows - 4][3].occupiedBy = redColor; // Row 6, index 3 (4 pieces)\n\n // Blue Player (Top-Left Corner) - 4-3-2-1 triangle from top-left\n const blueColor = playerConfigurations.find(p => p.color === 'blue')?.color || 'blue'; // Default to blue\n tempNodesByRow[0][0].occupiedBy = blueColor;\n tempNodesByRow[0][1].occupiedBy = blueColor;\n tempNodesByRow[0][2].occupiedBy = blueColor;\n tempNodesByRow[0][3].occupiedBy = blueColor; // (4 pieces)\n\n tempNodesByRow[1][0].occupiedBy = blueColor;\n tempNodesByRow[1][1].occupiedBy = blueColor;\n tempNodesByRow[1][2].occupiedBy = blueColor; // (3 pieces)\n\n tempNodesByRow[2][0].occupiedBy = blueColor;\n tempNodesByRow[2][1].occupiedBy = blueColor; // (2 pieces)\n\n tempNodesByRow[3][0].occupiedBy = blueColor; // (1 piece)\n\n // Green Player (Top-Right Corner) - 4-3-2-1 triangle from top-right\n const greenColor = playerConfigurations.find(p => p.color === 'green')?.color || 'green'; // Default to green\n tempNodesByRow[0][(numRows - 0) - 1].occupiedBy = greenColor; // Row 0, last node (index 9)\n tempNodesByRow[0][(numRows - 0) - 2].occupiedBy = greenColor; // Row 0, second to last (index 8)\n tempNodesByRow[0][(numRows - 0) - 3].occupiedBy = greenColor; // Row 0, third to last (index 7)\n tempNodesByRow[0][(numRows - 0) - 4].occupiedBy = greenColor; // Row 0, fourth to last (index 6) (4 pieces)\n\n tempNodesByRow[1][(numRows - 1) - 1].occupiedBy = greenColor; // Row 1, last node (index 8)\n tempNodesByRow[1][(numRows - 1) - 2].occupiedBy = greenColor; // Row 1, second to last (index 7)\n tempNodesByRow[1][(numRows - 1) - 3].occupiedBy = greenColor; // Row 1, third to last (index 6) (3 pieces)\n\n tempNodesByRow[2][(numRows - 2) - 1].occupiedBy = greenColor; // Row 2, last node (index 7)\n tempNodesByRow[2][(numRows - 2) - 2].occupiedBy = greenColor; // Row 2, second to last (index 6) (2 pieces)\n\n tempNodesByRow[3][(numRows - 3) - 1].occupiedBy = greenColor; // Row 3, last node (index 6) (1 piece)\n\n // --- Adjacency List Generation (by proximity) ---\n // This logic correctly connects nodes in a hexagonal grid pattern.\n adj = new Array(nodes.length).fill(null).map(() => []);\n \n for (let i = 0; i < nodes.length; i++) {\n for (let j = i + 1; j < nodes.length; j++) {\n const node1 = nodes[i];\n const node2 = nodes[j];\n const dist = Math.sqrt((node1.x - node2.x) ** 2 + (node1.y - node2.y) ** 2);\n\n // Check for direct connections (hex grid neighbors)\n // Distances for direct neighbors are hSpacing (horizontal) or diagDist (diagonal)\n const diagDist = Math.sqrt((hSpacing / 2) ** 2 + vSpacing ** 2);\n\n if (Math.abs(dist - hSpacing) < tolerance || Math.abs(dist - diagDist) < tolerance) {\n adj[i].push(j);\n adj[j].push(i);\n }\n }\n }\n \n // Initialize activePlayers based on selected colors\n activePlayers = playerConfigurations.map(p => ({ name: p.name, color: p.color }));\n currentPlayerColor = activePlayers[0].color;\n currentPlayerName = activePlayers[0].name;\n\n updatePlayerDisplay();\n gameMessageDisplay.textContent = 'Clique em uma peça para começar.';\n}\n\n// --- Drawing Functions ---\nfunction drawBoardBackground() {\n // Check if the image is successfully loaded before drawing it\n if (boardImage.complete && boardImage.naturalWidth > 0) {\n ctx.drawImage(boardImage, 0, 0, canvas.width, canvas.height);\n } else {\n // Fallback: draw a basic grey background if image fails or is not yet loaded\n ctx.fillStyle = '#333';\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n }\n}\n\nfunction drawNodes() {\n nodes.forEach(node => {\n ctx.beginPath();\n ctx.arc(node.x, node.y, NODE_RADIUS, 0, Math.PI * 2);\n ctx.fillStyle = 'rgba(255, 255, 255, 0.1)'; // Semi-transparent white for nodes\n ctx.fill();\n });\n}\n\nfunction drawPieces() {\n nodes.forEach(node => {\n if (node.occupiedBy) {\n ctx.beginPath();\n ctx.arc(node.x, node.y, PIECE_RADIUS, 0, Math.PI * 2);\n ctx.fillStyle = DEFAULT_PLAYER_COLORS[node.occupiedBy]; // Use DEFAULT_PLAYER_COLORS for drawing\n ctx.strokeStyle = 'rgba(255, 255, 255, 0.4)'; // Softer stroke for pieces\n ctx.lineWidth = 2; // Slightly thicker for definition\n ctx.fill();\n ctx.stroke();\n\n // Draw a subtle glow for the selected piece\n if (node.id === selectedPieceNodeId) {\n ctx.save();\n ctx.shadowBlur = 15;\n ctx.shadowColor = HIGHLIGHT_COLOR;\n ctx.strokeStyle = HIGHLIGHT_COLOR;\n ctx.lineWidth = 4;\n ctx.stroke();\n ctx.restore();\n }\n }\n });\n}\n\nfunction drawLines() {\n ctx.strokeStyle = 'rgba(255, 255, 255, 0.2)'; // More subtle lines\n ctx.lineWidth = 1.5; // Slightly thinner lines\n adj.forEach((neighbors, nodeId) => {\n const node1 = nodes[nodeId];\n // Ensure node1 exists\n if (!node1) return; \n\n neighbors.forEach(neighborId => {\n const node2 = nodes[neighborId];\n // Ensure node2 exists and draw each line only once (e.g., from lower ID to higher ID)\n if (node2 && nodeId < neighborId) {\n const dx = node2.x - node1.x;\n const dy = node2.y - node1.y;\n const length = Math.sqrt(dx * dx + dy * dy);\n\n if (length === 0) return; // Avoid division by zero if nodes are at the exact same spot\n\n const unitDx = dx / length;\n const unitDy = dy / length;\n\n // Calculate start and end points on the circumference of the nodes\n const startLineX = node1.x + unitDx * NODE_RADIUS;\n const startLineY = node1.y + unitDy * NODE_RADIUS;\n const endLineX = node2.x - unitDx * NODE_RADIUS;\n const endLineY = node2.y - unitDy * NODE_RADIUS;\n\n ctx.beginPath();\n ctx.moveTo(startLineX, startLineY);\n ctx.lineTo(endLineX, endLineY);\n ctx.stroke();\n }\n });\n });\n}\n\nfunction drawHighlights() {\n possibleMoves.forEach(move => { // 'move' is an object { targetNodeId, capturedPieceNodeId }\n const node = nodes[move.targetNodeId];\n if (node) { // Ensure node exists\n ctx.beginPath();\n ctx.arc(node.x, node.y, NODE_RADIUS * 0.7, 0, Math.PI * 2);\n ctx.strokeStyle = HIGHLIGHT_COLOR;\n ctx.lineWidth = 4;\n ctx.shadowBlur = 10; // Glow for highlight\n ctx.shadowColor = HIGHLIGHT_COLOR;\n ctx.stroke();\n ctx.shadowBlur = 0; // Reset shadow\n ctx.shadowColor = 'transparent';\n }\n });\n}\n\nfunction drawPlayerTurnGlow() {\n // Only draw the glow if no piece is selected by the player or if a multi-capture is in progress\n if (selectedPieceNodeId === null || isCaptureSequenceActive) {\n nodes.forEach(node => {\n // Draw glow for the current player's pieces (unless one is selected and not in multi-capture)\n if (node.occupiedBy === currentPlayerColor && !(selectedPieceNodeId !== null && !isCaptureSequenceActive && node.id === selectedPieceNodeId)) {\n ctx.save();\n ctx.beginPath();\n ctx.arc(node.x, node.y, PIECE_RADIUS + 3, 0, Math.PI * 2); // Draw slightly outside the piece\n ctx.strokeStyle = 'rgba(0, 0, 0, 0.7)'; // Black border\n ctx.lineWidth = 3;\n ctx.shadowBlur = 10;\n ctx.shadowColor = 'rgba(0, 0, 0, 0.8)'; // Black shadow\n\n // Marching ants effect for the border\n ctx.setLineDash([GLOW_DASH_LENGTH, GLOW_GAP_LENGTH]);\n ctx.lineDashOffset = -animationOffset; // Animate the offset\n\n ctx.stroke();\n ctx.restore(); // Restore context to remove lineDash/shadow for subsequent draws\n }\n });\n }\n}\n\nfunction drawGame() {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n drawBoardBackground(); // Draw the image first or fallback\n drawLines(); // Draw lines over the image\n drawNodes(); // Draw transparent nodes over the image\n drawHighlights();\n drawPieces();\n drawPlayerTurnGlow(); // Draw the animated glow for the current player's pieces\n}\n\n// Animation loop\nfunction animate() {\n animationOffset = (animationOffset + GLOW_SPEED) % (GLOW_DASH_LENGTH + GLOW_GAP_LENGTH);\n drawGame();\n requestAnimationFrame(animate);\n}\n\n// --- Game Logic Functions ---\n\n/**\n * Finds the node ID at a given canvas (x, y) coordinate.\n * @param {number} mouseX - X coordinate on canvas.\n * @param {number} mouseY - Y coordinate on canvas.\n * @returns {number|null} The ID of the node clicked, or null if no node was clicked.\n */\nfunction getNodeAtCoordinates(mouseX, mouseY) {\n for (let i = 0; i < nodes.length; i++) {\n const node = nodes[i];\n const dist = Math.sqrt((mouseX - node.x) ** 2 + (mouseY - node.y) ** 2);\n if (dist < NODE_RADIUS) {\n return i;\n }\n }\n return null;\n}\n\n/**\n * Determines if a simple move from startNode to targetNode is allowed for the given piece color.\n * For simple moves, pieces can only move diagonally \"forward\" (towards the opponent's side).\n * \"Forward\" means:\n * - For red pieces (starting at the bottom point): Y coordinate decreases.\n * - For blue/green pieces (starting at the top base): Y coordinate increases.\n *\n * @param {object} startNode - The node where the piece is starting.\n * @param {object} targetNode - The node where the piece is trying to move.\n * @param {string} pieceColor - The color of the player's piece ('red', 'blue', 'green')\n * @returns {boolean} True if the move is allowed (forward diagonal), false otherwise.\n */\nfunction isAllowedDirection(startNode, targetNode, pieceColor) {\n const dx = targetNode.x - startNode.x;\n const dy = targetNode.y - startNode.y;\n\n // A single step diagonal move implies dy is close to vSpacing or -vSpacing,\n // and dx is close to hSpacing/2 or -hSpacing/2.\n const isDiagonalMove = (Math.abs(Math.abs(dx) - (hSpacing / 2)) < tolerance) &&\n (Math.abs(Math.abs(dy) - vSpacing) < tolerance);\n\n if (!isDiagonalMove) {\n return false; // Not a diagonal move, so not allowed.\n }\n\n // Determine the 'home' corner/point for the pieceColor to define 'forward'\n let homeNodeInfo = getHomeNodeInfoForColor(pieceColor);\n\n if (homeNodeInfo.position === 'bottom') {\n // Pieces from the bottom move \"up\" (decreasing Y)\n return dy < 0; \n } else if (homeNodeInfo.position === 'top') {\n // Pieces from the top move \"down\" (increasing Y)\n return dy > 0;\n }\n return false; // Should not happen\n}\n\n/**\n * Helper to determine if a color belongs to a top or bottom starting position.\n * Assumes 'red' is always bottom, and the other two are top.\n */\nfunction getHomeNodeInfoForColor(color) {\n const redPlayer = playerConfigurations.find(p => p.color === 'red');\n if (redPlayer && redPlayer.color === color) {\n return { position: 'bottom', color: 'red' };\n }\n // All other colors are considered 'top' for movement direction purposes\n return { position: 'top', color: color };\n}\n\n/**\n * Calculates all valid moves for a selected piece (simple moves and jumps).\n * If any jump moves are available, they are mandatory and returned exclusively.\n * Simple moves are restricted to \"forward\" diagonals.\n * Jumps are allowed over opponent pieces in any diagonal direction if a valid landing spot exists.\n * @param {number} startNodeId - The ID of the node where the selected piece is.\n * @returns {Array

Damaelo

Configurar Jogo

Chatiel