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

html/lab5/task3/script.js
258 строк8 KB
karpov
finish lab3, lab4
12 мар 2026, 08:19
12 мар 2026, 08:1974cd197
class ColorGrid {
    constructor() {
        this.colorPalette = [
            '#1abc9c', // Turquoise
            '#2ecc71', // Emerald
            '#3498db', // Peter River
            '#9b59b6', // Amethyst
            '#34495e', // Wet Asphalt
            '#16a085', // Green Sea
            '#27ae60', // Nephritis
            '#2980b9', // Belize Hole
            '#8e44ad', // Wisteria
            '#2c3e50', // Midnight Blue
            '#f1c40f', // Sun Flower
            '#e67e22', // Carrot
            '#e74c3c', // Alizarin
            '#ecf0f1', // Clouds
            '#95a5a6', // Concrete
            '#f39c12', // Orange
            '#d35400', // Pumpkin
            '#c0392b'  // Pomegranate
        ];
        
        this.gridSize = 10;
        this.cellSize = 15;
        this.cells = [];
        this.colorStats = {};
        
        this.initializeElements();
        this.setupEventListeners();
        this.initializeGrid();
        this.initializeStats();
        this.updateStatsDisplay();
    }
    
    initializeElements() {
        this.gameField = document.getElementById('gameField');
        this.colorizeBtn = document.getElementById('colorizeBtn');
        this.colorsTableBody = document.getElementById('colorsTableBody');
    }
    
    setupEventListeners() {
        this.colorizeBtn.addEventListener('click', () => {
            this.colorizeGrid();
        });
    }
    
    initializeGrid() {
        this.gameField.innerHTML = '';
        this.cells = [];
        
        for (let row = 0; row < this.gridSize; row++) {
            for (let col = 0; col < this.gridSize; col++) {
                const cell = this.createCell(row, col);
                this.cells.push(cell);
                this.gameField.appendChild(cell.element);
            }
        }
    }
    
    createCell(row, col) {
        const cellElement = document.createElement('div');
        cellElement.className = 'cell';
        cellElement.dataset.row = row;
        cellElement.dataset.col = col;
        
        const cell = {
            element: cellElement,
            row: row,
            col: col,
            color: 'white'
        };
        
        cellElement.addEventListener('click', (e) => {
            e.preventDefault();
            this.setCellColor(cell, 'white');
        });
        
        cellElement.addEventListener('contextmenu', (e) => {
            e.preventDefault();
            this.setCellColor(cell, 'black');
        });
        
        return cell;
    }
    
    initializeStats() {
        
        this.colorStats = {
            'white': 100,
            'black': 0
        };
        
        this.colorPalette.forEach(color => {
            this.colorStats[color] = 0;
        });
    }
    
    colorizeGrid() {
        this.cells.forEach(cell => {
            const randomColor = this.getRandomColor();
            this.setCellColor(cell, randomColor);
        });
        
        this.showNotification('Поле раскрашено случайными цветами!', 'success');
    }
    
    setCellColor(cell, color) {
        this.colorStats[cell.color]--;
        
        cell.color = color;
        cell.element.style.backgroundColor = color;
        
        this.colorStats[color]++;
        
        cell.element.classList.add('color-changed');
        setTimeout(() => {
            cell.element.classList.remove('color-changed');
        }, 300);
        
        this.updateStatsDisplay();
    }
    
    getRandomColor() {
        const randomIndex = Math.floor(Math.random() * this.colorPalette.length);
        return this.colorPalette[randomIndex];
    }
    
    updateStatsDisplay() {
        this.colorsTableBody.innerHTML = '';
        
        const sortedColors = Object.entries(this.colorStats)
            .sort(([, countA], [, countB]) => countB - countA);
        
        sortedColors.forEach(([color, count]) => {
            if (count > 0 || color === 'white' || color === 'black') {
                const row = this.createStatsRow(color, count);
                this.colorsTableBody.appendChild(row);
            }
        });
    }
    
    createStatsRow(color, count) {
        const row = document.createElement('tr');
        
        const colorCell = document.createElement('td');
        colorCell.innerHTML = `
            <div class="color-sample" style="background-color: ${color};"></div>
            <span>${this.getColorName(color)}</span>
        `;
        
        const countCell = document.createElement('td');
        countCell.innerHTML = `
            <span class="count-badge">${count}</span>
        `;
        
        row.appendChild(colorCell);
        row.appendChild(countCell);
        
        return row;
    }
    
    getColorName(color) {
        const colorNames = {
            '#1abc9c': 'Turquoise',
            '#2ecc71': 'Emerald',
            '#3498db': 'Peter River',
            '#9b59b6': 'Amethyst',
            '#34495e': 'Wet Asphalt',
            '#16a085': 'Green Sea',
            '#27ae60': 'Nephritis',
            '#2980b9': 'Belize Hole',
            '#8e44ad': 'Wisteria',
            '#2c3e50': 'Midnight Blue',
            '#f1c40f': 'Sun Flower',
            '#e67e22': 'Carrot',
            '#e74c3c': 'Alizarin',
            '#ecf0f1': 'Clouds',
            '#95a5a6': 'Concrete',
            '#f39c12': 'Orange',
            '#d35400': 'Pumpkin',
            '#c0392b': 'Pomegranate',
            'white': 'Белый',
            'black': 'Черный'
        };
        
        return colorNames[color] || color;
    }
    
    showNotification(message, type = 'info') {
        const notification = document.createElement('div');
        notification.className = `notification ${type}`;
        notification.textContent = message;
        notification.style.cssText = `
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 15px 20px;
            border-radius: 8px;
            color: white;
            font-weight: 500;
            z-index: 1000;
            animation: slideIn 0.3s ease-out;
            max-width: 300px;
        `;
        
        if (type === 'success') {
            notification.style.background = 'linear-gradient(135deg, #00b09b, #96c93d)';
        } else if (type === 'error') {
            notification.style.background = 'linear-gradient(135deg, #ff416c, #ff4b2b)';
        } else {
            notification.style.background = 'linear-gradient(135deg, #667eea, #764ba2)';
        }
        
        document.body.appendChild(notification);
        
        setTimeout(() => {
            notification.style.animation = 'slideOut 0.3s ease-in';
            setTimeout(() => {
                if (notification.parentNode) {
                    notification.parentNode.removeChild(notification);
                }
            }, 300);
        }, 3000);
        
        if (!document.querySelector('#notification-styles')) {
            const style = document.createElement('style');
            style.id = 'notification-styles';
            style.textContent = `
                @keyframes slideIn {
                    from {
                        transform: translateX(100%);
                        opacity: 0;
                    }
                    to {
                        transform: translateX(0);
                        opacity: 1;
                    }
                }
                @keyframes slideOut {
                    from {
                        transform: translateX(0);
                        opacity: 1;
                    }
                    to {
                        transform: translateX(100%);
                        opacity: 0;
                    }
                }
            `;
            document.head.appendChild(style);
        }
    }
}

document.addEventListener('DOMContentLoaded', () => {
    new ColorGrid();
});