Merge branch 'Miodec:master' into master

.firebaserc_example

@@ -2,4 +2,4 @@
   "projects": {
     "default": "your-firebase-project-id"
   }
-}
+}

.github/ISSUE_TEMPLATE/bug_report.md

@@ -6,7 +6,7 @@ labels: bug
 assignees: ""
 ---
 
-<!-- 
+<!--
 **DID YOU MAKE SURE TO CLEAR CACHE BEFORE OPENING AN ISSUE?**
 Sometimes your browser has old files cached and the bug you are experiencing might be already fixed, or is just a side effect of a new update. If you don't know how to do that, this website should help: https://www.pcmag.com/how-to/how-to-clear-your-cache-on-any-browser
 
@@ -14,12 +14,11 @@ Sometimes your browser has old files cached and the bug you are experiencing mig
 
 **Describe the bug** <!-- A clear and concise description of what the bug is. -->
 
-
-<!-- 
+<!--
 
 **Did it happen in incognito mode?**
 
-Sometimes things work in incognito mode, which allows me to further track down the issue. 
+Sometimes things work in incognito mode, which allows me to further track down the issue.
 
 -->
 
@@ -32,10 +31,8 @@ Sometimes things work in incognito mode, which allows me to further track down t
 
 **Expected behavior** <!-- A clear and concise description of what you expected to happen. -->
 
-
 **Screenshots** <!-- If applicable, add screenshots to further help explain your problem. -->
 
-
 **Desktop:** <!-- if you encountered an issue while using Monkeytype on your computer please complete the following information, delete this section if not-->
 
 - OS: [] <!-- e.g. Windows 10, MacOS, Linux-->

.github/pull_request_template.md

@@ -1,4 +1,4 @@
-Adding a language or a theme? Make sure to edit the `_list.json` file and add the `language.json` or `theme.css` as well, otherwise, it will not work!
+Adding a language or a theme? For languages, make sure to edit the `_list.json`, `_groups.json` files, and add the `language.json` file as well. For themes, make sure to add the `theme.css` file. It will not work if you don't follow these steps!
 
 Please reference any issues related to your pull request.
 

src/js/commandline-lists.js

@@ -1657,6 +1657,26 @@ export let defaultCommands = {
         UpdateConfig.setCustomBackground(input);
       },
     },
+    {
+      id: "changeCustomLayoutfluid",
+      display: "Change custom layoutfluid...",
+      defaultValue: "qwerty dvorak colemak",
+      input: true,
+      exec: (input) => {
+        UpdateConfig.setCustomLayoutfluid(input);
+        if (Funbox.active === "layoutfluid") TestLogic.restart();
+        // UpdateConfig.setLayout(
+        //   Config.customLayoutfluid
+        //     ? Config.customLayoutfluid.split("_")[0]
+        //     : "qwerty"
+        // );
+        // UpdateConfig.setKeymapLayout(
+        //   Config.customLayoutfluid
+        //     ? Config.customLayoutfluid.split("_")[0]
+        //     : "qwerty"
+        // );
+      },
+    },
     {
       id: "changeTheme",
       display: "Change theme...",

src/js/config.js

@@ -16,6 +16,7 @@ import * as PaceCaret from "./pace-caret";
 import * as UI from "./ui";
 import * as CommandlineLists from "./commandline-lists";
 import * as BackgroundFilter from "./custom-background-filter";
+import LayoutList from "./layouts";
 
 export let localStorageConfig = null;
 export let dbConfigLoaded = false;
@@ -117,6 +118,7 @@ let defaultConfig = {
   customBackground: "",
   customBackgroundSize: "cover",
   customBackgroundFilter: [0, 1, 1, 1, 1],
+  customLayoutfluid: "qwerty#dvorak#colemak",
 };
 
 function isConfigKeyValid(name) {
@@ -1400,6 +1402,37 @@ export function setCustomBackground(value, nosave) {
   }
 }
 
+export function setCustomLayoutfluid(value, nosave) {
+  if (value == null || value == undefined) {
+    value = "qwerty#dvorak#colemak";
+  }
+  value = value.replace(/ /g, "#");
+  value
+    .split("#")
+    .map((l) => (l = l.toLowerCase()))
+    .join("#");
+
+  //validate the layouts
+  let allGood = true;
+  let list = Object.keys(LayoutList).map((l) => (l = l.toLowerCase()));
+  value.split("#").forEach((customLayout) => {
+    if (!list.includes(customLayout)) allGood = false;
+  });
+  if (!allGood) {
+    Notifications.add(
+      "One of the layouts were not found. Reverting to default",
+      0
+    );
+    value = "qwerty#dvorak#colemak";
+    nosave = false;
+  }
+  config.customLayoutfluid = value;
+  CommandlineLists.defaultCommands.list.filter(
+    (command) => command.id == "changeCustomLayoutfluid"
+  )[0].defaultValue = value.replace(/#/g, " ");
+  if (!nosave) saveToLocalStorage();
+}
+
 export function setCustomBackgroundSize(value, nosave) {
   if (value != "cover" && value != "contain" && value != "max") {
     value = "cover";
@@ -1430,6 +1463,7 @@ export function apply(configObj) {
     setTheme(configObj.theme, true);
     setCustomThemeColors(configObj.customThemeColors, true);
     setCustomTheme(configObj.customTheme, true, true);
+    setCustomLayoutfluid(configObj.customLayoutfluid, true);
     setCustomBackground(configObj.customBackground, true);
     setCustomBackgroundSize(configObj.customBackgroundSize, true);
     setCustomBackgroundFilter(configObj.customBackgroundFilter, true);

src/js/input-controller.js

@@ -201,10 +201,15 @@ function handleSpace(event, isEnter) {
 
   let currentWord = TestLogic.words.getCurrent();
   if (Funbox.active === "layoutfluid" && Config.mode !== "time") {
-    const layouts = ["qwerty", "dvorak", "colemak"];
+    // here I need to check if Config.customLayoutFluid exists because of my scuffed solution of returning whenever value is undefined in the setCustomLayoutfluid function
+    const layouts = Config.customLayoutfluid
+      ? Config.customLayoutfluid.split("#")
+      : ["qwerty", "dvorak", "colemak"];
     let index = 0;
     let outof = TestLogic.words.length;
-    index = Math.floor((TestLogic.input.history.length + 1) / (outof / 3));
+    index = Math.floor(
+      (TestLogic.input.history.length + 1) / (outof / layouts.length)
+    );
     if (Config.layout !== layouts[index] && layouts[index] !== undefined) {
       Notifications.add(`--- !!! ${layouts[index]} !!! ---`, 0);
     }

src/js/settings.js

@@ -277,6 +277,10 @@ async function initGroups() {
     "customBackgroundSize",
     UpdateConfig.setCustomBackgroundSize
   );
+  // groups.customLayoutfluid = new SettingsGroup(
+  //   "customLayoutfluid",
+  //   UpdateConfig.setCustomLayoutfluid
+  // );
 }
 
 async function fillSettingsPage() {
@@ -383,6 +387,10 @@ async function fillSettingsPage() {
   $(".pageSettings .section.customBackgroundSize input").val(
     Config.customBackground
   );
+
+  $(".pageSettings .section.customLayoutfluid input").val(
+    Config.customLayoutfluid.replace(/#/g, " ")
+  );
 }
 
 export let settingsFillPromise = fillSettingsPage();
@@ -778,3 +786,24 @@ $(".pageSettings .section.customBackgroundSize .inputAndButton input").keypress(
     }
   }
 );
+
+$(".pageSettings .section.customLayoutfluid .inputAndSave .save").on(
+  "click",
+  (e) => {
+    UpdateConfig.setCustomLayoutfluid(
+      $(".pageSettings .section.customLayoutfluid .inputAndSave input").val()
+    );
+    Notifications.add("Custom layoutfluid saved", 1);
+  }
+);
+
+$(".pageSettings .section.customLayoutfluid .inputAndSave .input").keypress(
+  (e) => {
+    if (e.keyCode == 13) {
+      UpdateConfig.setCustomLayoutfluid(
+        $(".pageSettings .section.customLayoutfluid .inputAndSave input").val()
+      );
+      Notifications.add("Custom layoutfluid saved", 1);
+    }
+  }
+);

src/js/test/funbox.js

@@ -174,14 +174,22 @@ export async function activate(funbox, mode) {
       Settings.groups.keymapMode.updateButton();
       // UpdateConfig.setSavedLayout(Config.layout);
       rememberSetting("layout", Config.layout, UpdateConfig.setLayout);
-      UpdateConfig.setLayout("qwerty");
+      UpdateConfig.setLayout(
+        Config.customLayoutfluid
+          ? Config.customLayoutfluid.split("#")[0]
+          : "qwerty"
+      );
       Settings.groups.layout.updateButton();
       rememberSetting(
         "keymapLayout",
         Config.keymapLayout,
         UpdateConfig.setKeymapLayout
       );
-      UpdateConfig.setKeymapLayout("qwerty");
+      UpdateConfig.setKeymapLayout(
+        Config.customLayoutfluid
+          ? Config.customLayoutfluid.split("#")[0]
+          : "qwerty"
+      );
       Settings.groups.keymapLayout.updateButton();
       TestLogic.restart();
     } else if (funbox === "memory") {

src/js/test/test-logic.js

@@ -773,8 +773,16 @@ export function restart(withSameWordset = false, nosave = false, event) {
       $(".pageTest #premidSecondsLeft").text(Config.time);
 
       if (Funbox.active === "layoutfluid") {
-        UpdateConfig.setLayout("qwerty");
-        UpdateConfig.setKeymapLayout("qwerty");
+        UpdateConfig.setLayout(
+          Config.customLayoutfluid
+            ? Config.customLayoutfluid.split("#")[0]
+            : "qwerty"
+        );
+        UpdateConfig.setKeymapLayout(
+          Config.customLayoutfluid
+            ? Config.customLayoutfluid.split("#")[0]
+            : "qwerty"
+        );
         Keymap.highlightKey(
           words
             .getCurrent()
@@ -1710,9 +1718,9 @@ export function finish(difficultyFailed = false) {
   $("#result .stats .testType .bottom").html(testType);
 
   let otherText = "";
-  if (Config.layout !== "default") {
-    otherText += "<br>" + Config.layout;
-  }
+  // if (Config.layout !== "default") {
+  //   otherText += "<br>" + Config.layout;
+  // }
   if (difficultyFailed) {
     otherText += "<br>failed";
   }
@@ -1754,6 +1762,10 @@ export function finish(difficultyFailed = false) {
   }
 
   if (Funbox.funboxSaved !== "none") {
+    let content = Funbox.funboxSaved;
+    if (Funbox.funboxSaved === "layoutfluid") {
+      content += " " + Config.customLayoutfluid.replace(/#/g, " ");
+    }
     ChartController.result.options.annotation.annotations.push({
       enabled: false,
       type: "line",
@@ -1774,7 +1786,7 @@ export function finish(difficultyFailed = false) {
         cornerRadius: 3,
         position: "left",
         enabled: true,
-        content: `${Funbox.funboxSaved}`,
+        content: `${content}`,
         yAdjust: -11,
       },
     });

src/js/test/test-timer.js

@@ -41,25 +41,30 @@ export function start() {
       let acc = Misc.roundTo2(TestStats.calculateAccuracy());
 
       if (Funbox.active === "layoutfluid" && Config.mode === "time") {
-        const layouts = ["qwerty", "dvorak", "colemak"];
+        const layouts = Config.customLayoutfluid
+          ? Config.customLayoutfluid.split("#")
+          : ["qwerty", "dvorak", "colemak"];
+        console.log(Config.customLayoutfluid);
+        console.log(layouts);
+        const numLayouts = layouts.length;
         let index = 0;
-        index = Math.floor(time / (Config.time / 3));
+        index = Math.floor(time / (Config.time / numLayouts));
 
         if (
-          time == Math.floor(Config.time / 3) - 3 ||
-          time == (Config.time / 3) * 2 - 3
+          time == Math.floor(Config.time / numLayouts) - 3 ||
+          time == (Config.time / numLayouts) * 2 - 3
         ) {
           Notifications.add("3", 0, 1);
         }
         if (
-          time == Math.floor(Config.time / 3) - 2 ||
-          time == Math.floor(Config.time / 3) * 2 - 2
+          time == Math.floor(Config.time / numLayouts) - 2 ||
+          time == Math.floor(Config.time / numLayouts) * 2 - 2
         ) {
           Notifications.add("2", 0, 1);
         }
         if (
-          time == Math.floor(Config.time / 3) - 1 ||
-          time == Math.floor(Config.time / 3) * 2 - 1
+          time == Math.floor(Config.time / numLayouts) - 1 ||
+          time == Math.floor(Config.time / numLayouts) * 2 - 1
         ) {
           Notifications.add("1", 0, 1);
         }

src/sass/style.scss

@@ -2769,6 +2769,29 @@ key {
       }
     }
 
+    // I have no idea what I'm doing so I just copied the customBackgroundSize css and changed numbers so it magically worked.
+    &.customLayoutfluid {
+      .inputAndSave {
+        display: grid;
+        grid-template-columns: 1fr 2fr;
+        gap: 0.5rem;
+        margin-bottom: 0.5rem;
+        input {
+          grid-column: 1/3;
+        }
+
+        .save {
+          grid-column: 3/4;
+          height: auto;
+
+          .fas {
+            margin-right: 0rem;
+            vertical-align: sub;
+          }
+        }
+      }
+    }
+
     &.customBackgroundSize {
       .inputAndButton {
         display: grid;

static/index.html

@@ -2205,6 +2205,26 @@
                 <div class="buttons"></div>
               </div>
               <div class="sectionSpacer"></div>
+              <div class="section customLayoutfluid">
+                <h1>custom layoutfluid</h1>
+                <div class="text">
+                  Select which layouts you want the layoutfluid funbox to cycle
+                  through.
+                </div>
+                <div class="inputAndSave">
+                  <input
+                    type="text"
+                    placeholder="layouts (separated by space)"
+                    class="input"
+                    tabindex="0"
+                    onClick="this.select();"
+                  />
+                  <div class="button save" tabindex="0" onclick="this.blur();">
+                    <i class="fas fa-save fa-fw"></i>
+                  </div>
+                </div>
+              </div>
+              <div class="sectionSpacer"></div>
             </div>
             <div id="group_input" class="sectionGroupTitle" group="input">
               input

static/languages/_groups.json

@@ -1,7 +1,13 @@
 [
   {
     "name": "english",
-      "languages": ["english", "english_1k", "english_10k", "english_25k", "english_450k"]
+    "languages": [
+      "english",
+      "english_1k",
+      "english_10k",
+      "english_25k",
+      "english_450k"
+    ]
   },
   {
     "name": "spanish",
@@ -29,7 +35,7 @@
   },
   {
     "name": "portuguese",
-    "languages": ["portuguese","portuguese_3k"]
+    "languages": ["portuguese", "portuguese_3k"]
   },
   {
     "name": "lithuanian",
@@ -41,7 +47,13 @@
   },
   {
     "name": "german",
-    "languages": ["german", "german_1k", "german_10k", "swiss_german", "swiss_german_1k"]
+    "languages": [
+      "german",
+      "german_1k",
+      "german_10k",
+      "swiss_german",
+      "swiss_german_1k"
+    ]
   },
   {
     "name": "greek",