Merge branch 'master' of https://github.com/Miodec/monkeytype

.firebaserc_example

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "your-firebase-project-id"
+  }
+}

CONTRIBUTING.md

@@ -15,7 +15,7 @@
 1. [Install the Firebase CLI](https://firebase.google.com/docs/cli)
 1. Run `firebase login` on your terminal to log in to the same google account as you just used to create the project.
 1. Git clone this project.
-1. Rename `.firebaserc_example` to `.firebaserc` and change the project name of default to the firebase project id you just created.
+1. Duplicate `.firebaserc_example`, rename the new file to `.firebaserc` and change the project name of default to the firebase project id you just created.
 
    - If `.firebaserc_example` does not exist after cloning, create your own with:
 
@@ -48,7 +48,6 @@
    - Start in test mode
    - Select default location and enable
 
-
 ## Building and Running
 
 1. Run `npm install` in the project root directory to install dependencies.

src/js/commandline-lists.js

@@ -647,6 +647,33 @@ let commandsKeymapStyle = {
   ],
 };
 
+let commandsKeymapLegendStyle = {
+  title: "Change keymap legend style...",
+  list: [
+    {
+      id: "setKeymapLegendStyleLowercase",
+      display: "lowercase",
+      exec: () => {
+        UpdateConfig.setKeymapLegendStyle("lowercase");
+      },
+    },
+    {
+      id: "setKeymapLegendStyleUppercase",
+      display: "uppercase",
+      exec: () => {
+        UpdateConfig.setKeymapLegendStyle("uppercase");
+      },
+    },
+    {
+      id: "setKeymapLegendStyleBlank",
+      display: "blank",
+      exec: () => {
+        UpdateConfig.setKeymapLegendStyle("blank");
+      },
+    },
+  ],
+};
+
 let commandsHighlightMode = {
   title: "Change highlight mode...",
   list: [
@@ -1678,6 +1705,16 @@ export let defaultCommands = {
         Commandline.show();
       },
     },
+    {
+      id: "changeKeymapLegendStyle",
+      display: "Change keymap legend style...",
+      alias: "keyboard",
+      subgroup: true,
+      exec: () => {
+        current.push(commandsKeymapLegendStyle);
+        Commandline.show();
+      },
+    },
     {
       id: "changeKeymapLayout",
       display: "Change keymap layout...",

src/js/config.js

@@ -86,6 +86,7 @@ let defaultConfig = {
   showAllLines: false,
   keymapMode: "off",
   keymapStyle: "staggered",
+  keymapLegendStyle: "lowercase",
   keymapLayout: "qwerty",
   fontFamily: "Roboto_Mono",
   smoothLineScroll: false,
@@ -477,10 +478,12 @@ export function setPaceCaret(val, nosave) {
   if (val == undefined) {
     val = "off";
   }
-  // if (val == "pb" && firebase.auth().currentUser === null) {
-  //   Notifications.add("PB pace caret is unavailable without an account", 0);
-  //   return;
-  // }
+  if ( document.readyState === "complete") {
+    if (val == "pb" && firebase.auth().currentUser === null) {
+      Notifications.add("PB pace caret is unavailable without an account", 0);
+      return;
+    }
+  }
   // if (config.mode === "zen" && val != "off") {
   //   Notifications.add(`Can't use pace caret with zen mode.`, 0);
   //   val = "off";
@@ -1264,22 +1267,41 @@ export function setKeymapMode(mode, nosave) {
   if (!nosave) saveToCookie();
 }
 
+export function setKeymapLegendStyle(style, nosave) {
+  // Remove existing styles
+  const keymapLegendStyles = ["lowercase", "uppercase", "blank"];
+  keymapLegendStyles.forEach((name) => {
+    $(".keymapLegendStyle").removeClass(name);
+  });
+
+  style = style || "lowercase";
+
+  // Mutate the keymap in the DOM, if it exists.
+  // 1. Remove everything
+  $(".keymap-key > .letter").css("display", "");
+  $(".keymap-key > .letter").css("text-transform", "");
+
+  // 2. Append special styles onto the DOM elements
+  if (style === "uppercase") {
+    $(".keymap-key > .letter").css("text-transform", "capitalize");
+  }
+  if (style === "blank") {
+    $(".keymap-key > .letter").css("display", "none");
+  }
+
+  // Update and save to cookie for persistence
+  $(".keymapLegendStyle").addClass(style);
+  config.keymapLegendStyle = style;
+  if (!nosave) saveToCookie();
+}
+
 export function setKeymapStyle(style, nosave) {
   $(".keymap").removeClass("matrix");
   $(".keymap").removeClass("split");
   $(".keymap").removeClass("split_matrix");
+  style = style || "staggered";
 
-  if (style == null || style == undefined) {
-    style = "staggered";
-  }
-
-  if (style === "matrix") {
-    $(".keymap").addClass("matrix");
-  } else if (style === "split") {
-    $(".keymap").addClass("split");
-  } else if (style === "split_matrix") {
-    $(".keymap").addClass("split_matrix");
-  }
+  $(".keymap").addClass(style);
   config.keymapStyle = style;
   if (!nosave) saveToCookie();
 }
@@ -1431,6 +1453,7 @@ export function apply(configObj) {
     setTimerOpacity(configObj.timerOpacity, true);
     setKeymapMode(configObj.keymapMode, true);
     setKeymapStyle(configObj.keymapStyle, true);
+    setKeymapLegendStyle(configObj.keymapLegendStyle, true);
     setKeymapLayout(configObj.keymapLayout, true);
     setFontFamily(configObj.fontFamily, true);
     setSmoothCaret(configObj.smoothCaret, true);

src/js/settings.js

@@ -51,9 +51,11 @@ async function initGroups() {
       if (Config.keymapMode === "off") {
         $(".pageSettings .section.keymapStyle").addClass("hidden");
         $(".pageSettings .section.keymapLayout").addClass("hidden");
+        $(".pageSettings .section.keymapLegendStyle").addClass("hidden");
       } else {
         $(".pageSettings .section.keymapStyle").removeClass("hidden");
         $(".pageSettings .section.keymapLayout").removeClass("hidden");
+        $(".pageSettings .section.keymapLegendStyle").removeClass("hidden");
       }
     }
   );
@@ -65,6 +67,10 @@ async function initGroups() {
     "keymapLayout",
     UpdateConfig.setKeymapLayout
   );
+  groups.keymapLegendStyle = new SettingsGroup(
+    "keymapLegendStyle",
+    UpdateConfig.setKeymapLegendStyle
+  );
   groups.showKeyTips = new SettingsGroup(
     "showKeyTips",
     UpdateConfig.setKeyTips,
@@ -578,7 +584,9 @@ $(
   ".pageSettings .section.discordIntegration .buttons .generateCodeButton"
 ).click((e) => {
   Loader.show();
-  CloudFunctions.generatePairingCode({ uid: firebase.auth().currentUser.uid })
+  CloudFunctions.generatePairingCode({
+    uid: firebase.auth().currentUser.uid,
+  })
     .then((ret) => {
       Loader.hide();
       if (ret.data.status === 1 || ret.data.status === 2) {
@@ -715,7 +723,9 @@ $(".pageSettings .sectionGroupTitle").click((e) => {
         {
           duration: 250,
           step: function (now) {
-            $(this).css({ transform: "rotate(" + now + "deg)" });
+            $(this).css({
+              transform: "rotate(" + now + "deg)",
+            });
           },
         }
       );
@@ -729,7 +739,9 @@ $(".pageSettings .sectionGroupTitle").click((e) => {
         {
           duration: 250,
           step: function (now) {
-            $(this).css({ transform: "rotate(" + now + "deg)" });
+            $(this).css({
+              transform: "rotate(" + now + "deg)",
+            });
           },
         }
       );

src/js/settings/settings-group.js

@@ -9,11 +9,7 @@ export default class SettingsGroup {
   ) {
     this.configName = configName;
     this.configValue = Config[configName];
-    if (this.configValue === true || this.configValue === false) {
-      this.onOff = true;
-    } else {
-      this.onOff = false;
-    }
+    this.onOff = typeof this.configValue === "boolean";
     this.toggleFunction = toggleFunction;
     this.setCallback = setCallback;
     this.updateCallback = updateCallback;
@@ -36,8 +32,8 @@ export default class SettingsGroup {
           this.updateButton();
           if (this.setCallback !== null) this.setCallback();
         } else {
-          let value = target.attr(configName);
-          let params = target.attr("params");
+          const value = target.attr(configName);
+          const params = target.attr("params");
           this.setValue(value, params);
         }
       }
@@ -60,14 +56,9 @@ export default class SettingsGroup {
       "active"
     );
     if (this.onOff) {
-      let onoffstring;
-      if (this.configValue) {
-        onoffstring = "on";
-      } else {
-        onoffstring = "off";
-      }
+      const onOffString = this.configValue ? "on" : "off";
       $(
-        `.pageSettings .section.${this.configName} .buttons .button.${onoffstring}`
+        `.pageSettings .section.${this.configName} .buttons .button.${onOffString}`
       ).addClass("active");
     } else {
       $(

src/sass/style.scss

@@ -3041,6 +3041,7 @@ key {
     &.languageGroups,
     &.layout,
     &.keymapLayout,
+    &.keymapLegendStyle,
     &.fontFamily,
     &.funbox,
     &.keymapStyle,
@@ -3553,6 +3554,7 @@ key {
     .pageSettings .section.language .buttons,
     .pageSettings .section.layout .buttons,
     .pageSettings .section.keymapLayout .buttons,
+    .pageSettings .section.keymapLegendStyle .buttons,
     .pageSettings .section.fontFamily .buttons,
     .pageSettings .section.funbox .buttons,
     .pageSettings .section.keymapStyle .buttons {
@@ -3663,6 +3665,7 @@ key {
     .pageSettings .section.language .buttons,
     .pageSettings .section.layout .buttons,
     .pageSettings .section.keymapLayout .buttons,
+    .pageSettings .section.keymapLegendStyle .buttons,
     .pageSettings .section.fontFamily .buttons,
     .pageSettings .section.funbox .buttons,
     .pageSettings .section.keymapStyle .buttons {

static/index.html

@@ -1660,6 +1660,20 @@
                 <div>Robin</div>
                 <div>Sonicv6</div>
                 <div>Taran</div>
+                <div>Roux</div>
+                <div>Artem</div>
+                <div>DarkBlu</div>
+                <div>John</div>
+                <div>Gregory</div>
+                <div>Hopeless Love</div>
+                <div>Kalen</div>
+                <div>Ben</div>
+                <div>Jakub</div>
+                <div>Vincent</div>
+                <div>Connor</div>
+                <div>Zunaed</div>
+                <div>Emilio</div>
+                <div>Michael</div>
               </div>
             </div>
           </div>
@@ -2769,6 +2783,35 @@
                   </div>
                 </div>
               </div>
+              <div class="section keymapLegendStyle">
+                <h1>keymap legend style</h1>
+                <div class="buttons">
+                  <div
+                    class="button"
+                    keymapLegendStyle="lowercase"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
+                    lowercase
+                  </div>
+                  <div
+                    class="button"
+                    keymapLegendStyle="uppercase"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
+                    uppercase
+                  </div>
+                  <div
+                    class="button"
+                    keymapLegendStyle="blank"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
+                    blank
+                  </div>
+                </div>
+              </div>
               <div class="section keymapLayout">
                 <h1>keymap layout</h1>
                 <div class="buttons"></div>

static/languages/_groups.json

@@ -65,7 +65,7 @@
   },
   {
     "name": "slovak",
-    "languages": ["slovak"]
+    "languages": ["slovak", "slovak_1k"]
   },
   {
     "name": "slovenian",

static/languages/_list.json

@@ -37,6 +37,7 @@
   ,"czech_1k"
   ,"czech_10k"
   ,"slovak"
+  ,"slovak_1k"
   ,"slovenian"
   ,"croatian"
   ,"dutch"