File Refresh on Chrome (#34)

* feat: better

* fix: more stugg

* fmt

.github/workflows/deploy.yml

@@ -20,6 +20,12 @@ jobs:
         with:
           version: "latest"
 
+      - name: Install deps
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y curl pkg-config libssl-dev build-essential
+          npm install -g wrangler
+
       - name: Build WASM
         working-directory: wasm
         run: wasm-pack build --release

CHANGELOG.md

@@ -11,6 +11,20 @@ Add new features here, everything will be added at the end to the changelog when
 
 -->
 
+# v1.5.10
+
+## Added
+
+- Refresh file on chrome browser
+
+## Fixed
+
+- Update core module version
+
+## Changed
+
+- Switched place of hard reset and reload
+
 # v1.5.9
 
 ## Perf

package.json

@@ -1,7 +1,7 @@
 {
   "name": "dtekv-emulator-web",
   "private": true,
-  "version": "1.5.9",
+  "version": "1.5.10",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/pages/Emulator/views/Nav/helpers/NavDropDownButton/NavDropDownButton.module.css

@@ -27,9 +27,10 @@
   position: absolute;
   flex-direction: column;
   transform: translateY(100%);
+  min-width: 150px;
   bottom: -1px;
   left: -1px;
-  width: calc(100% + 1px);
+  width: max-content;
   z-index: 10;
 }
 
@@ -42,7 +43,7 @@
   display: flex;
   align-items: center;
   box-sizing: border-box;
-  padding-left: 12px;
+  padding: 0 12px;
   justify-content: flex-start;
   background-color: var(--color-background);
   border: 1px solid var(--color-border);

src/pages/Emulator/views/Nav/index.tsx

@@ -9,7 +9,12 @@ import { hasLoadedAtom } from "../../../../atoms";
 import useDialog from "../../../../hooks/useDialog";
 import UploadForm from "./helpers/UploadDownloadForms/UploadForm";
 import DowloadForm from "./helpers/UploadDownloadForms/DowloadForm";
-import { useRef } from "react";
+import { useRef, useState } from "react";
+import {
+  FileHandle,
+  getFileHandle,
+  hasFileSystemApi,
+} from "../../../../utils/fileSystem";
 
 const binaries = new Map<string, Uint8Array>();
 
@@ -66,26 +71,10 @@ const examples = [
 ];
 
 function Nav() {
-  const fileRef = useRef<HTMLInputElement>(null);
-
   return (
     <>
-      <label className={styles.navButton} htmlFor="load-nav-button">
-        Load Binary
-        <input
-          style={{ display: "none" }}
-          ref={fileRef}
-          id="load-nav-button"
-          type="file"
-          onChange={async (e) => {
-            const file = e.currentTarget.files![0];
-            const bin = new Uint8Array(await file.arrayBuffer());
-            loadBinary(bin);
-            fileRef.current!.value = "";
-          }}
-        />
-      </label>
-      <HardResetButton />
+      {hasFileSystemApi() ? <FileInputButton /> : <LegacyInputButton />}
+      <ReloadButton />
       <ExampleButton />
       <AdvancedButton />
       <div className={styles.splitter} />
@@ -107,16 +96,71 @@ function Nav() {
   );
 }
 
-function HardResetButton() {
+// Uses input type="file" to load a binary file,
+// Works on older browsers
+function LegacyInputButton() {
+  const fileRef = useRef<HTMLInputElement>(null);
+
+  return (
+    <label className={styles.navButton} htmlFor="load-nav-button">
+      Load Binary
+      <input
+        style={{ display: "none" }}
+        ref={fileRef}
+        id="load-nav-button"
+        type="file"
+        onChange={async (e) => {
+          const file = e.currentTarget.files![0];
+          const bin = new Uint8Array(await file.arrayBuffer());
+          loadBinary(bin);
+          fileRef.current!.value = "";
+        }}
+      />
+    </label>
+  );
+}
+
+function FileInputButton() {
+  const [fileHandle, setFileHandle] = useState<FileHandle | null>(null);
+  const hasLoaded = useAtomValue(hasLoadedAtom);
+
+  return (
+    <>
+      <button
+        className={styles.navButton}
+        onClick={async () => {
+          const fileHandle = await getFileHandle();
+          setFileHandle(fileHandle);
+          console.log(fileHandle);
+          const file = await fileHandle.getFile();
+          const bin = new Uint8Array(await file.arrayBuffer());
+          loadBinary(bin);
+        }}
+      >
+        Load File
+      </button>
+      <button
+        className={styles.navButton}
+        disabled={!hasLoaded || !fileHandle}
+        onClick={async () => {
+          if (!fileHandle || !hasLoaded) return;
+          const file = await fileHandle.getFile();
+          const bin = new Uint8Array(await file.arrayBuffer());
+          loadBinary(bin);
+        }}
+      >
+        Refresh File
+      </button>
+    </>
+  );
+}
+
+function ReloadButton() {
   const hasLoaded = useAtomValue(hasLoadedAtom);
 
   return (
-    <button
-      onClick={hardReset}
-      disabled={!hasLoaded}
-      className={styles.navButton}
-    >
-      Hard Reset
+    <button onClick={reload} disabled={!hasLoaded} className={styles.navButton}>
+      Reload
     </button>
   );
 }
@@ -146,9 +190,9 @@ function AdvancedButton() {
       title="Advanced"
       buttons={[
         {
-          title: "Reload",
+          title: "Hard Reset",
           disabled: !hasLoaded,
-          onClick: reload,
+          onClick: hardReset,
         },
         {
           title: "Download",

src/utils/fileSystem.ts

@@ -0,0 +1,22 @@
+export type FileHandle = {
+  getFile: () => Promise<File>;
+};
+
+declare global {
+  interface Window {
+    showOpenFilePicker?: () => Promise<FileHandle[]>;
+  }
+}
+
+export function hasFileSystemApi(): boolean {
+  return "showOpenFilePicker" in window;
+}
+
+export async function getFileHandle(): Promise<FileHandle> {
+  if (!hasFileSystemApi()) {
+    throw new Error("File System API is not supported in this browser");
+  }
+
+  const [handle] = await window.showOpenFilePicker!();
+  return handle;
+}

wasm/Cargo.toml

@@ -10,7 +10,7 @@ crate-type = ["cdylib", "rlib"]
 default = ["console_error_panic_hook"]
 
 [dependencies]
-dtekv_emulator_core = { git = "https://github.com/PumpedSardines/dtekv-emulator-core", rev="a4108e0c1af741fc1aeb3dd7d7438d57d74cf864" }
+dtekv_emulator_core = { git = "https://github.com/PumpedSardines/dtekv-emulator-core", rev="e9fab01b6afb45dafc7ceb82bdc10859223343d4" }
 wasm-bindgen = "0.2.95"
 console_error_panic_hook = { version = "0.1.7", optional = true }
 web-sys = "0.3.72"