js/pixel-counter.js

export class PixelCounter {
    constructor() {
        this.patterns = {
            '1': [
                '00100',
                '01100',
                '00100',
                '00100',
                '00100',
                '00100',
                '01110'
            ],
            '2': [
                '01110',
                '10001',
                '00001',
                '00010',
                '00100',
                '01000',
                '11111'
            ],
            '3': [
                '01110',
                '10001',
                '00001',
                '00110',
                '00001',
                '10001',
                '01110'
            ],
            '4': [
                '00010',
                '00110',
                '01010',
                '10010',
                '11111',
                '00010',
                '00010'
            ],
            '5': [
                '11111',
                '10000',
                '10000',
                '11110',
                '00001',
                '10001',
                '01110'
            ],
            '6': [
                '01110',
                '10001',
                '10000',
                '11110',
                '10001',
                '10001',
                '01110'
            ],
            '7': [
                '11111',
                '00001',
                '00010',
                '00100',
                '01000',
                '01000',
                '01000'
            ],
            '8': [
                '01110',
                '10001',
                '10001',
                '01110',
                '10001',
                '10001',
                '01110'
            ],
            '9': [
                '01110',
                '10001',
                '10001',
                '01111',
                '00001',
                '10001',
                '01110'
            ],
            '0': [
                '01110',
                '10001',
                '10001',
                '10001',
                '10001',
                '10001',
                '01110'
            ],
            '.': [
                '00000',
                '00000',
                '00000',
                '00000',
                '00000',
                '00100',
                '01110'
            ],
            'P': [
                '11110',
                '10001',
                '10001',
                '11110',
                '10000',
                '10000',
                '10000'
            ],
            'B': [
                '11110',
                '10001',
                '10001',
                '11110',
                '10001',
                '10001',
                '11110'
            ]
        };
    }

    createCounter(bytesData) {
        console.log(bytesData[bytesData.length - 1].bytes);
        const bytesInPB = 1024 ** 5;
        const text = (bytesData[bytesData.length - 1].bytes / bytesInPB).toFixed(2) + 'PB';
        console.log(text);
        const container = document.getElementById('counter');
        const pixelSize = 5;
        const pixelGap = 1;
        let allPixels = [];

        text.split('').forEach((char, charIndex) => {
            const charDiv = document.createElement('div');
            charDiv.className = 'character';
            
            const pattern = this.patterns[char];
            if (!pattern) return;

            pattern.forEach((row, rowIndex) => {
                row.split('').forEach((cell, colIndex) => {
                    if (cell === '1') {
                        const pixel = document.createElement('div');
                        pixel.className = 'pixel';
                        
                        const finalX = colIndex * (pixelSize + pixelGap);
                        const finalY = rowIndex * (pixelSize + pixelGap);
                        
                        pixel.style.left = `${finalX}px`;
                        pixel.style.top = `${finalY}px`;
                        
                        charDiv.appendChild(pixel);
                        allPixels.push(pixel);
                    }
                });
            });
            
            container.appendChild(charDiv);
        });

        console.log(allPixels);

        allPixels.forEach((pixel, index) => {
            const delay = Math.random() * 50 + (index * 50);
            
            setTimeout(() => {
                pixel.classList.add('landed');
            }, delay);
        });
        const maxDelay = Math.max(...allPixels.map((_, index) => Math.random() * 50 + (index * 50)));
        setTimeout(() => {
            const textDiv = document.getElementById('counterText');
            textDiv.style.opacity = '1';
        }, maxDelay + 500);
    }

    init(bytesData) {
        this.createCounter(bytesData);
    }
}