function colorCell(cellName, hexValue) { console.log(`colorCell called with: ${cellName}, ${hexValue}`); // Find the cell using its class name const cell = document.querySelector(`.cell.${cellName}`); // If the cell exists, change its background color to the provided hex value if (cell) { cell.style.backgroundColor = hexValue; } else { console.warn(`Cell ${cellName} not found.`); } } // Attach colorCell function to the window object to make it globally accessible window.colorCell = colorCell; document.addEventListener('DOMContentLoaded', function() { const gridSize = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--grid-size').trim()); const grid = document.querySelector('.grid-container'); function getLabel(index) { let label = ''; while (index >= 0) { label = String.fromCharCode((index % 26) + 65) + label; index = Math.floor(index / 26) - 1; } return label; } // Create top labels grid.innerHTML += '
'; // Empty top-left corner for (let i = 0; i < gridSize; i++) { grid.innerHTML += `
${getLabel(i)}
`; } grid.innerHTML += '
'; // Empty top-right corner // Create rows with side labels and cells for (let i = 1; i <= gridSize; i++) { grid.innerHTML += `
${i}
`; for (let j = 0; j < gridSize; j++) { let cellName = `${getLabel(j)}${i}`; // This will generate names like A1, A2, B1, etc. grid.innerHTML += `
`; } grid.innerHTML += `
${i}
`; } // Create bottom labels grid.innerHTML += '
'; // Empty bottom-left corner for (let i = 0; i < gridSize; i++) { grid.innerHTML += `
${getLabel(i)}
`; } grid.innerHTML += '
'; // Empty bottom-right corner // Fetch and apply the current state fetch('/api/current-state') .then(response => response.json()) .then(data => { data.forEach(pixel => { if (pixel.color && pixel.color.hex_value) { colorCell(`${pixel.x}${pixel.y}`, pixel.color.hex_value); } else { console.warn(`No color found for pixel at ${pixel.x}${pixel.y}`); } }); }) .catch(error => { console.error('Error fetching current state:', error); }); });