feat: add max line width

controls how many characters per line (estimated) to display during the test literally bullied into adding it back, hope you love me again
monkeytypegame · Apr 26, 2024 · 36df36b · 36df36b
1 parent 06ed908
commit 36df36b
Show file tree

Hide file tree

Showing 9 changed files with 142 additions and 1 deletion.
diff --git a/backend/src/api/schemas/config-schema.ts b/backend/src/api/schemas/config-schema.ts
@@ -146,6 +146,7 @@ const CONFIG_SCHEMA = joi.object({
   britishEnglish: joi.boolean(),
   lazyMode: joi.boolean(),
   showAverage: joi.string().valid("off", "speed", "acc", "both"),
+  maxLineWidth: joi.number().min(20).max(1000),
 });
 
 export default CONFIG_SCHEMA;
diff --git a/frontend/src/html/pages/settings.html b/frontend/src/html/pages/settings.html
@@ -893,6 +893,28 @@
         <button data-config-value="true">on</button>
       </div>
     </div>
+    <div class="section" data-config-name="maxLineWidth">
+      <div class="groupTitle">
+        <i class="fas fa-text-width"></i>
+        <span>max line width</span>
+      </div>
+      <div class="text">
+        Change the maximum width of the typing test, measured in characters.
+      </div>
+      <div class="inputs">
+        <div class="inputAndButton">
+          <input
+            type="number"
+            placeholder="max line width"
+            class="input"
+            min="20"
+          />
+          <button class="save no-auto-handle">
+            <i class="fas fa-save fa-fw"></i>
+          </button>
+        </div>
+      </div>
+    </div>
     <div class="section" data-config-name="fontSize">
       <div class="groupTitle">
         <i class="fas fa-font"></i>

diff --git a/frontend/src/ts/commandline/lists.ts b/frontend/src/ts/commandline/lists.ts
@@ -62,6 +62,7 @@ import BailOutCommands from "./lists/bail-out";
 import ResultSavingCommands from "./lists/result-saving";
 import NavigationCommands from "./lists/navigation";
 import FontSizeCommands from "./lists/font-size";
+import MaxLineWidthCommands from "./lists/max-line-width";
 import ResultScreenCommands from "./lists/result-screen";
 import CustomBackgroundSizeCommands from "./lists/background-size";
 import CustomBackgroundFilterCommands from "./lists/background-filter";
@@ -283,6 +284,7 @@ export const commands: MonkeyTypes.CommandsSubgroup = {
     ...TypingSpeedUnitCommands,
     ...AlwaysShowDecimalCommands,
     ...StartGraphsAtZeroCommands,
+    ...MaxLineWidthCommands,
     ...FontSizeCommands,
     ...FontFamilyCommands,
     ...KeymapModeCommands,

diff --git a/frontend/src/ts/commandline/lists/max-line-width.ts b/frontend/src/ts/commandline/lists/max-line-width.ts
@@ -0,0 +1,19 @@
+import Config, * as UpdateConfig from "../../config";
+
+const commands: MonkeyTypes.Command[] = [
+  {
+    id: "changeMaxLineWidth",
+    display: "Max line width...",
+    icon: "fa-text-width",
+    alias: "page",
+    input: true,
+    defaultValue: (): string => {
+      return Config.maxLineWidth.toString();
+    },
+    exec: ({ input }): void => {
+      if (input === undefined || input === "") return;
+      UpdateConfig.setMaxLineWidth(parseFloat(input));
+    },
+  },
+];
+export default commands;
diff --git a/frontend/src/ts/config.ts b/frontend/src/ts/config.ts
@@ -1661,6 +1661,32 @@ export function setFontSize(fontSize: number, nosave?: boolean): boolean {
   return true;
 }
 
+export function setMaxLineWidth(
+  maxLineWidth: number,
+  nosave?: boolean
+): boolean {
+  if (!isConfigValueValid("max line width", maxLineWidth, ["number"])) {
+    return false;
+  }
+
+  if (maxLineWidth < 20) {
+    maxLineWidth = 20;
+  }
+  if (maxLineWidth > 1000) {
+    maxLineWidth = 1000;
+  }
+
+  config.maxLineWidth = maxLineWidth;
+
+  saveToLocalStorage("maxLineWidth", nosave);
+  ConfigEvent.dispatch("maxLineWidth", config.maxLineWidth, nosave);
+
+  // trigger a resize event to update the layout - handled in ui.ts:108
+  $(window).trigger("resize");
+
+  return true;
+}
+
 export function setCustomBackground(value: string, nosave?: boolean): boolean {
   if (!isConfigValueValid("custom background", value, ["string"])) return false;
 

diff --git a/frontend/src/ts/constants/default-config.ts b/frontend/src/ts/constants/default-config.ts
@@ -93,4 +93,5 @@ export default {
   lazyMode: false,
   showAverage: "off",
   tapeMode: "off",
+  maxLineWidth: 70,
 } as SharedTypes.Config;
diff --git a/frontend/src/ts/pages/settings.ts b/frontend/src/ts/pages/settings.ts
@@ -331,6 +331,11 @@ async function initGroups(): Promise<void> {
     UpdateConfig.setFontSize,
     "button"
   ) as SettingsGroup<SharedTypes.ConfigValue>;
+  groups["maxLineWidth"] = new SettingsGroup(
+    "maxLineWidth",
+    UpdateConfig.setMaxLineWidth,
+    "button"
+  ) as SettingsGroup<SharedTypes.ConfigValue>;
   groups["caretStyle"] = new SettingsGroup(
     "caretStyle",
     UpdateConfig.setCaretStyle,
@@ -657,6 +662,10 @@ async function fillSettingsPage(): Promise<void> {
     Config.fontSize
   );
 
+  $(".pageSettings .section[data-config-name='maxLineWidth'] input").val(
+    Config.maxLineWidth
+  );
+
   $(".pageSettings .section[data-config-name='customLayoutfluid'] input").val(
     Config.customLayoutfluid.replace(/#/g, " ")
   );
@@ -1212,6 +1221,59 @@ $(
   }
 });
 
+$(
+  ".pageSettings .section[data-config-name='maxLineWidth'] .inputAndButton button.save"
+).on("click", () => {
+  const didConfigSave = UpdateConfig.setMaxLineWidth(
+    parseFloat(
+      $(
+        ".pageSettings .section[data-config-name='maxLineWidth'] .inputAndButton input"
+      ).val() as string
+    )
+  );
+  if (didConfigSave) {
+    Notifications.add("Saved", 1, {
+      duration: 1,
+    });
+  }
+});
+
+$(
+  ".pageSettings .section[data-config-name='maxLineWidth'] .inputAndButton input"
+).on("focusout", () => {
+  const didConfigSave = UpdateConfig.setMaxLineWidth(
+    parseFloat(
+      $(
+        ".pageSettings .section[data-config-name='maxLineWidth'] .inputAndButton input"
+      ).val() as string
+    )
+  );
+  if (didConfigSave) {
+    Notifications.add("Saved", 1, {
+      duration: 1,
+    });
+  }
+});
+
+$(
+  ".pageSettings .section[data-config-name='maxLineWidth'] .inputAndButton input"
+).on("keypress", (e) => {
+  if (e.key === "Enter") {
+    const didConfigSave = UpdateConfig.setMaxLineWidth(
+      parseFloat(
+        $(
+          ".pageSettings .section[data-config-name='maxLineWidth'] .inputAndButton input"
+        ).val() as string
+      )
+    );
+    if (didConfigSave) {
+      Notifications.add("Saved", 1, {
+        duration: 1,
+      });
+    }
+  }
+});
+
 $(
   ".pageSettings .section[data-config-name='customLayoutfluid'] .inputAndButton button.save"
 ).on("click", () => {

diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts
@@ -1531,7 +1531,7 @@ ConfigEvent.subscribe((key, value) => {
   if (key === "tapeMode") {
     if (value === "off") {
       $("#typingTest").css({
-        "max-width": "70ch%",
+        "max-width": Config.maxLineWidth + "ch",
       });
       $("#miniTimerAndLiveWpm").css({
         "grid-column": "full-width-padding",
@@ -1545,4 +1545,11 @@ ConfigEvent.subscribe((key, value) => {
       });
     }
   }
+  if (key === "maxLineWidth") {
+    if (Config.tapeMode === "off") {
+      $("#typingTest").css({
+        "max-width": Config.maxLineWidth + "ch",
+      });
+    }
+  }
 });
diff --git a/shared-types/types.d.ts b/shared-types/types.d.ts
@@ -429,6 +429,7 @@ declare namespace SharedTypes {
     lazyMode: boolean;
     showAverage: SharedTypes.Config.ShowAverage;
     tapeMode: SharedTypes.Config.TapeMode;
+    maxLineWidth: number;
   }
 
   type ConfigValue = Config[keyof Config];