Merge pull request #305 from mattgodbolt/electron-app

Add an electron app

.travis.yml

@@ -1,23 +1,45 @@
 sudo: false
-install: true
 language: node_js
 install:
-    - pip install --user awscli
-node_js: 
-    - "8"
+  - pip install --user awscli
+node_js:
+  - '12'
 env:
-    global:
-        # include $HOME/.local/bin for `aws`
-        - PATH=$HOME/.local/bin:$PATH
-    matrix:
-        - TEST_SUITE=short-tests
-        - TEST_SUITE=long-tests
-        - TEST_SUITE=lint
-script:
-    make -j2 ${TEST_SUITE}
-
+  global:
+    - PATH=$HOME/.local/bin:$PATH
+    # GH_TOKEN=<secret> maps to ecb...ca5
+    - secure: iSv2VWrSWlGERo6jl6V2SLwfWPxx/Y54jTyXBOQLz/nhuzHYFmzvCxNQ9uZkbPC+cQwopcWsxAM+rgWsOJtGiKay2hIJ9qBHknHcSlKaRwiA+2fr8ljTe52kHW3HY6IDj1PyCX7JDG7xFIhYP+URDF3eO9W5XxowIP5d2VP6GGI=
+cache:
+  directories:
+    - node_modules
+    - "$HOME/.cache/electron"
+    - "$HOME/.cache/electron-builder"
+    - "$HOME/.npm/_prebuilds"
 jobs:
-    include:
-        - stage: deploy
-          if: branch = master and type != pull_request
-          env: TEST_SUITE=upload
+  include:
+    - name: Short tests
+      script: make -j2 short-tests
+    - name: Long tests
+      script: make -j2 long-tests
+    - name: Lint
+      script: make -j2 lint
+    - stage: deploy
+      name: Website
+      if: branch = master and type != pull_request
+      env: TEST_SUITE=upload
+    - stage: deploy
+      name: Electron Windows & Mac
+      os: osx
+      osx_image: xcode11.4
+      script:
+        - npm install
+        - npm run dist -- --mac --win
+      before_cache:
+        - rm -rf $HOME/.cache/electron-builder/wine
+    - stage: deploy
+      name: Linux
+      os: linux
+      dist: trusty
+      script:
+        - npm install
+        - npm run dist

app/.jshintrc

@@ -0,0 +1,13 @@
+{
+  "strict": true,
+  "undef": true,
+  "browser": true,
+  "node": true,
+  "globals": {
+    "define": false,
+    "requirejs": false,
+    "ga": false
+  },
+  "esversion": 8,
+  "eqeqeq": true
+}

app/app.js

@@ -0,0 +1,148 @@
+"use strict";
+const {app, dialog, Menu, BrowserWindow} = require('electron');
+const fs = require('fs');
+const path = require('path');
+const {ArgumentParser} = require('argparse');
+
+const isMac = process.platform === 'darwin';
+
+function getArguments() {
+    // Heinous hack to get "built" versions working
+    if (path.basename(process.argv[0]) === 'jsbeeb') // Is this ia "built" version?
+        return process.argv.slice(1);
+    return process.argv.slice(2);
+}
+
+const parser = new ArgumentParser({
+    prog: 'jsbeeb',
+    addHelp: true,
+    description: 'Emulate a Beeb'
+});
+parser.addArgument(["--noboot"], {action: 'storeTrue', help: "don't autoboot if given a disc image"});
+parser.addArgument(["disc1"], {nargs: '?', help: "image to load in drive 0"});
+parser.addArgument(["disc2"], {nargs: '?', help: "image to load in drive 1"});
+const args = parser.parseArgs(getArguments());
+
+
+function getFileParam(filename) {
+    try {
+        return "file://" + fs.realpathSync(filename);
+    } catch (e) {
+        console.error("Unable to open file " + filename);
+        throw e;
+    }
+}
+
+async function createWindow() {
+    const win = new BrowserWindow({
+        width: 1280,
+        height: 1024,
+        webPreferences: {
+            preload: path.join(__dirname, 'preload.js')
+        }
+    });
+
+    const query = {};
+    if (args.disc1 && !args.noboot) query.autoboot = true;
+    if (args.disc1) query.disc1 = getFileParam(args.disc1);
+    if (args.disc2) query.disc2 = getFileParam(args.disc2);
+    await win.loadFile('index.html', {query});
+
+    app.on('activate', function () {
+        if (BrowserWindow.getAllWindows().length === 0) createWindow();
+    });
+}
+
+app.on('window-all-closed', function () {
+    if (process.platform !== 'darwin') app.quit();
+});
+
+app.whenReady().then(createWindow)
+    .catch(e => {
+        console.error("Unhandled exception", e);
+        app.exit(1);
+    });
+
+function makeLoader(drive) {
+    return async (_, browserWindow) => {
+        const result = await dialog.showOpenDialog(browserWindow, {
+            title: "Load a disc image",
+            filters: [
+                {name: 'Disc images', extensions: ['ssd', 'dsd']},
+                {name: 'ZIPped disc images', extensions: ['zip']},
+            ],
+            properties: ['openFile']
+        });
+        if (!result.canceled) {
+            browserWindow.webContents.send('load', {drive, path: getFileParam(result.filePaths[0])});
+        }
+    };
+}
+
+const template = [
+    // { role: 'appMenu' }
+    ...(isMac ? [{
+        label: app.name,
+        submenu: [
+            {role: 'about'},
+            {type: 'separator'},
+            {role: 'services'},
+            {type: 'separator'},
+            {role: 'hide'},
+            {role: 'hideothers'},
+            {role: 'unhide'},
+            {type: 'separator'},
+            {role: 'quit'}
+        ]
+    }] : []),
+    // { role: 'fileMenu' }
+    {
+        label: 'File',
+        submenu: [
+            {
+                label: 'Load disc 0',
+                click: makeLoader(0)
+            },
+            {
+                label: 'Load disc 1',
+                click: makeLoader(1)
+            },
+            isMac ? {role: 'close'} : {role: 'quit'}
+        ]
+    },
+    // { role: 'editMenu' }
+    {
+        label: 'Edit',
+        submenu: [{role: 'paste'}]
+    },
+    // { role: 'viewMenu' }
+    {
+        label: 'View',
+        submenu: [
+            {role: 'reload'},
+            {role: 'forcereload'},
+            {role: 'toggledevtools'},
+            {type: 'separator'},
+            {role: 'resetzoom'},
+            {role: 'zoomin'},
+            {role: 'zoomout'},
+            {type: 'separator'},
+            {role: 'togglefullscreen'}
+        ]
+    },
+    {
+        role: 'help',
+        submenu: [
+            {
+                label: 'Learn More',
+                click: async () => {
+                    const {shell} = require('electron');
+                    await shell.openExternal('https://github.com/mattgodbolt/jsbeeb/');
+                }
+            }
+        ]
+    }
+];
+
+const menu = Menu.buildFromTemplate(template);
+Menu.setApplicationMenu(menu);

app/electron.js

@@ -0,0 +1,17 @@
+define([], function () {
+    'use strict';
+    if (typeof window.nodeRequire === 'undefined') return function () {
+    };
+
+    function init(args) {
+        const {loadDiscImage, processor} = args;
+        const electron = window.nodeRequire('electron');
+        electron.ipcRenderer.on('load', async (event, message) => {
+            const {drive, path} = message;
+            const image = await loadDiscImage(path);
+            processor.fdc.loadDisc(drive, image);
+        });
+    }
+
+    return init;
+});

app/preload.js

@@ -0,0 +1,8 @@
+'use strict';
+window.nodeRequire = require;
+
+window.addEventListener('DOMContentLoaded', () => {
+    for (const node of document.getElementsByClassName("not-electron")) {
+        node.remove();
+    }
+});

index.html

@@ -6,6 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="author" content="Matt Godbolt">
     <meta name="description" content="A Javascript BBC Micro emulator">
+    <meta http-equiv="Content-Security-Policy"
+          content="script-src 'self' 'unsafe-inline' 'unsafe-eval' *.google-analytics.com *.google.com;"/>
     <title>JSBeeb - Javascript BBC Micro emulator</title>
     <link rel="stylesheet" href="lib/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="jsbeeb.css" type="text/css">
@@ -31,13 +33,12 @@
 
         ga('create', 'UA-55180-8', 'godbolt.org');
         ga('send', 'pageview');
-
     </script>
 </head>
 
 <body>
 
-<div id="header-bar" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+<div id="header-bar" class="navbar navbar-inverse navbar-fixed-top not-electron" role="navigation">
     <div class="container">
         <div class="navbar-header">
             <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
@@ -95,15 +96,16 @@
                 </li>
             </ul>
             <div style="float:left; padding-top:12px; padding-left:32px;">
-                <input id="paste-text" type="text" maxlength="0" placeholder="Paste text or drop files here..." style="width:200px;"></input>
+                <input id="paste-text" type="text" maxlength="0" placeholder="Paste text or drop files here..."
+                       style="width:200px;"></input>
             </div>
         </div>
         <!--/.nav-collapse -->
     </div>
 </div>
 
 <div id="audio-warning" class="alert alert-warning initially-hidden">
-Your browser has suspended audio -- mouse click or key press for sound.
+    Your browser has suspended audio -- mouse click or key press for sound.
 </div>
 
 <div>