feat: #fe whip up minimal working keyboard

frontend/package-lock.json

@@ -12,7 +12,8 @@
         "axios": "^0.26.0",
         "damerau-levenshtein": "^1.0.8",
         "newton-raphson-method": "^1.0.2",
-        "phaser": "^3.55.2"
+        "phaser": "^3.55.2",
+        "simple-keyboard": "^3.4.68"
       },
       "devDependencies": {
         "@types/jest": "^27.0.3",
@@ -27,6 +28,7 @@
         "parcel-bundler": "^1.12.4",
         "parcel-plugin-static-files-copy": "^2.6.0",
         "prettier": "^2.5.1",
+        "sass": "^1.49.9",
         "ts-jest": "^27.0.7",
         "ts-node": "^10.5.0",
         "typescript": "^4.5.2"
@@ -7246,6 +7248,12 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immutable": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0.tgz",
+      "integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==",
+      "dev": true
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -12391,6 +12399,95 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "node_modules/sass": {
+      "version": "1.49.9",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.49.9.tgz",
+      "integrity": "sha512-YlYWkkHP9fbwaFRZQRXgDi3mXZShslVmmo+FVK3kHLUELHHEYrCmL1x6IUjC7wLS6VuJSAFXRQS/DxdsC4xL1A==",
+      "dev": true,
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/sass/node_modules/binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/sass/node_modules/chokidar": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://paulmillr.com/funding/"
+        }
+      ],
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/sass/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/sass/node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/sass/node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
     "node_modules/sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
@@ -12595,6 +12692,11 @@
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
       "dev": true
     },
+    "node_modules/simple-keyboard": {
+      "version": "3.4.68",
+      "resolved": "https://registry.npmjs.org/simple-keyboard/-/simple-keyboard-3.4.68.tgz",
+      "integrity": "sha512-k/8Q2ya0cjgsh89LKmitoLZ5OuKxLcOM+KBypY50POPZr5ZwY0FO/zgSo4e0FwW+nKbkycccKwuU4TiY6DlIiA=="
+    },
     "node_modules/simple-swizzle": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
@@ -12774,6 +12876,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-resolve": {
       "version": "0.5.3",
       "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.3.tgz",
@@ -20436,6 +20547,12 @@
       "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
       "dev": true
     },
+    "immutable": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0.tgz",
+      "integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==",
+      "dev": true
+    },
     "import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -24525,6 +24642,68 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "sass": {
+      "version": "1.49.9",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.49.9.tgz",
+      "integrity": "sha512-YlYWkkHP9fbwaFRZQRXgDi3mXZShslVmmo+FVK3kHLUELHHEYrCmL1x6IUjC7wLS6VuJSAFXRQS/DxdsC4xL1A==",
+      "dev": true,
+      "requires": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "dependencies": {
+        "binary-extensions": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+          "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+          "dev": true
+        },
+        "chokidar": {
+          "version": "3.5.3",
+          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+          "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+          "dev": true,
+          "requires": {
+            "anymatch": "~3.1.2",
+            "braces": "~3.0.2",
+            "fsevents": "~2.3.2",
+            "glob-parent": "~5.1.2",
+            "is-binary-path": "~2.1.0",
+            "is-glob": "~4.0.1",
+            "normalize-path": "~3.0.0",
+            "readdirp": "~3.6.0"
+          }
+        },
+        "glob-parent": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+          "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+          "dev": true,
+          "requires": {
+            "is-glob": "^4.0.1"
+          }
+        },
+        "is-binary-path": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+          "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+          "dev": true,
+          "requires": {
+            "binary-extensions": "^2.0.0"
+          }
+        },
+        "readdirp": {
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+          "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+          "dev": true,
+          "requires": {
+            "picomatch": "^2.2.1"
+          }
+        }
+      }
+    },
     "sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
@@ -24699,6 +24878,11 @@
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
       "dev": true
     },
+    "simple-keyboard": {
+      "version": "3.4.68",
+      "resolved": "https://registry.npmjs.org/simple-keyboard/-/simple-keyboard-3.4.68.tgz",
+      "integrity": "sha512-k/8Q2ya0cjgsh89LKmitoLZ5OuKxLcOM+KBypY50POPZr5ZwY0FO/zgSo4e0FwW+nKbkycccKwuU4TiY6DlIiA=="
+    },
     "simple-swizzle": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
@@ -24850,6 +25034,12 @@
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
       "dev": true
     },
+    "source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "dev": true
+    },
     "source-map-resolve": {
       "version": "0.5.3",
       "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.3.tgz",

frontend/package.json

@@ -20,7 +20,8 @@
     "axios": "^0.26.0",
     "damerau-levenshtein": "^1.0.8",
     "newton-raphson-method": "^1.0.2",
-    "phaser": "^3.55.2"
+    "phaser": "^3.55.2",
+    "simple-keyboard": "^3.4.68"
   },
   "devDependencies": {
     "@types/jest": "^27.0.3",
@@ -35,6 +36,7 @@
     "parcel-bundler": "^1.12.4",
     "parcel-plugin-static-files-copy": "^2.6.0",
     "prettier": "^2.5.1",
+    "sass": "^1.49.9",
     "ts-jest": "^27.0.7",
     "ts-node": "^10.5.0",
     "typescript": "^4.5.2"

frontend/src/css/keyboard.scss

+$kbd-gutter: 3px;
+$key-width: 8vw;
+
+.hg-theme-default {
+  width: 100%;
+  user-select: none;
+  box-sizing: border-box;
+  overflow: hidden;
+  touch-action: manipulation;
+  // font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+  font-family: "Courier New", Courier, monospace;
+
+  // background-color: #ececec;
+  background-color: #aaaa;
+  // padding: 5px;
+  padding: $kbd-gutter;
+  // border-radius: 5px;
+
+  font-weight: bold;
+  // font-size: 20px;
+
+  .hg-button span {
+    pointer-events: none;
+  }
+
+  button.hg-button {
+    border-width: 0;
+    outline: 0;
+    font-size: inherit;
+  }
+
+  .hg-button {
+    display: inline-block;
+    flex-grow: 1;
+    cursor: pointer;
+  }
+
+  .hg-row {
+    display: flex;
+
+    &:not(:last-child) {
+      // margin-bottom: 5px;
+      margin-bottom: $kbd-gutter;
+    }
+
+    .hg-button:not(:last-child) {
+      // margin-right: 5px;
+      margin-right: $kbd-gutter;
+    }
+
+    .hg-button-container {
+      // margin-right: 5px;
+      margin-right: $kbd-gutter;
+      display: flex;
+    }
+
+    > div:last-child {
+      margin-right: 0;
+    }
+
+    &:nth-child(2) {
+      margin-left: 0.5 * $key-width;
+    }
+  }
+
+  .hg-button {
+    // box-shadow: 0px 0px 3px -1px rgba(0, 0, 0, 0.3);
+    height: 40px;
+    border-radius: 5px;
+    box-sizing: border-box;
+    // padding: 5px;
+    background: white;
+    // border-bottom: 1px solid #b5b5b5;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+    &.hg-standardBtn {
+      // width: 20px;
+      // width: $key-width;
+      max-width: 8vw; // 100/12 ~ 8.3
+    }
+
+    &.hg-activeButton {
+      background: #ff0;
+    }
+  }
+
+  // .hg-button {
+  //   &.hg-functionBtn {
+  //     &[data-skbtn="{bksp}"] {
+  //       background-color: lightcoral;
+  //     }
+  //     &[data-skbtn="{space}"] {
+  //       background-color: lightblue;
+  //     }
+  //     &[data-skbtn="{enter}"] {
+  //       background-color: lightgreen;
+  //     }
+  //   }
+  // }
+}
+
+.simple-keyboard {
+  position: absolute;
+  bottom: 0;
+}

frontend/src/css/main.css → frontend/src/css/main.scss

@@ -5,3 +5,5 @@ body {
   height: 100vh;
   margin: 0;
 }
+
+@import url("./keyboard.scss");

frontend/src/index.html

@@ -4,12 +4,13 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link href="css/main.css" rel="stylesheet">
+  <link href="css/main.scss" rel="stylesheet">
   <script src="js/main.ts" charset="utf-8"></script>
   <title>Ötzi App</title>
 </head>
 
 <body>
+  <div class="simple-keyboard"></div>
 </body>
 
 </html>

frontend/src/js/main.ts

@@ -22,3 +22,27 @@ const config = {
 };
 
 new Phaser.Game(config);
+
+import Keyboard from "simple-keyboard";
+
+document.addEventListener("DOMContentLoaded", () => {
+  new Keyboard({
+    theme: "hg-theme-default hg-theme-oetzi",
+    physicalKeyboardHighlight: true,
+    debug: true,
+    layout: {
+      default: [
+        "q w e r t z u i o p \u00FC {bksp}",
+        "a s d f g h j k l \u00F6 \u00E4",
+        "{space} y x c v b n m \u00DF {enter}",
+      ],
+    },
+    display: {
+      "{bksp}": "⟵", // "⌫⟵",
+      "{enter}": "↵", // "⏎↩↵⏎",
+      "{space}": "␣", // "␣",
+    },
+    // onChange: console.log,
+    // onKeyPress: console.log,
+  });
+});