added react mode, fixed settings and command line

This commit is contained in:
Jack 2020-07-28 15:57:45 +01:00
parent 5b6358605c
commit e5a7c23c05
5 changed files with 282 additions and 93 deletions

View file

@ -669,7 +669,8 @@ a:hover {
}
&.outline {
@extend #caret, .block;
@extend #caret,
.block;
background: transparent;
border: 1px solid var(--caret-color);
}
@ -707,6 +708,7 @@ a:hover {
}
@keyframes caretFlash {
0%,
100% {
opacity: 0;
@ -1325,9 +1327,9 @@ key {
border-bottom: 2px solid var(--error-color);
text-shadow: 1px 0px 0px var(--bg-color),
// 2px 0px 0px var(--bg-color),
-1px 0px 0px var(--bg-color),
-1px 0px 0px var(--bg-color),
// -2px 0px 0px var(--bg-color),
0px 1px 0px var(--bg-color),
0px 1px 0px var(--bg-color),
1px 1px 0px var(--bg-color), -1px 1px 0px var(--bg-color);
}
@ -1417,7 +1419,7 @@ key {
height: 0;
display: none;
& ~ .customCheckbox {
&~.customCheckbox {
width: 12px;
height: 12px;
background: rgba(0, 0, 0, 0.1);
@ -1428,7 +1430,7 @@ key {
transition: 0.25s;
}
&:checked ~ .customCheckbox {
&:checked~.customCheckbox {
background: var(--main-color);
}
}
@ -1660,7 +1662,8 @@ key {
&.themes,
&.languages,
&.layouts {
&.layouts,
&.keymapLayout {
grid-template-columns: 1fr;
grid-template-areas:
"title"
@ -2079,22 +2082,70 @@ key {
justify-content: center;
white-space: nowrap;
height: 140px;
gap: .25rem;
}
.row {
height: 2rem;
gap: .25rem;
}
.keymap-key {
display: flex;
background-color: var(--bg-color);
color: var(--sub-color);
border-radius: 0.25rem;
border: 0.1rem solid var(--sub-color);
border-radius: var(--roundness);
border: 0.05rem solid;
border-color: var(--sub-color);
text-align: center;
justify-content: center;
align-items: center;
margin: 0.1rem;
width: 2rem;
height: 2rem;
.bump {
width: .75rem;
height: .05rem;
background: var(--sub-color);
position: absolute;
border-radius: var(--roundness);
margin-top: 1.5rem;
}
&.active-key {
color: var(--bg-color);
background-color: var(--main-color);
border-color: var(--main-color);
.bump {
background: var(--bg-color);
}
}
&#KeySpace {
width: 100%;
}
&.flash {
animation-name: flashKey;
animation-duration: 1s;
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
animation-fill-mode: forwards;
}
}
@keyframes flashKey {
from {
color: var(--bg-color);
background-color: var(--main-color);
border-color: var(--main-color);
}
to {
color: var(--sub-color);
background-color: var(--bg-color);
border-color: var(--sub-color);
}
}
.hidden-key {
@ -2114,22 +2165,15 @@ key {
.r3 {
display: grid;
grid-template-columns: 1.75fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1.75fr;
grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2fr;
}
.r4 {
display: grid;
grid-template-columns: 2.25fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2.75fr;
grid-template-columns: 2.5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2.5fr;
}
.r5 {
display: grid;
grid-template-columns: 1.25fr 1.25fr 1.25fr 6.25fr 1.25fr 1.25fr 1.25fr 1.25fr;
}
.active-key {
color: var(--bg-color);
background-color: var(--main-color);
border-radius: 0.25rem;
border: 0.1rem solid var(--main-color);
}
grid-template-columns: 4fr 7.5fr 4fr;
}

View file

@ -73,29 +73,6 @@ 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",
@ -246,6 +223,24 @@ let commands = {
showCommandLine();
},
},
{
id: "toggleKeymap",
display: "Change keymap mode...",
subgroup: true,
exec: () => {
currentCommands.push(commandsKeymapMode);
showCommandLine();
},
},
{
id: "changeKeymapLayout",
display: "Change keymap layout...",
subgroup: true,
exec: () => {
currentCommands.push(commandsKeymapLayouts);
showCommandLine();
},
},
{
id: "changeFontSize",
display: "Change font size...",
@ -265,6 +260,33 @@ let commands = {
],
};
let commandsKeymapMode = {
title: "Change keymap mode...",
list: [
{
id: "setKeymapModeOff",
display: "off",
exec: () => {
changeKeymapMode("off");
},
},
{
id: "setKeymapModeNext",
display: "next",
exec: () => {
changeKeymapMode("next");
},
},
{
id: "setKeymapModeReact",
display: "react",
exec: () => {
changeKeymapMode("react");
},
},
],
};
let commandsDifficulty = {
title: "Change difficulty...",
list: [

View file

@ -522,22 +522,26 @@ function showWords() {
.css("overflow", "hidden");
}
if ($(".active-key") != undefined) {
$(".active-key").removeClass("active-key");
}
// 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}`;
// var highlightKey = `#Key${currentKey}`;
$(highlightKey).addClass("active-key");
// $(highlightKey).addClass("active-key");
if (config.keymapMode === "next") {
updateHighlightedKeymapKey();
}
updateActiveElement();
updateCaretPosition();
if (config.keymap) {
if (config.keymap !== "off") {
changeKeymapLayout(config.keymapLayout);
}
}
@ -560,7 +564,7 @@ function updateActiveElement() {
// activeWordTop = $("#words .word.active").position().top;
activeWordTop = document.querySelector("#words .active").offsetTop;
updateHighlightedKey();
// updateHighlightedKeymapKey();
} catch (e) {}
}
@ -830,7 +834,89 @@ function showKeymap() {
$(".keymap").removeClass("hidden");
}
function updateHighlightedKey() {
function flashPressedKeymapKey(key, correct) {
// return;
// $(`#${key}`).css("animation", "none").removeClass("flash").addClass("flash");
// setTimeout((f) => {
// $(`#${key}`).removeClass("flash");
// }, 1000);
// from {
// color: var(--bg-color);
// background-color: var(--main-color);
// border-color: var(--main-color);
// }
// to {
// color: var(--sub-color);
// background-color: var(--bg-color);
// border-color: var(--sub-color);
// }
//move this outside!!!!!!!!!!!!!!!!!!!!
let mainColor = getComputedStyle(document.body)
.getPropertyValue("--main-color")
.replace(" ", "");
let subColor = getComputedStyle(document.body)
.getPropertyValue("--sub-color")
.replace(" ", "");
let bgColor = getComputedStyle(document.body)
.getPropertyValue("--bg-color")
.replace(" ", "");
let errorColor;
if (config.colorfulMode) {
errorColor = getComputedStyle(document.body)
.getPropertyValue("--colorful-error-color")
.replace(" ", "");
} else {
errorColor = getComputedStyle(document.body)
.getPropertyValue("--error-color")
.replace(" ", "");
}
if (key === "Space") {
key = "KeySpace";
}
if (correct) {
$(`#${key}`)
.stop(true, true)
.css({
color: bgColor,
backgroundColor: mainColor,
borderColor: mainColor,
})
.animate(
{
color: subColor,
backgroundColor: bgColor,
borderColor: subColor,
},
500,
"easeOutExpo"
);
} else {
$(`#${key}`)
.stop(true, true)
.css({
color: bgColor,
backgroundColor: errorColor,
borderColor: errorColor,
})
.animate(
{
color: subColor,
backgroundColor: bgColor,
borderColor: subColor,
},
500,
"easeOutExpo"
);
}
}
function updateHighlightedKeymapKey() {
// return;
if ($(".active-key") != undefined) {
$(".active-key").removeClass("active-key");
}
@ -1599,7 +1685,6 @@ function restartTest(withSameWordset = false) {
testActive = false;
hideLiveWpm();
hideTimer();
hideKeymap();
keypressPerSecond = [];
currentKeypressCount = 0;
errorsPerSecond = [];
@ -1685,7 +1770,7 @@ function restartTest(withSameWordset = false) {
currentInput = "";
showWords();
}
if (config.keymap) {
if (config.keymapMode !== "off") {
showKeymap();
}
$("#result").addClass("hidden");
@ -2607,7 +2692,11 @@ $(document).keypress(function (event) {
}
// console.timeEnd("offcheck2");
updateHighlightedKey();
if (config.keymapMode === "react") {
flashPressedKeymapKey(event.code, thisCharCorrect);
} else if (config.keymapMode === "next") {
updateHighlightedKeymapKey();
}
updateCaretPosition();
});
@ -2689,7 +2778,11 @@ $(document).keydown((event) => {
compareInput(null, currentInput, !config.blindMode);
}
// currentKeypressCount++;
updateHighlightedKey();
if (config.keymapMode === "react") {
flashPressedKeymapKey(event.code, true);
} else if (config.keymapMode === "next") {
updateHighlightedKeymapKey();
}
updateCaretPosition();
}
//space
@ -2749,7 +2842,6 @@ $(document).keydown((event) => {
inputHistory.push(currentInput);
currentInput = "";
currentWordIndex++;
updateHighlightedKey();
updateActiveElement();
updateCaretPosition();
currentKeypressCount++;
@ -2778,6 +2870,11 @@ $(document).keydown((event) => {
updateCaretPosition();
currentKeypressCount++;
}
if (config.keymapMode === "react") {
flashPressedKeymapKey(event.code, true);
} else if (config.keymapMode === "next") {
updateHighlightedKeymapKey();
}
if (
config.mode === "words" ||
config.mode === "custom" ||

View file

@ -34,7 +34,7 @@ function updateSettingsPage() {
);
});
let keymapEl = $(".pageSettings .section.keymap-layouts .buttons").empty();
let keymapEl = $(".pageSettings .section.keymapLayout .buttons").empty();
Object.keys(layouts).forEach((layout) => {
if (layout.toString() != "default") {
keymapEl.append(
@ -65,10 +65,9 @@ function updateSettingsPage() {
setSettingsButton("stopOnError", config.stopOnError);
setSettingsButton("showAllLines", config.showAllLines);
setActiveLayoutButton();
setActiveThemeButton();
setActiveLanguageButton();
setActiveLayoutButton();
setActiveKeymapLayoutButton();
setActiveFontSizeButton();
setActiveDifficultyButton();
setActiveCaretStyleButton();
@ -78,6 +77,9 @@ function updateSettingsPage() {
setActiveThemeTab();
setCustomThemeInputs();
setActiveKeymapModeButton();
setActiveKeymapLayoutButton();
updateDiscordSettingsSection();
if (config.showKeyTips) {
@ -215,6 +217,25 @@ function setCustomThemeInputs() {
});
}
function setActiveKeymapModeButton() {
$(`.pageSettings .section.keymapMode .button`).removeClass("active");
$(
`.pageSettings .section.keymapMode .button[keymapMode="${config.keymapMode}"]`
).addClass("active");
if (config.keymapMode === "off") {
$(".pageSettings .section.keymapLayout").addClass("hidden");
} else {
$(".pageSettings .section.keymapLayout").removeClass("hidden");
}
}
function setActiveKeymapLayoutButton() {
$(`.pageSettings .section.keymapLayout .layout`).removeClass("active");
$(
`.pageSettings .section.keymapLayout .layout[layout=${config.keymapLayout}]`
).addClass("active");
}
function setActiveLayoutButton() {
$(`.pageSettings .section.layouts .layout`).removeClass("active");
$(`.pageSettings .section.layouts .layout[layout=${config.layout}]`).addClass(
@ -222,13 +243,6 @@ 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");
$(
@ -469,35 +483,22 @@ $(".pageSettings .section.timerBar .buttons .button.off").click((e) => {
});
//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");
$(document).on("click", ".pageSettings .section.keymapMode .button", (e) => {
let mode = $(e.currentTarget).attr("keymapMode");
changeKeymapMode(mode);
restartTest();
setActiveKeymapModeButton();
setSettingsButton("liveWpm", config.showLiveWpm);
});
$(".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();
}
);
$(document).on("click", ".pageSettings .section.keymapLayout .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) => {

View file

@ -40,7 +40,7 @@ let defaultConfig = {
timerOpacity: "0.25",
stopOnError: false,
showAllLines: false,
keymap: false,
keymapMode: "off",
keymapLayout: "qwerty",
};
@ -138,6 +138,8 @@ function applyConfig(configObj) {
setTimerStyle(configObj.timerStyle, true);
setTimerColor(configObj.timerColor, true);
setTimerOpacity(configObj.timerOpacity, true);
changeKeymapMode(configObj.keymapMode, true);
changeKeymapLayout(configObj.keymapLayout, true);
if (
configObj.resultFilters == null ||
configObj.resultFilters == undefined
@ -539,6 +541,7 @@ function previewTheme(name) {
function setTheme(name, nosave) {
config.theme = name;
$(".keymap-key").attr("style", "");
$("#currentTheme").attr("href", `themes/${name}.css`);
setTimeout(() => {
updateFavicon(32, 14);
@ -671,6 +674,28 @@ function changeLayout(layout, nosave) {
if (!nosave) saveConfigToCookie();
}
function changeKeymapMode(mode, nosave) {
if (mode == null || mode == undefined) {
mode = "off";
}
if (mode === "off") {
hideKeymap();
} else {
showKeymap();
}
if (mode === "react") {
$(".active-key").removeClass("active-key");
}
if (mode === "next") {
$(".keymap-key").attr("style", "");
}
if (config.showLiveWpm) {
config.showLiveWpm = false;
}
config.keymapMode = mode;
if (!nosave) saveConfigToCookie();
}
function changeKeymapLayout(layout, nosave) {
if (layout == null || layout == undefined) {
layout = "qwerty";