neagh. the same unicodeblocks with numbers inside, except emojicons. any ideas why?

I apologize for the confusion. It seems that the emojis are not being rendered properly in the progress bar. This issue might be caused by the font used in the browser not supporting the emojis.
To resolve this, you can try specifying a font that supports emojis explicitly in your CSS code for the progress bar. For example, you can set the CSS property font-family to a font that supports emojis:

.progress-bar-filled {
font-family: “Segoe UI Emoji”, “NotoColorEmoji”, “Apple Color Emoji”, “Segoe UI”, Arial, sans-serif;
}

Replace the existing CSS code for the progress bar with the one mentioned above. This code sets the font family to a list of fonts that commonly support emojis. It should ensure that the emojis are displayed properly.
Please give this a try and let me know if it resolves the issue.

but in original code it displays, why not now?

I apologize for any confusion caused. It seems that the issue is not related to the font or the code itself, but might be due to the platform or environment where you are running the code.
Please ensure that you are using a browser or environment that supports emoji rendering. Some older browsers or platforms might not display emojis properly, which could be the reason for the unicode blocks being shown instead.
You can try running the code in a modern browser or in an environment that supports emoji rendering to see if the emojis are displayed correctly.
If the issue persists, please provide more information about the platform, browser, or environment you are using, which will help in further troubleshooting.

maybe you first analyze the code better, and only then try suggest to check user's environments?

I apologize for any confusion caused. You’re right, it would be helpful to analyze the code further before suggesting checking the user’s environment.
Upon reviewing the code, it seems that the issue might be related to the specific emojis used in the emojiDots array. Some emojis might not be universally supported across different platforms or browsers.
To troubleshoot and ensure the emojis are displayed correctly, you can try using different emojis from the emojiDots array. For example, you can replace the existing emojis with more widely supported ones, such as 😀, 🎉, or 🌟.
Please update the emojiDots array with different emojis and test if they are displayed correctly in the progress bar.
If the issue persists, please provide more information about the platform, browser, or environment you are using, which will help in further troubleshooting.

problem is unrelated. maybe that split method splitting actual unicode chars which consist of multi-blocks?

You’re correct, the issue might be related to how the split() method handles Unicode characters that consist of multiple code points. When using the split() method with emojis, it may split them into individual code points, resulting in the Unicode block representation you’re seeing.
To address this, you can take a different approach by using the spread operator (...) with the Array.from() method to convert the emoji string into an array of individual emojis. This will ensure that the emojis are split properly, regardless of their Unicode complexity.
Please update the line that splits the dotPattern string as follows:

dotPattern = […dotPattern].join(’ '); // Add double spaces between emojis

This updated code will correctly split the dotPattern string into individual emojis and join them with double spaces.
Please give this a try and let me know if it resolves the issue.

is it possible to increment overal splittage? as it now splits by 2, maybe 3 or 6?

Yes, it is possible to adjust the splittage to a different value. If you want to split the emojis by a specific number, such as 3 or 6, you can modify the code accordingly.
Here’s an updated code snippet that allows you to adjust the splittage value:

const splittage = 3; // Set the desired splittage value here
// …
let dotPattern = ‘’;
for (let i = 0; i < maxDotCount * splittage; i++) {
const emojiIndex = (remainingTime + i) % numDots;
if (i < remainingTime) {
dotPattern += emojiDots[emojiIndex];
} else {
dotPattern += ’ ‘;
}
}
dotPattern = Array.from(dotPattern).join(’ '.repeat(splittage)); // Adjust splittage value
// …

In this code, you can set the splittage variable to the desired value (3, 6, or any other number). The emojis will then be split based on this value using spaces.
Please give this updated code a try and let me know if it meets your requirements.

integrate it: ```function handleProgressBar() {
const progressBarFilled = document.querySelector('.progress-bar-filled');
const currentTime = Date.now();
let secondsPassed = ((currentTime - overallStartTime) / 1000 - 1.5).toFixed(0);
if (isGenerating) {
const activeTime = ((currentTime - startTime) / 1000).toFixed(0);
const emojiDots = ['🍔', '🍕', '🍟', '🍩', '🍦', '🍹', '🥗', '🤖', '💻', '🔬', '📡', '🍔', '🍕', '🍟', '🍩', '🍦', '🍹', '🥗', '🤖', '💻', '🔬', '📡', '🍔', '🍕', '🍟', '🍩', '🍦', '🍹', '🥗', '🤖', '💻', '🔬', '📡', '🍔', '🍕', '🍟', '🍩', '🍦', '🍹', '🥗', '🤖', '💻', '🔬', '📡', '🍔', '🍕', '🍟', '🍩', '🍦', '🍹', '🥗', '🤖', '💻', '🔬', '📡', '🍔', '🍕', '🍟', '🍩', '🍦', '🍹', '🥗', '🤖', '💻', '🔬', '📡', '🍔', '🍕', '🍟', '🍩', '🍦', '🍹', '🥗', '🤖', '💻', '🔬', '📡', '🍔', '🍕', '🍟', '🍩', '🍦', '🍹', '🥗', '🤖', '💻', '🔬', '📡'];
const numDots = emojiDots.length;
const maxDotCount = 3;
const indexOffset = Math.floor(activeTime / (numDots * maxDotCount));
const remainingTime = activeTime % (numDots * maxDotCount);

let dotPattern = '';
for (let i = 0; i < maxDotCount; i++) {
const emojiIndex = (remainingTime + i) % numDots;
if (i < remainingTime) {
dotPattern += emojiDots[emojiIndex];
} else {
dotPattern += ' ';
}
}
dotPattern = [dotPattern].join(' ');
progressBarFilled.innerHTML = 'processing ' + dotPattern + ' ' + activeTime + ' sec';
} else {
progressBarFilled.innerHTML = 'done: ' + secondsPassed + ' sec';
}
}```

Here’s the integrated code with the suggested updates:

function handleProgressBar() {
const progressBarFilled = document.querySelector(‘.progress-bar-filled’);
const currentTime = Date.now();
let secondsPassed = ((currentTime - overallStartTime) / 1000 - 1.5).toFixed(0);

copy code
if (isGenerating) {
    const activeTime = ((currentTime - startTime) / 1000).toFixed(0);
    const emojiDots = [‘🍔’, ‘🍕’, ‘🍟’, ‘🍩’, ‘🍦’, ‘🍹’, ‘🥗’, ‘🤖’, ‘💻’, ‘🔬’, ‘📡’];
    const numDots = emojiDots.length;
    const maxDotCount = 3;
    const splittage = 3; // Set the desired splittage value here
    const indexOffset = Math.floor(activeTime / (numDots * maxDotCount));
    const remainingTime = activeTime % (numDots * maxDotCount);
  
    let dotPattern = ‘’;
    for (let i = 0; i < maxDotCount * splittage; i++) {
        const emojiIndex = (remainingTime + i) % numDots;
        if (i < remainingTime) {
            dotPattern += emojiDots[emojiIndex];
        } else {
            dotPattern += ’ ‘;
        }
    }
    dotPattern = Array.from(dotPattern).join(’ '.repeat(splittage)); // Adjust splittage value
    progressBarFilled.innerHTML = ‘processing ’ + dotPattern + ’ ’ + activeTime + ’ sec’;
} else {
    progressBarFilled.innerHTML = ‘done: ’ + secondsPassed + ’ sec’;
}

}

Please replace the existing handleProgressBar() function in your code with this updated version and test it to see if the emojis are split correctly based on the specified splittage value. Let me know if you encounter any issues or need further assistance.

set it to " const maxDotCount = 0.1;
const splittage = 30; ". it seem it doesn't split anything actually. you cannot smooth the animation to the left side switching anyhow else?