feat: #fe restyle keyboard

frontend/src/css/keyboard.scss

-$kbd-gutter: 3px;
-$key-width: 8vw;
+$kbd-gutter: 0.5vw;
+$key-width: 8vw; // 100/12 ~ 8.3
 
 .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;
+  /* keyboard placement */
 
-  // background-color: #ececec;
-  background-color: #aaaa;
-  // padding: 5px;
-  padding: $kbd-gutter;
-  // border-radius: 5px;
+  position: absolute;
+  bottom: 0;
 
-  font-weight: bold;
-  // font-size: 20px;
+  /* keyboard sizing */
 
-  .hg-button span {
-    pointer-events: none;
-  }
+  box-sizing: border-box;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  max-height: 30vh;
 
-  button.hg-button {
-    border-width: 0;
-    outline: 0;
-    font-size: inherit;
-  }
+  /* rows layout */
 
-  .hg-button {
-    display: inline-block;
-    flex-grow: 1;
-    cursor: pointer;
+  .hg-rows {
+    height: 100%;
+    display: grid;
+    grid-auto-rows: 1fr;
+    // grid-row-gap: $kbd-gutter;
   }
 
-  .hg-row {
-    display: flex;
+  /* keys layout */
 
-    &:not(:last-child) {
-      // margin-bottom: 5px;
-      margin-bottom: $kbd-gutter;
+  .hg-row {
+    display: grid;
+    grid-auto-flow: column;
+    // grid-column-gap: $kbd-gutter;
+    &:nth-child(1) {
+      grid-auto-columns: 8vw 8vw 8vw 8vw 8vw 8vw 8vw 8vw 8vw 8vw 8vw 1fr;
     }
-
-    .hg-button:not(:last-child) {
-      // margin-right: 5px;
-      margin-right: $kbd-gutter;
+    &:nth-child(2) {
+      padding-left: 0.5 * $key-width;
+      grid-auto-columns: 8vw 8vw 8vw 8vw 8vw 8vw 8vw 8vw 8vw 8vw 8vw;
     }
-
-    .hg-button-container {
-      // margin-right: 5px;
-      margin-right: $kbd-gutter;
-      display: flex;
+    &:nth-child(3) {
+      grid-auto-columns: 1fr 8vw 8vw 8vw 8vw 8vw 8vw 8vw 8vw 1fr;
     }
+  }
 
-    > div:last-child {
-      margin-right: 0;
-    }
+  /* gutters */
 
-    &:nth-child(2) {
-      margin-left: 0.5 * $key-width;
-    }
+  padding: 0.5 * $kbd-gutter;
+  .hg-button {
+    margin: 0.5 * $kbd-gutter;
   }
 
+  /* keycaps */
+
   .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;
+    font-family: "Courier New", Courier, monospace;
+    color: white;
+    font-weight: bold;
+    text-shadow: 0 0 8px black;
+    font-size: max(4vw, 20px);
+
+    border-radius: 0.125 * $key-width;
+    background: #fff4;
+
     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
-    }
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
     &.hg-activeButton {
-      background: #ff0;
+      background: lightyellow;
+      &[data-skbtn="{backspace}"] {
+        background-color: lightcoral;
+      }
+      &[data-skbtn="{space}"] {
+        background-color: lightblue;
+      }
+      &[data-skbtn="{enter}"] {
+        background-color: lightgreen;
+      }
     }
   }
 
-  // .hg-button {
-  //   &.hg-functionBtn {
-  //     &[data-skbtn="{bksp}"] {
-  //       background-color: lightcoral;
-  //     }
-  //     &[data-skbtn="{space}"] {
-  //       background-color: lightblue;
-  //     }
-  //     &[data-skbtn="{enter}"] {
-  //       background-color: lightgreen;
-  //     }
-  //   }
-  // }
-}
+  /* interaction */
 
-.simple-keyboard {
-  position: absolute;
-  bottom: 0;
+  user-select: none;
+  touch-action: manipulation;
+
+  .hg-button {
+    cursor: pointer;
+    span {
+      pointer-events: none;
+    }
+  }
 }

frontend/src/js/typewriter.ts

@@ -78,8 +78,8 @@ class Typewriter {
       },
       display: {
         [Key.Backspace]: "⟵", // "⌫⟵",
-        [Key.Enter]: "↵", // "⏎↩↵⏎",
-        [Key.Space]: "␣", // "␣",
+        [Key.Enter]: "↩", // "⏎↩↵⏎",
+        [Key.Space]: " ", // "␣",
       },
       onChange: this.keyboardOnChangeHandler.bind(this),
     } as KeyboardOptions);