feat: add file handler for loading ROMs and update manifest for file …

…associations

package.json

@@ -24,6 +24,8 @@
   },
   "homepage": "https://github.com/franciscodelahoz/Chip8-Emulator#readme",
   "devDependencies": {
+    "@types/wicg-file-system-access": "^2023.10.5",
+    "@types/wicg-web-app-launch": "^2023.1.4",
     "autoprefixer": "^10.4.20",
     "css-loader": "^7.1.2",
     "css-minimizer-webpack-plugin": "^7.0.0",

src/resources/templates/manifest.json

@@ -0,0 +1,14 @@
+{
+  "file_handlers": [
+    {
+      "action": "/",
+      "accept": {
+        "application/octet-stream": [
+          ".ch8",
+          ".sc8",
+          ".xo8"
+        ]
+      }
+    }
+  ]
+}

src/scripts/emulator/emulator.ts

@@ -141,6 +141,12 @@ export class Chip8Emulator {
     this.startEmulatorLoop();
   }
 
+  public loadRomFromData(romData: Uint8Array) {
+    this.stopEmulatorLoop();
+    this.cpuInstance.loadRom(romData);
+    this.startEmulatorLoop();
+  }
+
   public resetEmulation() {
     this.stopEmulatorLoop();
     this.cpuInstance.resetRom();

src/scripts/ui/controls/emulator.ts

@@ -28,7 +28,33 @@ function initializeResetRomButtonEventHandlers(emulatorInstance: Chip8Emulator)
   });
 }
 
+async function handleFileInput(files: FileSystemFileHandle[], emulatorInstance: Chip8Emulator) {
+  const fileHandle = files[0] as FileSystemFileHandle;
+
+  try {
+    const fileData = await fileHandle.getFile();
+    const arrayBuffer = await fileData.arrayBuffer();
+
+    const romData = new Uint8Array(arrayBuffer);
+    emulatorInstance.loadRomFromData(romData);
+
+  } catch(error) {
+    return alert(`Error loading the ROM file.`);
+  }
+}
+
+function registerFileHandlerLoadRom(emulatorInstance: Chip8Emulator) {
+  window.launchQueue?.setConsumer(async (launchParams) => {
+    if (launchParams.files.length) {
+      const files = launchParams.files as Array<FileSystemFileHandle>;
+      await handleFileInput(files, emulatorInstance);
+    }
+  });
+}
+
 export function initializeEmulatorControllerModule(emulatorInstance: Chip8Emulator) {
   initializeRomFileInputEventHandlers(emulatorInstance);
   initializeResetRomButtonEventHandlers(emulatorInstance);
+
+  registerFileHandlerLoadRom(emulatorInstance);
 }

tsconfig.json

@@ -1,17 +1,15 @@
 {
   "compilerOptions": {
     /* Visit https://aka.ms/tsconfig to read more about this file */
-
     /* Projects */
     // "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
     // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
     // "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
     // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
     // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
     // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
-
     /* Language and Environment */
-    "target": "ESNext",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+    "target": "ESNext", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
     // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
     // "jsx": "preserve",                                /* Specify what JSX code is generated. */
     // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
@@ -23,26 +21,26 @@
     // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
     // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
     // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
-
     /* Modules */
-    "module": "ESNext",                                  /* Specify what module code is generated. */
+    "module": "ESNext", /* Specify what module code is generated. */
     // "rootDir": "./",                                  /* Specify the root folder within your source files. */
     // "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
     // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
     // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
     // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
     // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
-    // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
+    "types": [
+      "wicg-web-app-launch",
+      "wicg-file-system-access"
+    ], /* Specify type package names to be included without being referenced in a source file. */
     // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
     // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
     // "resolveJsonModule": true,                        /* Enable importing .json files. */
     // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
-
     /* JavaScript Support */
     // "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
     // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
     // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
-
     /* Emit */
     // "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
     // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
@@ -67,16 +65,14 @@
     // "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
     // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
     // "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
-
     /* Interop Constraints */
     // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
     // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
-    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
+    "esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
     // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
-    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
-
+    "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */
     /* Type Checking */
-    "strict": true,                                      /* Enable all strict type-checking options. */
+    "strict": true, /* Enable all strict type-checking options. */
     // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
     // "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
     // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
@@ -95,9 +91,8 @@
     // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
     // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
     // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
-
     /* Completeness */
     // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
-    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
+    "skipLibCheck": true /* Skip type checking all .d.ts files. */
   }
 }

webpack.config.js

@@ -26,7 +26,7 @@ export default (env, argv) => {
       logoMaskable: path.join(path.resolve(), './src/resources/maskable.svg'),
       favicons: {
         appName: 'Chip8 Emulator',
-        appDescription: 'A Chip-8 emulator written in Typescript.',
+        appDescription: 'A Chip-8, Super Chip-8 (SCHIP), and XO-CHIP emulator written in TypeScript.',
         background: '#222222',
         theme_color: '#222222',
         mode: 'webapp',
@@ -42,6 +42,7 @@ export default (env, argv) => {
           yandex: true,
         },
       },
+      manifest: path.join(path.resolve(), './src/resources/templates/manifest.json'),
     }),
   ];