impr(commandline): add local background/font commands (@byseif21) (monkeytypegame#6816)

* add commands for adding and removing custom local background and font.
* fix the url image input not updating when changing the background from
the commandline while in the settings page.

Author: byseif21

frontend/src/ts/commandline/commandline-metadata.ts

@@ -604,13 +604,6 @@ export const commandlineConfigMetadata: CommandlineConfigMetadataObject = {
       },
       hover: (name) => UI.previewFontFamily(name),
     },
-    input: {
-      inputValueConvert: (name) => name.replaceAll(/ /g, "_"),
-      defaultValue: () => Config.fontFamily.replace(/_/g, " "),
-      hover: (): void => {
-        UI.clearFontPreview();
-      },
-    },
   },
   keymapMode: {
     alias: "keyboard",

frontend/src/ts/commandline/commandline.ts

@@ -247,7 +247,7 @@ async function filterSubgroup(): Promise<void> {
 
   const matchCounts: number[] = [];
   for (const command of list) {
-    const isAvailable = command.available?.() ?? true;
+    const isAvailable = (await command.available?.()) ?? true;
     if (!isAvailable) {
       matches.push({
         matchCount: -1,

frontend/src/ts/commandline/lists.ts

@@ -4,6 +4,8 @@ import QuoteFavoriteCommands from "./lists/quote-favorites";
 import ResultSavingCommands from "./lists/result-saving";
 import NavigationCommands from "./lists/navigation";
 import ResultScreenCommands from "./lists/result-screen";
+import CustomBackgroundCommands from "./lists/custom-background";
+import FontFamilyCommands from "./lists/font-family";
 import CustomBackgroundFilterCommands from "./lists/background-filter";
 import AddOrRemoveThemeToFavorite from "./lists/add-or-remove-theme-to-favorites";
 import TagsCommands from "./lists/tags";
@@ -174,7 +176,7 @@ export const commands: CommandsSubgroup = {
       "startGraphsAtZero",
       "maxLineWidth",
       "fontSize",
-      "fontFamily",
+      ...FontFamilyCommands,
       "keymapMode",
       "keymapStyle",
       "keymapLegendStyle",
@@ -192,7 +194,7 @@ export const commands: CommandsSubgroup = {
       "flipTestColors",
       "colorfulMode",
       ...AddOrRemoveThemeToFavorite,
-      "customBackground",
+      ...CustomBackgroundCommands,
       "customBackgroundSize",
       ...CustomBackgroundFilterCommands,
       "randomTheme"
@@ -473,10 +475,10 @@ function buildSingleListCommands(
         icon: parentCommand.icon,
         alias: newAlias,
         visible: (parentCommand.visible ?? true) && (command.visible ?? true),
-        available: (): boolean => {
+        available: async (): Promise<boolean> => {
           return (
-            (parentCommand?.available?.() ?? true) &&
-            (command?.available?.() ?? true)
+            ((await parentCommand?.available?.()) ?? true) &&
+            ((await command?.available?.()) ?? true)
           );
         },
       };

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

@@ -0,0 +1,99 @@
+import { Command } from "../types";
+import { buildCommandForConfigKey } from "../util";
+import FileStorage from "../../utils/file-storage";
+import { applyCustomBackground } from "../../controllers/theme-controller";
+import { updateUI } from "../../elements/settings/custom-background-picker";
+import * as Notifications from "../../elements/notifications";
+
+const fromMeta = buildCommandForConfigKey("customBackground");
+
+const customBackgroundCommand: Command = {
+  id: "customBackground",
+  display: "Custom background...",
+  icon: "fa-image",
+  subgroup: {
+    title: "Custom background...",
+    list: [
+      fromMeta,
+      {
+        id: "customLocalBackground",
+        display: "Local background...",
+        icon: "fa-file-import fa-fw",
+        alias: "upload background",
+        available: async (): Promise<boolean> => {
+          return !(await FileStorage.hasFile("LocalBackgroundFile"));
+        },
+        exec: async (): Promise<void> => {
+          const inputElement = document.createElement("input");
+          inputElement.type = "file";
+          inputElement.accept = "image/*";
+          inputElement.style.display = "none";
+          document.body.appendChild(inputElement);
+
+          const cleanup = (): void => {
+            document.body.removeChild(inputElement);
+          };
+
+          inputElement.onchange = async (event) => {
+            const file = (event.target as HTMLInputElement).files?.[0];
+            if (!file) {
+              cleanup();
+              return;
+            }
+
+            // check type
+            if (!file.type.match(/image\/(jpeg|jpg|png|gif)/)) {
+              Notifications.add("Unsupported image format", 0);
+              cleanup();
+              return;
+            }
+
+            const reader = new FileReader();
+            reader.onload = async (readerEvent) => {
+              const dataUrl = readerEvent.target?.result as string;
+              try {
+                await FileStorage.storeFile("LocalBackgroundFile", dataUrl);
+                await applyCustomBackground();
+                await updateUI();
+              } catch (e) {
+                Notifications.add(
+                  "Error uploading background: " + (e as Error).message,
+                  0
+                );
+              }
+              cleanup();
+            };
+            reader.onerror = cleanup;
+            reader.readAsDataURL(file);
+          };
+          inputElement.click();
+        },
+      },
+      {
+        id: "removeLocalBackground",
+        display: "Remove local background",
+        icon: "fa-trash",
+        alias: "remove background",
+        available: async (): Promise<boolean> => {
+          return await FileStorage.hasFile("LocalBackgroundFile");
+        },
+        exec: async (): Promise<void> => {
+          try {
+            await FileStorage.deleteFile("LocalBackgroundFile");
+            await applyCustomBackground();
+            await updateUI();
+          } catch (e) {
+            Notifications.add(
+              "Error removing background: " + (e as Error).message,
+              0
+            );
+          }
+        },
+      },
+    ],
+  },
+};
+
+const commands: Command[] = [customBackgroundCommand];
+
+export default commands;

frontend/src/ts/commandline/lists/font-family.ts

@@ -0,0 +1,123 @@
+import { Command } from "../types";
+import { buildCommandForConfigKey } from "../util";
+import FileStorage from "../../utils/file-storage";
+import { applyFontFamily } from "../../controllers/theme-controller";
+import { updateUI } from "../../elements/settings/custom-font-picker";
+import * as Notifications from "../../elements/notifications";
+import Config, * as UpdateConfig from "../../config";
+
+const fromMeta = buildCommandForConfigKey("fontFamily");
+
+if (fromMeta.subgroup) {
+  fromMeta.subgroup.list.push({
+    id: "customFont",
+    display: "Custom font...",
+    icon: "fa-font",
+    alias: "custom font options",
+    subgroup: {
+      title: "Custom font...",
+      list: [
+        {
+          id: "customFontName",
+          display: "Custom name...",
+          icon: "fa-font",
+          alias: "custom font name",
+          input: true,
+          defaultValue: (): string => {
+            return Config.fontFamily.replace(/_/g, " ");
+          },
+          exec: ({ input }): void => {
+            if (input === undefined || input === "") return;
+            const fontName = input.replaceAll(/ /g, "_");
+            UpdateConfig.setFontFamily(fontName);
+          },
+        },
+        {
+          id: "customLocalFont",
+          display: "Local font...",
+          icon: "fa-file-import fa-fw",
+          alias: "upload font",
+          available: async (): Promise<boolean> => {
+            return !(await FileStorage.hasFile("LocalFontFamilyFile"));
+          },
+          exec: async (): Promise<void> => {
+            const inputElement = document.createElement("input");
+            inputElement.type = "file";
+            inputElement.accept = "font/woff,font/woff2,font/ttf,font/otf";
+            inputElement.style.display = "none";
+            document.body.appendChild(inputElement);
+
+            const cleanup = (): void => {
+              document.body.removeChild(inputElement);
+            };
+
+            inputElement.onchange = async (event) => {
+              const file = (event.target as HTMLInputElement).files?.[0];
+              if (!file) {
+                cleanup();
+                return;
+              }
+
+              // check type
+              if (
+                !file.type.match(/font\/(woff|woff2|ttf|otf)/) &&
+                !file.name.match(/\.(woff|woff2|ttf|otf)$/i)
+              ) {
+                Notifications.add(
+                  "Unsupported font format, must be woff, woff2, ttf or otf.",
+                  0
+                );
+                cleanup();
+                return;
+              }
+
+              const reader = new FileReader();
+              reader.onload = async (readerEvent) => {
+                const dataUrl = readerEvent.target?.result as string;
+                try {
+                  await FileStorage.storeFile("LocalFontFamilyFile", dataUrl);
+                  await applyFontFamily();
+                  await updateUI();
+                } catch (e) {
+                  Notifications.add(
+                    "Error uploading font: " + (e as Error).message,
+                    0
+                  );
+                }
+                cleanup();
+              };
+              reader.onerror = cleanup;
+              reader.readAsDataURL(file);
+            };
+            inputElement.click();
+          },
+        },
+        {
+          id: "removeLocalFont",
+          display: "Remove local font",
+          icon: "fa-trash",
+          alias: "remove font",
+          available: async (): Promise<boolean> => {
+            return await FileStorage.hasFile("LocalFontFamilyFile");
+          },
+          exec: async (): Promise<void> => {
+            try {
+              await FileStorage.deleteFile("LocalFontFamilyFile");
+              await updateUI();
+              await applyFontFamily();
+            } catch (e) {
+              Notifications.add(
+                "Error removing font: " + (e as Error).message,
+                0
+              );
+            }
+          },
+        },
+      ],
+    },
+  });
+}
+
+const commands: Command[] = [fromMeta];
+
+export default commands;

frontend/src/ts/commandline/types.ts

@@ -30,7 +30,7 @@ export type Command = {
   configValueMode?: "include";
   exec?: (options: CommandExecOptions<string>) => void;
   hover?: () => void;
-  available?: () => boolean;
+  available?: () => boolean | Promise<boolean>;
   active?: () => boolean;
   shouldFocusTestUI?: boolean;
   customData?: Record<string, string | boolean>;

frontend/src/ts/config-metadata.ts

@@ -622,8 +622,8 @@ export const configMetadata: ConfigMetadataObject = {
     changeRequiresRestart: false,
   },
   customBackground: {
-    icon: "fa-image",
-    displayString: "custom background",
+    icon: "fa-link",
+    displayString: "URL background",
     changeRequiresRestart: false,
     overrideValue: ({ value }) => {
       return value.trim();

frontend/src/ts/controllers/theme-controller.ts

@@ -385,6 +385,10 @@ export async function applyCustomBackground(): Promise<void> {
 
   let backgroundUrl = Config.customBackground;
 
+  $(
+    ".pageSettings .section[data-config-name='customBackgroundSize'] input[type='text']"
+  ).val(backgroundUrl);
+
   //if there is a localBackgroundFile available, use it.
   const localBackgroundFile = await fileStorage.getFile("LocalBackgroundFile");