Added pace caret style -> off, background size, and background filter settings to the command line. (#4274) je-farr

* Added missing 'pace caret style -> off' setting to command line.

* Updated number array config validation to check for NaN values.

* Added background size settings to command line.

* Added background filter settings to command line.

* Changed tempArr to const.

* Changed displays to lowercase for consistency.

* renamed constants

* capital letter

---------

Co-authored-by: Miodec <jack@monkeytype.com>

frontend/src/ts/commandline/commands.ts

@@ -65,6 +65,8 @@ import ResultSavingCommands from "./lists/result-saving";
 import NavigationCommands from "./lists/navigation";
 import FontSizeCommands from "./lists/font-size";
 import ResultScreenCommands from "./lists/result-screen";
+import CustomBackgroundSizeCommands from "./lists/background-size";
+import CustomBackgroundFilterCommands from "./lists/background-filter";
 import AddOrRemoveThemeToFavorite from "./lists/add-or-remove-theme-to-favorites";
 
 import TagsCommands from "./lists/tags";
@@ -303,6 +305,8 @@ export const commands: MonkeyTypes.CommandsSubgroup = {
         UpdateConfig.setCustomBackground(input);
       },
     },
+    ...CustomBackgroundSizeCommands,
+    ...CustomBackgroundFilterCommands,
     ...RandomThemeCommands,
     {
       id: "randomizeTheme",

frontend/src/ts/commandline/lists/background-filter.ts

@@ -0,0 +1,79 @@
+import Config, * as UpdateConfig from "../../config";
+
+const subgroup: MonkeyTypes.CommandsSubgroup = {
+  title: "Custom background filter...",
+  configKey: "customBackgroundFilter",
+  list: [
+    {
+      id: "setCustomBackgroundBlur",
+      display: "blur...",
+      icon: "fa-image",
+      input: true,
+      defaultValue: (): string => {
+        return Config.customBackgroundFilter[0].toString();
+      },
+      exec: (input): void => {
+        if (!input) return;
+        const newFilters = Config.customBackgroundFilter;
+        newFilters[0] = parseFloat(input);
+        UpdateConfig.setCustomBackgroundFilter(newFilters);
+      },
+    },
+    {
+      id: "setCustomBackgroundBrightness",
+      display: "brightness...",
+      icon: "fa-image",
+      input: true,
+      defaultValue: (): string => {
+        return Config.customBackgroundFilter[1].toString();
+      },
+      exec: (input): void => {
+        if (!input) return;
+        const newFilters = Config.customBackgroundFilter;
+        newFilters[1] = parseFloat(input);
+        UpdateConfig.setCustomBackgroundFilter(newFilters);
+      },
+    },
+    {
+      id: "setCustomBackgroundSaturation",
+      display: "saturation...",
+      icon: "fa-image",
+      input: true,
+      defaultValue: (): string => {
+        return Config.customBackgroundFilter[2].toString();
+      },
+      exec: (input): void => {
+        if (!input) return;
+        const newFilters = Config.customBackgroundFilter;
+        newFilters[2] = parseFloat(input);
+        UpdateConfig.setCustomBackgroundFilter(newFilters);
+      },
+    },
+    {
+      id: "setCustomBackgroundOpacity",
+      display: "opacity...",
+      icon: "fa-image",
+      input: true,
+      defaultValue: (): string => {
+        return Config.customBackgroundFilter[3].toString();
+      },
+      exec: (input): void => {
+        if (!input) return;
+        const newFilters = Config.customBackgroundFilter;
+        newFilters[3] = parseFloat(input);
+        UpdateConfig.setCustomBackgroundFilter(newFilters);
+      },
+    },
+  ],
+};
+
+const commands: MonkeyTypes.Command[] = [
+  {
+    id: "setCustomBackgroundFilter",
+    display: "custom background filter...",
+    icon: "fa-image",
+    subgroup,
+  },
+];
+
+export default commands;

frontend/src/ts/commandline/lists/background-size.ts

@@ -0,0 +1,46 @@
+import * as UpdateConfig from "../../config";
+
+const subgroup: MonkeyTypes.CommandsSubgroup = {
+  title: "Custom background size...",
+  configKey: "customBackgroundSize",
+  list: [
+    {
+      id: "setCustomBackgroundSizeCover",
+      display: "cover",
+      icon: "fa-image",
+      configValue: "cover",
+      exec: (): void => {
+        UpdateConfig.setCustomBackgroundSize("cover");
+      },
+    },
+    {
+      id: "setCustomBackgroundSizeContain",
+      display: "contain",
+      icon: "fa-image",
+      configValue: "contain",
+      exec: (): void => {
+        UpdateConfig.setCustomBackgroundSize("contain");
+      },
+    },
+    {
+      id: "setCustomBackgroundSizeMax",
+      display: "max",
+      icon: "fa-image",
+      configValue: "max",
+      exec: (): void => {
+        UpdateConfig.setCustomBackgroundSize("max");
+      },
+    },
+  ],
+};
+
+const commands: MonkeyTypes.Command[] = [
+  {
+    id: "setCustomBackgroundSize",
+    display: "Custom background size...",
+    icon: "fa-image",
+    subgroup,
+  },
+];
+
+export default commands;

frontend/src/ts/commandline/lists/pace-caret-style.ts

@@ -4,6 +4,14 @@ const subgroup: MonkeyTypes.CommandsSubgroup = {
   title: "Change pace caret style...",
   configKey: "paceCaretStyle",
   list: [
+    {
+      id: "setPaceCaretStyleOff",
+      display: "off",
+      configValue: "off",
+      exec: (): void => {
+        UpdateConfig.setPaceCaretStyle("off");
+      },
+    },
     {
       id: "setPaceCaretStyleDefault",
       display: "line",

frontend/src/ts/config-validation.ts

@@ -66,7 +66,10 @@ export function isConfigValueValid(
         break;
 
       case "numberArray":
-        if (isArray(val) && val.every((v) => typeof v === "number")) {
+        if (
+          isArray(val) &&
+          val.every((v) => typeof v === "number" && !isNaN(v))
+        ) {
           isValid = true;
         }
         break;