From 6709873fcd131ce2f57eb587cdbfa83bb269938d Mon Sep 17 00:00:00 2001
From: VIGNESH KUMAR <45727291+VICTORVICKIE@users.noreply.github.com>
Date: Tue, 20 Feb 2024 14:40:58 +0530
Subject: [PATCH 01/12] abstract wasm ptr stuffs to ptr.js

---
 ptr.js | 415 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 415 insertions(+)
 create mode 100644 ptr.js

diff --git a/ptr.js b/ptr.js
new file mode 100644
index 0000000..b567208
--- /dev/null
+++ b/ptr.js
@@ -0,0 +1,415 @@
+function cstrlen(mem, ptr) {
+    let len = 0;
+    while (mem[ptr] != 0) {
+        len++;
+        ptr++;
+    }
+    return len;
+}
+
+function cstr_by_ptr(mem_buffer, ptr) {
+    const mem = new Uint8Array(mem_buffer);
+    const len = cstrlen(mem, ptr);
+    const bytes = new Uint8Array(mem_buffer, ptr, len);
+    return new TextDecoder().decode(bytes);
+}
+
+function color_hex_unpacked(r, g, b, a) {
+    r = r.toString(16).padStart(2, "0");
+    g = g.toString(16).padStart(2, "0");
+    b = b.toString(16).padStart(2, "0");
+    a = a.toString(16).padStart(2, "0");
+    return "#" + r + g + b + a;
+}
+
+function color_hex(color) {
+    const r = ((color >> (0 * 8)) & 0xff).toString(16).padStart(2, "0");
+    const g = ((color >> (1 * 8)) & 0xff).toString(16).padStart(2, "0");
+    const b = ((color >> (2 * 8)) & 0xff).toString(16).padStart(2, "0");
+    const a = ((color >> (3 * 8)) & 0xff).toString(16).padStart(2, "0");
+    return "#" + r + g + b + a;
+}
+
+function getColorFromMemory(buffer, color_ptr) {
+    const [r, g, b, a] = new Uint8Array(buffer, color_ptr, 4);
+    return color_hex_unpacked(r, g, b, a);
+}
+
+function cstr_fmt_by_ptr(mem_buffer, fmt_ptr, arg_ptr) {
+    const fmt = cstr_by_ptr(mem_buffer, fmt_ptr);
+
+    // VarArgs Chunk
+    let args = mem_buffer.slice(arg_ptr);
+    let result = "";
+    let fmt_buffer = fmt.split("");
+    let fmt_cur = 0;
+
+    let pad_width,
+        precision,
+        pad_with_zero,
+        pad_with_space,
+        justify_right,
+        pre_with_polarity,
+        pre_with_space,
+        pre_with_format,
+        capitalize,
+        precise,
+        bit_size,
+        radix;
+
+    reset_state();
+
+    function reset_state() {
+        bit_size = 32;
+        pad_width = 0;
+        precision = 0;
+        radix = 10;
+        pad_with_zero = false;
+        pad_with_space = false;
+        justify_right = true;
+
+        pre_with_polarity = false;
+        pre_with_space = false;
+        pre_with_format = false;
+
+        capitalize = false;
+        precise = false;
+    }
+
+    function parse_num(cursor) {
+        let width_end = cursor;
+        while (fmt_buffer[width_end]) {
+            if (/\d/.test(fmt_buffer[width_end])) width_end++;
+            else break;
+        }
+        let num = fmt_buffer.splice(cursor, width_end - cursor).join("");
+        return parseInt(num);
+    }
+
+    // Grab the view of args based on specifier and shift the args
+    function shift_args(view) {
+        args = args.slice(view.BYTES_PER_ELEMENT);
+        return view.at(0);
+    }
+
+    while (fmt_cur < fmt_buffer.length) {
+        if (fmt_buffer[fmt_cur] !== "%") {
+            // Normal character, copy it to the temp string
+            const str = fmt_buffer[fmt_cur++];
+            result += str;
+            continue;
+        }
+
+        // Peek only next character and splice the modifiers.
+        // So we can always simply look one char ahead
+        const peek_idx = fmt_cur + 1;
+        const peek_char = fmt_buffer[peek_idx];
+        switch (peek_char) {
+            case undefined: {
+                fmt_cur++;
+                break;
+            }
+
+            case "%": {
+                result += "%";
+                fmt_cur += 2;
+                break;
+            }
+
+            case "+": {
+                pre_with_polarity = true;
+                fmt_buffer.splice(peek_idx, 1);
+                break;
+            }
+
+            case "-": {
+                justify_right = false;
+                fmt_buffer.splice(peek_idx, 1);
+                break;
+            }
+
+            case " ": {
+                pre_with_space = !pre_with_polarity;
+                fmt_buffer.splice(peek_idx, 1);
+                break;
+            }
+
+            case ".": {
+                precise = true;
+                fmt_buffer.splice(peek_idx, 1);
+                break;
+            }
+
+            case "#": {
+                pre_with_format = true;
+                fmt_buffer.splice(peek_idx, 1);
+                break;
+            }
+
+            case "0": {
+                if (precise) {
+                    precision = parse_num(peek_idx);
+                } else {
+                    pad_with_zero = true;
+                    pad_width = parse_num(peek_idx);
+                }
+                break;
+            }
+
+            case "1":
+            case "2":
+            case "3":
+            case "4":
+            case "5":
+            case "6":
+            case "7":
+            case "8":
+            case "9": {
+                if (precise) {
+                    precision = parse_num(peek_idx);
+                } else {
+                    pad_with_space = true;
+                    pad_width = parse_num(peek_idx);
+                }
+                break;
+            }
+
+            // Modifiers
+            case "l": {
+                bit_size = bit_size === 32 ? 64 : 32;
+                fmt_buffer.splice(peek_idx, 1);
+            }
+
+            // In JS there are no number below 32 bit, so we are ignoring
+            // also clang bakes the overflown and underflown values as it is
+            case "h": {
+                fmt_buffer.splice(peek_idx, 1);
+                break;
+            }
+
+            case "c": {
+                const char_code = shift_args(new Uint32Array(args));
+                let str = String.fromCharCode(char_code);
+                let pad_char;
+
+                if (pad_with_zero || pad_with_space) pad_char = " ";
+                else pad_char = "";
+
+                if (justify_right) str = str.padStart(pad_width, pad_char);
+                else str = str.padEnd(pad_width, pad_char);
+
+                result += str;
+                fmt_cur += 2;
+                reset_state();
+                break;
+            }
+
+            case "s": {
+                const str_ptr = shift_args(new Uint32Array(args));
+                let str = cstr_by_ptr(mem_buffer, str_ptr);
+                let pad_char;
+
+                if (pad_with_zero || pad_with_space) pad_char = " ";
+                else pad_char = "";
+
+                if (justify_right) str = str.padStart(pad_width, pad_char);
+                else str = str.padEnd(pad_width, pad_char);
+
+                if (precise) str = str.substring(0, precision);
+
+                result += str;
+                fmt_cur += 2;
+                reset_state();
+                break;
+            }
+
+            case "o":
+            case "x":
+            case "X":
+            case "u": {
+                let num;
+                let pad_char, pre_char;
+
+                if (peek_char === "o") {
+                    radix = 8;
+                } else if (peek_char === "x") {
+                    radix = 16;
+                } else if (peek_char === "X") {
+                    radix = 16;
+                    capitalize = true;
+                } else {
+                    console.error("radix unreachable");
+                }
+
+                if (bit_size === 32) {
+                    num = shift_args(new Uint32Array(args));
+                } else {
+                    unaligned = args.byteLength % 8;
+                    args.slice(unaligned);
+                    num = shift_args(new BigUint64Array(args));
+                }
+
+                if (pad_with_zero) pad_char = "0";
+                else if (pad_with_space) pad_char = " ";
+                else pad_char = "";
+
+                if (pre_with_format && radix === 8) pre_char = "0";
+                else if (pre_with_format && radix === 16) pre_char = "0x";
+                else pre_char = "";
+
+                if (precise) {
+                    pad_char = " ";
+                    num = num.toString(radix).padStart(precision, "0");
+                }
+
+                if (justify_right) {
+                    num = num.toString(radix).padStart(pad_width, pad_char);
+                } else {
+                    pad_char = " ";
+                    num = num.toString(radix).padEnd(pad_width, pad_char);
+                }
+
+                num = pre_char + num;
+
+                if (capitalize) num = num.toUpperCase();
+
+                result += num;
+                fmt_cur += 2;
+                reset_state();
+                break;
+            }
+
+            case "i":
+            case "d": {
+                let num;
+                let pad_char, pre_char;
+
+                if (bit_size === 32) {
+                    num = shift_args(new Int32Array(args));
+                } else {
+                    unaligned = args.byteLength % 8;
+                    args = args.slice(unaligned);
+                    num = shift_args(new BigInt64Array(args));
+                }
+
+                if (pad_with_zero) pad_char = "0";
+                else if (pad_with_space) pad_char = " ";
+                else pad_char = "";
+
+                if (pre_with_polarity && num > 0) pre_char = "+";
+                else if (pre_with_space && num > 0) pre_char = " ";
+                else pre_char = "";
+
+                if (precise) {
+                    pad_char = " ";
+                    num = num.toString().padStart(precision, "0");
+                }
+
+                if (justify_right) {
+                    num = num.toString().padStart(pad_width, pad_char);
+                } else {
+                    pad_char = " ";
+                    num = num.toString().padEnd(pad_width, pad_char);
+                }
+
+                num = pre_char + num;
+
+                result += num;
+                fmt_cur += 2;
+                reset_state();
+                break;
+            }
+
+            case "E": {
+                capitalize = true;
+            }
+            case "e": {
+                // Align Bytes by 8
+                unaligned = args.byteLength % 8;
+                args = args.slice(unaligned);
+
+                let num = shift_args(new Float64Array(args));
+                let pad_char, pre_char;
+
+                if (pad_with_zero) pad_char = "0";
+                else if (pad_with_space) pad_char = " ";
+                else pad_char = "";
+
+                if (pre_with_polarity && num > 0) pre_char = "+";
+                else if (pre_with_space && num > 0) pre_char = " ";
+                else pre_char = "";
+
+                if (precise) num = num.toExponential(precision);
+                else num = num.toExponential(6);
+
+                if (justify_right) {
+                    num = num.toString().padStart(pad_width, pad_char);
+                } else {
+                    pad_char = " ";
+                    num = num.toString().padEnd(pad_width, pad_char);
+                }
+
+                if (capitalize) num = num.toUpperCase();
+
+                num = pre_char + num;
+
+                result += num;
+                fmt_cur += 2;
+                reset_state();
+                break;
+            }
+            case "F":
+            case "G": {
+                capitalize = true;
+            }
+            case "g":
+            case "f": {
+                // Align Bytes by 8
+                unaligned = args.byteLength % 8;
+                args = args.slice(unaligned);
+
+                let num = shift_args(new Float64Array(args));
+                let pad_char, pre_char;
+
+                if (pad_with_zero) pad_char = "0";
+                else if (pad_with_space) pad_char = " ";
+                else pad_char = "";
+
+                if (pre_with_polarity && num > 0) pre_char = "+";
+                else if (pre_with_space && num > 0) pre_char = " ";
+                else pre_char = "";
+
+                if (precise) num = num.toFixed(precision);
+                else num = num.toFixed(6);
+
+                if (justify_right) {
+                    num = num.toString().padStart(pad_width, pad_char);
+                } else {
+                    pad_char = " ";
+                    num = num.toString().padEnd(pad_width, pad_char);
+                }
+
+                if (capitalize) num = num.toUpperCase();
+
+                num = pre_char + num;
+
+                result += num;
+                fmt_cur += 2;
+                reset_state();
+                break;
+            }
+
+            // TODO: unsupported format specifiers, copy it to the temp string
+            // Flags   => *
+            // Len Mod => j z t L
+            // Specify => a A n p
+            default: {
+                const str = fmt_buffer[fmt_cur++];
+                result += str;
+                break;
+            }
+        }
+    }
+
+    return result;
+}

From 881a98ba59dd358946b12e653a966a53a6f8c356 Mon Sep 17 00:00:00 2001
From: VIGNESH KUMAR <45727291+VICTORVICKIE@users.noreply.github.com>
Date: Tue, 20 Feb 2024 14:41:25 +0530
Subject: [PATCH 02/12] abstract example entry script to examples.js

---
 examples.js | 59 +++++++++++++++++++++++++++++++++++++++++
 index.html  | 75 +++++++----------------------------------------------
 2 files changed, 68 insertions(+), 66 deletions(-)
 create mode 100644 examples.js

diff --git a/examples.js b/examples.js
new file mode 100644
index 0000000..4e8a93d
--- /dev/null
+++ b/examples.js
@@ -0,0 +1,59 @@
+const wasmPaths = {
+    tsoding: ["tsoding_ball", "tsoding_snake"],
+    core: ["core_basic_window", "core_basic_screen_manager", "core_input_keys", "core_input_mouse_wheel"],
+    shapes: ["shapes_colors_palette"],
+    text: ["text_writing_anim"],
+    textures: ["textures_logo_raylib"],
+};
+const defaultWasm = Object.values(wasmPaths)[0][0];
+
+const raylibExampleSelect = document.getElementById("raylib-example-select");
+
+for (const exampleCategory in wasmPaths) {
+    raylibExampleSelect.innerHTML += `<optgroup label="${exampleCategory}">`;
+    for (const example of wasmPaths[exampleCategory]) {
+        raylibExampleSelect.innerHTML += `<option>${example}</option>`;
+    }
+    raylibExampleSelect.innerHTML += "</optgroup>";
+}
+
+const { protocol } = window.location;
+const isHosted = protocol !== "file:";
+let raylibJs = undefined;
+
+function startRaylib(selectedWasm) {
+    var queryParams = new URLSearchParams(window.location.search);
+    queryParams.set("example", selectedWasm);
+    history.pushState(null, null, "?" + queryParams.toString());
+    raylibExampleSelect.value = selectedWasm;
+
+    if (isHosted) {
+        if (raylibJs !== undefined) {
+            raylibJs.stop();
+        }
+        raylibJs = new RaylibJs();
+        raylibJs.start({
+            wasmPath: `wasm/${selectedWasm}.wasm`,
+            canvasId: "game",
+        });
+    } else {
+        window.addEventListener("load", () => {
+            document.body.innerHTML = `
+                <div class="not-hosted-msg">
+                    <div class="important">
+                        <p>Unfortunately, due to CORs restrictions, the wasm assembly cannot be fetched.</p>
+                        <p>Please navigate to this location using a web server.</p>
+                        <p>If you have Python 3 on your system you can just do:</p>
+                    </div>
+                    <code>$ python3 -m http.server 6969</code>
+                </div>
+                `;
+        });
+    }
+}
+
+let queryParams = new URLSearchParams(window.location.search);
+const exampleParam = queryParams.get("example") ?? defaultWasm;
+
+if (Object.values(wasmPaths).flat().includes(exampleParam)) startRaylib(exampleParam);
+else startRaylib(defaultWasm);
diff --git a/index.html b/index.html
index 960a2cd..05d392b 100644
--- a/index.html
+++ b/index.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html>
+
 <head>
     <title>Hello, Raylib!</title>
     <style>
-
         :root {
             --color-dark: #181818;
             --color-lite: #e7e7e7;
@@ -29,9 +29,8 @@
             border: 1px solid var(--color-dark);
 
             @media (prefers-color-scheme: dark) {
-               border: 1px solid var(--color-lite);
+                border: 1px solid var(--color-lite);
             }
-
         }
 
         #raylib-example-select {
@@ -52,79 +51,23 @@
         .not-hosted-msg .important {
             font-weight: bold;
         }
+
         @font-face {
             font-family: grixel;
             src: url(fonts/acme_7_wide_xtnd.woff);
         }
     </style>
+    <script src="ptr.js"></script>
     <script src="raylib.js"></script>
 </head>
+
 <body>
     <label for="raylib-example-select">Choose an Example:</label>
-        <select id="raylib-example-select" onchange="startRaylib(this.value)">
+    <select id="raylib-example-select" onchange="startRaylib(this.value)">
         <!-- This is populated by js -->
-        </select>
+    </select>
     <canvas id="game"></canvas>
-    <script>
-        const wasmPaths = {
-            "tsoding": ["tsoding_ball", "tsoding_snake",],
-            "core": ["core_basic_window", "core_basic_screen_manager", "core_input_keys", "core_input_mouse_wheel",],
-            "shapes": ["shapes_colors_palette"],
-            "text": ["text_writing_anim"],
-            "textures": ["textures_logo_raylib"],
-        }
-        const defaultWasm = Object.values(wasmPaths)[0][0];
-
-        const raylibExampleSelect = document.getElementById("raylib-example-select");
-
-        for (const exampleCategory in wasmPaths){
-            raylibExampleSelect.innerHTML += `<optgroup label="${exampleCategory}">`
-            for (const example of wasmPaths[exampleCategory]){
-                raylibExampleSelect.innerHTML += `<option>${example}</option>`
-            }
-            raylibExampleSelect.innerHTML += "</optgroup>"
-        }
-
-        const { protocol } = window.location;
-        const isHosted = protocol !== "file:";
-        let raylibJs = undefined;
-
-        function startRaylib(selectedWasm){
-            var queryParams = new URLSearchParams(window.location.search);
-            queryParams.set("example", selectedWasm);
-            history.pushState(null, null, "?"+queryParams.toString());
-            raylibExampleSelect.value = selectedWasm;
-
-            if (isHosted) {
-                if (raylibJs !== undefined) {
-                    raylibJs.stop();
-                }
-                raylibJs = new RaylibJs();
-                raylibJs.start({
-                    wasmPath: `wasm/${selectedWasm}.wasm`,
-                    canvasId: "game",
-                });
-            } else {
-                window.addEventListener("load", () => {
-                    document.body.innerHTML = `
-                        <div class="not-hosted-msg">
-                            <div class="important">
-                                <p>Unfortunately, due to CORs restrictions, the wasm assembly cannot be fetched.</p>
-                                <p>Please navigate to this location using a web server.</p>
-                                <p>If you have Python 3 on your system you can just do:</p>
-                            </div>
-                            <code>$ python3 -m http.server 6969</code>
-                        </div>
-                        `;
-                });
-            }
-        }
-
-        let queryParams = new URLSearchParams(window.location.search);
-        const exampleParam = queryParams.get("example") ?? defaultWasm;
-
-        if (Object.values(wasmPaths).flat().includes(exampleParam)) startRaylib(exampleParam);
-        else startRaylib(defaultWasm);
-    </script>
+    <script src="examples.js"></script>
 </body>
+
 </html>

From c3b1b7941f2591b618250990ebfad41e145d9e64 Mon Sep 17 00:00:00 2001
From: VIGNESH KUMAR <45727291+VICTORVICKIE@users.noreply.github.com>
Date: Tue, 20 Feb 2024 14:41:38 +0530
Subject: [PATCH 03/12] implement TextFormat

---
 raylib.js | 52 +++++++++++++---------------------------------------
 1 file changed, 13 insertions(+), 39 deletions(-)

diff --git a/raylib.js b/raylib.js
index a6a0154..1eb02e5 100644
--- a/raylib.js
+++ b/raylib.js
@@ -197,11 +197,21 @@ class RaylibJs {
         return false;
     }
 
-    TextFormat(... args){ 
-        // TODO: Implement printf style formatting for TextFormat
-        return args[0];
+    TextFormat(text_ptr, args_ptr) {
+        const buffer = this.wasm.instance.exports.memory.buffer;
+        const fmt_text = cstr_fmt_by_ptr(buffer, text_ptr, args_ptr);
+
+        // REVIEW: Is it safe to use the slots in memory buffer starting from 0?
+        // Is there any way to create a internal shared buffer that can be shared with wasm?
+        const bytes = new Uint8Array(buffer, 0, fmt_text.length + 1);
+        for (let i = 0; i < fmt_text.length; i++) {
+            bytes[i] = fmt_text.charCodeAt(i);
+        }
+        bytes[fmt_text.length] = 0;
+        return bytes;
     }
 
+
     TraceLog(logLevel, text_ptr, ... args) {
         // TODO: Implement printf style formatting for TraceLog
         const buffer = this.wasm.instance.exports.memory.buffer;
@@ -473,39 +483,3 @@ const glfwKeyMapping = {
     //  GLFW_KEY_LAST   GLFW_KEY_MENU
 }
 
-function cstrlen(mem, ptr) {
-    let len = 0;
-    while (mem[ptr] != 0) {
-        len++;
-        ptr++;
-    }
-    return len;
-}
-
-function cstr_by_ptr(mem_buffer, ptr) {
-    const mem = new Uint8Array(mem_buffer);
-    const len = cstrlen(mem, ptr);
-    const bytes = new Uint8Array(mem_buffer, ptr, len);
-    return new TextDecoder().decode(bytes);
-}
-
-function color_hex_unpacked(r, g, b, a) {
-    r = r.toString(16).padStart(2, '0');
-    g = g.toString(16).padStart(2, '0');
-    b = b.toString(16).padStart(2, '0');
-    a = a.toString(16).padStart(2, '0');
-    return "#"+r+g+b+a;
-}
-
-function color_hex(color) {
-    const r = ((color>>(0*8))&0xFF).toString(16).padStart(2, '0');
-    const g = ((color>>(1*8))&0xFF).toString(16).padStart(2, '0');
-    const b = ((color>>(2*8))&0xFF).toString(16).padStart(2, '0');
-    const a = ((color>>(3*8))&0xFF).toString(16).padStart(2, '0');
-    return "#"+r+g+b+a;
-}
-
-function getColorFromMemory(buffer, color_ptr) {
-    const [r, g, b, a] = new Uint8Array(buffer, color_ptr, 4);
-    return color_hex_unpacked(r, g, b, a);
-}

From 89d4dd0b071fc876dbf4330bbd5773e80a5ec1c6 Mon Sep 17 00:00:00 2001
From: VIGNESH KUMAR <45727291+VICTORVICKIE@users.noreply.github.com>
Date: Thu, 22 Feb 2024 14:19:31 +0530
Subject: [PATCH 04/12] use heap base

---
 nob.c     | 1 +
 raylib.js | 7 ++++---
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/nob.c b/nob.c
index 15ef36d..c3ee1e6 100644
--- a/nob.c
+++ b/nob.c
@@ -72,6 +72,7 @@ bool build_wasm(void)
         nob_cmd_append(&cmd, "-I./include");
         nob_cmd_append(&cmd, "--no-standard-libraries");
         nob_cmd_append(&cmd, "-Wl,--export-table");
+        nob_cmd_append(&cmd, "-Wl,--export=__heap_base");
         nob_cmd_append(&cmd, "-Wl,--no-entry");
         nob_cmd_append(&cmd, "-Wl,--allow-undefined");
         nob_cmd_append(&cmd, "-Wl,--export=main");
diff --git a/raylib.js b/raylib.js
index 1eb02e5..55d3ede 100644
--- a/raylib.js
+++ b/raylib.js
@@ -201,14 +201,15 @@ class RaylibJs {
         const buffer = this.wasm.instance.exports.memory.buffer;
         const fmt_text = cstr_fmt_by_ptr(buffer, text_ptr, args_ptr);
 
-        // REVIEW: Is it safe to use the slots in memory buffer starting from 0?
+        const heap_base = this.wasm.instance.exports.__heap_base.value;
+        // REVIEW: Is it safe to use the slots in memory buffer starting from heap_base?
         // Is there any way to create a internal shared buffer that can be shared with wasm?
-        const bytes = new Uint8Array(buffer, 0, fmt_text.length + 1);
+        const bytes = new Uint8Array(buffer, heap_base, fmt_text.length + 1);
         for (let i = 0; i < fmt_text.length; i++) {
             bytes[i] = fmt_text.charCodeAt(i);
         }
         bytes[fmt_text.length] = 0;
-        return bytes;
+        return heap_base;
     }
 
 

From 124b3aedc404bd6b644a530c103e34465b806bb2 Mon Sep 17 00:00:00 2001
From: VIGNESH KUMAR <45727291+VICTORVICKIE@users.noreply.github.com>
Date: Fri, 23 Feb 2024 13:11:18 +0530
Subject: [PATCH 05/12] back to solo file

---
 examples.js |  59 --------
 index.html  |  63 +++++++-
 ptr.js      | 415 ----------------------------------------------------
 raylib.js   | 415 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 476 insertions(+), 476 deletions(-)
 delete mode 100644 examples.js
 delete mode 100644 ptr.js

diff --git a/examples.js b/examples.js
deleted file mode 100644
index 4e8a93d..0000000
--- a/examples.js
+++ /dev/null
@@ -1,59 +0,0 @@
-const wasmPaths = {
-    tsoding: ["tsoding_ball", "tsoding_snake"],
-    core: ["core_basic_window", "core_basic_screen_manager", "core_input_keys", "core_input_mouse_wheel"],
-    shapes: ["shapes_colors_palette"],
-    text: ["text_writing_anim"],
-    textures: ["textures_logo_raylib"],
-};
-const defaultWasm = Object.values(wasmPaths)[0][0];
-
-const raylibExampleSelect = document.getElementById("raylib-example-select");
-
-for (const exampleCategory in wasmPaths) {
-    raylibExampleSelect.innerHTML += `<optgroup label="${exampleCategory}">`;
-    for (const example of wasmPaths[exampleCategory]) {
-        raylibExampleSelect.innerHTML += `<option>${example}</option>`;
-    }
-    raylibExampleSelect.innerHTML += "</optgroup>";
-}
-
-const { protocol } = window.location;
-const isHosted = protocol !== "file:";
-let raylibJs = undefined;
-
-function startRaylib(selectedWasm) {
-    var queryParams = new URLSearchParams(window.location.search);
-    queryParams.set("example", selectedWasm);
-    history.pushState(null, null, "?" + queryParams.toString());
-    raylibExampleSelect.value = selectedWasm;
-
-    if (isHosted) {
-        if (raylibJs !== undefined) {
-            raylibJs.stop();
-        }
-        raylibJs = new RaylibJs();
-        raylibJs.start({
-            wasmPath: `wasm/${selectedWasm}.wasm`,
-            canvasId: "game",
-        });
-    } else {
-        window.addEventListener("load", () => {
-            document.body.innerHTML = `
-                <div class="not-hosted-msg">
-                    <div class="important">
-                        <p>Unfortunately, due to CORs restrictions, the wasm assembly cannot be fetched.</p>
-                        <p>Please navigate to this location using a web server.</p>
-                        <p>If you have Python 3 on your system you can just do:</p>
-                    </div>
-                    <code>$ python3 -m http.server 6969</code>
-                </div>
-                `;
-        });
-    }
-}
-
-let queryParams = new URLSearchParams(window.location.search);
-const exampleParam = queryParams.get("example") ?? defaultWasm;
-
-if (Object.values(wasmPaths).flat().includes(exampleParam)) startRaylib(exampleParam);
-else startRaylib(defaultWasm);
diff --git a/index.html b/index.html
index 05d392b..003b801 100644
--- a/index.html
+++ b/index.html
@@ -57,7 +57,6 @@
             src: url(fonts/acme_7_wide_xtnd.woff);
         }
     </style>
-    <script src="ptr.js"></script>
     <script src="raylib.js"></script>
 </head>
 
@@ -67,7 +66,67 @@
         <!-- This is populated by js -->
     </select>
     <canvas id="game"></canvas>
-    <script src="examples.js"></script>
+    <script>
+        const wasmPaths = {
+            tsoding: ["tsoding_ball", "tsoding_snake"],
+            core: ["core_basic_window", "core_basic_screen_manager", "core_input_keys", "core_input_mouse_wheel"],
+            shapes: ["shapes_colors_palette"],
+            text: ["text_writing_anim"],
+            textures: ["textures_logo_raylib"],
+        };
+        const defaultWasm = Object.values(wasmPaths)[0][0];
+
+        const raylibExampleSelect = document.getElementById("raylib-example-select");
+
+        for (const exampleCategory in wasmPaths) {
+            raylibExampleSelect.innerHTML += `<optgroup label="${exampleCategory}">`;
+            for (const example of wasmPaths[exampleCategory]) {
+                raylibExampleSelect.innerHTML += `<option>${example}</option>`;
+            }
+            raylibExampleSelect.innerHTML += "</optgroup>";
+        }
+
+        const {protocol} = window.location;
+        const isHosted = protocol !== "file:";
+        let raylibJs = undefined;
+
+        function startRaylib(selectedWasm) {
+            var queryParams = new URLSearchParams(window.location.search);
+            queryParams.set("example", selectedWasm);
+            history.pushState(null, null, "?" + queryParams.toString());
+            raylibExampleSelect.value = selectedWasm;
+
+            if (isHosted) {
+                if (raylibJs !== undefined) {
+                    raylibJs.stop();
+                }
+                raylibJs = new RaylibJs();
+                raylibJs.start({
+                    wasmPath: `wasm/${selectedWasm}.wasm`,
+                    canvasId: "game",
+                });
+            } else {
+                window.addEventListener("load", () => {
+                    document.body.innerHTML = `
+                <div class="not-hosted-msg">
+                    <div class="important">
+                        <p>Unfortunately, due to CORs restrictions, the wasm assembly cannot be fetched.</p>
+                        <p>Please navigate to this location using a web server.</p>
+                        <p>If you have Python 3 on your system you can just do:</p>
+                    </div>
+                    <code>$ python3 -m http.server 6969</code>
+                </div>
+                `;
+                });
+            }
+        }
+
+        let queryParams = new URLSearchParams(window.location.search);
+        const exampleParam = queryParams.get("example") ?? defaultWasm;
+
+        if (Object.values(wasmPaths).flat().includes(exampleParam)) startRaylib(exampleParam);
+        else startRaylib(defaultWasm);
+    </script>
 </body>
 
 </html>
diff --git a/ptr.js b/ptr.js
deleted file mode 100644
index b567208..0000000
--- a/ptr.js
+++ /dev/null
@@ -1,415 +0,0 @@
-function cstrlen(mem, ptr) {
-    let len = 0;
-    while (mem[ptr] != 0) {
-        len++;
-        ptr++;
-    }
-    return len;
-}
-
-function cstr_by_ptr(mem_buffer, ptr) {
-    const mem = new Uint8Array(mem_buffer);
-    const len = cstrlen(mem, ptr);
-    const bytes = new Uint8Array(mem_buffer, ptr, len);
-    return new TextDecoder().decode(bytes);
-}
-
-function color_hex_unpacked(r, g, b, a) {
-    r = r.toString(16).padStart(2, "0");
-    g = g.toString(16).padStart(2, "0");
-    b = b.toString(16).padStart(2, "0");
-    a = a.toString(16).padStart(2, "0");
-    return "#" + r + g + b + a;
-}
-
-function color_hex(color) {
-    const r = ((color >> (0 * 8)) & 0xff).toString(16).padStart(2, "0");
-    const g = ((color >> (1 * 8)) & 0xff).toString(16).padStart(2, "0");
-    const b = ((color >> (2 * 8)) & 0xff).toString(16).padStart(2, "0");
-    const a = ((color >> (3 * 8)) & 0xff).toString(16).padStart(2, "0");
-    return "#" + r + g + b + a;
-}
-
-function getColorFromMemory(buffer, color_ptr) {
-    const [r, g, b, a] = new Uint8Array(buffer, color_ptr, 4);
-    return color_hex_unpacked(r, g, b, a);
-}
-
-function cstr_fmt_by_ptr(mem_buffer, fmt_ptr, arg_ptr) {
-    const fmt = cstr_by_ptr(mem_buffer, fmt_ptr);
-
-    // VarArgs Chunk
-    let args = mem_buffer.slice(arg_ptr);
-    let result = "";
-    let fmt_buffer = fmt.split("");
-    let fmt_cur = 0;
-
-    let pad_width,
-        precision,
-        pad_with_zero,
-        pad_with_space,
-        justify_right,
-        pre_with_polarity,
-        pre_with_space,
-        pre_with_format,
-        capitalize,
-        precise,
-        bit_size,
-        radix;
-
-    reset_state();
-
-    function reset_state() {
-        bit_size = 32;
-        pad_width = 0;
-        precision = 0;
-        radix = 10;
-        pad_with_zero = false;
-        pad_with_space = false;
-        justify_right = true;
-
-        pre_with_polarity = false;
-        pre_with_space = false;
-        pre_with_format = false;
-
-        capitalize = false;
-        precise = false;
-    }
-
-    function parse_num(cursor) {
-        let width_end = cursor;
-        while (fmt_buffer[width_end]) {
-            if (/\d/.test(fmt_buffer[width_end])) width_end++;
-            else break;
-        }
-        let num = fmt_buffer.splice(cursor, width_end - cursor).join("");
-        return parseInt(num);
-    }
-
-    // Grab the view of args based on specifier and shift the args
-    function shift_args(view) {
-        args = args.slice(view.BYTES_PER_ELEMENT);
-        return view.at(0);
-    }
-
-    while (fmt_cur < fmt_buffer.length) {
-        if (fmt_buffer[fmt_cur] !== "%") {
-            // Normal character, copy it to the temp string
-            const str = fmt_buffer[fmt_cur++];
-            result += str;
-            continue;
-        }
-
-        // Peek only next character and splice the modifiers.
-        // So we can always simply look one char ahead
-        const peek_idx = fmt_cur + 1;
-        const peek_char = fmt_buffer[peek_idx];
-        switch (peek_char) {
-            case undefined: {
-                fmt_cur++;
-                break;
-            }
-
-            case "%": {
-                result += "%";
-                fmt_cur += 2;
-                break;
-            }
-
-            case "+": {
-                pre_with_polarity = true;
-                fmt_buffer.splice(peek_idx, 1);
-                break;
-            }
-
-            case "-": {
-                justify_right = false;
-                fmt_buffer.splice(peek_idx, 1);
-                break;
-            }
-
-            case " ": {
-                pre_with_space = !pre_with_polarity;
-                fmt_buffer.splice(peek_idx, 1);
-                break;
-            }
-
-            case ".": {
-                precise = true;
-                fmt_buffer.splice(peek_idx, 1);
-                break;
-            }
-
-            case "#": {
-                pre_with_format = true;
-                fmt_buffer.splice(peek_idx, 1);
-                break;
-            }
-
-            case "0": {
-                if (precise) {
-                    precision = parse_num(peek_idx);
-                } else {
-                    pad_with_zero = true;
-                    pad_width = parse_num(peek_idx);
-                }
-                break;
-            }
-
-            case "1":
-            case "2":
-            case "3":
-            case "4":
-            case "5":
-            case "6":
-            case "7":
-            case "8":
-            case "9": {
-                if (precise) {
-                    precision = parse_num(peek_idx);
-                } else {
-                    pad_with_space = true;
-                    pad_width = parse_num(peek_idx);
-                }
-                break;
-            }
-
-            // Modifiers
-            case "l": {
-                bit_size = bit_size === 32 ? 64 : 32;
-                fmt_buffer.splice(peek_idx, 1);
-            }
-
-            // In JS there are no number below 32 bit, so we are ignoring
-            // also clang bakes the overflown and underflown values as it is
-            case "h": {
-                fmt_buffer.splice(peek_idx, 1);
-                break;
-            }
-
-            case "c": {
-                const char_code = shift_args(new Uint32Array(args));
-                let str = String.fromCharCode(char_code);
-                let pad_char;
-
-                if (pad_with_zero || pad_with_space) pad_char = " ";
-                else pad_char = "";
-
-                if (justify_right) str = str.padStart(pad_width, pad_char);
-                else str = str.padEnd(pad_width, pad_char);
-
-                result += str;
-                fmt_cur += 2;
-                reset_state();
-                break;
-            }
-
-            case "s": {
-                const str_ptr = shift_args(new Uint32Array(args));
-                let str = cstr_by_ptr(mem_buffer, str_ptr);
-                let pad_char;
-
-                if (pad_with_zero || pad_with_space) pad_char = " ";
-                else pad_char = "";
-
-                if (justify_right) str = str.padStart(pad_width, pad_char);
-                else str = str.padEnd(pad_width, pad_char);
-
-                if (precise) str = str.substring(0, precision);
-
-                result += str;
-                fmt_cur += 2;
-                reset_state();
-                break;
-            }
-
-            case "o":
-            case "x":
-            case "X":
-            case "u": {
-                let num;
-                let pad_char, pre_char;
-
-                if (peek_char === "o") {
-                    radix = 8;
-                } else if (peek_char === "x") {
-                    radix = 16;
-                } else if (peek_char === "X") {
-                    radix = 16;
-                    capitalize = true;
-                } else {
-                    console.error("radix unreachable");
-                }
-
-                if (bit_size === 32) {
-                    num = shift_args(new Uint32Array(args));
-                } else {
-                    unaligned = args.byteLength % 8;
-                    args.slice(unaligned);
-                    num = shift_args(new BigUint64Array(args));
-                }
-
-                if (pad_with_zero) pad_char = "0";
-                else if (pad_with_space) pad_char = " ";
-                else pad_char = "";
-
-                if (pre_with_format && radix === 8) pre_char = "0";
-                else if (pre_with_format && radix === 16) pre_char = "0x";
-                else pre_char = "";
-
-                if (precise) {
-                    pad_char = " ";
-                    num = num.toString(radix).padStart(precision, "0");
-                }
-
-                if (justify_right) {
-                    num = num.toString(radix).padStart(pad_width, pad_char);
-                } else {
-                    pad_char = " ";
-                    num = num.toString(radix).padEnd(pad_width, pad_char);
-                }
-
-                num = pre_char + num;
-
-                if (capitalize) num = num.toUpperCase();
-
-                result += num;
-                fmt_cur += 2;
-                reset_state();
-                break;
-            }
-
-            case "i":
-            case "d": {
-                let num;
-                let pad_char, pre_char;
-
-                if (bit_size === 32) {
-                    num = shift_args(new Int32Array(args));
-                } else {
-                    unaligned = args.byteLength % 8;
-                    args = args.slice(unaligned);
-                    num = shift_args(new BigInt64Array(args));
-                }
-
-                if (pad_with_zero) pad_char = "0";
-                else if (pad_with_space) pad_char = " ";
-                else pad_char = "";
-
-                if (pre_with_polarity && num > 0) pre_char = "+";
-                else if (pre_with_space && num > 0) pre_char = " ";
-                else pre_char = "";
-
-                if (precise) {
-                    pad_char = " ";
-                    num = num.toString().padStart(precision, "0");
-                }
-
-                if (justify_right) {
-                    num = num.toString().padStart(pad_width, pad_char);
-                } else {
-                    pad_char = " ";
-                    num = num.toString().padEnd(pad_width, pad_char);
-                }
-
-                num = pre_char + num;
-
-                result += num;
-                fmt_cur += 2;
-                reset_state();
-                break;
-            }
-
-            case "E": {
-                capitalize = true;
-            }
-            case "e": {
-                // Align Bytes by 8
-                unaligned = args.byteLength % 8;
-                args = args.slice(unaligned);
-
-                let num = shift_args(new Float64Array(args));
-                let pad_char, pre_char;
-
-                if (pad_with_zero) pad_char = "0";
-                else if (pad_with_space) pad_char = " ";
-                else pad_char = "";
-
-                if (pre_with_polarity && num > 0) pre_char = "+";
-                else if (pre_with_space && num > 0) pre_char = " ";
-                else pre_char = "";
-
-                if (precise) num = num.toExponential(precision);
-                else num = num.toExponential(6);
-
-                if (justify_right) {
-                    num = num.toString().padStart(pad_width, pad_char);
-                } else {
-                    pad_char = " ";
-                    num = num.toString().padEnd(pad_width, pad_char);
-                }
-
-                if (capitalize) num = num.toUpperCase();
-
-                num = pre_char + num;
-
-                result += num;
-                fmt_cur += 2;
-                reset_state();
-                break;
-            }
-            case "F":
-            case "G": {
-                capitalize = true;
-            }
-            case "g":
-            case "f": {
-                // Align Bytes by 8
-                unaligned = args.byteLength % 8;
-                args = args.slice(unaligned);
-
-                let num = shift_args(new Float64Array(args));
-                let pad_char, pre_char;
-
-                if (pad_with_zero) pad_char = "0";
-                else if (pad_with_space) pad_char = " ";
-                else pad_char = "";
-
-                if (pre_with_polarity && num > 0) pre_char = "+";
-                else if (pre_with_space && num > 0) pre_char = " ";
-                else pre_char = "";
-
-                if (precise) num = num.toFixed(precision);
-                else num = num.toFixed(6);
-
-                if (justify_right) {
-                    num = num.toString().padStart(pad_width, pad_char);
-                } else {
-                    pad_char = " ";
-                    num = num.toString().padEnd(pad_width, pad_char);
-                }
-
-                if (capitalize) num = num.toUpperCase();
-
-                num = pre_char + num;
-
-                result += num;
-                fmt_cur += 2;
-                reset_state();
-                break;
-            }
-
-            // TODO: unsupported format specifiers, copy it to the temp string
-            // Flags   => *
-            // Len Mod => j z t L
-            // Specify => a A n p
-            default: {
-                const str = fmt_buffer[fmt_cur++];
-                result += str;
-                break;
-            }
-        }
-    }
-
-    return result;
-}
diff --git a/raylib.js b/raylib.js
index 55d3ede..8a40148 100644
--- a/raylib.js
+++ b/raylib.js
@@ -484,3 +484,418 @@ const glfwKeyMapping = {
     //  GLFW_KEY_LAST   GLFW_KEY_MENU
 }
 
+function cstrlen(mem, ptr) {
+    let len = 0;
+    while (mem[ptr] != 0) {
+        len++;
+        ptr++;
+    }
+    return len;
+}
+
+function cstr_by_ptr(mem_buffer, ptr) {
+    const mem = new Uint8Array(mem_buffer);
+    const len = cstrlen(mem, ptr);
+    const bytes = new Uint8Array(mem_buffer, ptr, len);
+    return new TextDecoder().decode(bytes);
+}
+
+function color_hex_unpacked(r, g, b, a) {
+    r = r.toString(16).padStart(2, "0");
+    g = g.toString(16).padStart(2, "0");
+    b = b.toString(16).padStart(2, "0");
+    a = a.toString(16).padStart(2, "0");
+    return "#" + r + g + b + a;
+}
+
+function color_hex(color) {
+    const r = ((color >> (0 * 8)) & 0xff).toString(16).padStart(2, "0");
+    const g = ((color >> (1 * 8)) & 0xff).toString(16).padStart(2, "0");
+    const b = ((color >> (2 * 8)) & 0xff).toString(16).padStart(2, "0");
+    const a = ((color >> (3 * 8)) & 0xff).toString(16).padStart(2, "0");
+    return "#" + r + g + b + a;
+}
+
+function getColorFromMemory(buffer, color_ptr) {
+    const [r, g, b, a] = new Uint8Array(buffer, color_ptr, 4);
+    return color_hex_unpacked(r, g, b, a);
+}
+
+function cstr_fmt_by_ptr(mem_buffer, fmt_ptr, arg_ptr) {
+    const fmt = cstr_by_ptr(mem_buffer, fmt_ptr);
+
+    // VarArgs Chunk
+    let args = mem_buffer.slice(arg_ptr);
+    let result = "";
+    let fmt_buffer = fmt.split("");
+    let fmt_cur = 0;
+
+    let pad_width,
+        precision,
+        pad_with_zero,
+        pad_with_space,
+        justify_right,
+        pre_with_polarity,
+        pre_with_space,
+        pre_with_format,
+        capitalize,
+        precise,
+        bit_size,
+        radix;
+
+    reset_state();
+
+    function reset_state() {
+        bit_size = 32;
+        pad_width = 0;
+        precision = 0;
+        radix = 10;
+        pad_with_zero = false;
+        pad_with_space = false;
+        justify_right = true;
+
+        pre_with_polarity = false;
+        pre_with_space = false;
+        pre_with_format = false;
+
+        capitalize = false;
+        precise = false;
+    }
+
+    function parse_num(cursor) {
+        let width_end = cursor;
+        while (fmt_buffer[width_end]) {
+            if (/\d/.test(fmt_buffer[width_end])) width_end++;
+            else break;
+        }
+        let num = fmt_buffer.splice(cursor, width_end - cursor).join("");
+        return parseInt(num);
+    }
+
+    // Grab the view of args based on specifier and shift the args
+    function shift_args(view) {
+        args = args.slice(view.BYTES_PER_ELEMENT);
+        return view.at(0);
+    }
+
+    while (fmt_cur < fmt_buffer.length) {
+        if (fmt_buffer[fmt_cur] !== "%") {
+            // Normal character, copy it to the temp string
+            const str = fmt_buffer[fmt_cur++];
+            result += str;
+            continue;
+        }
+
+        // Peek only next character and splice the modifiers.
+        // So we can always simply look one char ahead
+        const peek_idx = fmt_cur + 1;
+        const peek_char = fmt_buffer[peek_idx];
+        switch (peek_char) {
+            case undefined: {
+                fmt_cur++;
+                break;
+            }
+
+            case "%": {
+                result += "%";
+                fmt_cur += 2;
+                break;
+            }
+
+            case "+": {
+                pre_with_polarity = true;
+                fmt_buffer.splice(peek_idx, 1);
+                break;
+            }
+
+            case "-": {
+                justify_right = false;
+                fmt_buffer.splice(peek_idx, 1);
+                break;
+            }
+
+            case " ": {
+                pre_with_space = !pre_with_polarity;
+                fmt_buffer.splice(peek_idx, 1);
+                break;
+            }
+
+            case ".": {
+                precise = true;
+                fmt_buffer.splice(peek_idx, 1);
+                break;
+            }
+
+            case "#": {
+                pre_with_format = true;
+                fmt_buffer.splice(peek_idx, 1);
+                break;
+            }
+
+            case "0": {
+                if (precise) {
+                    precision = parse_num(peek_idx);
+                } else {
+                    pad_with_zero = true;
+                    pad_width = parse_num(peek_idx);
+                }
+                break;
+            }
+
+            case "1":
+            case "2":
+            case "3":
+            case "4":
+            case "5":
+            case "6":
+            case "7":
+            case "8":
+            case "9": {
+                if (precise) {
+                    precision = parse_num(peek_idx);
+                } else {
+                    pad_with_space = true;
+                    pad_width = parse_num(peek_idx);
+                }
+                break;
+            }
+
+            // Modifiers
+            case "l": {
+                bit_size = bit_size === 32 ? 64 : 32;
+                fmt_buffer.splice(peek_idx, 1);
+            }
+
+            // In JS there are no number below 32 bit, so we are ignoring
+            // also clang bakes the overflown and underflown values as it is
+            case "h": {
+                fmt_buffer.splice(peek_idx, 1);
+                break;
+            }
+
+            case "c": {
+                const char_code = shift_args(new Uint32Array(args));
+                let str = String.fromCharCode(char_code);
+                let pad_char;
+
+                if (pad_with_zero || pad_with_space) pad_char = " ";
+                else pad_char = "";
+
+                if (justify_right) str = str.padStart(pad_width, pad_char);
+                else str = str.padEnd(pad_width, pad_char);
+
+                result += str;
+                fmt_cur += 2;
+                reset_state();
+                break;
+            }
+
+            case "s": {
+                const str_ptr = shift_args(new Uint32Array(args));
+                let str = cstr_by_ptr(mem_buffer, str_ptr);
+                let pad_char;
+
+                if (pad_with_zero || pad_with_space) pad_char = " ";
+                else pad_char = "";
+
+                if (justify_right) str = str.padStart(pad_width, pad_char);
+                else str = str.padEnd(pad_width, pad_char);
+
+                if (precise) str = str.substring(0, precision);
+
+                result += str;
+                fmt_cur += 2;
+                reset_state();
+                break;
+            }
+
+            case "o":
+            case "x":
+            case "X":
+            case "u": {
+                let num;
+                let pad_char, pre_char;
+
+                if (peek_char === "o") {
+                    radix = 8;
+                } else if (peek_char === "x") {
+                    radix = 16;
+                } else if (peek_char === "X") {
+                    radix = 16;
+                    capitalize = true;
+                } else {
+                    console.error("radix unreachable");
+                }
+
+                if (bit_size === 32) {
+                    num = shift_args(new Uint32Array(args));
+                } else {
+                    unaligned = args.byteLength % 8;
+                    args.slice(unaligned);
+                    num = shift_args(new BigUint64Array(args));
+                }
+
+                if (pad_with_zero) pad_char = "0";
+                else if (pad_with_space) pad_char = " ";
+                else pad_char = "";
+
+                if (pre_with_format && radix === 8) pre_char = "0";
+                else if (pre_with_format && radix === 16) pre_char = "0x";
+                else pre_char = "";
+
+                if (precise) {
+                    pad_char = " ";
+                    num = num.toString(radix).padStart(precision, "0");
+                }
+
+                if (justify_right) {
+                    num = num.toString(radix).padStart(pad_width, pad_char);
+                } else {
+                    pad_char = " ";
+                    num = num.toString(radix).padEnd(pad_width, pad_char);
+                }
+
+                num = pre_char + num;
+
+                if (capitalize) num = num.toUpperCase();
+
+                result += num;
+                fmt_cur += 2;
+                reset_state();
+                break;
+            }
+
+            case "i":
+            case "d": {
+                let num;
+                let pad_char, pre_char;
+
+                if (bit_size === 32) {
+                    num = shift_args(new Int32Array(args));
+                } else {
+                    unaligned = args.byteLength % 8;
+                    args = args.slice(unaligned);
+                    num = shift_args(new BigInt64Array(args));
+                }
+
+                if (pad_with_zero) pad_char = "0";
+                else if (pad_with_space) pad_char = " ";
+                else pad_char = "";
+
+                if (pre_with_polarity && num > 0) pre_char = "+";
+                else if (pre_with_space && num > 0) pre_char = " ";
+                else pre_char = "";
+
+                if (precise) {
+                    pad_char = " ";
+                    num = num.toString().padStart(precision, "0");
+                }
+
+                if (justify_right) {
+                    num = num.toString().padStart(pad_width, pad_char);
+                } else {
+                    pad_char = " ";
+                    num = num.toString().padEnd(pad_width, pad_char);
+                }
+
+                num = pre_char + num;
+
+                result += num;
+                fmt_cur += 2;
+                reset_state();
+                break;
+            }
+
+            case "E": {
+                capitalize = true;
+            }
+            case "e": {
+                // Align Bytes by 8
+                unaligned = args.byteLength % 8;
+                args = args.slice(unaligned);
+
+                let num = shift_args(new Float64Array(args));
+                let pad_char, pre_char;
+
+                if (pad_with_zero) pad_char = "0";
+                else if (pad_with_space) pad_char = " ";
+                else pad_char = "";
+
+                if (pre_with_polarity && num > 0) pre_char = "+";
+                else if (pre_with_space && num > 0) pre_char = " ";
+                else pre_char = "";
+
+                if (precise) num = num.toExponential(precision);
+                else num = num.toExponential(6);
+
+                if (justify_right) {
+                    num = num.toString().padStart(pad_width, pad_char);
+                } else {
+                    pad_char = " ";
+                    num = num.toString().padEnd(pad_width, pad_char);
+                }
+
+                if (capitalize) num = num.toUpperCase();
+
+                num = pre_char + num;
+
+                result += num;
+                fmt_cur += 2;
+                reset_state();
+                break;
+            }
+            case "F":
+            case "G": {
+                capitalize = true;
+            }
+            case "g":
+            case "f": {
+                // Align Bytes by 8
+                unaligned = args.byteLength % 8;
+                args = args.slice(unaligned);
+
+                let num = shift_args(new Float64Array(args));
+                let pad_char, pre_char;
+
+                if (pad_with_zero) pad_char = "0";
+                else if (pad_with_space) pad_char = " ";
+                else pad_char = "";
+
+                if (pre_with_polarity && num > 0) pre_char = "+";
+                else if (pre_with_space && num > 0) pre_char = " ";
+                else pre_char = "";
+
+                if (precise) num = num.toFixed(precision);
+                else num = num.toFixed(6);
+
+                if (justify_right) {
+                    num = num.toString().padStart(pad_width, pad_char);
+                } else {
+                    pad_char = " ";
+                    num = num.toString().padEnd(pad_width, pad_char);
+                }
+
+                if (capitalize) num = num.toUpperCase();
+
+                num = pre_char + num;
+
+                result += num;
+                fmt_cur += 2;
+                reset_state();
+                break;
+            }
+
+            // TODO: unsupported format specifiers, copy it to the temp string
+            // Flags   => *
+            // Len Mod => j z t L
+            // Specify => a A n p
+            default: {
+                const str = fmt_buffer[fmt_cur++];
+                result += str;
+                break;
+            }
+        }
+    }
+
+    return result;
+}

From 49cab4beb8b5a68d3a779677877e34cec75d4e83 Mon Sep 17 00:00:00 2001
From: VIGNESH KUMAR <45727291+VICTORVICKIE@users.noreply.github.com>
Date: Fri, 23 Feb 2024 13:50:21 +0530
Subject: [PATCH 06/12] fmt

---
 index.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index 003b801..18324ac 100644
--- a/index.html
+++ b/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
 
 <head>
@@ -68,11 +68,11 @@
     <canvas id="game"></canvas>
     <script>
         const wasmPaths = {
-            tsoding: ["tsoding_ball", "tsoding_snake"],
-            core: ["core_basic_window", "core_basic_screen_manager", "core_input_keys", "core_input_mouse_wheel"],
-            shapes: ["shapes_colors_palette"],
-            text: ["text_writing_anim"],
-            textures: ["textures_logo_raylib"],
+            "tsoding": ["tsoding_ball", "tsoding_snake"],
+            "core": ["core_basic_window", "core_basic_screen_manager", "core_input_keys", "core_input_mouse_wheel"],
+            "shapes": ["shapes_colors_palette"],
+            "text": ["text_writing_anim"],
+            "textures": ["textures_logo_raylib"],
         };
         const defaultWasm = Object.values(wasmPaths)[0][0];
 

From 327fedd688e18a99dad6dfc0969e120abb698792 Mon Sep 17 00:00:00 2001
From: VIGNESH KUMAR <45727291+VICTORVICKIE@users.noreply.github.com>
Date: Fri, 23 Feb 2024 14:55:41 +0530
Subject: [PATCH 07/12] ring buffer

---
 raylib.js | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/raylib.js b/raylib.js
index 8a40148..9797197 100644
--- a/raylib.js
+++ b/raylib.js
@@ -21,6 +21,9 @@ const LOG_ERROR   = iota++; // Error logging, used on unrecoverable failures
 const LOG_FATAL   = iota++; // Fatal logging, used to abort program: exit(EXIT_FAILURE)
 const LOG_NONE    = iota++; // Disable logging
 
+const MAX_TEXTFORMAT_BUFFERS = 4;
+const MAX_TEXT_BUFFER_LENGTH = 1024;
+
 class RaylibJs {
     // TODO: We stole the font from the website
     // (https://raylib.com/) and it's slightly different than
@@ -44,6 +47,7 @@ class RaylibJs {
         this.currentMousePosition = {x: 0, y: 0};
         this.images = [];
         this.quit = false;
+        this.heapedIndex = 0;
     }
 
     constructor() {
@@ -200,16 +204,24 @@ class RaylibJs {
     TextFormat(text_ptr, args_ptr) {
         const buffer = this.wasm.instance.exports.memory.buffer;
         const fmt_text = cstr_fmt_by_ptr(buffer, text_ptr, args_ptr);
+        const fmt_text_len = fmt_text.length + 1;
 
         const heap_base = this.wasm.instance.exports.__heap_base.value;
-        // REVIEW: Is it safe to use the slots in memory buffer starting from heap_base?
-        // Is there any way to create a internal shared buffer that can be shared with wasm?
-        const bytes = new Uint8Array(buffer, heap_base, fmt_text.length + 1);
+        // TODO: Check if the values exceeds the heap end
+        // const heap_end = this.wasm.instance.exports.__heap_end.value;
+        const heap_ptr = heap_base + this.heapedIndex * MAX_TEXT_BUFFER_LENGTH;
+
+        // TODO: Other functions still override this allocation, need to implement
+        // allocator which manages the ownership of chunks.
+        const bytes = new Uint8Array(buffer, heap_ptr, fmt_text_len);
         for (let i = 0; i < fmt_text.length; i++) {
             bytes[i] = fmt_text.charCodeAt(i);
         }
         bytes[fmt_text.length] = 0;
-        return heap_base;
+        this.heapedIndex += 1;
+        if (this.heapedIndex >= MAX_TEXTFORMAT_BUFFERS) this.heapedIndex = 0;
+
+        return heap_ptr;
     }
 
 

From 6de46ec0ca31a73b6f86f405e0eef3789849cef6 Mon Sep 17 00:00:00 2001
From: VIGNESH KUMAR <45727291+VICTORVICKIE@users.noreply.github.com>
Date: Fri, 23 Feb 2024 15:03:22 +0530
Subject: [PATCH 08/12] truncate overflow

---
 raylib.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/raylib.js b/raylib.js
index 9797197..56f49f5 100644
--- a/raylib.js
+++ b/raylib.js
@@ -211,12 +211,20 @@ class RaylibJs {
         // const heap_end = this.wasm.instance.exports.__heap_end.value;
         const heap_ptr = heap_base + this.heapedIndex * MAX_TEXT_BUFFER_LENGTH;
 
+        // Inserting "..." at the end of the string to mark as truncated
+        if (fmt_text_len >= MAX_TEXT_BUFFER_LENGTH) {
+            fmt_text = fmt_text.substring(0, MAX_TEXT_BUFFER_LENGTH - 4) + "...";
+            fmt_text_len = fmt_text.length + 1;
+        }
+
         // TODO: Other functions still override this allocation, need to implement
         // allocator which manages the ownership of chunks.
         const bytes = new Uint8Array(buffer, heap_ptr, fmt_text_len);
         for (let i = 0; i < fmt_text.length; i++) {
             bytes[i] = fmt_text.charCodeAt(i);
         }
+
+        // Mark end with null
         bytes[fmt_text.length] = 0;
         this.heapedIndex += 1;
         if (this.heapedIndex >= MAX_TEXTFORMAT_BUFFERS) this.heapedIndex = 0;

From 9f24f068ba55d4d1a07b45dc713ad1c3a36b2725 Mon Sep 17 00:00:00 2001
From: VIGNESH KUMAR <45727291+VICTORVICKIE@users.noreply.github.com>
Date: Fri, 23 Feb 2024 15:06:52 +0530
Subject: [PATCH 09/12] fmt

---
 index.html | 50 ++++++++++++++++++++++++--------------------------
 1 file changed, 24 insertions(+), 26 deletions(-)

diff --git a/index.html b/index.html
index 18324ac..38627d5 100644
--- a/index.html
+++ b/index.html
@@ -1,9 +1,9 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
-
 <head>
     <title>Hello, Raylib!</title>
     <style>
+
         :root {
             --color-dark: #181818;
             --color-lite: #e7e7e7;
@@ -29,8 +29,9 @@
             border: 1px solid var(--color-dark);
 
             @media (prefers-color-scheme: dark) {
-                border: 1px solid var(--color-lite);
+               border: 1px solid var(--color-lite);
             }
+
         }
 
         #raylib-example-select {
@@ -51,7 +52,6 @@
         .not-hosted-msg .important {
             font-weight: bold;
         }
-
         @font-face {
             font-family: grixel;
             src: url(fonts/acme_7_wide_xtnd.woff);
@@ -59,7 +59,6 @@
     </style>
     <script src="raylib.js"></script>
 </head>
-
 <body>
     <label for="raylib-example-select">Choose an Example:</label>
     <select id="raylib-example-select" onchange="startRaylib(this.value)">
@@ -68,32 +67,32 @@
     <canvas id="game"></canvas>
     <script>
         const wasmPaths = {
-            "tsoding": ["tsoding_ball", "tsoding_snake"],
-            "core": ["core_basic_window", "core_basic_screen_manager", "core_input_keys", "core_input_mouse_wheel"],
+            "tsoding": ["tsoding_ball", "tsoding_snake",],
+            "core": ["core_basic_window", "core_basic_screen_manager", "core_input_keys", "core_input_mouse_wheel",],
             "shapes": ["shapes_colors_palette"],
             "text": ["text_writing_anim"],
             "textures": ["textures_logo_raylib"],
-        };
+        }
         const defaultWasm = Object.values(wasmPaths)[0][0];
 
         const raylibExampleSelect = document.getElementById("raylib-example-select");
 
-        for (const exampleCategory in wasmPaths) {
-            raylibExampleSelect.innerHTML += `<optgroup label="${exampleCategory}">`;
-            for (const example of wasmPaths[exampleCategory]) {
-                raylibExampleSelect.innerHTML += `<option>${example}</option>`;
+        for (const exampleCategory in wasmPaths){
+            raylibExampleSelect.innerHTML += `<optgroup label="${exampleCategory}">`
+            for (const example of wasmPaths[exampleCategory]){
+                raylibExampleSelect.innerHTML += `<option>${example}</option>`
             }
-            raylibExampleSelect.innerHTML += "</optgroup>";
+            raylibExampleSelect.innerHTML += "</optgroup>"
         }
 
-        const {protocol} = window.location;
+        const { protocol } = window.location;
         const isHosted = protocol !== "file:";
         let raylibJs = undefined;
 
-        function startRaylib(selectedWasm) {
+        function startRaylib(selectedWasm){
             var queryParams = new URLSearchParams(window.location.search);
             queryParams.set("example", selectedWasm);
-            history.pushState(null, null, "?" + queryParams.toString());
+            history.pushState(null, null, "?"+queryParams.toString());
             raylibExampleSelect.value = selectedWasm;
 
             if (isHosted) {
@@ -108,15 +107,15 @@
             } else {
                 window.addEventListener("load", () => {
                     document.body.innerHTML = `
-                <div class="not-hosted-msg">
-                    <div class="important">
-                        <p>Unfortunately, due to CORs restrictions, the wasm assembly cannot be fetched.</p>
-                        <p>Please navigate to this location using a web server.</p>
-                        <p>If you have Python 3 on your system you can just do:</p>
-                    </div>
-                    <code>$ python3 -m http.server 6969</code>
-                </div>
-                `;
+                        <div class="not-hosted-msg">
+                            <div class="important">
+                                <p>Unfortunately, due to CORs restrictions, the wasm assembly cannot be fetched.</p>
+                                <p>Please navigate to this location using a web server.</p>
+                                <p>If you have Python 3 on your system you can just do:</p>
+                            </div>
+                            <code>$ python3 -m http.server 6969</code>
+                        </div>
+                        `;
                 });
             }
         }
@@ -128,5 +127,4 @@
         else startRaylib(defaultWasm);
     </script>
 </body>
-
 </html>

From 42146b27c05d22351947acd9ab1e718369481c1f Mon Sep 17 00:00:00 2001
From: VIGNESH KUMAR <45727291+VICTORVICKIE@users.noreply.github.com>
Date: Fri, 23 Feb 2024 15:18:55 +0530
Subject: [PATCH 10/12] rename heapedIndex -> textFormatBufferIndex

---
 raylib.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/raylib.js b/raylib.js
index 56f49f5..8d300b2 100644
--- a/raylib.js
+++ b/raylib.js
@@ -47,7 +47,7 @@ class RaylibJs {
         this.currentMousePosition = {x: 0, y: 0};
         this.images = [];
         this.quit = false;
-        this.heapedIndex = 0;
+        this.textFormatBufferIndex = 0;
     }
 
     constructor() {
@@ -209,7 +209,7 @@ class RaylibJs {
         const heap_base = this.wasm.instance.exports.__heap_base.value;
         // TODO: Check if the values exceeds the heap end
         // const heap_end = this.wasm.instance.exports.__heap_end.value;
-        const heap_ptr = heap_base + this.heapedIndex * MAX_TEXT_BUFFER_LENGTH;
+        const heap_ptr = heap_base + this.textFormatBufferIndex * MAX_TEXT_BUFFER_LENGTH;
 
         // Inserting "..." at the end of the string to mark as truncated
         if (fmt_text_len >= MAX_TEXT_BUFFER_LENGTH) {
@@ -226,8 +226,8 @@ class RaylibJs {
 
         // Mark end with null
         bytes[fmt_text.length] = 0;
-        this.heapedIndex += 1;
-        if (this.heapedIndex >= MAX_TEXTFORMAT_BUFFERS) this.heapedIndex = 0;
+        this.textFormatBufferIndex += 1;
+        if (this.textFormatBufferIndex >= MAX_TEXTFORMAT_BUFFERS) this.textFormatBufferIndex = 0;
 
         return heap_ptr;
     }

From faa6854e540d1d5a87f40151844fd566ae7bef38 Mon Sep 17 00:00:00 2001
From: VIGNESH KUMAR <45727291+VICTORVICKIE@users.noreply.github.com>
Date: Fri, 23 Feb 2024 15:53:48 +0530
Subject: [PATCH 11/12] use %

---
 raylib.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/raylib.js b/raylib.js
index 8d300b2..15c8691 100644
--- a/raylib.js
+++ b/raylib.js
@@ -226,8 +226,9 @@ class RaylibJs {
 
         // Mark end with null
         bytes[fmt_text.length] = 0;
-        this.textFormatBufferIndex += 1;
-        if (this.textFormatBufferIndex >= MAX_TEXTFORMAT_BUFFERS) this.textFormatBufferIndex = 0;
+
+        // Move to next buffer for next function call
+        this.textFormatBufferIndex = (this.textFormatBufferIndex + 1) % MAX_TEXTFORMAT_BUFFERS;
 
         return heap_ptr;
     }

From fd4ab2550c8a8ea0c78a3baa8339160fc3e2ae85 Mon Sep 17 00:00:00 2001
From: VIGNESH KUMAR <45727291+VICTORVICKIE@users.noreply.github.com>
Date: Sat, 24 Feb 2024 08:07:45 +0530
Subject: [PATCH 12/12] fmt

---
 raylib.js | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/raylib.js b/raylib.js
index 15c8691..c1f4f29 100644
--- a/raylib.js
+++ b/raylib.js
@@ -522,19 +522,19 @@ function cstr_by_ptr(mem_buffer, ptr) {
 }
 
 function color_hex_unpacked(r, g, b, a) {
-    r = r.toString(16).padStart(2, "0");
-    g = g.toString(16).padStart(2, "0");
-    b = b.toString(16).padStart(2, "0");
-    a = a.toString(16).padStart(2, "0");
-    return "#" + r + g + b + a;
+    r = r.toString(16).padStart(2, '0');
+    g = g.toString(16).padStart(2, '0');
+    b = b.toString(16).padStart(2, '0');
+    a = a.toString(16).padStart(2, '0');
+    return "#"+r+g+b+a;
 }
 
 function color_hex(color) {
-    const r = ((color >> (0 * 8)) & 0xff).toString(16).padStart(2, "0");
-    const g = ((color >> (1 * 8)) & 0xff).toString(16).padStart(2, "0");
-    const b = ((color >> (2 * 8)) & 0xff).toString(16).padStart(2, "0");
-    const a = ((color >> (3 * 8)) & 0xff).toString(16).padStart(2, "0");
-    return "#" + r + g + b + a;
+    const r = ((color>>(0*8))&0xFF).toString(16).padStart(2, '0');
+    const g = ((color>>(1*8))&0xFF).toString(16).padStart(2, '0');
+    const b = ((color>>(2*8))&0xFF).toString(16).padStart(2, '0');
+    const a = ((color>>(3*8))&0xFF).toString(16).padStart(2, '0');
+    return "#"+r+g+b+a;
 }
 
 function getColorFromMemory(buffer, color_ptr) {