Add initial touch bar docs

docs/api/touch-bar.md

@@ -6,39 +6,114 @@ Process: [Main](../tutorial/quick-start.md#main-process)
 
 ### `new TouchBar(items)`
 
-* `items` (TouchBarButton | TouchBarColorPicker | TouchBarGroup | TouchBarLabel | TouchBarPopOver | TouchBarSlider)[]
+* `items` (TouchBarButton | TouchBarColorPicker | TouchBarGroup | TouchBarLabel | TouchBarPopOver | TouchBarSlider | TouchBarSpacer)[]
 
-Creates a new touch bar.  Note any changes to the TouchBar instance
-will not affect the rendered TouchBar.  To affect the rendered
-TouchBar you **must** use either methods on the TouchBar or methods
-on the TouchBar* items
-
-### Instance Methods
-
-The `menu` object has the following instance methods:
-
-#### `touchBar.destroy()`
-
-Immediately destroys the TouchBar instance and will reset the rendered
-touch bar.
+Creates a new touch bar with the specified items. Use
+`BrowserWindow.setTouchBar` to add the `TouchBar` to a window.
 
 ## Examples
 
-The `TouchBar` class is only available in the main process, it is not currently possible to use in the renderer process **even** through the remote module.
+The `TouchBar` class is only available in the main process, it is not currently
+possible to use in the renderer process **even** through the remote module.
 
-### Main process
-
-An example of creating a touch bar in the main process:
+Below is an example of a simple slot machine touch bar game with a button
+and some labels.
 
 ```javascript
-const {TouchBar, TouchBarButton} = require('electron')
+const {app, BrowserWindow, TouchBar} = require('electron')
+
+const {TouchBarLabel, TouchBarButton, TouchBarSpacer} = TouchBar
+
+let spinning = false
+
+// Reel labels
+const reel1 = new TouchBarLabel()
+const reel2 = new TouchBarLabel()
+const reel3 = new TouchBarLabel()
+
+// Spin result label
+const result = new TouchBarLabel()
+
+// Spin button
+const spin = new TouchBarButton({
+  label: '🎰 Spin',
+  backgroundColor: '#7851A9',
+  click: () => {
+    // Ignore clicks if already spinning
+    if (spinning) {
+      return
+    }
+
+    spinning = true
+    result.label = ''
+
+    let timeout = 10
+    const spinLength = 4 * 1000 // 4 seconds
+    const startTime = Date.now()
+
+    const spinReels = () => {
+      updateReels()
+
+      if ((Date.now() - startTime) >= spinLength) {
+        finishSpin()
+      } else {
+        // Slow down a bit on each spin
+        timeout *= 1.1
+        setTimeout(spinReels, timeout)
+      }
+    }
+
+    spinReels()
+  }
+})
+
+const getRandomValue = () => {
+  const values = ['🍒', '💎', '7️⃣', '🍊', '🔔', '⭐', '🍇']
+  return values[Math.floor(Math.random() * values.length)]
+}
+
+const updateReels = () => {
+  reel1.label = getRandomValue()
+  reel2.label = getRandomValue()
+  reel3.label = getRandomValue()
+}
+
+const finishSpin = () => {
+  const uniqueValues = new Set([reel1.label, reel2.label, reel3.label]).size
+  if (uniqueValues === 1) {
+    // All 3 values are the same
+    result.label = '💰 Jackpot!'
+  } else if (uniqueValues === 2) {
+    // 2 values are the same
+    result.label = '😍 Winner!'
+  } else {
+    // No values are the same
+    result.label = '🙁 Spin Again'
+  }
+  spinning = false
+}
 
 const touchBar = new TouchBar([
-  new TouchBarButton({
-    label: 'Example Button',
-    click: () => console.log('I was clicked')
-  })
+  spin,
+  new TouchBarSpacer({size: 'large'}),
+  reel1,
+  reel2,
+  reel3,
+  new TouchBarSpacer({size: 'large'}),
+  result
 ])
 
-mainWindow.setTouchBar(touchBar)
+let window
+
+app.once('ready', () => {
+  window = new BrowserWindow({
+    frame: false,
+    titleBarStyle: 'hidden-inset',
+    width: 200,
+    height: 200,
+    backgroundColor: '#000'
+  })
+  window.loadURL('about:blank')
+  window.setTouchBar(touchBar)
+})
 ```