Add capability to color buttons

js/term/buttons.js

@@ -1,11 +1,18 @@
+const { getColor } = require('./themes')
 const { qs } = require('../utils')
 
 module.exports = function initButtons (input) {
   let container = qs('#action-buttons')
 
+  // current color palette
+  let palette = []
+
   // button labels
   let labels = []
 
+  // button colors
+  let colors = {}
+
   // button elements
   let buttons = []
 
@@ -54,9 +61,15 @@ module.exports = function initButtons (input) {
     for (let i = 0; i < labels.length; i++) {
       let label = labels[i].trim()
       let button = buttons[i]
+      let color = colors[i]
+
       button.textContent = label || '\u00a0' // label or nbsp
+
       if (!label) button.classList.add('inactive')
       else button.classList.remove('inactive')
+
+      if (Number.isFinite(color)) button.style.background = getColor(color, palette)
+      else button.style.background = null
     }
   }
 
@@ -68,6 +81,20 @@ module.exports = function initButtons (input) {
     set labels (value) {
       labels = value
       update()
+    },
+    get colors () {
+      return colors
+    },
+    set colors (value) {
+      colors = value
+      update()
+    },
+    get palette () {
+      return palette
+    },
+    set palette (value) {
+      palette = value
+      update()
     }
   }
 }

js/term/index.js

@@ -50,6 +50,11 @@ module.exports = function (opts) {
   // buttons
   const buttons = initButtons(input)
   screen.on('button-labels', labels => { buttons.labels = labels })
+  // TODO: don't access the renderer here
+  buttons.palette = screen.layout.renderer.palette
+  screen.layout.renderer.on('palette-update', palette => {
+    buttons.palette = palette
+  })
 
   screen.on('full-load', () => {
     let scr = qs('#screen')
@@ -235,6 +240,7 @@ module.exports = function (opts) {
 
   // for debugging
   window.termScreen = screen
+  window.buttons = buttons
   window.conn = conn
   window.input = input
   window.termUpl = termUpload

js/term/screen_renderer.js

@@ -111,6 +111,7 @@ module.exports = class CanvasRenderer extends EventEmitter {
     if (this._palette !== palette) {
       this._palette = palette
       this.resetDrawn()
+      this.emit('palette-update', palette)
       this.scheduleDraw('palette')
     }
   }