🔧 Add Floppy Support
This commit is contained in:
parent
f0449ed7fe
commit
0c22b05a8d
|
@ -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">
|
||||
|
|
|
@ -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,7 +26,11 @@ async function main (id) {
|
|||
},
|
||||
vga_bios: {
|
||||
url: './bios/vgabios.bin'
|
||||
}
|
||||
},
|
||||
fda: {
|
||||
buffer: floppyFile || undefined
|
||||
},
|
||||
boot_order: 0x132
|
||||
}, OPTIONS[id])
|
||||
|
||||
// New v86 instance
|
||||
|
@ -29,7 +38,9 @@ async function main (id) {
|
|||
|
||||
// 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()
|
||||
|
@ -37,16 +48,20 @@ async function main (id) {
|
|||
}, 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}`
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue