Add rudimentary debug toolbar

(what am I supposed to put there?)

js/debug_screen.js

@@ -144,4 +144,34 @@ module.exports = function attachDebugScreen (screen) {
     isDrawing = true
     drawLoop()
   }
+
+  // debug toolbar
+  const toolbar = mk('div')
+  toolbar.classList.add('debug-toolbar')
+  let toolbarAttached = false
+
+  const attachToolbar = function () {
+    screen.canvas.parentNode.appendChild(toolbar)
+  }
+  const detachToolbar = function () {
+    toolbar.parentNode.removeChild(toolbar)
+  }
+
+  screen.on('update-window:debug', debug => {
+    if (debug !== toolbarAttached) {
+      toolbarAttached = debug
+      if (debug) attachToolbar()
+      else detachToolbar()
+    }
+  })
+
+  screen.on('draw', () => {
+    if (!toolbarAttached) return
+    let cursorCell = screen.cursor.y * screen.window.width + screen.cursor.x
+    let cellFG = screen.screenFG[cursorCell]
+    let cellBG = screen.screenBG[cursorCell]
+    let cellCode = (screen.screen[cursorCell] || '').codePointAt(0)
+    let cellAttrs = screen.screenAttrs[cursorCell]
+    toolbar.textContent = `Rudimentary debug toolbar. Cursor cell (${cursorCell}): u+${cellCode.toString(16)} FG: ${cellFG} BG: ${cellBG} Attrs: ${cellAttrs.toString(2)}`
+  })
 }

js/term_screen.js

@@ -118,6 +118,7 @@ module.exports = class TermScreen extends EventEmitter {
         target[key] = value
         self.scheduleSizeUpdate()
         self.scheduleDraw(`window:${key}=${value}`)
+        self.emit(`update-window:${key}`, value)
         return true
       }
     })
@@ -1076,6 +1077,8 @@ module.exports = class TermScreen extends EventEmitter {
     if (this.window.graphics >= 1) ctx.restore()
 
     if (this.window.debug && this._debug) this._debug.drawEnd()
+
+    this.emit('draw')
   }
 
   drawStatus (statusScreen) {

sass/pages/_term.scss

@@ -66,6 +66,10 @@ body.term {
 			display: block;
 		}
 	}
+
+	.debug-toolbar {
+		line-height: 1.5;
+	}
 }
 
 #action-buttons {