Added tray, app menu and tray menu for mac

package.json

@@ -1,7 +1,8 @@
 {
   "name": "mob-timer",
   "version": "1.0.0",
-  "description": "",
+  "productName": "Mob Timer",
+  "description": "A timer for mob programming.",
   "main": "src/main.js",
   "scripts": {
     "start": "electron .",
@@ -18,7 +19,7 @@
     "type": "git",
     "url": "git+https://github.com/pluralsight/mob-timer.git"
   },
-  "author": "",
+  "author": "Pluralsight",
   "license": "ISC",
   "bugs": {
     "url": "https://github.com/pluralsight/mob-timer/issues"

src/main.js

@@ -15,6 +15,7 @@ app.on('ready', () => {
   if (timerState.getState().shuffleMobbersOnStartup) {
     timerState.shuffleMobbers()
   }
+  windows.createTrayIconAndMenu()
 })
 
 function onTimerEvent(event, data) {
@@ -26,15 +27,22 @@ function onTimerEvent(event, data) {
 
 ipc.on('timerWindowReady', () => timerState.initialize())
 ipc.on('configWindowReady', () => timerState.publishConfig())
-ipc.on('fullscreenWindowReady', () => timerState.publishConfig())
+ipc.on('fullscreenWindowReady', () => {
+  timerState.stopAlerts()
+  timerState.publishConfig()
+})
 
+ipc.on('reset', () => timerState.reset(true))
 ipc.on('pause', () => timerState.pause())
 ipc.on('unpause', () => timerState.start())
 ipc.on('skip', () => timerState.rotate())
-ipc.on('startTurn', () => timerState.start())
+ipc.on('startTurn', () => {
+  windows.closeFullscreenWindow()
+  timerState.start()
+})
 ipc.on('configure', () => {
-  windows.showConfigWindow()
   windows.closeFullscreenWindow()
+  windows.showConfigWindow()
 })
 
 ipc.on('shuffleMobbers', () => timerState.shuffleMobbers())

src/state/timer-state.js

@@ -52,8 +52,13 @@ class TimerState {
     })
   }
 
-  reset() {
+  reset(stop = false) {
+    if (stop) {
+      this.mainTimer.pause()
+      this.callback('turnEnded')
+    }
     this.mainTimer.reset(this.secondsPerTurn)
+    this.stopAlerts()
     this.dispatchTimerChange(this.secondsPerTurn)
   }
 
@@ -65,6 +70,7 @@ class TimerState {
 
   stopAlerts() {
     this.alertsTimer.pause()
+    this.alertsTimer.reset(0)
     this.callback('stopAlerts')
   }
 

src/windows/menu-template.js

@@ -0,0 +1,119 @@
+const electron = require('electron')
+let windows = require('./windows')
+const isMac = process.platform === 'darwin'
+
+exports.appMenuTemplate = [
+  ...(isMac ? [{
+    role: 'appMenu',
+    submenu: [
+      { role: 'about' },
+      { type: 'separator' },
+      {
+        label: 'Preferences',
+        accelerator: 'CommandOrControl+,',
+        click() { windows.showConfigWindow() }
+      },
+      { type: 'separator' },
+      { role: 'hide' },
+      { role: 'hideothers' },
+      { role: 'unhide' },
+      { type: 'separator' },
+      { role: 'quit' }
+    ]
+  }] : []),
+  {
+    label: 'Timer',
+    submenu: [
+      {
+        label: 'Start',
+        click() { windows.timerWindow.webContents.send('start') }
+      },
+      {
+        label: 'Pause',
+        visible: false,
+        click() { windows.timerWindow.webContents.send('pause') }
+      },
+      {
+        label: 'Reset',
+        visible: false,
+        click() { windows.timerWindow.webContents.send('reset') }
+      },
+      {
+        label: 'Skip',
+        click() { windows.timerWindow.webContents.send('skip') }
+      }
+    ]
+  },
+  ...(!isMac ? [
+    {
+      label: 'Tools',
+      submenu: [
+        {
+          label: 'Preferences',
+          accelerator: 'CommandOrControl+,',
+          click() { windows.showConfigWindow() }
+        }
+      ]
+    }
+  ] : []),
+  {
+    role: 'help',
+    submenu: [
+      ...(!isMac ? [
+        { role: 'about' },
+        { type: 'separator' }
+      ] : []),
+      {
+        label: 'Learn More',
+        click() { electron.shell.openExternal('https://github.com/pluralsight/mob-timer') }
+      }
+    ]
+  }
+]
+
+exports.trayMenuTemplate = [
+  { role: 'about' },
+  {
+    label: 'Timer',
+    submenu: [
+      {
+        label: 'Start',
+        click() { windows.timerWindow.webContents.send('start') }
+      },
+      {
+        label: 'Pause',
+        visible: false,
+        click() { windows.timerWindow.webContents.send('pause') }
+      },
+      {
+        label: 'Reset',
+        visible: false,
+        click() { windows.timerWindow.webContents.send('reset') }
+      },
+      {
+        label: 'Skip',
+        click() { windows.timerWindow.webContents.send('skip') }
+      }
+    ]
+  },
+  {
+    label: 'Tools',
+    submenu: [
+      {
+        label: 'Preferences',
+        accelerator: 'CommandOrControl+,',
+        click() { windows.showConfigWindow() }
+      }
+    ]
+  },
+  {
+    role: 'help',
+    submenu: [
+      {
+        label: 'Learn More',
+        click() { electron.shell.openExternal('https://github.com/pluralsight/mob-timer') }
+      }
+    ]
+  },
+  { role: 'quit' }
+]

src/windows/timer/index.js

@@ -55,7 +55,13 @@ function drawTimerArc(seconds, maxSeconds) {
   drawArc(begin, end, theme.mobberBorderHighlightColor)
 }
 
-ipc.on('rotated', (event, data) => {
+function drawInitialState() {
+  drawOverlays(true)
+  containerEl.classList.remove('isPaused')
+  containerEl.classList.add('isTurnEnded')
+}
+
+function drawMobbers(data) {
   if (!data.current) {
     data.current = { name: 'Add a mobber' }
   }
@@ -67,29 +73,61 @@ ipc.on('rotated', (event, data) => {
   }
   nextPicEl.src = data.next.image || '../img/sad-cyclops.png'
   nextEl.innerHTML = data.next.name
+}
+
+function drawOverlays(isPaused) {
+  if (!paused && isPaused) {
+    containerEl.classList.remove('isTurnEnded')
+    containerEl.classList.add('isPaused')
+  }
+  paused = isPaused
+  if (!isPaused) {
+    containerEl.classList.remove('isTurnEnded')
+    containerEl.classList.remove('isPaused')
+    toggleBtn.classList.remove('play')
+    toggleBtn.classList.add('pause')
+  } else {
+    toggleBtn.classList.add('play')
+    toggleBtn.classList.remove('pause')
+  }
+}
+
+ipc.on('rotated', (event, data) => {
+  drawMobbers(data)
+  drawOverlays(true)
+})
+
+ipc.on('skip', () => {
+  skip()
+})
+
+ipc.on('reset', () => {
+  drawOverlays(true)
+  containerEl.classList.remove('isPaused')
+  containerEl.classList.add('isTurnEnded')
+  reset()
+})
+
+ipc.on('pause', () => {
+  drawOverlays(true)
+  pause()
+})
+
+ipc.on('start', () => {
+  drawOverlays(false)
+  start()
 })
 
 ipc.on('paused', () => {
-  paused = true
-  containerEl.classList.add('isPaused')
-  toggleBtn.classList.add('play')
-  toggleBtn.classList.remove('pause')
+  drawOverlays(true)
 })
 
 ipc.on('started', () => {
-  paused = false
-  containerEl.classList.remove('isPaused')
-  containerEl.classList.remove('isTurnEnded')
-  toggleBtn.classList.remove('play')
-  toggleBtn.classList.add('pause')
+  drawOverlays(false)
 })
 
 ipc.on('turnEnded', () => {
-  paused = true
-  containerEl.classList.remove('isPaused')
-  containerEl.classList.add('isTurnEnded')
-  toggleBtn.classList.add('play')
-  toggleBtn.classList.remove('pause')
+  drawInitialState()
 })
 
 ipc.on('configUpdated', (event, data) => {
@@ -109,9 +147,25 @@ ipc.on('stopAlerts', () => {
 })
 
 toggleBtn.addEventListener('click', () => {
-  paused ? ipc.send('unpause') : ipc.send('pause')
+  paused ? start() : pause()
 })
-nextBtn.addEventListener('click', () => ipc.send('skip'))
+nextBtn.addEventListener('click', () => skip())
 configureBtn.addEventListener('click', () => ipc.send('configure'))
 
+function skip() {
+  ipc.send('skip')
+}
+
+function reset() {
+  ipc.send('reset')
+}
+
+function pause() {
+  ipc.send('pause')
+}
+
+function start() {
+  ipc.send('unpause')
+}
+
 ipc.send('timerWindowReady')