Add keyboard bindings

* Removed NSEW buttons
* Added keymaps

src/Server/WebRoot/index.html

@@ -10,10 +10,12 @@
         <div id="app">
             <div id="game"></div>
             <div>
-                <button id="north" v-on:click="sendCommand('North')">North</button>
+                <select v-model="keymap">
-                <button id="south" v-on:click="sendCommand('South')">South</button>
+                    <option value="dvorak" selected>dvorak</option>
-                <button id="east" v-on:click="sendCommand('East')">East</button>
+                    <option value="qwerty">qwerty</option>
-                <button id="west" v-on:click="sendCommand('West')">West</button>
+                    <option value="g4m3r">g4m3r</option>
+                    <option value="n00b">n00b</option>
+                </select>
             </div>
         </div>
     </body>

src/Server/WebRoot/main.js

@@ -1,9 +1,37 @@
+let keymaps = {
+    "dvorak": {
+        "t": "North",
+        "h": "South",
+        "n": "East",
+        "d": "West"
+    },
+    "qwerty": {
+        "k": "North",
+        "j": "South",
+        "l": "East",
+        "h": "West"
+    },
+    "g4m3r": {
+        "w": "North",
+        "s": "South",
+        "d": "East",
+        "a": "West"
+    },
+    "n00b": {
+        "ArrowUp": "North",
+        "ArrowDown": "South",
+        "ArrowRight": "East",
+        "ArrowLeft": "West"
+    }
+};
+
 let app = new Vue({
     el: "#app",
     data: {
         display: null,
         state: {board: ""},
-        err: ""
+        err: "",
+        keymap: "dvorak"
     },
     mounted() {
         let options = {
@@ -11,9 +39,14 @@ let app = new Vue({
         };
         this.display = new ROT.Display(options);
         document.getElementById("game").replaceWith(this.display.getContainer());
+        document.addEventListener("keydown", this.keyPress);
         this.getData();
     },
     methods: {
+        keyPress: function (e) {
+            let direction = keymaps[this.keymap][e.key];
+            this.sendCommand(direction);
+        },
         draw: function (board) {
             console.log("drawing board:\n", this.board);
             this.display.drawText(0, 0, this.state.board);