diff --git a/public/js/commandline.js b/public/js/commandline.js
index 0f870ed73..37c859eb4 100644
--- a/public/js/commandline.js
+++ b/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 = {
diff --git a/public/js/fonts.json b/public/js/fonts.json
new file mode 100644
index 000000000..004b4fe18
--- /dev/null
+++ b/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"
+ }
+]
\ No newline at end of file
diff --git a/public/js/script.js b/public/js/script.js
index 235b60de3..02b61ee29 100644
--- a/public/js/script.js
+++ b/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(
diff --git a/public/js/settings.js b/public/js/settings.js
index e6e46e3d1..1133aa93d 100644
--- a/public/js/settings.js
+++ b/public/js/settings.js
@@ -56,6 +56,18 @@ function updateSettingsPage() {
);
});
+ let fontsEl = $(".pageSettings .section.fontFamily .buttons").empty();
+ fontsList.forEach((font) => {
+ fontsEl.append(
+ `
${
+ font.display !== undefined ? font.display : font.name
+ }
`
+ );
+ });
+
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",
diff --git a/public/js/userconfig.js b/public/js/userconfig.js
index 77e166c06..8b0e286cf 100644
--- a/public/js/userconfig.js
+++ b/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) {