Keyboard bindings

src/components/Keyboard.vue

@@ -46,10 +46,6 @@ export default {
     },
   },
   data: () => ({
-    keysSwitch: {
-      a: "ǻ",
-      A: "Ǡ",
-    },
     optionsModal: false,
     // Select the keyboard at index 0 in the keyboard list by default
     selectedKeyboard: 0,
@@ -83,9 +79,12 @@ export default {
         start + key.character.length;
     },
     keyInput(e) {
-      const character = this.keysSwitch[e.key];
-      if (!character) return;
-      this.addChar({ character });
+      if (!this.keyboard) return;
+      const key = this.keyboard.characters.find(
+        (c) => c.keyboard_code == e.key.charCodeAt()
+      );
+      if (!key) return;
+      this.addChar({ character: key.character });
       e.preventDefault();
     },
     looseFocus() {

src/components/KeyboardConfiguration.vue

@@ -15,15 +15,23 @@
           Row {{ selectedKey.row + 1 }} - Column {{ selectedKey.column + 1 }}
         </p>
         <template v-if="selectedChar">
-          <p class="large-text">{{ selectedChar.code | displayUTF8 }}</p>
+          <p class="large-character">{{ selectedChar.code | displayUTF8 }}</p>
           <p>{{ selectedChar.name }}</p>
           <button type="button" v-on:click="replace">Replace</button>
         </template>
         <template v-else>
-          <p v-if="selectedKey && selectedKey.character" class="large-text">
-            {{ selectedKey.character }}
-          </p>
-          <p v-else>empty</p>
+          <template v-if="selectedKey.character">
+            <p class="large-character">{{ selectedKey.character }}</p>
+            <span>Key binding</span>
+            <input
+              v-model="keyBinding"
+              type="text"
+              maxlength="1"
+              placeholder="Type a character…"
+            />
+            <button v-on:click="updateKeyBinding">save</button>
+          </template>
+          <p v-else class="large-character">&nbsp;</p>
         </template>
         <p>
           UTF8 Picker
@@ -60,6 +68,7 @@ export default {
     picker: false,
     selectedKey: null,
     selectedChar: null,
+    keyBinding: null,
   }),
   filters: {
     displayUTF8,
@@ -69,15 +78,30 @@ export default {
     replace() {
       if (!this.selectedKey || !this.selectedChar) return;
       // Update the keyboard
-      this.selectedKey = this.updateKey({
-        ...this.selectedKey,
+      this.updateKey({
         index: this.keyboardIndex,
-        code: this.selectedChar.code,
+        ...this.selectedKey,
+        character: displayUTF8(this.selectedChar.code),
       });
       this.selectedChar = null;
       this.selectedKey = null;
       this.picker = false;
     },
+    updateKeyBinding() {
+      this.updateKey({
+        index: this.keyboardIndex,
+        ...this.selectedKey,
+        keyboard_code: this.keyBinding ? this.keyBinding.charCodeAt() : null,
+      });
+    },
+  },
+  watch: {
+    selectedKey(key) {
+      if (!key) return;
+      this.keyBinding = key.keyboard_code
+        ? String.fromCharCode(key.keyboard_code)
+        : null;
+    },
   },
 };
 </script>
@@ -90,7 +114,10 @@ export default {
   width: 15rem;
   margin-left: 2rem;
 }
-.large-text {
+.large-character {
+  width: 5rem;
   font-size: 5rem;
+  margin: 1rem;
+  border: 1px solid black;
 }
 </style>

src/config.js

@@ -19,19 +19,19 @@ export const DEFAULT_KEYBOARDS = [
         row: 0,
         column: 0,
         character: "ᗅ",
-        keyboard_code: 97,
+        keyboard_code: 65,
       },
       {
         row: 0,
         column: 2,
         character: "ᑕ",
-        keyboard_code: 98,
+        keyboard_code: 67,
       },
       {
         row: 0,
         column: 3,
         character: "ᗞ",
-        keyboard_code: null,
+        keyboard_code: 68,
       },
       {
         row: 1,

src/store/index.js

@@ -6,7 +6,6 @@ import {
   DEFAULT_KEYBOARDS,
   UTF8_ASSETS_URL,
 } from "../config";
-import { displayUTF8 } from "../helpers.js";
 
 Vue.use(Vuex);
 
@@ -48,19 +47,13 @@ export default new Vuex.Store({
       if (!state.keyboards[index]) return;
       state.keyboards[index].name = name;
     },
-    updateKey(state, { index, row, column, code }) {
-      // Copy the keyboard if the index is correct to avoid modifying it directly in the state 
+    updateKey(state, { index, ...newKey }) {
+      // Copy the keyboard if the index is correct to avoid modifying it directly in the state
       const keyboard = state.keyboards[index] && { ...state.keyboards[index] };
       if (!keyboard) return;
       // Find the key and replace it
-      const newKey = {
-        character: displayUTF8(code),
-        row,
-        column,
-        keyboard_code: null,
-      };
       const keyPos = keyboard.characters.findIndex(
-        (k) => k.row === row && k.column === column
+        (k) => k.row === newKey.row && k.column === newKey.column
       );
       if (keyPos > 0) keyboard.characters[keyPos] = newKey;
       else keyboard.characters.push(newKey);