tobspr_shapez.io/gulp/html.js

const buildUtils = require("./buildutils");
const fs = require("fs");
const path = require("path");
const crypto = require("crypto");
const { BUILD_VARIANTS } = require("./build_variants");

function computeIntegrityHash(fullPath, algorithm = "sha256") {
    const file = fs.readFileSync(fullPath);
    const hash = crypto.createHash(algorithm).update(file).digest("base64");
    return algorithm + "-" + hash;
}

/**
 * PROVIDES (per <variant>)
 *
 * html.<variant>.dev
 * html.<variant>.prod
 */
function gulptasksHTML($, gulp, buildFolder) {
    const commitHash = buildUtils.getRevision();
    async function buildHtml({
        googleAnalytics = false,
        standalone = false,
        integrity = true,
        enableCachebust = true,
    }) {
        function cachebust(url) {
            if (enableCachebust) {
                return buildUtils.cachebust(url, commitHash);
            }
            return url;
        }

        const hasLocalFiles = standalone;

        return gulp
            .src("../src/html/" + (standalone ? "index.standalone.html" : "index.html"))
            .pipe(
                $.dom(
                    /** @this {Document} **/ function () {
                        const document = this;

                        // Append css
                        const css = document.createElement("link");
                        css.rel = "stylesheet";
                        css.type = "text/css";
                        css.media = "none";
                        css.setAttribute("onload", "this.media='all'");
                        css.href = cachebust("main.css");
                        if (integrity) {
                            css.setAttribute(
                                "integrity",
                                computeIntegrityHash(path.join(buildFolder, "main.css"))
                            );
                        }
                        document.head.appendChild(css);

                        // Google analytics
                        if (googleAnalytics) {
                            const tagManagerScript = document.createElement("script");
                            tagManagerScript.src =
                                "https://www.googletagmanager.com/gtag/js?id=UA-165342524-1";
                            tagManagerScript.setAttribute("async", "");
                            document.head.appendChild(tagManagerScript);

                            const initScript = document.createElement("script");
                            initScript.textContent = `
                        window.dataLayer = window.dataLayer || [];
                        function gtag(){dataLayer.push(arguments);}
                        gtag('js', new Date());
                        gtag('config', 'UA-165342524-1', { anonymize_ip: true });
                        `;
                            document.head.appendChild(initScript);
                        }

                        // Do not need to preload in app or standalone
                        if (!hasLocalFiles) {
                            // Preload essentials
                            const preloads = ["fonts/GameFont.woff2"];

                            preloads.forEach(src => {
                                const preloadLink = document.createElement("link");
                                preloadLink.rel = "preload";
                                preloadLink.href = cachebust("res/" + src);
                                if (src.endsWith(".woff2")) {
                                    preloadLink.setAttribute("crossorigin", "anonymous");
                                    preloadLink.setAttribute("as", "font");
                                } else {
                                    preloadLink.setAttribute("as", "image");
                                }
                                document.head.appendChild(preloadLink);
                            });
                        }

                        let fontCss = `
                        @font-face {
                            font-family: "GameFont";
                            font-style: normal;
                            font-weight: normal;
                            font-display: swap;
                            src: url('${cachebust("res/fonts/GameFont.woff2")}') format("woff2");
                        }
                        `;
                        let loadingCss =
                            fontCss + fs.readFileSync(path.join(__dirname, "preloader.css")).toString();

                        const style = document.createElement("style");
                        style.setAttribute("type", "text/css");
                        style.textContent = loadingCss;
                        document.head.appendChild(style);

                        // Append loader, but not in standalone (directly include bundle there)
                        if (standalone) {
                            const bundleScript = document.createElement("script");
                            bundleScript.type = "text/javascript";
                            bundleScript.src = "bundle.js";
                            if (integrity) {
                                bundleScript.setAttribute(
                                    "integrity",
                                    computeIntegrityHash(path.join(buildFolder, "bundle.js"))
                                );
                            }
                            document.head.appendChild(bundleScript);
                        } else {
                            const loadJs = document.createElement("script");
                            loadJs.type = "text/javascript";
                            let scriptContent = "";
                            scriptContent += `var bundleSrc = '${cachebust("bundle.js")}';\n`;
                            // scriptContent += `var bundleSrcTranspiled = '${cachebust(
                            //     "bundle-transpiled.js"
                            // )}';\n`;

                            if (integrity) {
                                scriptContent +=
                                    "var bundleIntegrity = '" +
                                    computeIntegrityHash(path.join(buildFolder, "bundle.js")) +
                                    "';\n";
                                // scriptContent +=
                                //     "var bundleIntegrityTranspiled = '" +
                                //     computeIntegrityHash(path.join(buildFolder, "bundle-transpiled.js")) +
                                //     "';\n";
                            } else {
                                scriptContent += "var bundleIntegrity = null;\n";
                                scriptContent += "var bundleIntegrityTranspiled = null;\n";
                            }

                            scriptContent += fs.readFileSync("./bundle-loader.js").toString();
                            loadJs.textContent = scriptContent;
                            document.head.appendChild(loadJs);
                        }

                        const bodyContent = `
                <div id="ll_fp">_</div>
                <div id="ll_p">
                    <div id="ll_logo">
                        <img
                            src='data:image/png;base64,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
                            width="300"
                        >
                    </div>
                    <div id="ll_loader">
                        <span class='ll_spinner'></span>
                        <div class='ll_text' id='preload_ll_text'>${
                            hasLocalFiles ? "Loading" : "Downloading"
                        } Game Files</div >
                        <div id="ll_progressbar">
                            <span></span>
                            <div id="ll_preload_status">Downloading Bundle</div>
                        </div>
                        <div id="ll_standalone">
                            Page does not load? Try the <a href="https://get.shapez.io/slowpageload" target="_blank">Steam Version</a>!
                        </div>
                    </div>
                </div >
                `;

                        document.body.innerHTML = bodyContent;
                    }
                )
            )
            .pipe(
                $.htmlmin({
                    caseSensitive: true,
                    collapseBooleanAttributes: true,
                    collapseInlineTagWhitespace: true,
                    collapseWhitespace: true,
                    preserveLineBreaks: true,
                    minifyJS: true,
                    minifyCSS: true,
                    quoteCharacter: '"',
                    useShortDoctype: true,
                })
            )
            .pipe($.htmlBeautify())
            .pipe($.rename("index.html"))
            .pipe(gulp.dest(buildFolder));
    }

    for (const variant in BUILD_VARIANTS) {
        const data = BUILD_VARIANTS[variant];
        gulp.task("html." + variant + ".dev", () => {
            return buildHtml({
                googleAnalytics: false,
                standalone: data.standalone,
                integrity: false,
                enableCachebust: false,
            });
        });
        gulp.task("html." + variant + ".prod", () => {
            return buildHtml({
                googleAnalytics: !data.standalone,
                standalone: data.standalone,
                integrity: true,
                enableCachebust: !data.standalone,
            });
        });
    }
}

module.exports = {
    gulptasksHTML,
};