feat: support for zip files

Making use of the newly added `buildRomData()` method.

CHANGELOG.md

@@ -9,7 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
-*
+* Support for Zip file in Web frontend
 
 ### Changed
 

frontends/web/package.json

@@ -23,8 +23,10 @@
         "@types/react-dom": "^18.2.11",
         "@typescript-eslint/eslint-plugin": "^6.7.4",
         "@typescript-eslint/parser": "^6.7.4",
+        "buffer": "^6.0.3",
         "emukit": "^0.9.2",
         "eslint": "^8.51.0",
+        "jszip": "^3.10.1",
         "nodemon": "^3.0.1",
         "parcel": "^2.9.3",
         "prettier": "^3.0.3",

frontends/web/ts/gb.ts

@@ -1,3 +1,4 @@
+import { loadAsync } from "jszip";
 import {
     AudioSpecs,
     base64ToBuffer,
@@ -594,7 +595,7 @@ export class GameboyEmulator extends EmulatorBase implements Emulator {
     }
 
     get romExts(): string[] {
-        return ["gb", "gbc"];
+        return ["gb", "gbc", "zip"];
     }
 
     get pixelFormat(): PixelFormat {
@@ -785,6 +786,19 @@ export class GameboyEmulator extends EmulatorBase implements Emulator {
         this.gameBoy?.key_lift(keyCode);
     }
 
+    async buildRomData(file: File): Promise<Uint8Array> {
+        const arrayBuffer = await file.arrayBuffer();
+        let romData = new Uint8Array(arrayBuffer);
+
+        if (file.name.endsWith(".zip")) {
+            const zip = await loadAsync(romData);
+            const firstFile = Object.values(zip.files)[0];
+            romData = await firstFile.async("uint8array");
+        }
+
+        return romData;
+    }
+
     serializeState(): Uint8Array {
         if (!this.gameBoy) throw new Error("Unable to serialize state");
         return StateManager.save(this.gameBoy, SaveStateFormat.Bos);