SomeKay · batur1n · Feb 5, 2017 · Feb 5, 2017 · Feb 5, 2017 · Feb 6, 2017
diff --git a/LICENSE b/LICENSE
diff --git a/app/about.html b/app/about.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Sound Machine Help</title>
+    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
+    <link href="css/settings.css" rel="stylesheet" type="text/css"/>
+</head>
+<body>
+<div class="close">Close</div>
+<div id="settings-screen" class="container-fluid">
+    <div class="row">
+        <div class="col-xs-12">
+            <h2>Help</h2>
+
+            <p>Press <strong>Ctrl + Shift + 1, 2, 3, 4, 5, 6, 7, 8</strong> on the keyboard to play sounds.</p>
+
+            <p>Modifier keys for shortcuts can be changed in the settings.</p>
+
+            <p class="copyright" align="center">© 2017</p>
+        </div>
+    </div>
+</div>
+
+<script src="js/about.js"></script>
+</body>
+</html>
diff --git a/app/css/about.css b/app/css/about.css
@@ -0,0 +1,48 @@
+html,
+body {
+    background: #044D7F;
+    overflow: hidden;
+    -webkit-app-region: drag;
+    -webkit-user-select: none;
+}
+
+#settings-screen {
+    color: #fff;
+}
+
+h2 {
+    margin-top: 8px;
+}
+
+input,
+label {
+    -webkit-app-region: no-drag;
+}
+
+input {
+    padding: 10px;
+}
+
+.copyright {
+    position: relative;
+float: left;
+top: 50%;
+left: 50%;
+transform: translate(-50%, -50%);
+}
+
+.close {
+    background: transparent url('../img/close.png') no-repeat 4px 4px;
+    background-size: 24px 24px;
+    cursor: pointer;
+    display: inline-block;
+    height: 32px;
+    position: absolute;
+    right: 6px;
+    text-indent: -10000px;
+    top: 6px;
+    width: 32px;
+    z-index: 1;
+
+    -webkit-app-region: no-drag;
+}
diff --git a/app/css/index.css b/app/css/index.css
@@ -10,8 +10,8 @@ body {
 
 #main {
     background: #1DCCEB;
-    border-bottom: 1px solid #73E2F7;
-    height: 700px;
+    border-bottom: 3px solid #044D7F;
+    height: 540px;
 }
 
 .speaker {
@@ -26,10 +26,16 @@ body {
 
 #main h1 {
     color: #fff;
+/*
+    text-indent: -10000px;
     padding-right: 6px;
+*/
     padding-top: 5px;
-    text-align: right;
-    text-indent: -10000px;
+    padding-bottom: 8px;
+    text-align: center;
+
+    border-bottom: 2px solid #73E2F7;
+    border-top: 2px solid #73E2F7;
 }
 
 #main h1 img {
@@ -88,6 +94,7 @@ body {
     -webkit-app-region: no-drag;
 }
 
+.about,
 .settings,
 .close {
     cursor: pointer;
@@ -102,6 +109,12 @@ body {
     -webkit-app-region: no-drag;
 }
 
+.about {
+   background: transparent url('../img/about.png') no-repeat 4px 4px;
+   background-size: 24px 24px;
+   right: 70px;
+}
+
 .settings {
     background: transparent url('../img/settings.png') no-repeat 4px 4px;
     background-size: 24px 24px;
@@ -113,4 +126,3 @@ body {
     background-size: 24px 24px;
     right: 6px;
 }
-
diff --git a/app/img/about.png b/app/img/about.png
diff --git a/app/img/app-icon.icns b/app/img/app-icon.icns
diff --git a/app/img/app-icon.ico b/app/img/app-icon.ico
diff --git a/app/img/app-icon.png b/app/img/app-icon.png
diff --git a/app/img/icons/ba-dum-tsss.png b/app/img/icons/ba-dum-tsss.png
diff --git a/app/img/icons/crowd-laughing.png b/app/img/icons/crowd-laughing.png
diff --git a/app/img/icons/fart.png b/app/img/icons/fart.png
diff --git a/app/img/icons/gun.png b/app/img/icons/gun.png
diff --git a/app/img/icons/money.png b/app/img/icons/money.png
diff --git a/app/img/icons/sad-trombone.png b/app/img/icons/sad-trombone.png
diff --git a/app/img/icons/wow.png b/app/img/icons/wow.png
diff --git a/app/img/logo.png b/app/img/logo.png
diff --git a/app/img/tray-icon-alt.png b/app/img/tray-icon-alt.png
diff --git a/app/img/[email protected] b/app/img/[email protected]
diff --git a/app/img/tray-iconTemplate.png b/app/img/tray-iconTemplate.png
diff --git a/app/img/[email protected] b/app/img/[email protected]
diff --git a/app/index.html b/app/index.html
@@ -7,6 +7,7 @@
     <link href="css/index.css" rel="stylesheet" type="text/css"/>
 </head>
 <body>
+<div class="about">About</div>
 <div class="settings">Settings</div>
 <div class="close">Close</div>
 <div id="main" class="container-fluid">
@@ -32,38 +33,39 @@ <h1>
             </div>
         </div>
         <div class="col-xs-3">
-            <div class="button-sound" data-sound="ba-dum-tsss">
+            <div class="button-sound" data-sound="applause">
                 <span class="button-icon"></span>
             </div>
         </div>
         <div class="col-xs-3">
-            <div class="button-sound" data-sound="money">
+            <div class="button-sound" data-sound="crowd-laughing">
                 <span class="button-icon"></span>
             </div>
         </div>
     </div>
     <div class="row buttons">
         <div class="col-xs-3">
-            <div class="button-sound" data-sound="ba-dum-tsss">
+            <div class="button-sound" data-sound="sad-trombone">
                 <span class="button-icon"></span>
             </div>
         </div>
         <div class="col-xs-3">
-            <div class="button-sound" data-sound="money">
+            <div class="button-sound" data-sound="fart">
                 <span class="button-icon"></span>
             </div>
         </div>
         <div class="col-xs-3">
-            <div class="button-sound" data-sound="ba-dum-tsss">
+            <div class="button-sound" data-sound="gun">
                 <span class="button-icon"></span>
             </div>
         </div>
         <div class="col-xs-3">
-            <div class="button-sound" data-sound="money">
+            <div class="button-sound" data-sound="wow">
                 <span class="button-icon"></span>
             </div>
         </div>
     </div>
+<!--
     <div class="row buttons">
         <div class="col-xs-3">
             <div class="button-sound" data-sound="ba-dum-tsss">
@@ -108,6 +110,7 @@ <h1>
             </div>
         </div>
     </div>
+-->
 </div>
 
 <script src="js/index.js"></script>

diff --git a/app/js/about.js b/app/js/about.js
@@ -0,0 +1,8 @@
+'use strict';
+
+var ipc = require('electron').ipcRenderer;
+
+var closeEl = document.querySelector('.close');
+closeEl.addEventListener('click', function (e) {
+    ipc.send('close-about-window');
+});
diff --git a/app/js/index.js b/app/js/index.js
@@ -1,17 +1,9 @@
 'use strict';
 
-var ipc = require('ipc');
-var remote = require('remote');
-var Tray = remote.require('tray');
-var Menu = remote.require('menu');
-var path = require('path');
-
 var soundButtons = document.querySelectorAll('.button-sound');
-var closeEl = document.querySelector('.close');
-var settingsEl = document.querySelector('.settings');
+var path = require('path');
 
-var trayIcon = null;
-var trayMenu = null;
+var notifier = require('node-notifier');
 
 for (var i = 0; i < soundButtons.length; i++) {
     var soundButton = soundButtons[i];
@@ -20,53 +12,44 @@ for (var i = 0; i < soundButtons.length; i++) {
     prepareButton(soundButton, soundName);
 }
 
+String.prototype.capitalizeFirstLetter = function() {
+    return this.charAt(0).toUpperCase() + this.slice(1);
+}
+
 function prepareButton(buttonEl, soundName) {
     buttonEl.querySelector('span').style.backgroundImage = 'url("img/icons/' + soundName + '.png")';
 
     var audio = new Audio(__dirname + '/wav/' + soundName + '.wav');
     buttonEl.addEventListener('click', function () {
         audio.currentTime = 0;
         audio.play();
+        notifier.notify({
+           'title': 'Sound playing:',
+           'message': soundName.capitalizeFirstLetter().replace(/-/g, ' '),
+           'sound' : false,
+           'icon': __dirname + '/img/icons/' + soundName + '.png'
+        });
     });
 }
 
-closeEl.addEventListener('click', function () {
-    ipc.send('close-main-window');
+var ipc = require('electron').ipcRenderer;
+
+var aboutEl = document.querySelector('.about');
+aboutEl.addEventListener('click', function () {
+    ipc.send('open-about-window');
 });
 
+var settingsEl = document.querySelector('.settings');
 settingsEl.addEventListener('click', function () {
     ipc.send('open-settings-window');
 });
 
-ipc.on('global-shortcut', function (arg) {
+var closeEl = document.querySelector('.close');
+closeEl.addEventListener('click', function () {
+    ipc.send('close-main-window');
+});
+
+ipc.on('global-shortcut', function(event, arg) {
     var event = new MouseEvent('click');
     soundButtons[arg].dispatchEvent(event);
 });
-
-if (process.platform === 'darwin') {
-    trayIcon = new Tray(path.join(__dirname, 'img/tray-iconTemplate.png'));
-}
-else {
-    trayIcon = new Tray(path.join(__dirname, 'img/tray-icon-alt.png'));
-}
-
-var trayMenuTemplate = [
-    {
-        label: 'Sound machine',
-        enabled: false
-    },
-    {
-        label: 'Settings',
-        click: function () {
-            ipc.send('open-settings-window');
-        }
-    },
-    {
-        label: 'Quit',
-        click: function () {
-            ipc.send('close-main-window');
-        }
-    }
-];
-trayMenu = Menu.buildFromTemplate(trayMenuTemplate);
-trayIcon.setContextMenu(trayMenu);
diff --git a/app/js/settings.js b/app/js/settings.js
@@ -1,20 +1,16 @@
 'use strict';
 
-var ipc = require('ipc');
-var configuration = require('../configuration');
+var ipc = require('electron').ipcRenderer;
 
-var modifierCheckboxes = document.querySelectorAll('.global-shortcut');
-var closeEl = document.querySelector('.close');
+var configuration = require('../configuration.js');
 
-closeEl.addEventListener('click', function (e) {
-    ipc.send('close-settings-window');
-});
+var modifierCheckboxes = document.querySelectorAll('.global-shortcut');
 
 for (var i = 0; i < modifierCheckboxes.length; i++) {
     var shortcutKeys = configuration.readSettings('shortcutKeys');
     var modifierKey = modifierCheckboxes[i].attributes['data-modifier-key'].value;
     modifierCheckboxes[i].checked = shortcutKeys.indexOf(modifierKey) !== -1;
-
+    
     modifierCheckboxes[i].addEventListener('click', function (e) {
         bindModifierCheckboxes(e);
     });
@@ -34,4 +30,9 @@ function bindModifierCheckboxes(e) {
 
     configuration.saveSettings('shortcutKeys', shortcutKeys);
     ipc.send('set-global-shortcuts');
-}
+}
+
+var closeEl = document.querySelector('.close');
+closeEl.addEventListener('click', function (e) {
+    ipc.send('close-settings-window');
+});
diff --git a/app/settings.html b/app/settings.html
@@ -13,7 +13,7 @@
         <div class="col-xs-12">
             <h2>Settings</h2>
 
-            <p>Modifier keys for global shortcuts</p>
+            <p>Modifier keys for global shortcuts (e.g. Ctrl+1 if Ctrl is checked)</p>
             <p>
                 <input type="checkbox" class="global-shortcut" id="global-shortcut-ctrl"
                        data-modifier-key="ctrl"/>

diff --git a/app/wav/burp.wav b/app/wav/burp.wav
diff --git a/app/wav/gun.wav b/app/wav/gun.wav
diff --git a/app/wav/wow.wav b/app/wav/wow.wav