Merge pull request #96 from cauli/feature/keyboard-input

Add keyboard event listeners

desktop/sources/scripts/ronin.js

@@ -88,6 +88,24 @@ function Ronin () {
     this.surface.drawGuide(shape)
   }
 
+  this.onKeyPress = (e, id = 'key-press') => {
+    if (this.bindings[id]) {
+      this.bindings[id](e)
+    }
+  }
+
+  this.onKeyUp = (e, id = 'key-up') => {
+    if (this.bindings[id]) {
+      this.bindings[id](e)
+    }
+  }
+
+  this.onKeyDown = (e, id = 'key-down') => {
+    if (this.bindings[id]) {
+      this.bindings[id](e)
+    }
+  }
+
   this.onMouseMove = (e, id = 'mouse-move') => {
     const pos = { x: e.offsetX * ronin.surface.ratio, y: e.offsetY * ronin.surface.ratio }
     const shape = this.mouseShape(pos, id)

desktop/sources/scripts/surface.js

@@ -3,6 +3,7 @@ function Surface (ronin) {
   this.el.id = 'surface'
   this._guide = document.createElement('canvas')
   this._guide.id = 'guide'
+  this._guide.setAttribute('tabindex', '1'); // focus is necessary to capture keyboard events
   this.ratio = window.devicePixelRatio
   // Contexts
   this.context = this.el.getContext('2d')
@@ -17,6 +18,9 @@ function Surface (ronin) {
     this._guide.addEventListener('mouseup', ronin.onMouseUp, false)
     this._guide.addEventListener('mouseover', ronin.onMouseOver, false)
     this._guide.addEventListener('mouseout', ronin.onMouseOut, false)
+    this._guide.addEventListener('keydown', ronin.onKeyDown, false)
+    this._guide.addEventListener('keyup', ronin.onKeyUp, false)
+    this._guide.addEventListener('keypress', ronin.onKeyPress, false)
   }
 
   this.start = function () {