feat(custom-keymap): Custom Keymap Style (@thewickest)

frontend/src/html/pages/settings.html

@@ -1036,6 +1036,20 @@
         <button data-config-value="split_matrix">split matrix</button>
         <button data-config-value="steno">steno</button>
         <button data-config-value="steno_matrix">steno matrix</button>
+        <button data-config-value="custom">custom</button>
+      </div>
+    </div>
+    <div class="section fullWidth" data-config-name="keymapCustom">
+      <div class="inputs">
+        <div class="textareaAndButton">
+          <textarea
+            class="textarea"
+            placeholder="place here the KLE keymap..."
+          ></textarea>
+          <button class="save no-auto-handle">
+            <i class="fas fa-save fa-fw"></i>
+          </button>
+        </div>
       </div>
     </div>
     <div class="section fullWidth" data-config-name="keymapLegendStyle">

frontend/src/styles/keymap.scss

@@ -544,4 +544,39 @@
       position: relative;
     }
   }
+  &.custom {
+    grid-template-rows: 2rem 2rem 2rem 2rem;
+    .r1,
+    .r2,
+    .r3,
+    .r4,
+    .r5,
+    .r6 {
+      display: grid;
+      justify-content: start;
+      gap: 0;
+    }
+
+    .keyboard-grid {
+      display: grid;
+      grid-template-columns: repeat(var(--columns), var(--colSpan));
+      grid-template-rows: repeat(var(--rows), var(--rowSpan));
+    }
+
+    .keymapKey {
+      width: 100%;
+      height: auto;
+      margin: 0.125rem;
+    }
+
+    .keySpace {
+      font-size: 0.5rem;
+    }
+
+    .keymapSplitSpacer {
+      display: block;
+      width: 2rem;
+      height: 2rem;
+    }
+  }
 }

frontend/src/styles/settings.scss

@@ -106,6 +106,29 @@
       }
     }
 
+    .textareaAndButton {
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: 0.5rem;
+      margin-bottom: 0.5rem;
+
+      span {
+        display: flex;
+        gap: 0.5rem;
+      }
+      .button {
+        height: auto;
+
+        .fas {
+          margin-right: 0rem;
+        }
+      }
+      .textarea {
+        height: 200px;
+        resize: none;
+      }
+    }
+
     .rangeGroup {
       display: grid;
       grid-template-columns: auto 1fr;

frontend/src/ts/commandline/lists/keymap-style.ts

@@ -1,5 +1,8 @@
+import { KeymapCustom } from "@monkeytype/contracts/schemas/configs";
 import * as UpdateConfig from "../../config";
 import { Command, CommandsSubgroup } from "../types";
+import { stringToKeymap } from "../../utils/custom-keymap";
+import * as TestLogic from "../../test/test-logic";
 
 const subgroup: CommandsSubgroup = {
   title: "Keymap style...",
@@ -61,6 +64,37 @@ const subgroup: CommandsSubgroup = {
         UpdateConfig.setKeymapStyle("steno_matrix");
       },
     },
+    {
+      id: "setKeymapStyleCustom",
+      display: "custom...",
+      configValue: "custom",
+      icon: "fa-keyboard",
+      subgroup: {
+        title: "Set custom keymap?",
+        configKey: "keymapCustom",
+        list: [
+          {
+            id: "setKeymapStyleCustomNew",
+            display: "new keymap",
+            input: true,
+            exec: ({ input }) => {
+              if (input === undefined || input === "") return;
+              const keymap: KeymapCustom = stringToKeymap(input);
+              UpdateConfig.setKeymapCustom(keymap);
+              UpdateConfig.setKeymapStyle("custom");
+              TestLogic.restart();
+            },
+          },
+          {
+            id: "setKeymapStyleCustomLoad",
+            display: "load keymap",
+            exec: () => {
+              UpdateConfig.setKeymapStyle("custom");
+            },
+          },
+        ],
+      },
+    },
   ],
 };
 

frontend/src/ts/config.ts

@@ -22,7 +22,11 @@ import {
   typedKeys,
 } from "./utils/misc";
 import * as ConfigSchemas from "@monkeytype/contracts/schemas/configs";
-import { Config, FunboxName } from "@monkeytype/contracts/schemas/configs";
+import {
+  Config,
+  FunboxName,
+  KeymapCustom,
+} from "@monkeytype/contracts/schemas/configs";
 import { Mode, ModeSchema } from "@monkeytype/contracts/schemas/shared";
 import {
   Language,
@@ -1753,15 +1757,26 @@ export function setLayout(
   return true;
 }
 
-// export function setSavedLayout(layout: string, nosave?: boolean): boolean {
-//   if (layout === null || layout === undefined) {
-//     layout = "qwerty";
-//   }
-//   config.savedLayout = layout;
-//   setLayout(layout, nosave);
+export function setKeymapCustom(
+  keymapCustom: KeymapCustom,
+  nosave?: boolean
+): boolean {
+  if (
+    !isConfigValueValid(
+      "keymap custom",
+      keymapCustom,
+      ConfigSchemas.KeymapCustomSchema
+    )
+  )
+    return false;
+
+  //better validation for the custom keymap
+  config.keymapCustom = keymapCustom;
+  saveToLocalStorage("keymapCustom", nosave);
+  ConfigEvent.dispatch("keymapCustom", config.keymapCustom, nosave);
 
-//   return true;
-// }
+  return true;
+}
 
 export function setFontSize(
   fontSize: ConfigSchemas.FontSize,
@@ -2049,6 +2064,7 @@ export async function apply(
     setKeymapLayout(configObj.keymapLayout, true);
     setKeymapShowTopRow(configObj.keymapShowTopRow, true);
     setKeymapSize(configObj.keymapSize, true);
+    setKeymapCustom(configObj.keymapCustom, true);
     setFontFamily(configObj.fontFamily, true);
     setSmoothCaret(configObj.smoothCaret, true);
     setCodeUnindentOnBackspace(configObj.codeUnindentOnBackspace, true);

frontend/src/ts/constants/data-keys.ts

@@ -0,0 +1,48 @@
+export const dataKeys: { [key: string]: string } = {
+  a: "aA",
+  b: "bB",
+  c: "cC",
+  d: "dD",
+  e: "eE",
+  f: "fF",
+  g: "gG",
+  h: "hH",
+  i: "iI",
+  j: "jJ",
+  k: "kK",
+  l: "lL",
+  m: "mM",
+  n: "nN",
+  o: "oO",
+  p: "pP",
+  q: "qQ",
+  r: "rR",
+  s: "sS",
+  t: "tT",
+  u: "uU",
+  v: "vV",
+  w: "wW",
+  x: "xX",
+  y: "yY",
+  z: "zZ",
+  1: "1!",
+  2: "2@",
+  3: "3#",
+  4: "4$",
+  5: "5%",
+  6: "6^",
+  7: "7&",
+  8: "8*",
+  9: "9(",
+  0: "0)",
+  "-": "-_",
+  "=": "=+",
+  "[": "[{",
+  "]": "]}",
+  "\\": "\\|",
+  ";": ";:",
+  "'": "'"",
+  ",": ",<",
+  ".": ".>",
+  "/": "/?",
+};

frontend/src/ts/constants/default-config.ts

@@ -62,6 +62,7 @@ const obj = {
   keymapLayout: "overrideSync",
   keymapShowTopRow: "layout",
   keymapSize: 1,
+  keymapCustom: [[]],
   fontFamily: "Roboto_Mono",
   smoothLineScroll: false,
   alwaysShowDecimalPlaces: false,

frontend/src/ts/elements/keymap.ts

@@ -14,6 +14,12 @@ import * as ShiftTracker from "../test/shift-tracker";
 import * as AltTracker from "../test/alt-tracker";
 import * as KeyConverter from "../utils/key-converter";
 import { getActiveFunboxNames } from "../test/funbox/list";
+import { getCustomKeymapSyle } from "../utils/custom-keymap";
+import {
+  KeymapCustom,
+  KeymapLayout,
+  KeymapLegendStyle,
+} from "@monkeytype/contracts/schemas/configs";
 
 const stenoKeys: JSONData.Layout = {
   keymapShowTopRow: true,
@@ -416,6 +422,22 @@ export async function refresh(
       });
     }
 
+    if (Config.keymapStyle === "custom") {
+      const {
+        keymapCustom,
+        keymapLayout,
+        keymapLegendStyle,
+      }: {
+        keymapCustom: KeymapCustom;
+        keymapLayout: KeymapLayout;
+        keymapLegendStyle: KeymapLegendStyle;
+      } = Config;
+      keymapElement = getCustomKeymapSyle(
+        keymapCustom,
+        keymapLayout,
+        keymapLegendStyle
+      );
+    }
     $("#keymap").html(keymapElement);
 
     $("#keymap").removeClass("staggered");
@@ -425,6 +447,7 @@ export async function refresh(
     $("#keymap").removeClass("alice");
     $("#keymap").removeClass("steno");
     $("#keymap").removeClass("steno_matrix");
+    $("#keymap").removeClass("custom");
     $("#keymap").addClass(Config.keymapStyle);
   } catch (e) {
     if (e instanceof Error) {