# injectPNGScripts-0.0.1.js

### [injectPNGScripts-0.0.1.js](https://github.com/intartnft/scripty.sol/blob/main/baseScripts/src/injectPNGScripts-0.0.1.js)

This script looks for other scripts with type `text/javascript+png` and decompresses them on run-time. Since decompres operation is `async`, after all the scripts are decompressed and ready to be used, it fires `base64URI_loaded` event.

If you will use PNG scripts, it's important to request this script after all the PNG scripts.

```javascript
"use strict";
(() => {
    let nodes = document.querySelectorAll(
        'script[type="text/javascript+png"][src]'
    );
    const total = nodes.length;
    let loaded_script_count = 0;

    function loadImage(base64URI) {
        let image = new Image();
        image.src = base64URI;
        image.onload = () => {
            const canvas = document.createElement("canvas");
            const gl = canvas.getContext("webgl");

            let texture = gl.createTexture();
            gl.bindTexture(gl.TEXTURE_2D, texture);

            let width = image.width;
            let height = image.height;

            gl.bindTexture(gl.TEXTURE_2D, texture);
            gl.texImage2D(
                gl.TEXTURE_2D,
                0,
                gl.RGBA,
                gl.RGBA,
                gl.UNSIGNED_BYTE,
                image
            );
            gl.generateMipmap(gl.TEXTURE_2D);

            let fb = gl.createFramebuffer();
            gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
            gl.framebufferTexture2D(
                gl.FRAMEBUFFER,
                gl.COLOR_ATTACHMENT0,
                gl.TEXTURE_2D,
                texture,
                0
            );

            if (
                gl.checkFramebufferStatus(gl.FRAMEBUFFER) ==
                gl.FRAMEBUFFER_COMPLETE
            ) {
                let pixels = new Uint8Array(width * height * 4);
                gl.readPixels(
                    0,
                    0,
                    width,
                    height,
                    gl.RGBA,
                    gl.UNSIGNED_BYTE,
                    pixels
                );

                let decoder = new TextDecoder("utf-8");
                let b64encoded = btoa(decoder.decode(pixels));

                let script = document.createElement("script");
                script.type = "text/javascript";
                script.async = true;
                script.onload = () => {
                    loaded_script_count++;
                    if (loaded_script_count == total) {
                        _sb.callEvents("base64URI_loaded");
                    }
                };
                script.src = "data:text/javascript;base64," + b64encoded.trim();
                document.body.appendChild(script);
            }
            canvas.remove();
        };
    }

    for (let node of nodes)
        try {
            let [source] = node.src.match(/^data:(.*?)(?:;(base64))?,(.*)$/);
            loadImage(source);
        } catch (error) {
            console.error("Could not INFLATE script", node, error);
        }
})();

```

### Usage

#### Getting notified when PNG script is ready to be used:

```javascript
_sb.addEvents("base64URI_loaded", () => {
    // scripts depend on PNG compressed scripts, should wait for 
    // base64URI_loaded event to be triggered.
})
```

Since PNG decompression is an async operation, scripts that depend on it, should wait until the script is ready to be used. PNG decompression script triggers an event when the script is decompressed and ready to be used.

You can check [this example](https://github.com/intartnft/scripty.sol/tree/main/examples/cube3D_PNG_URLSafe) to see how it's used.