Improve Binary Serialization in the Code Generator (#58)

* 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

* Fix silly gaps

Author: zalo

public/js/main.js

@@ -156,11 +156,11 @@ 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(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') {
@@ -169,20 +169,20 @@ 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(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');
                 } else {
                     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;';
@@ -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);
+}