Merge pull request #8 from juxd/focusable-canvas

steal input only on canvas focus

client/InputSystem.js

@@ -34,9 +34,11 @@ class InputSystem {
         }
 
         // disable right click
-        document.addEventListener('contextmenu', event => event.preventDefault())
+        this.listen('contextmenu', event => {
+            event.preventDefault()
+        });
 
-        document.addEventListener('keydown', event => {
+        this.listen('keydown', event => {
             // console.log('keydown', event)
             // w or up arrow
             if (event.keyCode === 87 || event.keyCode === 38) {
@@ -85,7 +87,7 @@ class InputSystem {
             }
         })
 
-        document.addEventListener('keyup', event => {
+        this.listen('keyup', event => {
             // console.log('keyup', event)
             if (event.keyCode === 87 || event.keyCode === 38) {
                 this.currentState.w = false
@@ -116,24 +118,35 @@ class InputSystem {
             }
         })
 
-        document.addEventListener('mousemove', event => {
+        this.listen('mousemove', event => {
             this.currentState.mx = event.clientX
             this.currentState.my = event.clientY
             if (this.onmousemove) {
                 this.onmousemove(event)
             }
         })
 
-        document.addEventListener('pointerdown', event => {
+        this.listen('pointerdown', event => {
             this.currentState.mouseDown = true
             this.frameState.mouseDown = true
         })
 
-        document.addEventListener('mouseup', event => {
+        this.listen('mouseup', event => {
             this.currentState.mouseDown = false
         })
     }
 
+    listen(event, callback) {
+        document.addEventListener(event, (event) => {
+            const id = event.target.getAttribute('id');
+            if (id !== "main-canvas") {
+                return event;
+            }
+
+            callback(event);
+        })
+    }
+
     releaseKeys() {
         this.frameState.w = this.currentState.w
         this.frameState.a = this.currentState.a

client/runClient.js

@@ -39,9 +39,10 @@ class UI {
         instantiateClient(secretKey)
             .then(client => {
                 console.log("success");
-                const canvas = '<canvas id=\'main-canvas\' style="height: 100%; width: 100%"></canvas>'
+                const canvas = '<canvas id=\'main-canvas\' style="height: 100%; width: 100%" tabindex="1"></canvas>'
                 this.container.innerText = ''
                 this.container.insertAdjacentHTML('beforeend', canvas)
+                document.getElementById('main-canvas').focus();
                 const gameClient = new GameClient(client)
                 let tick = 0
                 let previous = performance.now()