🔧 Add Floppy Support

src/renderer/index.html

@@ -24,6 +24,17 @@
     </div>
     <div id="other-buttons">
       <div class="btn" id="reset">Reset Machine & Delete State</div>
+      <div class="btn" id="floppy">Insert Floppy Disk</div>
+      <div class="btn" id="discard-state">Discard State & Boot From Scratch</div>
+      <input id="file-input" type='file'>
+    </div>
+    <div id="information">
+      <p id="floppy-path"></p>
+      <p>You can insert a floppy disk image with the ".img" format.</p>
+      <p>
+        Boot the machine from scratch if you've inserted a new floppy disk to
+        make sure that Windows can load it.
+      </p>
     </div>
   </div>
   <div id="emulator" style="height: 100vh; width: 100vw">

src/renderer/renderer.js

@@ -1,6 +1,11 @@
-const BUTTONS = document.querySelector('#buttons')
+const $ = document.querySelector.bind(document)
+const $$ = document.querySelectorAll.bind(document)
+
+const BUTTONS = $('#buttons')
 
 let cursorCaptured = false
+let floppyFile = null
+let bootFresh = false
 
 const OPTIONS = {
   win95: {
@@ -21,32 +26,42 @@ async function main (id) {
     },
     vga_bios: {
       url: './bios/vgabios.bin'
-    }
+    },
+    fda: {
+      buffer: floppyFile || undefined
+    },
+    boot_order: 0x132
   }, OPTIONS[id])
 
   // New v86 instance
   window.emulator = new V86Starter(opts)
 
   // Restore state. We can't do this right away.
   setTimeout(async () => {
-    await windows95.restoreState()
+    if (!bootFresh) {
+      await windows95.restoreState()
+    }
 
     cursorCaptured = true
     window.emulator.lock_mouse()
     window.emulator.run()
   }, 500)
 }
 
+function start (id) {
+  BUTTONS.remove()
+  document.body.className = ''
+  main(id)
+}
+
 function setupButtons () {
-  document.querySelectorAll('.btn-start').forEach((btn) => {
-    btn.addEventListener('click', () => {
-      BUTTONS.remove()
-      document.body.className = ''
-      main(btn.id)
-    })
+  // Start
+  $$('.btn-start').forEach((btn) => {
+    btn.addEventListener('click', () => start(btn.id))
   })
 
-  document.querySelector('#reset').addEventListener('click', () => {
+  // Reset
+  $('#reset').addEventListener('click', () => {
     if (window.emulator.stop) {
       window.emulator.stop()
     }
@@ -57,7 +72,29 @@ function setupButtons () {
       window.emulator.run()
     }
 
-    document.querySelector('#reset').disabled = true
+    $('#reset').disabled = true
+  })
+
+  $('#discard-state').addEventListener('click', () => {
+    bootFresh = true
+
+    start('win95')
+  })
+
+  // Floppy
+  $('#floppy').addEventListener('click', () => {
+    $('#file-input').click()
+  })
+
+  // Floppy (Hidden Input)
+  $('#file-input').addEventListener('change', (event) => {
+    floppyFile = event.target.files && event.target.files.length > 0
+      ? event.target.files[0]
+      : null
+
+    if (floppyFile) {
+      $('#floppy-path').innerHTML = `Inserted Floppy Disk: ${floppyFile.path}`
+    }
   })
 }
 

src/renderer/style/style.css

@@ -1,8 +1,32 @@
 html, body {
   margin: 0;
   padding: 0;
+}
+
+body {
   background: #000;
-  /* cursor: none; */
+}
+
+body.paused > #emulator {
+  display: none;
+}
+
+body.paused {
+  background: #008080;
+  font-family: Courier;
+}
+
+#floppy-path {
+  background: beige;
+  padding: 5px;
+}
+
+#information {
+  text-align: center;
+  position: absolute;
+  width: 100vw;
+  bottom: 50px;
+  font-size: 18px;
 }
 
 #emulator {
@@ -13,7 +37,7 @@ html, body {
   margin: auto;
 }
 
-body.paused > #emulator {
+#file-input {
   display: none;
 }