html/lab5/task3/script.js - master - ChizhenkoM/web-static-labs

html/lab5/task3/script.js
106 строк3 KB
ChizhenkoM
lab8
17 апр 2026, 08:29
17 апр 2026, 08:2972323f6
'use strict';

const colors = ['#780000', '#c1121f', '#fdf0d5', '#003049', '#669bbc'];
const colorNames = ['Тёмно-красный', 'Красный', 'Бежевый', 'Тёмно-синий', 'Голубой'];

let grid = [];
let stats = { white: 0, black: 0 };

colors.forEach((c, i) => stats[colorNames[i]] = 0);

function initGrid() {
    const gridContainer = document.getElementById('grid');
    gridContainer.innerHTML = '';
    grid = [];

    for (let i = 0; i < 10; i++) {
        grid[i] = [];
        for (let j = 0; j < 10; j++) {
            const cell = document.createElement('div');
            cell.className = 'cell';
            cell.style.backgroundColor = 'white';
            cell.addEventListener('click', () => handleCellClick(i, j, 'left'));
            cell.addEventListener('contextmenu', (e) => {
                e.preventDefault();
                handleCellClick(i, j, 'right');
            });
            gridContainer.appendChild(cell);
            grid[i][j] = { color: 'white', element: cell };
        }
    }
    stats.white = 100;
    stats.black = 0;
    colors.forEach((c, i) => stats[colorNames[i]] = 0);
    updateStats();
}

function handleCellClick(row, col, type) {
    const cell = grid[row][col];
    const oldColor = cell.color;
    let newColor;

    if (type === 'left') {
        newColor = 'white';
    } else {
        newColor = 'black';
    }

    if (oldColor === newColor) return;

    // Обновляем статистику
    if (oldColor === 'white') stats.white--;
    else if (oldColor === 'black') stats.black--;
    else stats[oldColor]--;

    if (newColor === 'white') stats.white++;
    else if (newColor === 'black') stats.black++;
    else stats[newColor]++;

    cell.color = newColor;
    cell.element.style.backgroundColor = newColor;
    updateStats();
}

function randomColor() {
    const randomIndex = Math.floor(Math.random() * colors.length);
    return { color: colors[randomIndex], name: colorNames[randomIndex] };
}

function colorizeGrid() {
    // Сбрасываем статистику
    stats.white = 0;
    stats.black = 0;
    colors.forEach((c, i) => stats[colorNames[i]] = 0);

    for (let i = 0; i < 10; i++) {
        for (let j = 0; j < 10; j++) {
            const { color, name } = randomColor();
            grid[i][j].color = name;
            grid[i][j].element.style.backgroundColor = color;
            stats[name]++;
        }
    }
    updateStats();
}

function updateStats() {
    const tbody = document.querySelector('#statsTable tbody');
    tbody.innerHTML = '';

    const allStats = [
        ...colors.map((c, i) => ({ name: colorNames[i], count: stats[colorNames[i]], color: c })),
        { name: 'Белый', count: stats.white, color: '#ffffff' },
        { name: 'Чёрный', count: stats.black, color: '#000000' }
    ];

    allStats.forEach(stat => {
        const row = tbody.insertRow();
        const cellColor = row.insertCell(0);
        const cellCount = row.insertCell(1);
        cellColor.innerHTML = `<span class="color-sample" style="background: ${stat.color}; border: 1px solid #ccc;"></span> ${stat.name}`;
        cellCount.textContent = stat.count;
    });
}

document.getElementById('colorBtn').addEventListener('click', colorizeGrid);
initGrid();