Merge pull request #5 from Miodec/master

merge

.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

@@ -1652,7 +1652,7 @@ a:hover {
     justify-self: right;
     display: grid;
     // grid-auto-flow: row;
-    grid-template-rows: 1fr 1fr 1fr;
+    grid-template-rows: 0.7rem 0.7rem 0.7rem;
     grid-gap: 0.2rem;
     // width: min-content;
     // width: -moz-min-content;
@@ -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"

static/quotes/english.json

@@ -1,22 +1,10 @@
 {
   "language": "english",
   "groups": [
-    [
-      0,
-      100
-    ],
-    [
-      101,
-      300
-    ],
-    [
-      301,
-      600
-    ],
-    [
-      601,
-      9999
-    ]
+    [0, 100],
+    [101, 300],
+    [301, 600],
+    [601, 9999]
   ],
   "quotes": [
     {
@@ -32614,6 +32602,12 @@
       "source": "Fahrenheit 451",
       "length": 310,
       "id": 5484
+    },
+    {
+      "text": "My father picked me up from school one day and we played hookey and went to the beach. It was too cold to go in the water so we sat on a blanket and ate pizza. When I got home my sneakers were full of sand and I dumped it on my bedroom floor. I didn't know the difference, I was six. My mother screamed at me for the mess but he wasn't mad. He said that billions of years ago the world 's shifting and ocean moving brought that sand to that spot on the beach and then I took it away. Every day he said we change the world. Which is a nice thought until I think about how many days and lifetimes I would need to bring a shoe full of sand home until there is no beach. Until it made a difference to anyone. Every day we change the world. But to change the world in a way that means anything that takes more time than most people have. it never happens all at once. Its slow. Its methodical. Its exhausting. We don't all have the stomach for it.",
+      "source": "Mr. Robot",
+      "length": 942,
+      "id": 5485
     }
   ]
-}
+}