🚀 Oh look, it works!

This commit is contained in:
Felix Rieseberg
2018-08-22 22:03:28 -07:00
parent ef02056781
commit 8a3e36a2cf
15 changed files with 436 additions and 176 deletions

View File

@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -8,16 +9,30 @@
<script src="./lib/libv86.js"></script>
<link rel="stylesheet" href="style/style.css">
</head>
<body class="paused">
<div id="start-buttons">
<div class="btn" id="win98">Windows 98</div>
<div class="btn" id="win95">Windows 95</div>
<div class="btn" id="win1">Windows 1</div>
<div id="buttons">
<div id="start-buttons">
<!-- <div class="btn" id="win98">Windows 98</div> -->
<div class="btn" id="win95">
Start Windows 95
<br />
<small>Hit ESC to lock or unlock your mouse</small>
</div>
<!-- <div class="btn" id="win1">Windows 1</div> -->
</div>
<div id="other-buttons">
<div class="btn" id="reset">Reset Machine & Delete State</div>
</div>
</div>
<div id="emulator" style="height: 100vh; width: 100vw">
<div style="white-space: pre; font: 14px monospace; line-height: 14px"></div>
<canvas style="display: none"></canvas>
</div>
<script>require('./renderer.js')</script>
<script>
require('./renderer.js')
</script>
</body>
</html>
</html>

View File

@@ -1,19 +1,8 @@
const START_BUTTONS = document.querySelector('#start-buttons')
const BUTTONS = document.querySelector('#buttons')
let cursorCaptured = false;
const OPTIONS = {
win1: {
fda: {
url: './images/windows101.img',
size: 1474560,
}
},
win98: {
hda: {
url: './images/windows98.img',
async: true,
size: 300 * 1024 * 1024,
}
},
win95: {
hda: {
url: './images/windows95.img',
@@ -23,7 +12,7 @@ const OPTIONS = {
}
}
function main(id) {
async function main(id) {
const opts = Object.assign({
memory_size: 64 * 1024 * 1024,
screen_container: document.getElementById('emulator'),
@@ -32,24 +21,76 @@ function main(id) {
},
vga_bios: {
url: './bios/vgabios.bin',
},
autostart: true
}
}, OPTIONS[id])
console.log(opts, OPTIONS[id])
// New v86 instance
window.emulator = new V86Starter(opts)
window.emulator.lock_mouse()
// Restore state. We can't do this right away.
setTimeout(async () => {
await windows95.restoreState()
cursorCaptured = true
window.emulator.lock_mouse()
window.emulator.run()
}, 500)
}
function setupButtons() {
document.querySelectorAll('.btn').forEach((btn) => {
btn.addEventListener('click', () => {
START_BUTTONS.remove()
BUTTONS.remove()
document.body.className = '';
main(btn.id)
})
})
document.querySelector('#reset').addEventListener('click', () => {
if (window.emulator) {
window.emulator.stop()
}
windows95.resetState()
if (window.emulator) {
window.emulator.run()
}
})
}
function setupEscListener() {
document.onkeydown = function(evt) {
evt = evt || window.event;
if (evt.keyCode == 27) {
if (cursorCaptured) {
cursorCaptured = false
document.exitPointerLock()
} else {
cursorCaptured = true
window.emulator.lock_mouse()
}
}
}
}
function setupCloseListener() {
let isQuitting = false
const handleClose = async () => {
await windows95.saveState()
isQuitting = true
windows95.quit()
}
window.onbeforeunload = (event) => {
if (isQuitting) return
handleClose()
event.preventDefault()
event.returnValue = false
}
}
setupEscListener()
setupCloseListener()
setupButtons()

View File

@@ -17,27 +17,37 @@ body.paused > #emulator {
display: none;
}
#other-buttons {
position: absolute;
width: 100vw;
height: 100px;
display: flex;
align-items: flex-end;
bottom: 0;
justify-content: center;
}
#start-buttons {
position: absolute;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
/* flex-direction: column; */
justify-content: center;
font-family: Courier;
}
#start-buttons > .btn {
.btn {
font-family: Courier;
cursor: pointer;
background: #ffd2fd;
margin: 10px;
padding: 5px;
text-align: center;
}
#start-buttons > .btn:hover {
.btn:hover {
cursor: pointer;
background: #ff95fa;
margin: 10px;
padding: 5px;
}
}