shareware fixes

src/App.js

@@ -162,6 +162,11 @@ class App extends React.Component {
   }
 
   start(file) {
+    if (file && file.name.match(/\.sv$/i)) {
+      this.fs.then(fs => fs.upload(file)).then(console.log(`Updated ${file.name}`));
+      return;
+    }
+
     document.removeEventListener("drop", this.onDrop, true);
     document.removeEventListener("dragover", this.onDragOver, true);
     document.removeEventListener("dragenter", this.onDragEnter, true);
@@ -266,11 +271,15 @@ class App extends React.Component {
   onKeyDown = e => {
     if (!this.canvas) return;
     this.game("DApi_Key", 0, this.eventMods(e), e.keyCode);
-    // if (e.keyCode >= 32 && e.key.length === 1) {
-    //   this.game("DApi_Char", e.key.charCodeAt(0));
-    // }
+    if (e.keyCode >= 32 && e.key.length === 1 && !this.showKeyboard) {
+      this.game("DApi_Char", e.key.charCodeAt(0));
+    }
     this.clearKeySel();
-    e.preventDefault();
+    if (!this.showKeyboard) {
+      if (e.keyCode === 8 || (e.keyCode >= 112 && e.keyCode <= 119)) {
+        e.preventDefault();
+      }
+    }
   }
 
   onMenu = e => {
@@ -492,7 +501,7 @@ class App extends React.Component {
           )}
           {!!loading && !started && !error && (
             <div className="loading">
-              {progress && progress.text || 'Loading...'}
+              {(progress && progress.text) || 'Loading...'}
               {progress != null && !!progress.total && (
                 <span className="progressBar"><span><span style={{width: `${Math.round(100 * progress.loaded / progress.total)}%`}}/></span></span>
               )}

src/api/loader.js

@@ -36,14 +36,14 @@ function onRender(api, ctx, {bitmap, images, text, clip, belt}) {
 
 function testOffscreen() {
   return false;
-  try {
+  /*try {
     const canvas = document.createElement("canvas");
     const offscreen = canvas.transferControlToOffscreen();
     const context = offscreen.getContext("2d");
     return context != null;
   } catch (e) {
     return false;
-  }
+  }*/
 }
 
 async function do_load_game(api, audio, mpq) {
@@ -106,7 +106,7 @@ async function do_load_game(api, audio, mpq) {
         }
       });
       const transfer= [];
-      for (let [name, file] of fs.files) {
+      for (let [, file] of fs.files) {
         transfer.push(file.buffer);
       }
       worker.postMessage({action: "init", files: fs.files, mpq, spawn, offscreen}, transfer);

src/fs.js

@@ -30,6 +30,36 @@ const importStorage = () => new Promise((resolve, reject) => {
   }, 10000);
 });
 
+async function downloadFile(store, name) {
+  const file = await store.get(name.toLowerCase());
+  if (file) {
+    const blob = new Blob([file], {type: 'binary/octet-stream'});
+    const url = URL.createObjectURL(blob);
+    const lnk = document.createElement('a');
+    lnk.setAttribute('href', url);
+    lnk.setAttribute('download', name);
+    document.body.appendChild(lnk);
+    lnk.click();
+    document.body.removeChild(lnk);
+    URL.revokeObjectURL(url);
+  } else {
+    console.error(`File ${name} does not exist`);
+  }
+}
+
+const readFile = file => new Promise((resolve, reject) => {
+  const reader = new FileReader();
+  reader.onload = () => resolve(reader.result);
+  reader.onerror = () => reject(reader.error);
+  reader.onabort = () => reject();
+  reader.readAsArrayBuffer(file);
+});
+async function uploadFile(store, files, file) {
+  const data = new Uint8Array(await readFile(file));
+  files.set(file.name.toLowerCase(), data);
+  return store.set(file.name.toLowerCase(), data);
+}
+
 export default async function create_fs(load) {
   try {
     const store = new IdbKvStore('diablo_fs');
@@ -46,18 +76,22 @@ export default async function create_fs(load) {
         }
       }
     }
+    window.DownloadFile = name => downloadFile(store, name);
     return {
       files,
       update: (name, data) => store.set(name, data),
       delete: name => store.remove(name),
       clear: () => store.clear(),
+      upload: file => uploadFile(store, files, file),
     };
   } catch (e) {
+    window.DownloadFile = () => console.error('IndexedDB is not supported');
     return {
       files: new Map(),
       update: () => Promise.resolve(),
       delete: () => Promise.resolve(),
       clear: () => Promise.resolve(),
+      upload: () => Promise.resolve(),
     };
   }  
 }