key tips
Shows the keybind tips at the bottom of the page.
diff --git a/public/js/commandline.js b/public/js/commandline.js
index 895fd124c..c8f4a8bc8 100644
--- a/public/js/commandline.js
+++ b/public/js/commandline.js
@@ -73,6 +73,29 @@ let commands = {
saveConfigToCookie();
},
},
+ {
+ id: "toggleKeymap",
+ display: "Toggle keymap display",
+ exec: () => {
+ config.keymap = !config.keymap;
+ console.log(`keymap ${config.keymap}`);
+ if (config.keymap) {
+ showKeymap();
+ } else {
+ hideKeymap();
+ }
+ saveConfigToCookie();
+ },
+ },
+ {
+ id: "changeKeymapLayout",
+ display: "Change keymap layout...",
+ subgroup: true,
+ exec: () => {
+ currentCommands.push(commandsKeymapLayouts);
+ showCommandLine();
+ },
+ },
{
id: "toggleTimerBar",
display: "Toggle timer display",
@@ -686,6 +709,33 @@ if (Object.keys(layouts).length > 0) {
});
}
+let commandsKeymapLayouts = {
+ title: "Change keymap layout...",
+ list: [
+ {
+ id: "couldnotload",
+ display: "Could not load the layouts list :(",
+ },
+ ],
+};
+
+if (Object.keys(layouts).length > 0) {
+ commandsKeymapLayouts.list = [];
+ Object.keys(layouts).forEach((layout) => {
+ if (layout.toString() != "default") {
+ commandsKeymapLayouts.list.push({
+ id: "changeLayout" + capitalizeFirstLetter(layout),
+ display: layout.replace("_", " "),
+ exec: () => {
+ changeKeymapLayout(layout);
+ restartTest();
+ saveConfigToCookie();
+ },
+ });
+ }
+ });
+}
+
$("#commandLine input").keyup((e) => {
if (e.keyCode == 38 || e.keyCode == 40 || e.keyCode == 13) return;
updateSuggestedCommands();
diff --git a/public/js/script.js b/public/js/script.js
index fe9efab5c..a37733227 100644
--- a/public/js/script.js
+++ b/public/js/script.js
@@ -522,8 +522,24 @@ function showWords() {
.css("overflow", "hidden");
}
+ if ($(".active-key") != undefined) {
+ $(".active-key").removeClass("active-key");
+ }
+
+ var currentKey = wordsList[currentWordIndex]
+ .substring(currentInput.length, currentInput.length + 1)
+ .toString()
+ .toUpperCase();
+
+ var highlightKey = `#Key${currentKey}`;
+
+ $(highlightKey).addClass("active-key");
+
updateActiveElement();
updateCaretPosition();
+ if (config.keymap) {
+ changeKeymapLayout(config.keymapLayout);
+ }
}
function updateActiveElement() {
@@ -544,6 +560,7 @@ function updateActiveElement() {
// activeWordTop = $("#words .word.active").position().top;
activeWordTop = document.querySelector("#words .active").offsetTop;
+ updateHighlightedKey();
} catch (e) {}
}
@@ -805,6 +822,67 @@ function startCaretAnimation() {
$("#caret").css("animation-name", "caretFlash");
}
+function hideKeymap() {
+ $(".keymap").addClass("hidden");
+}
+
+function showKeymap() {
+ $(".keymap").removeClass("hidden");
+}
+
+function updateHighlightedKey() {
+ if ($(".active-key") != undefined) {
+ $(".active-key").removeClass("active-key");
+ }
+
+ var currentKey = wordsList[currentWordIndex]
+ .substring(currentInput.length, currentInput.length + 1)
+ .toString()
+ .toUpperCase();
+
+ switch (currentKey) {
+ case "\\":
+ case "|":
+ var highlightKey = "#KeyBackslash";
+ break;
+ case "}":
+ case "]":
+ var highlightKey = "#KeyRightBracket";
+ break;
+ case "{":
+ case "[":
+ var highlightKey = "#KeyLeftBracket";
+ break;
+ case '"':
+ case "'":
+ var highlightKey = "#KeyQuote";
+ break;
+ case ":":
+ case ";":
+ var highlightKey = "#KeySemicolon";
+ break;
+ case "<":
+ case ",":
+ var highlightKey = "#KeyComma";
+ break;
+ case ">":
+ case ".":
+ var highlightKey = "#KeyPeriod";
+ break;
+ case "?":
+ case "/":
+ var highlightKey = "#KeySlash";
+ break;
+ case "":
+ var highlightKey = "#KeySpace";
+ break;
+ default:
+ var highlightKey = `#Key${currentKey}`;
+ }
+
+ $(highlightKey).addClass("active-key");
+}
+
function updateCaretPosition() {
// return;
if ($("#words").hasClass("hidden")) return;
@@ -996,6 +1074,7 @@ function showResult(difficultyFailed = false) {
hideCaret();
hideLiveWpm();
hideTimer();
+ hideKeymap();
testInvalid = false;
let stats = calculateStats();
if (stats === undefined) {
@@ -1520,6 +1599,7 @@ function restartTest(withSameWordset = false) {
testActive = false;
hideLiveWpm();
hideTimer();
+ hideKeymap();
keypressPerSecond = [];
currentKeypressCount = 0;
errorsPerSecond = [];
@@ -1605,6 +1685,9 @@ function restartTest(withSameWordset = false) {
currentInput = "";
showWords();
}
+ if (config.keymap) {
+ showKeymap();
+ }
$("#result").addClass("hidden");
$("#testModesNotice").css({
opacity: 1,
@@ -1657,6 +1740,7 @@ function restartTest(withSameWordset = false) {
);
}
);
+ // $(".active-key").classList.remove("active-key");
}
function focusWords() {
@@ -2522,6 +2606,8 @@ $(document).keypress(function (event) {
activeWordJumped = true;
}
// console.timeEnd("offcheck2");
+
+ updateHighlightedKey();
updateCaretPosition();
});
@@ -2603,6 +2689,7 @@ $(document).keydown((event) => {
compareInput(null, currentInput, !config.blindMode);
}
// currentKeypressCount++;
+ updateHighlightedKey();
updateCaretPosition();
}
//space
@@ -2662,6 +2749,7 @@ $(document).keydown((event) => {
inputHistory.push(currentInput);
currentInput = "";
currentWordIndex++;
+ updateHighlightedKey();
updateActiveElement();
updateCaretPosition();
currentKeypressCount++;
diff --git a/public/js/settings.js b/public/js/settings.js
index 7aa6634cc..7002d07fb 100644
--- a/public/js/settings.js
+++ b/public/js/settings.js
@@ -34,12 +34,25 @@ function updateSettingsPage() {
);
});
+ let keymapEl = $(".pageSettings .section.keymap-layouts .buttons").empty();
+ Object.keys(layouts).forEach((layout) => {
+ if (layout.toString() != "default") {
+ keymapEl.append(
+ `
${layout.replace(
+ "_",
+ " "
+ )}
`
+ );
+ }
+ });
+
refreshTagsSettingsSection();
setSettingsButton("smoothCaret", config.smoothCaret);
setSettingsButton("quickTab", config.quickTab);
setSettingsButton("liveWpm", config.showLiveWpm);
setSettingsButton("timerBar", config.showTimerBar);
+ setSettingsButton("keymap-toggle", config.keymap);
setSettingsButton("keyTips", config.showKeyTips);
setSettingsButton("freedomMode", config.freedomMode);
setSettingsButton("blindMode", config.blindMode);
@@ -55,6 +68,7 @@ function updateSettingsPage() {
setActiveThemeButton();
setActiveLanguageButton();
setActiveLayoutButton();
+ setActiveKeymapLayoutButton();
setActiveFontSizeButton();
setActiveDifficultyButton();
setActiveCaretStyleButton();
@@ -208,6 +222,13 @@ function setActiveLayoutButton() {
);
}
+function setActiveKeymapLayoutButton() {
+ $(`.pageSettings .section.keymap-layouts .layout`).removeClass("active");
+ $(
+ `.pageSettings .section.keymap-layouts .layout[layout=${config.keymapLayout}]`
+ ).addClass("active");
+}
+
function setActiveFontSizeButton() {
$(`.pageSettings .section.fontSize .buttons .button`).removeClass("active");
$(
@@ -447,6 +468,37 @@ $(".pageSettings .section.timerBar .buttons .button.off").click((e) => {
setSettingsButton("timerBar", config.showTimerBar);
});
+//keymap
+$(".pageSettings .section.keymap-toggle .buttons .button.on").click((e) => {
+ config.keymap = true;
+ saveConfigToCookie();
+ // showNotification('Keymap on', 1000);
+ setSettingsButton("keymap-toggle", config.keymap);
+ $(".keymap-layouts").removeClass("hidden");
+});
+$(".pageSettings .section.keymap-toggle .buttons .button.off").click((e) => {
+ config.keymap = false;
+ saveConfigToCookie();
+ // showNotification('Keymap off', 1000);
+ setSettingsButton("keymap-toggle", config.keymap);
+ $(".keymap-layouts").addClass("hidden");
+});
+
+if (config.keymap) $(".keymap-layouts").removeClass("hidden");
+
+//keymap layouts
+$(document).on(
+ "click",
+ ".pageSettings .section.keymap-layouts .layout",
+ (e) => {
+ let layout = $(e.currentTarget).attr("layout");
+ changeKeymapLayout(layout);
+ // showNotification('Keymap Layout changed', 1000);
+ restartTest();
+ setActiveKeymapLayoutButton();
+ }
+);
+
//freedom mode
$(".pageSettings .section.freedomMode .buttons .button.on").click((e) => {
setFreedomMode(true);
diff --git a/public/js/userconfig.js b/public/js/userconfig.js
index 005e1134d..5f0d28e40 100644
--- a/public/js/userconfig.js
+++ b/public/js/userconfig.js
@@ -40,6 +40,8 @@ let defaultConfig = {
timerOpacity: "0.25",
stopOnError: false,
showAllLines: false,
+ keymap: false,
+ keymapLayout: "qwerty",
};
let cookieConfig = null;
@@ -669,6 +671,78 @@ function changeLayout(layout, nosave) {
if (!nosave) saveConfigToCookie();
}
+function changeKeymapLayout(layout, nosave) {
+ if (layout == null || layout == undefined) {
+ layout = "qwerty";
+ }
+ config.keymapLayout = layout;
+ if (!nosave) saveConfigToCookie();
+ // layouts[layout].forEach((x) => {
+ // console.log(x);
+ // });
+
+ var toReplace = layouts[layout].slice(13, 47);
+ var _ = toReplace.splice(12, 1);
+ var count = 0;
+
+ $(".letter")
+ .map(function () {
+ if (
+ !this.parentElement.classList.contains("hidden-key") &&
+ !this.classList.contains("hidden-key")
+ ) {
+ if (count < toReplace.length) {
+ var key = toReplace[count].charAt(0);
+ this.innerHTML = key;
+
+ switch (key) {
+ case "\\":
+ case "|":
+ this.parentElement.id = "KeyBackslash";
+ break;
+ case "}":
+ case "]":
+ this.parentElement.id = "KeyRightBracket";
+ break;
+ case "{":
+ case "[":
+ this.parentElement.id = "KeyLeftBracket";
+ break;
+ case '"':
+ case "'":
+ this.parentElement.id = "KeyQuote";
+ break;
+ case ":":
+ case ";":
+ this.parentElement.id = "KeySemicolon";
+ break;
+ case "<":
+ case ",":
+ this.parentElement.id = "KeyComma";
+ break;
+ case ">":
+ case ".":
+ this.parentElement.id = "KeyPeriod";
+ break;
+ case "?":
+ case "/":
+ this.parentElement.id = "KeySlash";
+ break;
+ case "":
+ this.parentElement.id = "KeySpace";
+ break;
+ default:
+ this.parentElement.id = `Key${key.toUpperCase()}`;
+ }
+ }
+ count++;
+ }
+ })
+ .get();
+
+ // console.log(all.join());
+}
+
function changeFontSize(fontSize, nosave) {
if (fontSize == null || fontSize == undefined) {
fontSize = 1;