@woosh/meep-engine/src/view/asset/PreloaderView.js

Pure JavaScript game engine. Fully featured and production ready.

import SmoothProgressBar from "../elements/progress/SmoothProgressBar.js";
import View from "../View.js";

class PreloaderView extends View {
    /**
     *
     * @param {AssetPreloader} preloader
     */
    constructor(preloader) {
        super();

        const el = this.el = document.createElement("div");
        el.classList.add("preloader-view");

        const bar = new SmoothProgressBar();
        el.appendChild(bar.el);

        const elSectionContainer = document.createElement("div");
        elSectionContainer.classList.add("sections");

        bar.el.appendChild(elSectionContainer);
        const sections = [];

        function updateSection(level) {
            const levelAssets = preloader.assets[level];
            const levelAssetCount = levelAssets.length;
            const section = sections[level];
            const fraction = (levelAssetCount / preloader.totalAssetCount);
            section.style.width = (fraction * 100) + "%";
        }

        function updateSections() {
            sections.forEach(function (s, level) {
                updateSection(level);
            });
        }

        //
        for (let level in preloader.assets) {
            if (preloader.assets.hasOwnProperty(level)) {

                const section = sections[level] = document.createElement("div");
                section.classList.add("background");
                section.classList.add("level-" + level);
                elSectionContainer.appendChild(section);
            }
        }
        updateSections();

        preloader.on.added.add(function (def, level) {
            updateSections();
        });

        preloader.on.progress.add(function (e) {
            bar.value = e.global.current;
            bar.max = e.global.total;
        });
    }
}

export default PreloaderView;