How to load assets in a html more efficiently

257 Views Asked by At

I have been working on a html based game that is written in javascript. I have been wondering how I could load the assets from a zip file within the html without having it in 1 single line of code ( displayed in the image I have uploaded after ("script type="p4-project">19935291,"). The reason I want it to be more efficient is because having it in 1 line of code seems to make it load really slow.

(the image shows more of the code that is messed up with stack)

  </script>
  <script></script>
  <script type="p4-project">19935291,//this code just lists the assets
   <script>
      const getProjectData = (function() {
        const storage = scaffolding.storage;
        storage.onprogress = (total, loaded) => {
          setProgress(interpolate(0.75, 0.98, loaded / total));
        };

        storage.addHelper({
          load: (assetType, assetId, dataFormat) => zip.file(assetId + '.' + dataFormat)
            .async('uint8array')
            .then((data) => new storage.Asset(assetType, assetId, dataFormat, data))
        });
        return () => (async () => {
        const base85decode = e=>{const t=e=>(40===e&&(e=60),41===e&&(e=62),e-42),n=e.indexOf(","),c=+e.substring(0,n),o=new ArrayBuffer((s=c)%4==0?s:s+(4-s%4));var s;const a=new Uint32Array(o);for(let c=n+1,o=0;c<e.length;c+=5,o++)a[o]=85*t(e.charCodeAt(c+4))*85*85*85+85*t(e.charCodeAt(c+3))*85*85+85*t(e.charCodeAt(c+2))*85+85*t(e.charCodeAt(c+1))+t(e.charCodeAt(c));return new Uint8Array(o,0,c)};
        const dataElements = Array.from(document.querySelectorAll('script[type="p4-project"]'));
        const result = base85decode(dataElements.map(i => i.textContent).join(''));
        dataElements.forEach(i => i.remove());
        return result;
      })().then(async (data) => {
          zip = await Scaffolding.JSZip.loadAsync(data);
          return zip.file('project.json').async('arraybuffer');
        });
      })();
    </script>
  <script>
    const run = async () => {
      const projectData = await getProjectData();
      await scaffolding.loadProject(projectData);
      setProgress(1);
      loadingScreen.hidden = true;
      if (true) {
        scaffolding.start();
      } else {
        launchScreen.hidden = true;
        launchScreen.addEventListener('click', () => {
          launchScreen.hidden = false;
          scaffolding.start();
        });
        launchScreen.focus();
      }
    };
    run().catch(handleError);
  </script>
0

There are 0 best solutions below