maxmustermann/windows95
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

wip

Browse source
This commit is contained in:
Felix Rieseberg 2019-08-04 08:45:18 -07:00
parent 153002403b
commit 42719bb1d7
4 changed files with 81 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/renderer/buttons.js
View file

@ -6,30 +6,30 @@ export function setupButtons (start) {
$('a#start').addEventListener('click', () => setVisibleSection('start'))
$('a#floppy').addEventListener('click', () => setVisibleSection('floppy'))
$('a#state').addEventListener('click', () => setVisibleSection('state'))
$('a#disk-image').addEventListener('click', () => setVisibleSection('disk-image'))
$('a#disk').addEventListener('click', () => setVisibleSection('disk'))
// // Start
// $('.btn-start').addEventListener('click', () => start())
// Start
$('.btn-start').addEventListener('click', start)
// // Disk Image
// $('#show-disk-image').addEventListener('click', () => windows95.showDiskImage())
// Disk Image
$('#disk-image-show').addEventListener('click', () => windows95.showDiskImage())
// // Reset
// $('#reset').addEventListener('click', () => windows95.resetState())
// Reset
$('#reset').addEventListener('click', () => windows95.resetState())
// $('#discard-state').addEventListener('click', () => {
// window.appState.bootFresh = true
$('#discard-state').addEventListener('click', () => {
window.appState.bootFresh = true
// start()
// })
start()
})
// // Floppy
// $('#floppy').addEventListener('click', () => {
// $('#file-input').click()
// })
// Floppy
$('#floppy-select').addEventListener('click', () => {
$('#floppy-input').click()
})
// Floppy (Hidden Input)
$('#file-input').addEventListener('change', (event) => {
$('#floppy-input').addEventListener('change', (event) => {
window.appState.floppyFile = event.target.files && event.target.files.length > 0
? event.target.files[0]
: null
@ -40,8 +40,8 @@ export function setupButtons (start) {
})
}
export function toggleButtons (forceTo) {
const buttonElements = $('#buttons')
export function toggleSetup (forceTo) {
const buttonElements = $('#setup')
if (buttonElements.style.display !== 'none' || forceTo === false) {
buttonElements.style.display = 'none'

67
src/renderer/index.html
View file

@ -17,43 +17,52 @@
| CPU Speed: <span id="cpu-status">0</span>
| <a href="#" id="toggle-status">Hide</a>
</div>
<section id="section-start" class="visible">
<div class="btn btn-start" id="win95">
<div id="setup">
<section id="section-start" class="visible">
<div class="btn btn-start" id="win95">
Start Windows 95
<br />
<small>Hit ESC to lock or unlock your mouse</small>
</div>
</section>
<section id="section-floppy">
<input id="file-input" type='file'>
<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
or if you've changed the disk image.
</p>
</div>
</section>
<section id="section-state">
</section>
<section id="section-floppy">
<div class="card">
<div class="card-header">
<h2 class="card-title">Floppy Drive</h2>
</div class="card-header">
<div class="card-body">
<input id="floppy-input" type='file'>
<p>windows95 comes with a virtual floppy drive. If you have floppy disk images in the "img" format, you can
mount them here.</p>
<p>Back in the 90s and before CD-ROM became a popular format, software was typically distributed on floppy
disks. Some developers have since released their apps or games for free, usually on virtual floppy disks
using the "img" format.</p>
<p>Once you've mounted a disk image, you might have to reboot your virtual windows95 machine from scratch.</p>
<p id="floppy-path">No floppy mounted</p>
<button id="floppy-select" class="btn">Mount floppy disk</button>
<button id="floppy-reboot" class="btn">Reboot from scratch</button>
</div>
</div>
</section>
<section id="section-state">
</section>
<section id="section-disk">
</section>
<section id="section-disk">
</section>
</section>
<nav class="nav nav-bottom">
<a href="#" id="start" class="nav-logo">
<img src="style/start.png" alt=""><span>Start</span>
</a>
<button type="button" name="button" class="nav-menu-btn">Menu</button>
<div class="nav-menu">
<a href="#" id="floppy" class="nav-link">Floppy Disk</a>
<a href="#" id="state" class="nav-link">Reset Machine</a>
<a href="#" id="disk" class="nav-link">Modify C: Drive</a>
</div>
</nav>
<nav class="nav nav-bottom">
<a href="#" id="start" class="nav-logo">
<img src="style/start.png" alt=""><span>Start</span>
</a>
<div class="nav-menu">
<a href="#" id="floppy" class="nav-link">Floppy Disk</a>
<a href="#" id="state" class="nav-link">Reset Machine</a>
<a href="#" id="disk" class="nav-link">Modify C: Drive</a>
</div>
</nav>
</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>

4
src/renderer/renderer.js
View file

@ -1,7 +1,7 @@
/* We're using modern esm imports here */
import { setupState } from 'es6://app-state.js'
import { setupClickListener, setupEscListener, setupCloseListener } from 'es6://listeners.js'
import { toggleButtons, setupButtons } from 'es6://buttons.js'
import { toggleSetup, setupButtons } from 'es6://buttons.js'
import { startInfoMaybe } from 'es6://info.js'
import { setupIpcListeners } from 'es6://ipc.js'
@ -57,7 +57,7 @@ async function main () {
function start () {
document.body.className = ''
toggleButtons(false)
toggleSetup(false)
setupClickListener()
main()
}

25
src/renderer/style/style.css
View file

@ -38,8 +38,15 @@ body.paused {
}
#floppy-path {
background: beige;
padding: 5px;
font-size: .6rem;
width: 100%;
height: 30px;
padding-left: 8px;
border-color: #000 #fff #fff #000;
border-style: solid;
border-width: 2px;
background-color: #c3c3c3;
line-height: 27px;
}
#information {
@ -69,9 +76,17 @@ body.paused {
}
.windows95 nav .nav-logo img {
margin-left: 2px;
max-height: 20px;
}
.windows95 nav .nav-logo > span {
position: absolute;
top: 9px;
left: 37px;
font-weight: bold;
}
section {
display: none;
}
@ -84,3 +99,9 @@ section.visible {
align-items: center;
justify-content: center;
}
.card {
width: 75%;
max-width: 700px;
min-width: 400px;
}