Merge pull request #223 from corey-b:master

added font customization

public/css/style.scss

@@ -1,4 +1,7 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Fira+Code&family=IBM+Plex+Mono&family=Inconsolata&family=Roboto+Mono&family=Source+Code+Pro&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Roboto&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Titillium+Web&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap');
 
 :root {
   --roundness: 0.25rem;
@@ -1813,6 +1816,7 @@ key {
     &.languages,
     &.layouts,
     &.keymapLayout,
+    &.fontFamily,
     &.funbox {
       grid-template-columns: 1fr;
       grid-template-areas:

public/index.html

@@ -1204,6 +1204,23 @@
           <div class="buttons">
           </div>
         </div>
+        <div class="section fontSize">
+          <h1>font size</h1>
+          <div class="text">Change the font size of the test words.</div>
+          <div class="buttons">
+            <div class="button" fontsize="1" tabindex="0" onclick="this.blur();">1</div>
+            <div class="button" fontsize="125" tabindex="0" onclick="this.blur();">1.25</div>
+            <div class="button" fontsize="15" tabindex="0" onclick="this.blur();">1.5</div>
+            <div class="button" fontsize="2" tabindex="0" onclick="this.blur();">2</div>
+          </div>
+        </div>
+        <div class="section fontFamily">
+          <h1>font family</h1>
+          <!-- <div class="text">Change the font family for the site</div> -->
+          <div class="buttons">
+
+          </div>
+        </div>
         <div class="section flipTestColors">
           <h1>flip test colors</h1>
           <div class="text">By default, typed text is brighter than the future text. When enabled, the colors will be
@@ -1226,16 +1243,6 @@
             <div class="button on" tabindex="0" onclick="this.blur();">on</div>
           </div>
         </div>
-        <div class="section fontSize">
-          <h1>font size</h1>
-          <div class="text">Change the font size of the test words.</div>
-          <div class="buttons">
-            <div class="button" fontsize="1" tabindex="0" onclick="this.blur();">1</div>
-            <div class="button" fontsize="125" tabindex="0" onclick="this.blur();">1.25</div>
-            <div class="button" fontsize="15" tabindex="0" onclick="this.blur();">1.5</div>
-            <div class="button" fontsize="2" tabindex="0" onclick="this.blur();">2</div>
-          </div>
-        </div>
         <div class="section randomTheme">
           <h1>randomise theme</h1>
           <div class="text">

public/js/commandline.js

@@ -259,6 +259,15 @@ let commands = {
         showCommandLine();
       },
     },
+    {
+      id: "changeFontFamily",
+      display: "Change font family...",
+      subgroup: true,
+      exec: () => {
+        currentCommands.push(commandsFonts);
+        showCommandLine();
+      },
+    },
     {
       id: "joinDiscord",
       display: "Join the Discord server",
@@ -706,14 +715,34 @@ $.getJSON("funbox/list.json", function (data) {
   });
 });
 
+let commandsFonts = {
+  title: "Change font...",
+  list: [],
+};
+
+let fontsList;
+
+$.getJSON("js/fonts.json", function (data) {
+  fontsList = data.sort(function (a, b) {
+    (nameA = a.name.toLowerCase()), (nameB = b.name.toLowerCase());
+    if (nameA < nameB) return -1;
+    if (nameA > nameB) return 1;
+    return 0;
+  });
+  data.forEach((font) => {
+    commandsFonts.list.push({
+      id: "changeFont" + font.name.replace(/ /g, "_"),
+      display: font.display !== undefined ? font.display : font.name,
+      exec: () => {
+        setFontFamily(font.name);
+      },
+    });
+  });
+});
+
 let commandsThemes = {
   title: "Change theme...",
-  list: [
-    {
-      id: "couldnotload",
-      display: "Could not load the themes list :(",
-    },
-  ],
+  list: [],
 };
 
 let commandsLanguages = {

public/js/fonts.json

@@ -0,0 +1,32 @@
+[{
+    "name": "Roboto Mono"
+  },
+  {
+    "name": "Source Code Pro"
+  },
+  {
+    "name": "IBM Plex Mono"
+  },
+  {
+    "name": "Inconsolata"
+  },
+  {
+    "name": "Fira Code"
+  },
+  {
+    "name": "Roboto"
+  },
+  {
+    "name": "Montserrat"
+  },
+  {
+    "name": "Titillium Web"
+  },
+  {
+    "name": "Lexend Deca"
+  },
+  {
+    "name": "Comic Sans MS",
+    "display": "Helvetica"
+  }
+]

public/js/script.js

@@ -295,9 +295,9 @@ function verifyUsername() {
 
   $(".nameChangeMessage").click((e) => {
     alert(`Im currently preparing the system to be ready for leaderboards and other awesome features - it looks like you need to change your display name.
-    
+
     It either contains special characters, or your display name is the same as someone elses and your account was made later.
-    
+
     Sorry for this inconvenience.
     `);
     let newName = prompt(

public/js/settings.js

@@ -56,6 +56,18 @@ function updateSettingsPage() {
     );
   });
 
+  let fontsEl = $(".pageSettings .section.fontFamily .buttons").empty();
+  fontsList.forEach((font) => {
+    fontsEl.append(
+      `<div class="button" style="font-family:${
+        font.display !== undefined ? font.display : font.name
+      }" fontFamily="${font.name.replace(/ /g, "_")}" tabindex="0"
+      onclick="this.blur();">${
+        font.display !== undefined ? font.display : font.name
+      }</div>`
+    );
+  });
+
   refreshTagsSettingsSection();
 
   setSettingsButton("smoothCaret", config.smoothCaret);
@@ -87,7 +99,7 @@ function updateSettingsPage() {
   setActiveThemeTab();
   setCustomThemeInputs();
   setActiveConfidenceModeButton();
-
+  setActiveFontFamilyButton();
   setActiveKeymapModeButton();
   setActiveKeymapLayoutButton();
 
@@ -462,6 +474,14 @@ function setActiveConfidenceModeButton() {
   }
 }
 
+function setActiveFontFamilyButton() {
+  let font = config.fontFamily;
+  $(".pageSettings .section.fontFamily .buttons .button").removeClass("active");
+  $(
+    `.pageSettings .section.fontFamily .buttons .button[fontFamily='${font}']`
+  ).addClass("active");
+}
+
 //smooth caret
 $(".pageSettings .section.smoothCaret .buttons .button.on").click((e) => {
   setSmoothCaret(true);
@@ -798,6 +818,13 @@ $(document).on("click", ".pageSettings .section.funbox .button", (e) => {
   setActiveFunboxButton();
 });
 
+//fontfamily
+$(document).on("click", ".pageSettings .section.fontFamily .button", (e) => {
+  let font = $(e.currentTarget).attr("fontFamily");
+  setFontFamily(font);
+  setActiveFontFamilyButton();
+});
+
 //tags
 $(document).on(
   "click",

public/js/userconfig.js

@@ -42,6 +42,7 @@ let defaultConfig = {
   showAllLines: false,
   keymapMode: "off",
   keymapLayout: "qwerty",
+  fontFamily: "Roboto_Mono",
 };
 
 let cookieConfig = null;
@@ -140,6 +141,7 @@ function applyConfig(configObj) {
     setTimerOpacity(configObj.timerOpacity, true);
     changeKeymapMode(configObj.keymapMode, true);
     changeKeymapLayout(configObj.keymapLayout, true);
+    setFontFamily(configObj.fontFamily, true);
     if (
       configObj.resultFilters == null ||
       configObj.resultFilters == undefined
@@ -491,6 +493,16 @@ function togglePunctuation() {
   saveConfigToCookie();
 }
 
+//font family
+function setFontFamily(font, nosave) {
+  if (font == undefined) {
+    font = "Roboto_Mono";
+  }
+  config.fontFamily = font;
+  document.documentElement.style.setProperty("--font", font.replace(/_/g, " "));
+  if (!nosave) saveConfigToCookie();
+}
+
 //freedom
 function setFreedomMode(freedom, nosave) {
   if (freedom == null) {