From 0cd7b60fdff11352d3c943e158b543a8af9fa3c5 Mon Sep 17 00:00:00 2001 From: corey-b Date: Fri, 31 Jul 2020 21:53:04 -0400 Subject: [PATCH 1/7] added font customization --- public/css/style.scss | 5 +++-- public/index.html | 13 ++++++++++++- public/js/script.js | 8 ++++++-- 3 files changed, 21 insertions(+), 5 deletions(-) diff --git a/public/css/style.scss b/public/css/style.scss index 0b3986032..871a30710 100644 --- a/public/css/style.scss +++ b/public/css/style.scss @@ -1,4 +1,4 @@ -@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'); :root { --roundness: 0.25rem; @@ -1813,6 +1813,7 @@ key { &.languages, &.layouts, &.keymapLayout, + &.fontFamily, &.funbox { grid-template-columns: 1fr; grid-template-areas: @@ -2333,4 +2334,4 @@ key { .r5 { display: grid; grid-template-columns: 4fr 7.5fr 4fr; -} \ No newline at end of file +} diff --git a/public/index.html b/public/index.html index 07377c06f..d83051a35 100644 --- a/public/index.html +++ b/public/index.html @@ -1123,6 +1123,17 @@
+
+

font family

+
Change the font family for the site
+
+
Roboto Mono
+
Source Code Pro
+
IBM Plex Mono
+
Inconsolata
+
Fira Code
+
+

funbox

@@ -1636,4 +1647,4 @@ - \ No newline at end of file + diff --git a/public/js/script.js b/public/js/script.js index ba5b95353..fc92b8cc8 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( @@ -2734,6 +2734,10 @@ function hideCustomTextPopup() { } } +function changeFont(font_id) { + document.documentElement.style.setProperty('--font', font_id); +}; + $("#customTextPopupWrapper").click((e) => { if ($(e.target).attr("id") === "customTextPopupWrapper") { hideCustomTextPopup(); From 4ff4d94ffac9f73825a2736112e7a571b0c1cf09 Mon Sep 17 00:00:00 2001 From: Jack Date: Sat, 1 Aug 2020 14:25:14 +0100 Subject: [PATCH 2/7] made sure font family is saved to the database made sure the buttons work the same way as others --- public/index.html | 17 +++++++++++------ public/js/script.js | 4 ---- public/js/settings.js | 17 ++++++++++++++++- public/js/userconfig.js | 11 +++++++++++ 4 files changed, 38 insertions(+), 11 deletions(-) diff --git a/public/index.html b/public/index.html index d83051a35..91c44b18f 100644 --- a/public/index.html +++ b/public/index.html @@ -1127,11 +1127,16 @@

font family

Change the font family for the site
-
Roboto Mono
-
Source Code Pro
-
IBM Plex Mono
-
Inconsolata
-
Fira Code
+
Roboto Mono
+
Source Code Pro
+
IBM Plex Mono
+
Inconsolata
+
Fira Code
@@ -1647,4 +1652,4 @@ - + \ No newline at end of file diff --git a/public/js/script.js b/public/js/script.js index fc92b8cc8..baab9ff2d 100644 --- a/public/js/script.js +++ b/public/js/script.js @@ -2734,10 +2734,6 @@ function hideCustomTextPopup() { } } -function changeFont(font_id) { - document.documentElement.style.setProperty('--font', font_id); -}; - $("#customTextPopupWrapper").click((e) => { if ($(e.target).attr("id") === "customTextPopupWrapper") { hideCustomTextPopup(); diff --git a/public/js/settings.js b/public/js/settings.js index e6e46e3d1..9d9ade687 100644 --- a/public/js/settings.js +++ b/public/js/settings.js @@ -87,7 +87,7 @@ function updateSettingsPage() { setActiveThemeTab(); setCustomThemeInputs(); setActiveConfidenceModeButton(); - + setActiveFontFamilyButton(); setActiveKeymapModeButton(); setActiveKeymapLayoutButton(); @@ -462,6 +462,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 +806,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 7fdfe4866..7da96c0e1 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; @@ -491,6 +492,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) { From a65b9b3392a613b57176d15a5fe0021a9c729db4 Mon Sep 17 00:00:00 2001 From: Jack Date: Sat, 1 Aug 2020 14:33:42 +0100 Subject: [PATCH 3/7] added more fonts --- public/css/style.scss | 5 +++- public/index.html | 60 ++++++++++++++++++++++++------------------- 2 files changed, 38 insertions(+), 27 deletions(-) diff --git a/public/css/style.scss b/public/css/style.scss index 871a30710..311ea6e3d 100644 --- a/public/css/style.scss +++ b/public/css/style.scss @@ -1,4 +1,7 @@ @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; @@ -2334,4 +2337,4 @@ key { .r5 { display: grid; grid-template-columns: 4fr 7.5fr 4fr; -} +} \ No newline at end of file diff --git a/public/index.html b/public/index.html index 91c44b18f..94ad6f4bb 100644 --- a/public/index.html +++ b/public/index.html @@ -1123,22 +1123,6 @@
-
-

font family

-
Change the font family for the site
-
-
Roboto Mono
-
Source Code Pro
-
IBM Plex Mono
-
Inconsolata
-
Fira Code
-
-

funbox

@@ -1220,6 +1204,40 @@
+
+

font size

+
Change the font size of the test words.
+
+
1
+
1.25
+
1.5
+
2
+
+
+
+

font family

+ +
+
Roboto Mono
+
Source Code Pro
+
IBM Plex Mono
+
Inconsolata
+
Fira Code
+
+ Roboto
+
Montserrat
+
Titillium Web
+
Lexend Deca
+
+

flip test colors

By default, typed text is brighter than the future text. When enabled, the colors will be @@ -1242,16 +1260,6 @@
on
-
-

font size

-
Change the font size of the test words.
-
-
1
-
1.25
-
1.5
-
2
-
-

randomise theme

From 091db7315ac8b9223cff3c94cbcaf8b00df6fc02 Mon Sep 17 00:00:00 2001 From: Jack Date: Sat, 1 Aug 2020 14:40:52 +0100 Subject: [PATCH 4/7] moved fonts to another file --- public/index.html | 19 +------------------ public/js/commandline.js | 11 +++++++++++ public/js/fonts.json | 28 ++++++++++++++++++++++++++++ public/js/settings.js | 10 ++++++++++ 4 files changed, 50 insertions(+), 18 deletions(-) create mode 100644 public/js/fonts.json diff --git a/public/index.html b/public/index.html index 94ad6f4bb..218f99297 100644 --- a/public/index.html +++ b/public/index.html @@ -1218,24 +1218,7 @@

font family

-
Roboto Mono
-
Source Code Pro
-
IBM Plex Mono
-
Inconsolata
-
Fira Code
-
- Roboto
-
Montserrat
-
Titillium Web
-
Lexend Deca
+
diff --git a/public/js/commandline.js b/public/js/commandline.js index 0f870ed73..24d3e9186 100644 --- a/public/js/commandline.js +++ b/public/js/commandline.js @@ -706,6 +706,17 @@ $.getJSON("funbox/list.json", function (data) { }); }); +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; + }); +}); + let commandsThemes = { title: "Change theme...", list: [ diff --git a/public/js/fonts.json b/public/js/fonts.json new file mode 100644 index 000000000..fa6c9b0a3 --- /dev/null +++ b/public/js/fonts.json @@ -0,0 +1,28 @@ +[{ + "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" + } +] \ No newline at end of file diff --git a/public/js/settings.js b/public/js/settings.js index 9d9ade687..335da3414 100644 --- a/public/js/settings.js +++ b/public/js/settings.js @@ -56,6 +56,16 @@ function updateSettingsPage() { ); }); + let fontsEl = $(".pageSettings .section.fontFamily .buttons").empty(); + fontsList.forEach((font) => { + fontsEl.append( + `
${font.name}
` + ); + }); + refreshTagsSettingsSection(); setSettingsButton("smoothCaret", config.smoothCaret); From 63f9b3245895d24e24a35f2811a2839525fb16b4 Mon Sep 17 00:00:00 2001 From: Jack Date: Sat, 1 Aug 2020 14:44:59 +0100 Subject: [PATCH 5/7] added fonts to the command line --- public/js/commandline.js | 30 ++++++++++++++++++++++++------ 1 file changed, 24 insertions(+), 6 deletions(-) diff --git a/public/js/commandline.js b/public/js/commandline.js index 24d3e9186..b4b751028 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,6 +715,11 @@ $.getJSON("funbox/list.json", function (data) { }); }); +let commandsFonts = { + title: "Change font...", + list: [], +}; + let fontsList; $.getJSON("js/fonts.json", function (data) { @@ -715,16 +729,20 @@ $.getJSON("js/fonts.json", function (data) { if (nameA > nameB) return 1; return 0; }); + data.forEach((font) => { + commandsFonts.list.push({ + id: "changeFont" + font.name.replace(/ /g, "_"), + 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 = { From 4938a5a044c7b744eefd25f40980b3ef0fc33961 Mon Sep 17 00:00:00 2001 From: Jack Date: Sat, 1 Aug 2020 14:46:42 +0100 Subject: [PATCH 6/7] loading font from db --- public/js/userconfig.js | 1 + 1 file changed, 1 insertion(+) diff --git a/public/js/userconfig.js b/public/js/userconfig.js index 7da96c0e1..a141ee460 100644 --- a/public/js/userconfig.js +++ b/public/js/userconfig.js @@ -141,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 From ca4d2b357579111e22f93a8eb8265f1816b51b1b Mon Sep 17 00:00:00 2001 From: Jack Date: Sat, 1 Aug 2020 14:53:59 +0100 Subject: [PATCH 7/7] added more fonts --- public/js/commandline.js | 2 +- public/js/fonts.json | 4 ++++ public/js/settings.js | 6 ++++-- 3 files changed, 9 insertions(+), 3 deletions(-) diff --git a/public/js/commandline.js b/public/js/commandline.js index b4b751028..37c859eb4 100644 --- a/public/js/commandline.js +++ b/public/js/commandline.js @@ -732,7 +732,7 @@ $.getJSON("js/fonts.json", function (data) { data.forEach((font) => { commandsFonts.list.push({ id: "changeFont" + font.name.replace(/ /g, "_"), - display: font.name, + display: font.display !== undefined ? font.display : font.name, exec: () => { setFontFamily(font.name); }, diff --git a/public/js/fonts.json b/public/js/fonts.json index fa6c9b0a3..004b4fe18 100644 --- a/public/js/fonts.json +++ b/public/js/fonts.json @@ -24,5 +24,9 @@ }, { "name": "Lexend Deca" + }, + { + "name": "Comic Sans MS", + "display": "Helvetica" } ] \ No newline at end of file diff --git a/public/js/settings.js b/public/js/settings.js index 335da3414..1133aa93d 100644 --- a/public/js/settings.js +++ b/public/js/settings.js @@ -60,9 +60,11 @@ function updateSettingsPage() { fontsList.forEach((font) => { fontsEl.append( `
${font.name}
` + onclick="this.blur();">${ + font.display !== undefined ? font.display : font.name + }
` ); });