94 lines
3.2 KiB
JavaScript
Executable File
94 lines
3.2 KiB
JavaScript
Executable File
function colorCell(cellName, colorName) {
|
|
console.log(`colorCell called with: ${cellName}, ${colorName}`);
|
|
|
|
// Map of valid named colors to their hex values
|
|
const validColors = {
|
|
"white": "#FFFFFF",
|
|
"lightGray": "#E4E4E4",
|
|
"mediumGray": "#888888",
|
|
"darkGray": "#222222",
|
|
"pink": "#FFA7D1",
|
|
"red": "#E50000",
|
|
"orange": "#E59500",
|
|
"brown": "#A06A42",
|
|
"yellow": "#E5D900",
|
|
"lightGreen": "#94E044",
|
|
"green": "#02BE01",
|
|
"cyan": "#00D3DD",
|
|
"blue": "#0083C7",
|
|
"darkBlue": "#0000EA",
|
|
"purple": "#CF6EE4",
|
|
"darkPurple": "#820080",
|
|
"black": "#000000"
|
|
};
|
|
|
|
// Check if the provided color name is valid
|
|
if (!validColors[colorName]) {
|
|
console.warn(`Invalid color name: ${colorName}. Please use a valid named color.`);
|
|
return;
|
|
}
|
|
|
|
// Find the cell using its class name
|
|
const cell = document.querySelector(`.cell.${cellName}`);
|
|
|
|
// If the cell exists, change its background color to the corresponding hex value
|
|
if (cell) {
|
|
cell.style.backgroundColor = validColors[colorName];
|
|
} 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 += '<div class="label"></div>'; // Empty top-left corner
|
|
for (let i = 0; i < gridSize; i++) {
|
|
grid.innerHTML += `<div class="label">${getLabel(i)}</div>`;
|
|
}
|
|
grid.innerHTML += '<div class="label"></div>'; // Empty top-right corner
|
|
|
|
// Create rows with side labels and cells
|
|
for (let i = 1; i <= gridSize; i++) {
|
|
grid.innerHTML += `<div class="label">${i}</div>`;
|
|
for (let j = 0; j < gridSize; j++) {
|
|
let cellName = `${getLabel(j)}${i}`; // This will generate names like A1, A2, B1, etc.
|
|
grid.innerHTML += `<div class="cell ${cellName}"></div>`;
|
|
}
|
|
grid.innerHTML += `<div class="label">${i}</div>`;
|
|
}
|
|
|
|
// Create bottom labels
|
|
grid.innerHTML += '<div class="label"></div>'; // Empty bottom-left corner
|
|
for (let i = 0; i < gridSize; i++) {
|
|
grid.innerHTML += `<div class="label">${getLabel(i)}</div>`;
|
|
}
|
|
grid.innerHTML += '<div class="label"></div>'; // Empty bottom-right corner
|
|
|
|
// Fetch and apply the current state
|
|
fetch('/api/current-state')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
data.forEach(pixel => {
|
|
colorCell(`${pixel.x}${pixel.y}`, pixel.color);
|
|
});
|
|
})
|
|
.catch(error => {
|
|
console.error('Error fetching current state:', error);
|
|
});
|
|
});
|