From f75af4d76848e948c2cea738ea3f3dc124966173 Mon Sep 17 00:00:00 2001
From: Johnathon Selstad <makeshifted@gmail.com>
Date: Thu, 8 May 2025 13:49:56 -0700
Subject: [PATCH 1/3] Improve Binary Serialization in the Code Generator

I'm a big fan of the Code Generator tool, but I noticed the all-in-one pages serialize the game as a JSON array, which can get kind of chunky.

This PR swaps the JSON for a base64 string, bringing a `53.35mb` .html down to `21.85mb`.   This should help with storage and load-times.

Zipping the .html afterwards brings the whole thing down to within 10% of the original game size.

bytes <-> base64 conversions adopted from examples on this page: https://developer.mozilla.org/en-US/docs/Web/API/Window/btoa
---
 public/js/main.js | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/public/js/main.js b/public/js/main.js
index e2fa263..072b1f1 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -158,9 +158,9 @@ function editorMain() {
             }
             fileData += '        </scr' + 'ipt>\n        <script src="' + data['EJS_pathtodata'] + 'loader.js"></scr' + 'ipt>\n    </body>\n</html>';
         } else if (document.getElementById('offlinePack').checked) {
-            data['EJS_gameUrl'] = 'new Blob([Uint8Array.from(window.gameData)])';
-            var b = JSON.stringify(Array.from(new Uint8Array(await (new Blob([file])).arrayBuffer())));
-            var a = spaces + 'window.gameData = ' + b + ';\n';
+            data['EJS_gameUrl'] = 'new Blob([Uint8Array.from(atob(window.gameData), (m) => m.codePointAt(0))])';
+            var b = bytesToBase64(new Uint8Array(await (new Blob([file])).arrayBuffer()));
+            var a = spaces + 'window.gameData = `' + b + '`;\n';
             fileData += a;
             for (var k in data) {
                 if (data[k] === true || data[k] === false || k === 'EJS_gameUrl') {
@@ -172,9 +172,9 @@ function editorMain() {
             fileData += '        </scr' + 'ipt>\n        <script src="' + data['EJS_pathtodata'] + 'loader.js"></scr' + 'ipt>\n    </body>\n</html>';
             zipOut = false;
         } else {
-            data['EJS_gameUrl'] = 'new Blob([Uint8Array.from(window.gameData)])';
-            var b = JSON.stringify(Array.from(new Uint8Array(await (new Blob([file])).arrayBuffer())));
-            zip.file('gameData.js', 'window.gameData = ' + b + '\n');
+            data['EJS_gameUrl'] = 'new Blob([Uint8Array.from(atob(window.gameData), (m) => m.codePointAt(0))])';
+            var b = bytesToBase64(new Uint8Array(await (new Blob([file])).arrayBuffer()));
+            zip.file('gameData.js', 'window.gameData = `' + b + '`\n');
             for (var k in data) {
                 if (data[k] === true || data[k] === false || k === 'EJS_gameUrl') {
                     fileData += (spaces + k + ' = ' + data[k] + ';\n');
@@ -265,3 +265,10 @@ function copy(textareaId) {
     textarea.select();
     document.execCommand('copy');
 }
+
+function bytesToBase64(bytes) {
+    const binString = Array.from(bytes, (byte) =>
+        String.fromCodePoint(byte),
+    ).join("");
+    return btoa(binString);
+}

From 0965e2949a7de5b93c09648f0091fb85f09a7f41 Mon Sep 17 00:00:00 2001
From: Johnathon Selstad <makeshifted@gmail.com>
Date: Thu, 8 May 2025 14:41:01 -0700
Subject: [PATCH 2/3] Fix silly gaps

---
 public/js/main.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/public/js/main.js b/public/js/main.js
index 072b1f1..563039b 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -156,7 +156,7 @@ function editorMain() {
                     fileData += (spaces + k + ' = "' + data[k] + '";\n');
                 }
             }
-            fileData += '        </scr' + 'ipt>\n        <script src="' + data['EJS_pathtodata'] + 'loader.js"></scr' + 'ipt>\n    </body>\n</html>';
+            fileData += '        </script>\n        <script src="' + data['EJS_pathtodata'] + 'loader.js"></script>\n    </body>\n</html>';
         } else if (document.getElementById('offlinePack').checked) {
             data['EJS_gameUrl'] = 'new Blob([Uint8Array.from(atob(window.gameData), (m) => m.codePointAt(0))])';
             var b = bytesToBase64(new Uint8Array(await (new Blob([file])).arrayBuffer()));
@@ -169,7 +169,7 @@ function editorMain() {
                     fileData += (spaces + k + ' = "' + data[k] + '";\n');
                 }
             }
-            fileData += '        </scr' + 'ipt>\n        <script src="' + data['EJS_pathtodata'] + 'loader.js"></scr' + 'ipt>\n    </body>\n</html>';
+            fileData += '        </script>\n        <script src="' + data['EJS_pathtodata'] + 'loader.js"></script>\n    </body>\n</html>';
             zipOut = false;
         } else {
             data['EJS_gameUrl'] = 'new Blob([Uint8Array.from(atob(window.gameData), (m) => m.codePointAt(0))])';
@@ -182,7 +182,7 @@ function editorMain() {
                     fileData += (spaces + k + ' = \'' + data[k] + '\';\n');
                 }
             }
-            fileData += '        </scr' + 'ipt>\n        <script src=\'' + data['EJS_pathtodata'] + 'loader.js\'></scr' + 'ipt>\n    </body>\n</html>';
+            fileData += '        </script>\n        <script src=\'' + data['EJS_pathtodata'] + 'loader.js\'></script>\n    </body>\n</html>';
         }
         if (zipOut === false) {
             document.getElementById('select2').style = 'display:none;';

From 8f6142ad25f9468f6f59936075a1846773bb280c Mon Sep 17 00:00:00 2001
From: Johnathon Selstad <makeshifted@gmail.com>
Date: Thu, 8 May 2025 15:27:31 -0700
Subject: [PATCH 3/3] Add Compression to Code Generator

This PR adds compression to the generated .html files using the browser's built-in gzip compression/decompression routines.

This brings what would have been a `53.35mb` .html on master (or a `21.85mb` .html with #58 ) down to `16.32mb`.   This further compresses down to `12mb` if zipped.

Due to the async call needed for this, I made this a separate PR since the structure of the generated .html has changed to only load the emulator after the game data has been decompressed.   This is incompatible with the non-single-file-packing code, so it has been removed.
---
 pages/editor.vue  |  6 ------
 public/js/main.js | 42 ++++++++++++++++++++----------------------
 2 files changed, 20 insertions(+), 28 deletions(-)

diff --git a/pages/editor.vue b/pages/editor.vue
index 376dbaf..8e2edcc 100644
--- a/pages/editor.vue
+++ b/pages/editor.vue
@@ -58,12 +58,6 @@ definePageMeta({
                         <input type="checkbox" id="offline">
                         <span class="checkmark2"></span>
                     </label>
-                    <ul>
-                        <label class="container" id="singleFile" style="display:none;">Pack into single file
-                            <input type="checkbox" id="offlinePack">
-                            <span class="checkmark2"></span>
-                        </label>
-                    </ul>
                     <div id="pathToData">
                         <label class="container">Use Local path to Data
                             <input type="checkbox" id="p2d">
diff --git a/public/js/main.js b/public/js/main.js
index 563039b..cf863b5 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -104,7 +104,7 @@ function editorMain() {
         let gameName = (document.getElementById('nameOfGame').value && document.getElementById('nameOfGame').value.trim() !== '') ? document.getElementById('nameOfGame').value : file.name;
         try {
             //let isChromebook = window.navigator.userAgent.includes("CrOS");
-            //window.sendLog("A user just generated a page with the EmulatorJS code helper.\n    Game Name: "+gameName+"\n    File name: "+file.name+"\n    System: "+window.selectedCoreData.core+"\n    Offline: "+(offline.checked ? (document.getElementById('offlinePack').checked ? "pack" : "yes") : "no")+"\n    Custom path to data: "+((document.getElementById('p2d').checked&&path2Data.value.trim()) ? path2Data.value : "no")+"\n    Ad Url: "+(document.getElementById('adUrl').value.trim() ? "<"+document.getElementById('adUrl').value.trim()+">" : "no")+"\n    Is Chromebook: "+(isChromebook ? "yes" : "no"));
+            //window.sendLog("A user just generated a page with the EmulatorJS code helper.\n    Game Name: "+gameName+"\n    File name: "+file.name+"\n    System: "+window.selectedCoreData.core+"\n    Offline: "+(offline.checked ? "pack" : "no")+"\n    Custom path to data: "+((document.getElementById('p2d').checked&&path2Data.value.trim()) ? path2Data.value : "no")+"\n    Ad Url: "+(document.getElementById('adUrl').value.trim() ? "<"+document.getElementById('adUrl').value.trim()+">" : "no")+"\n    Is Chromebook: "+(isChromebook ? "yes" : "no"));
         } catch (e) { }
         data['EJS_player'] = '#game';
         data['EJS_core'] = window.selectedCoreData.core;
@@ -136,7 +136,7 @@ function editorMain() {
         }
 
         let zipOut = true;
-        let fileData = '<html>\n    <head>\n        <!--HTML file auto generated using EmulatorJS codehelper-->\n        <style>\n            body, html {\n                margin: 0;\n                padding: 0;\n            }\n        </style>\n    </head>\n    <body>\n        <div style="width:100%;height:100%;max-width:100%">\n            <div id="game"></div>\n        </div>\n        <script>\n';
+        let fileData = '<html>\n    <head>\n        <!--HTML file auto generated using EmulatorJS codehelper-->\n        <style>\n            body, html {\n                margin: 0;\n                padding: 0;\n            }\n        </style>\n    </head>\n    <body>\n        <div style="width:100%;height:100%;max-width:100%">\n            <div id="game"></div>\n        </div>\n        <script type="module">\n';
         const spaces = '            ';
         if (!offline.checked) {
             if (stateOnLoad.files[0]) {
@@ -151,38 +151,30 @@ function editorMain() {
             }
             for (var k in data) {
                 if (data[k] === true || data[k] === false) {
-                    fileData += (spaces + k + ' = ' + data[k] + ';\n');
+                    fileData += (spaces + "window." + k + ' = ' + data[k] + ';\n');
                 } else {
-                    fileData += (spaces + k + ' = "' + data[k] + '";\n');
+                    fileData += (spaces + "window." + k + ' = "' + data[k] + '";\n');
                 }
             }
             fileData += '        </script>\n        <script src="' + data['EJS_pathtodata'] + 'loader.js"></script>\n    </body>\n</html>';
-        } else if (document.getElementById('offlinePack').checked) {
-            data['EJS_gameUrl'] = 'new Blob([Uint8Array.from(atob(window.gameData), (m) => m.codePointAt(0))])';
-            var b = bytesToBase64(new Uint8Array(await (new Blob([file])).arrayBuffer()));
+        } else {
+            data['EJS_gameUrl'] = 'await new Response(new Blob([Uint8Array.from(atob(window.gameData), (m) => m.codePointAt(0))]).stream().pipeThrough(new DecompressionStream("gzip"))).blob()';
+            var b = bytesToBase64(new Uint8Array(await (await CompressBlob(new Blob([file]))).arrayBuffer()));
             var a = spaces + 'window.gameData = `' + b + '`;\n';
             fileData += a;
             for (var k in data) {
                 if (data[k] === true || data[k] === false || k === 'EJS_gameUrl') {
-                    fileData += (spaces + k + ' = ' + data[k] + ';\n');
+                    fileData += (spaces + "window." + k + ' = ' + data[k] + ';\n');
                 } else {
-                    fileData += (spaces + k + ' = "' + data[k] + '";\n');
+                    fileData += (spaces + "window." + k + ' = "' + data[k] + '";\n');
                 }
             }
-            fileData += '        </script>\n        <script src="' + data['EJS_pathtodata'] + 'loader.js"></script>\n    </body>\n</html>';
+            fileData += `            let emulatorScript = document.createElement("script");
+            emulatorScript.type = 'text/javascript';
+            emulatorScript.src = '`+data['EJS_pathtodata']+`loader.js';
+            document.body.appendChild(emulatorScript);\n`
+            fileData += '        </script>\n    </body>\n</html>';
             zipOut = false;
-        } else {
-            data['EJS_gameUrl'] = 'new Blob([Uint8Array.from(atob(window.gameData), (m) => m.codePointAt(0))])';
-            var b = bytesToBase64(new Uint8Array(await (new Blob([file])).arrayBuffer()));
-            zip.file('gameData.js', 'window.gameData = `' + b + '`\n');
-            for (var k in data) {
-                if (data[k] === true || data[k] === false || k === 'EJS_gameUrl') {
-                    fileData += (spaces + k + ' = ' + data[k] + ';\n');
-                } else {
-                    fileData += (spaces + k + ' = \'' + data[k] + '\';\n');
-                }
-            }
-            fileData += '        </script>\n        <script src=\'' + data['EJS_pathtodata'] + 'loader.js\'></script>\n    </body>\n</html>';
         }
         if (zipOut === false) {
             document.getElementById('select2').style = 'display:none;';
@@ -272,3 +264,9 @@ function bytesToBase64(bytes) {
     ).join("");
     return btoa(binString);
 }
+
+async function CompressBlob(blob) {
+    const cs = new CompressionStream("gzip");
+    const compressedStream = blob.stream().pipeThrough(cs);
+    return await new Response(compressedStream).blob();
+}