mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2025-10-28 09:52:36 +08:00
added react mode, fixed settings and command line
This commit is contained in:
Jack
parent
5b6358605c
commit
e5a7c23c05
5 changed files with 282 additions and 93 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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: [
|
||||
|
|
|
|||
|
|
@ -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" ||
|
||||
|
|
|
|||
|
|
@ -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) => {
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue