html/lab5/task3/script.js - main - maxxon/web-static-labs

html/lab5/task3/script.js
130 строк5 KB
Dasha_10
изменения
19 окт 2025, 18:51
19 окт 2025, 18:51b6adcb0
const paintButton = document.getElementById('paintButton');
const gridContainer = document.getElementById('gridContainer');
const colorStatsTableBody = document.querySelector('#colorStats tbody');

const colors = [
    "#2ecc71", "#3498db", "#9b59b6", "#34495e", "#f1c40f",
    "#e67e22", "#e74c3c", "#95a5a6", "#16a085", "#27ae60",
    "#2980b9", "#8e44ad", "#2c3e50", "#f39c12", "#d35400",
    "#c0392b", "#7f8c8d"
];

const GRID_SIZE = 10;
const WHITE = 'white';
const BLACK = 'black';

let grid = []; // Двумерный массив для хранения цветов клеток
let colorCounts = {}; // Объект для хранения количества каждого цвета

// Функция для инициализации сетки
function initializeGrid() {
    grid = Array(GRID_SIZE).fill(null).map(() => Array(GRID_SIZE).fill(WHITE));
}

// Функция для создания ячейки
function createGridCell(row, col) {
    const cell = document.createElement('div');
    cell.classList.add('gridCell');
    cell.dataset.row = row;
    cell.dataset.col = col;
    cell.addEventListener('click', handleCellClick);
    cell.addEventListener('contextmenu', handleCellRightClick);
    return cell;
}

// Функция для отрисовки сетки в DOM
function renderGrid() {
    gridContainer.innerHTML = ''; // Очищаем контейнер
    for (let row = 0; row < GRID_SIZE; row++) {
        for (let col = 0; col < GRID_SIZE; col++) {
            const cell = createGridCell(row, col);
            cell.style.backgroundColor = grid[row][col];
            gridContainer.appendChild(cell);
        }
    }
}

// Функция для раскраски ячейки случайным цветом
function paintCell(row, col) {
    const randomColor = colors[Math.floor(Math.random() * colors.length)];
    grid[row][col] = randomColor;
}

// Функция для раскраски всей сетки
function paintGrid() {
    for (let row = 0; row < GRID_SIZE; row++) {
        for (let col = 0; col < GRID_SIZE; col++) {
            paintCell(row, col);
        }
    }
}

// Функция для обновления статистики цветов
function updateColorStats() {
    colorCounts = {}; // Сбрасываем статистику
    for (let row = 0; row < GRID_SIZE; row++) {
        for (let col = 0; col < GRID_SIZE; col++) {
            const color = grid[row][col];
            colorCounts[color] = (colorCounts[color] || 0) + 1;
        }
    }

    // Обновляем таблицу в DOM
    renderColorStats();
}

// Функция для отрисовки статистики цветов в таблице
function renderColorStats() {
    colorStatsTableBody.innerHTML = ''; // Очищаем таблицу

    for (const color in colorCounts) {
                if (colorCounts.hasOwnProperty(color)) {
            const count = colorCounts[color];
            const row = document.createElement('tr');

            const colorCell = document.createElement('td');
            const colorBlock = document.createElement('span');
            colorBlock.classList.add('colorBlock');
            colorBlock.style.backgroundColor = color;
            colorCell.appendChild(colorBlock);
            row.appendChild(colorCell);

            const countCell = document.createElement('td');
            countCell.textContent = count;
            row.appendChild(countCell);

            colorStatsTableBody.appendChild(row);
        }
    }
}

// Обработчик клика на ячейку (левая кнопка)
function handleCellClick(event) {
    const row = parseInt(event.target.dataset.row);
    const col = parseInt(event.target.dataset.col);
    grid[row][col] = WHITE;
    event.target.style.backgroundColor = WHITE;
    updateColorStats();
}

// Обработчик клика правой кнопкой мыши на ячейку
function handleCellRightClick(event) {
    event.preventDefault(); // Отменяем контекстное меню
    const row = parseInt(event.target.dataset.row);
    const col = parseInt(event.target.dataset.col);
    grid[row][col] = BLACK;
    event.target.style.backgroundColor = BLACK;
    updateColorStats();
}

// Обработчик нажатия на кнопку "Раскрасить"
paintButton.addEventListener('click', () => {
    paintGrid();
    renderGrid(); // Перерисовываем сетку после раскраски
    updateColorStats();
});

// Инициализация при загрузке страницы
initializeGrid();
renderGrid();
updateColorStats();