@needle-tools/engine/src/asap/needle-asap.ts

Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development with great integrations into editors like Unity or Blender - and can be deployed onto any device! It is flexible, extensible and networking and XR are built-in.

import { needleLogoOnlySVG } from "../engine/assets/index.js"
import { handleSessionGrantedASAP } from "./sessiongranted.js";
import { needleEngineHasLoaded } from "./utils.js";
/*
For testing run: npm run build:dev && npm run preview
Make sure you have gzip disabled
*/

const params = new URLSearchParams(location.search);
const debug = params.get("debugasap") != undefined;
if (debug) console.log("Needle asap is here!");

let needleEngineElement: HTMLElement | null = null;

startup();
handleSessionGrantedASAP({ debug });

function startup(iteration: number = 0): ReturnType<typeof setTimeout> | undefined {


    needleEngineElement = document.querySelector("needle-engine");
    if (!needleEngineElement) return setTimeout(startup, 50 + iteration * 10);

    insertTemporaryContentWhileEngineHasntLoaded(needleEngineElement);

    return undefined;

    // if (needleEngineHasLoaded()) {
    //     if (debug) console.log("Skip asap, needle engine has already loaded.");
    //     return;
    // }
    // if (debug) console.log("asap, needleEngineElement", needleEngineElement);

    // handlePrefetch(needleEngineElement);
}

// function handlePrefetch(needleEngineElement: HTMLElement) {
//     if (needleEngineHasLoaded()) {
//         return;
//     }
//     let src = needleEngineElement?.getAttribute("src") as string | Array<string>;
//     if (!src) {
//         return setTimeout(() => handlePrefetch(needleEngineElement), 100);
//     }
//     if (typeof src == "string" && src?.startsWith("[")) {
//         src = JSON.parse(src);
//     }
//     if (Array.isArray(src)) {
//         for (const url of src) {
//             prefetch(url);
//         }
//     }
//     else {
//         prefetch(src);
//     }
// 


function insertTemporaryContentWhileEngineHasntLoaded(needleEngineElement: HTMLElement) {
    // if (needleEngineHasLoaded()) return;

    const asapdiv = document.createElement("div");
    asapdiv.style.cssText = `
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        display: flex;
        justify-content: center;
        align-items: center;
        pointer-events: none;
    `

    const img = document.createElement("img");

    // if a custom logo is assigned we should use this here
    // technically we should check if the user has a license
    const customLogoUrl = needleEngineElement?.getAttribute("logo-src");
    if (customLogoUrl && customLogoUrl?.length > 0)
        img.src = customLogoUrl;
    else
        img.src = needleLogoOnlySVG;
    img.style.zIndex = "-10";
    img.style.width = "140px";
    img.style.height = "auto";
    img.style.opacity = "1";
    img.style.textShadow = "0 0 10px 0px rgba(0,0,0,.5)";

    asapdiv.appendChild(img);
    needleEngineElement.appendChild(asapdiv);

    // animation to pulsate
    // don't animate to opacity 0 because for LCP we need to keep the element in the DOM and visible to the user
    // see https://web.dev/articles/lcp#what-elements-are-considered
    img.animate([
        { opacity: .2 },
        { opacity: .7 },
        { opacity: .2 }
    ], {
        duration: 3000,
        iterations: Infinity
    });

    const i = setInterval(() => {
        if (needleEngineHasLoaded()) {
            clearInterval(i);
            img.remove();
        }
    }, 10)
}