diff --git a/src/renderer/buttons.js b/src/renderer/buttons.js index 7205411..cc2f582 100644 --- a/src/renderer/buttons.js +++ b/src/renderer/buttons.js @@ -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' diff --git a/src/renderer/index.html b/src/renderer/index.html index 9cebad4..7dfed2f 100644 --- a/src/renderer/index.html +++ b/src/renderer/index.html @@ -17,43 +17,52 @@ | CPU Speed: 0 | Hide -
-
+
+
+
Start Windows 95
Hit ESC to lock or unlock your mouse
-
-
- -
-

-

You can insert a floppy disk image with the ".img" format.

-

- Boot the machine from scratch if you've inserted a new floppy disk - or if you've changed the disk image. -

-
-
-
+
+
+
+
+

Floppy Drive

+
+
+ +

windows95 comes with a virtual floppy drive. If you have floppy disk images in the "img" format, you can + mount them here.

+

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.

+

Once you've mounted a disk image, you might have to reboot your virtual windows95 machine from scratch.

+

No floppy mounted

+ + +
+
+
+
-
-
+
+
-
+
- + +
diff --git a/src/renderer/renderer.js b/src/renderer/renderer.js index 8532434..3a6396f 100644 --- a/src/renderer/renderer.js +++ b/src/renderer/renderer.js @@ -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() } diff --git a/src/renderer/style/style.css b/src/renderer/style/style.css index c932632..ef2e309 100644 --- a/src/renderer/style/style.css +++ b/src/renderer/style/style.css @@ -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; +}