Added Install button

CHANGES.md

@@ -4,7 +4,7 @@
 
 ### v1.40
 
-- Made DOSee into a [Progressive Web App](https://developers.google.com/web/progressive-web-apps/desktop) that allows installation to a local operating system.
+- Made DOSee into a [Progressive Web App](https://developers.google.com/web/progressive-web-apps/desktop) that allows installation to a desktop.
 - Added basic offline support using [Workbox](https://workboxjs.org).
 - Rearranged the source files and subdirectories to require a `build` initialisation
 - Changed page layout to center-align the canvas and form.

README.md

@@ -7,7 +7,7 @@
  
 ![GitHub repo size](https://img.shields.io/github/repo-size/bengarrett/dosee?style=flat-square)
 
-#### [If you enjoy DOSee, consider buying me a cup of coffee?](https://www.buymeacoffee.com/4rtEGvUIY) ☕
+#### [If you enjoy DOSee, consider buying me a cup of coffee?](https://www.buymeacoffee.com/4rtEGvUIY)
 
 ## An MS-DOS emulator for the web.
 
@@ -15,7 +15,7 @@ DOSee is a front-end for an [MS-DOS](https://en.wikipedia.org/wiki/MS-DOS) emula
 
 DOSee is only a user interface and installation process for an incredible emulation ecosystem created by many amazing people over many years. DOSee itself is a fork of [The Emularity](https://github.com/db48x/emularity) project created by the Internet Archive. [EM-DOSBox](https://github.com/dreamlayers/em-dosbox/) the core of this emulation is a JavaScript port of [DOSBox](https://www.dosbox.com), the world's most popular MS-DOS emulator.
 
-![DOSee preview](images/preview.png)
+![DOSee preview](src/images/preview.png)
 
 ### What's new
 
@@ -40,11 +40,12 @@ Clone DOSee.
 git clone https://github.com/bengarrett/DOSee.git
 ```
 
-Install dependencies.
+Install and build dependencies.
 
 ```
 cd DOSee
 npm install --only=prod
+npm run build
 ```
 
 Install and run a local web server.

USAGE.md

@@ -125,6 +125,6 @@ Update the DOSee [index.html](index.html) to launch the demo and enjoy the confu
 <meta name="dosee:run:filename" content="SQ3DEMO.BAT" />
 ```
 
-![DOSee preview](images/sq3demo.png)
+![DOSee preview](src/images/sq3demo.png)
 
 [back to README.md](README.md)

src/css/index.css

@@ -36,6 +36,8 @@ label {
 #helpTab {
   height: var(--max-height);
   width: var(--max-width);
+  overflow: visible;
+  white-space: normal;
 }
 
 .radio-inline {

src/index.html

@@ -27,11 +27,7 @@
     <link rel="preload" href="js/index.js" as="script" />
 
     <link rel="preload" href="js/browserfs.min.js" as="script" />
-    <link
-      rel="preload"
-      href="js/browserfs-zipfs-extras/browserfs-zipfs-extras.js"
-      as="script"
-    />
+    <link rel="preload" href="js/browserfs-zipfs-extras.js" as="script" />
     <link rel="preload" href="js/FileSaver.min.js" as="script" />
     <link rel="preload" href="js/canvas-toBlob.js" as="script" />
 
@@ -90,6 +86,7 @@
         <a href="#doseeTabs" id="doseeCaptureScreen" class="button">Capture</a>
         <a href="#doseeTabs" name="doseeReboot" class="button">Reboot</a>
         <a href="#doseeTabs" id="doseeExit" class="button">STOP</a>
+        <a href="#doseeTabs" id="doseeInstall" class="button hidden">INSTALL</a>
       </header>
       <form id="hardwareTab">
         <fieldset>
@@ -292,7 +289,9 @@
       </form>
       <footer>
         © 2019 - Ben Garrett |
-        <a href="//github.com/bengarrett/DOSee">GitHub</a>
+        <a href="//github.com/bengarrett/DOSee" target="_blank" rel="noopener"
+          >GitHub</a
+        >
         <p>
           <small
             >DOSee <span id="doseeVersion"></span> built on

src/js/index.js

@@ -66,15 +66,37 @@ function resetTabs(defaultTab) {
                 na.classList.remove(`hide`)
         }
     }
-    // Offline notification
+    // PWA offline notification
     {
         const offline = document.getElementById(`doseeOffline`)
-        window.addEventListener(`offline`, function(e) {
+        window.addEventListener(`offline`, () => {
             offline.classList.remove(`hidden`)
         })
-        window.addEventListener(`online`, function(e) {
+        window.addEventListener(`online`, () => {
             offline.classList.add(`hidden`)
         })
     }
+    // Install (pwa) link
+    {
+        window.onappinstalled = () => {
+            console.log(`Thank you for installing DOSee`)
+        }
+        window.addEventListener(
+            `beforeinstallprompt`,
+            beforeInstallPromptEvent => {
+                let installButton = document.getElementById(`doseeInstall`)
+                // Prevents immediate prompt display
+                beforeInstallPromptEvent.preventDefault()
+                installButton.classList.remove(`hidden`)
+                installButton.addEventListener(`click`, () => {
+                    installButton.classList.add(`hidden`)
+                    // Display install prompt and catch any `Cancel` buttons
+                    beforeInstallPromptEvent.prompt().catch(() => {
+                        installButton.classList.add(`hidden`)
+                    })
+                })
+            }
+        )
+    }
     console.log(`Loaded index.js`)
 })()

src/manifest.json

@@ -1,6 +1,6 @@
 {
   "short_name": "DOSee",
-  "name": "DOSee",
+  "name": "DOSee AGI Demo",
   "description": "A DOSBox-based, MS-DOS emulator for the web.",
   "categories": ["emulation", "msdos", "retro"],
   "start_url": ".",