☰

Keymap Overlay For Monkeytype

Modify keymap layout by replacing keys, works with keymap next

  1. // ==UserScript==
  2. // @name         Keymap Overlay For Monkeytype
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.2
  5. // @description  Modify keymap layout by replacing keys, works with keymap next
  6. // @author       Pira
  7. // @match        https://monkeytype.com/
  8. // @grant        none
  9. // @license MIT
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     const keyMapping = {
  16.         q: "q",
  17.         w: "w",
  18.         e: "e",
  19.         r: "r",
  20.         t: "t",
  21.         y: "y",
  22.         u: "u",
  23.         i: "i",
  24.         o: "o",
  25.         p: "p",
  26.         "[": "[",
  27.         "]": "]",
  28.         a: "a",
  29.         s: "s",
  30.         d: "d",
  31.         f: "f",
  32.         g: "g",
  33.         h: "h",
  34.         j: "j",
  35.         k: "k",
  36.         l: "l",
  37.         ";": ";",
  38.         "'": "'",
  39.         z: "z",
  40.         x: "x",
  41.         c: "c",
  42.         v: "v",
  43.         b: "b",
  44.         n: "n",
  45.         m: "m",
  46.         ',': ",",
  47.         '.': ".",
  48.         '/': "/"
  49.     };
  50.  
  51.     async function modifyKeymap() {
  52.   const keys = document.querySelectorAll('.keymapKey');
  53.   const updatedMapping = {};
  54.  
  55.   keys.forEach(function(key) {
  56.     const letter = key.querySelector('.letter');
  57.     const currentKey = letter.textContent.toLowerCase();
  58.     const newKey = keyMapping[currentKey];
  59.  
  60.       if (currentKey === ',<' && keyMapping[currentKey]) {
  61.                 letter.textContent = keyMapping[currentKey];}
  62.     if (newKey) {
  63.       const tempValue = letter.textContent;
  64.       letter.textContent = newKey;
  65.       key.setAttribute('data-key', newKey.toLowerCase() + newKey.toUpperCase());
  66.       updatedMapping[newKey.toLowerCase()] = currentKey;
  67.     } else {
  68.       updatedMapping[currentKey] = currentKey;
  69.     }
  70.   });
  71.  
  72.   Object.assign(keyMapping, updatedMapping);
  73. }
  74.  
  75.  
  76.     function updateActiveKey() {
  77.         const activeKeyElement = document.querySelector('.activeKey');
  78.         const activeKey = activeKeyElement.textContent.toLowerCase();
  79.         const mappedKey = keyMapping[activeKey];
  80.  
  81.         if (mappedKey) {
  82.             activeKeyElement.textContent = mappedKey.toUpperCase();
  83.         }
  84.     }
  85.  
  86.     // Right-click event listener
  87.     window.addEventListener("contextmenu", async function(event) {
  88.         event.preventDefault();
  89.  
  90.         // Modify the keymap
  91.         await modifyKeymap();
  92.  
  93.         // Update the active key
  94.         updateActiveKey();
  95.     });
  96. })();