Compress combo rom (#615)

GitHub pages, for whatever reason, doesn't compress the combo ROM and
instead serves it uncompressed. Therefore, we explicitly compress it
using the highest compression level at build time and explicitly
decompress it.

Previously we would download 14.69MB, now we download 7.84MB.
Approximately 50% savings.

justfile

@@ -110,6 +110,7 @@ build-site: build-combo-rom-site build-site-mgba-wrapper build-book
     cp book/book website/build/book -r
     cp website/app/build website/build/mgba -r
     cp examples/target/examples/combo.gba website/build/assets/combo.gba
+    gzip -9 -c website/build/assets/combo.gba > website/build/assets/combo.gba.gz
 
 _run-tool +tool:
     (cd tools && cargo build)

website/app/src/mgba.tsx

@@ -41,6 +41,19 @@ export interface MgbaHandle {
   buttonRelease: (key: GbaKey) => void;
 }
 
+const downloadGame = async (gameUrl: string): Promise<ArrayBuffer> => {
+  const game = await fetch(gameUrl);
+
+  if (gameUrl.endsWith(".gz")) {
+    const decompressedStream = (await game.blob())
+      .stream()
+      .pipeThrough(new DecompressionStream("gzip"));
+    return await new Response(decompressedStream).arrayBuffer();
+  } else {
+    return await game.arrayBuffer();
+  }
+};
+
 export const Mgba = forwardRef<MgbaHandle, MgbaProps>(
   ({ gameUrl, volume, controls, paused }, ref) => {
     const canvas = useRef(null);
@@ -52,9 +65,7 @@ export const Mgba = forwardRef<MgbaHandle, MgbaProps>(
     useEffect(() => {
       if (state !== MgbaState.Initialised) return;
       (async () => {
-        const game = await fetch(gameUrl);
-        const gameData = await game.arrayBuffer();
-
+        const gameData = await downloadGame(gameUrl);
         const gameSplit = gameUrl.split("/");
         const gameBaseName = gameSplit[gameSplit.length - 1];
 

website/app/src/useFrameSkip.hook.ts

@@ -14,7 +14,6 @@ export const useFrameSkip = (mgbaModule: MutableRefObject<mGBAEmulator>) => {
         const raf = (time: DOMHighResTimeStamp) => {
             if (previous) {
                 const delta = time - previous;
-                console.log(delta);
 
                 smoothedFrameTime = (smoothedFrameTime * 3 + delta) / 4;
 

website/site/index.html

@@ -155,7 +155,7 @@
           <iframe
             id="gameFrame"
             onload="this.contentWindow.focus()"
-            src="mgba/index.html#/assets/combo.gba"
+            src="mgba/index.html#/assets/combo.gba.gz"
           ></iframe>
           <div class="imageWrapper"><img src="assets/right.png" /></div>
         </div>