Update UI

src/renderer/app.tsx

@@ -1,3 +1,12 @@
+export interface Win95Window extends Window {
+  emulator: any;
+  win95: {
+    app: App;
+  };
+}
+
+declare let window: Win95Window;
+
 /**
  * The top-level class controlling the whole app. This is *not* a React component,
  * but it does eventually render all components.
@@ -27,8 +36,8 @@ export class App {
   }
 }
 
-window["win95"] = window["win95"] || {
+window.win95 = window.win95 || {
   app: new App(),
 };
 
-window["win95"].app.setup();
+window.win95.app.setup();

src/renderer/card-drive.tsx

@@ -1,106 +0,0 @@
-import * as React from "react";
-
-interface CardDriveProps {
-  showDiskImage: () => void;
-}
-
-interface CardDriveState {}
-
-export class CardDrive extends React.Component<CardDriveProps, CardDriveState> {
-  constructor(props: CardDriveProps) {
-    super(props);
-
-    this.state = {};
-  }
-
-  public render() {
-    let advice: JSX.Element | null = null;
-
-    if (process.platform === "win32") {
-      advice = this.renderAdviceWindows();
-    } else if (process.platform === "darwin") {
-      advice = this.renderAdviceMac();
-    } else {
-      advice = this.renderAdviceLinux();
-    }
-
-    return (
-      <section>
-        <div className="card settings">
-          <div className="card-header">
-            <h2 className="card-title">
-              <img src="../../static/drive.png" />
-              Modify C: Drive
-            </h2>
-          </div>
-          <div className="card-body">
-            <p>
-              windows95 (this app) uses a raw disk image. Windows 95 (the
-              operating system) is fragile, so adding or removing files is
-              risky.
-            </p>
-            {advice}
-          </div>
-        </div>
-      </section>
-    );
-  }
-
-  public renderAdviceWindows(): JSX.Element {
-    return (
-      <fieldset>
-        <legend>Changing the disk on Windows</legend>
-        <p>
-          Windows 10 cannot mount raw disk images (ironically, macOS and Linux
-          can). However, tools exist that let you mount this drive, like the
-          freeware tool{" "}
-          <a
-            target="_blank"
-            href="https://www.osforensics.com/tools/mount-disk-images.html"
-          >
-            OSFMount
-          </a>
-          . I am not affiliated with it, so please use it at your own risk.
-        </p>
-        {this.renderMountButton("Windows Explorer")}
-      </fieldset>
-    );
-  }
-
-  public renderAdviceMac(): JSX.Element {
-    return (
-      <fieldset>
-        <legend>Changing the disk on macOS</legend>
-        <p>
-          macOS can mount the disk image directly. Click the button below to see
-          the disk image in Finder. Then, double-click the image to mount it.
-        </p>
-        {this.renderMountButton("Finder")}
-      </fieldset>
-    );
-  }
-
-  public renderAdviceLinux(): JSX.Element {
-    return (
-      <fieldset>
-        <legend>Changing the disk on Linux</legend>
-        <p>
-          There are plenty of tools that enable Linux users to mount and modify
-          disk images. The disk image used by windows95 is a raw "img" disk
-          image and can probably be mounted using the <code>mount</code> tool,
-          which is likely installed on your machine.
-        </p>
-        {this.renderMountButton("file viewer")}
-      </fieldset>
-    );
-  }
-
-  public renderMountButton(explorer: string) {
-    return (
-      <button className="btn" onClick={this.props.showDiskImage}>
-        <img src="../../static/show-disk-image.png" />
-        <span>Show disk image in {explorer}</span>
-      </button>
-    );
-  }
-}

src/renderer/emulator.tsx

@@ -9,11 +9,13 @@ import { CardStart } from "./card-start";
 import { StartMenu } from "./start-menu";
 import { CardSettings } from "./card-settings";
 import { EmulatorInfo } from "./emulator-info";
-import { CardDrive } from "./card-drive";
 import { getStatePath } from "./utils/get-state-path";
+import { Win95Window } from "./app";
+
+declare let window: Win95Window;
 
 export interface EmulatorState {
-  currentUiCard: string;
+  currentUiCard: "start" | "settings";
   emulator?: any;
   scale: number;
   floppyFile?: File;
@@ -200,8 +202,6 @@ export class Emulator extends React.Component<{}, EmulatorState> {
           cdrom={cdromFile}
         />
       );
-    } else if (currentUiCard === "drive") {
-      card = <CardDrive showDiskImage={this.showDiskImage} />;
     } else {
       card = <CardStart startEmulator={this.startEmulator} />;
     }
@@ -210,7 +210,7 @@ export class Emulator extends React.Component<{}, EmulatorState> {
       <>
         {card}
         <StartMenu
-          navigate={(target) => this.setState({ currentUiCard: target })}
+          navigate={(target) => this.setState({ currentUiCard: target as "start" | "settings" })}
         />
       </>
     );
@@ -308,8 +308,6 @@ export class Emulator extends React.Component<{}, EmulatorState> {
           }
         : undefined,
       boot_order: 0x132,
-      // One day, maybe!
-      // network_relay_url: "ws://localhost:8080/"
     };
 
     console.log(`🚜 Starting emulator with options`, options);

src/renderer/start-menu.tsx

@@ -28,10 +28,6 @@ export class StartMenu extends React.Component<StartMenuProps, {}> {
             <img src="../../static/settings.png" />
             <span>Settings</span>
           </a>
-          <a onClick={this.navigate} href="#" id="drive" className="nav-link">
-            <img src="../../static/drive.png" />
-            <span>Modify C: Drive</span>
-          </a>
         </div>
       </nav>
     );