mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2025-09-10 00:33:39 +08:00
impr(test config): allow keyboard navigation (@Truiteseche) (#5528)
This commit is contained in:
Truite Séchée
GitHub
parent
5ef6da0618
commit
cf855bd48d
5 changed files with 99 additions and 91 deletions
|
|
@ -2,88 +2,94 @@
|
|||
<div id="testConfig" class="full-width">
|
||||
<div class="row">
|
||||
<div class="puncAndNum">
|
||||
<div class="textButton punctuationMode">
|
||||
<button class="textButton punctuationMode">
|
||||
<i class="fas fa-fw fa-at"></i>
|
||||
punctuation
|
||||
</div>
|
||||
<div class="textButton numbersMode">
|
||||
</button>
|
||||
<button class="textButton numbersMode">
|
||||
<i class="fas fa-fw fa-hashtag"></i>
|
||||
numbers
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="spacer leftSpacer"></div>
|
||||
|
||||
<div class="mode">
|
||||
<div class="textButton" mode="time">
|
||||
<button class="textButton" mode="time">
|
||||
<i class="fas fa-fw fa-clock"></i>
|
||||
time
|
||||
</div>
|
||||
<div class="textButton" mode="words">
|
||||
</button>
|
||||
<button class="textButton" mode="words">
|
||||
<i class="fas fa-fw fa-font"></i>
|
||||
words
|
||||
</div>
|
||||
<div class="textButton" mode="quote">
|
||||
</button>
|
||||
<button class="textButton" mode="quote">
|
||||
<i class="fas fa-fw fa-quote-left"></i>
|
||||
quote
|
||||
</div>
|
||||
<div class="textButton" mode="zen">
|
||||
</button>
|
||||
<button class="textButton" mode="zen">
|
||||
<i class="fas fa-fw fa-mountain"></i>
|
||||
zen
|
||||
</div>
|
||||
<div class="textButton" mode="custom">
|
||||
</button>
|
||||
<button class="textButton" mode="custom">
|
||||
<i class="fas fa-fw fa-wrench"></i>
|
||||
custom
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="spacer rightSpacer"></div>
|
||||
|
||||
<div class="time">
|
||||
<div class="textButton" timeConfig="15"><span>15</span></div>
|
||||
<div class="textButton" timeConfig="30"><span>30</span></div>
|
||||
<div class="textButton" timeConfig="60"><span>60</span></div>
|
||||
<div class="textButton" timeConfig="120"><span>120</span></div>
|
||||
<div class="textButton" timeConfig="custom">
|
||||
<button class="textButton" timeConfig="15"><span>15</span></button>
|
||||
<button class="textButton" timeConfig="30"><span>30</span></button>
|
||||
<button class="textButton" timeConfig="60"><span>60</span></button>
|
||||
<button class="textButton" timeConfig="120"><span>120</span></button>
|
||||
<button class="textButton" timeConfig="custom">
|
||||
<i class="fas fa-fw fa-tools"></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="wordCount">
|
||||
<div class="textButton" wordCount="10"><span>10</span></div>
|
||||
<div class="textButton" wordCount="25"><span>25</span></div>
|
||||
<div class="textButton" wordCount="50"><span>50</span></div>
|
||||
<div class="textButton" wordCount="100"><span>100</span></div>
|
||||
<div class="textButton" wordCount="custom">
|
||||
<button class="textButton" wordCount="10"><span>10</span></button>
|
||||
<button class="textButton" wordCount="25"><span>25</span></button>
|
||||
<button class="textButton" wordCount="50"><span>50</span></button>
|
||||
<button class="textButton" wordCount="100"><span>100</span></button>
|
||||
<button class="textButton" wordCount="custom">
|
||||
<i class="fas fa-fw fa-tools"></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="quoteLength">
|
||||
<div class="textButton" quotelength="-1">all</div>
|
||||
<div class="textButton" quotelength="0">short</div>
|
||||
<div class="textButton" quotelength="1">medium</div>
|
||||
<div class="textButton" quotelength="2">long</div>
|
||||
<div class="textButton" quotelength="3">thicc</div>
|
||||
<div class="textButton favorite hidden" quotelength="-3">
|
||||
<button class="textButton" quotelength="-1">all</button>
|
||||
<button class="textButton" quotelength="0">short</button>
|
||||
<button class="textButton" quotelength="1">medium</button>
|
||||
<button class="textButton" quotelength="2">long</button>
|
||||
<button class="textButton" quotelength="3">thicc</button>
|
||||
<button class="textButton favorite hidden" quotelength="-3">
|
||||
<i class="fas fa-heart"></i>
|
||||
</div>
|
||||
<div class="textButton" quotelength="-2">
|
||||
</button>
|
||||
<button class="textButton" quotelength="-2">
|
||||
<i class="fas fa-search"></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="zen">
|
||||
<div
|
||||
class="textButton"
|
||||
style="width: 0; padding-left: 0; padding-right: 0"
|
||||
style="
|
||||
width: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
"
|
||||
>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="customText">
|
||||
<div class="textButton">change</div>
|
||||
<button class="textButton">change</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -309,7 +315,7 @@
|
|||
<div id="resultWordsHistory" class="hidden">
|
||||
<div class="title">
|
||||
<span>input history</span>
|
||||
<span
|
||||
<button
|
||||
id="copyWordsListButton"
|
||||
class="textButton"
|
||||
aria-label="Copy words list"
|
||||
|
|
@ -317,16 +323,16 @@
|
|||
style="display: inline-block"
|
||||
>
|
||||
<i class="fas fa-fw fa-align-left"></i>
|
||||
</span>
|
||||
<span
|
||||
</button>
|
||||
<button
|
||||
id="copyMissedWordsListButton"
|
||||
class="textButton"
|
||||
aria-label="Copy missed words list"
|
||||
data-balloon-pos="up"
|
||||
>
|
||||
<i class="fas fa-fw fa-times"></i>
|
||||
</span>
|
||||
<span
|
||||
</button>
|
||||
<button
|
||||
id="toggleBurstHeatmap"
|
||||
class="textButton"
|
||||
aria-label="Toggle burst heatmap"
|
||||
|
|
@ -334,7 +340,7 @@
|
|||
style="display: inline-block"
|
||||
>
|
||||
<i class="fas fa-fw fa-fire-alt"></i>
|
||||
</span>
|
||||
</button>
|
||||
<div class="heatmapLegend hidden">
|
||||
<div class="boxes">
|
||||
<div class="box box0"></div>
|
||||
|
|
@ -350,7 +356,7 @@
|
|||
<div id="resultReplay" class="hidden">
|
||||
<div class="title">
|
||||
watch replay
|
||||
<span
|
||||
<button
|
||||
id="playpauseReplayButton"
|
||||
class="textButton"
|
||||
aria-label="Start replay"
|
||||
|
|
@ -358,7 +364,7 @@
|
|||
style="display: inline-block"
|
||||
>
|
||||
<i class="fas fa-play"></i>
|
||||
</span>
|
||||
</button>
|
||||
<p id="replayStats">0s</p>
|
||||
</div>
|
||||
<div id="wordsWrapper">
|
||||
|
|
|
|||
|
|
@ -1027,7 +1027,7 @@
|
|||
margin-bottom: 1rem;
|
||||
.puncAndNum {
|
||||
// transition: 0.25s cubic-bezier(0.37, 0, 0.63, 1);
|
||||
overflow: hidden;
|
||||
// overflow: hidden;
|
||||
opacity: 1;
|
||||
}
|
||||
.row {
|
||||
|
|
@ -1039,13 +1039,14 @@
|
|||
}
|
||||
.spacer {
|
||||
height: auto;
|
||||
width: 0.25rem;
|
||||
width: 0.5em;
|
||||
border-radius: calc(var(--roundness) / 2);
|
||||
background: var(--bg-color);
|
||||
margin: 0.5rem 0;
|
||||
margin: 0.75em 0;
|
||||
transition: 250ms;
|
||||
&.scrolled {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
margin: auto 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1053,10 +1054,9 @@
|
|||
.time,
|
||||
.customText {
|
||||
.textButton {
|
||||
// line-height: 1.4em;
|
||||
align-self: end;
|
||||
span {
|
||||
// height: 1.1em;
|
||||
margin-top: 0.12em;
|
||||
line-height: 1.15;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1074,19 +1074,14 @@
|
|||
.textButton {
|
||||
padding: var(--verticalPadding) var(--horizontalPadding);
|
||||
|
||||
--double: calc(var(--horizontalPadding) * 2);
|
||||
|
||||
&:first-child {
|
||||
padding: var(--verticalPadding) var(--horizontalPadding)
|
||||
var(--verticalPadding) var(--double);
|
||||
margin-left: var(--horizontalPadding);
|
||||
}
|
||||
&:last-child {
|
||||
padding: var(--verticalPadding) var(--double) var(--verticalPadding)
|
||||
var(--horizontalPadding);
|
||||
margin-right: var(--horizontalPadding);
|
||||
}
|
||||
&:only-child {
|
||||
padding: var(--verticalPadding) var(--double) var(--verticalPadding)
|
||||
var(--double);
|
||||
margin-inline: var(--horizontalPadding);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1094,11 +1089,11 @@
|
|||
.wordCount,
|
||||
.customText,
|
||||
.zen,
|
||||
.quoteLength,
|
||||
.quoteLength {
|
||||
justify-content: end;
|
||||
}
|
||||
.puncAndNum {
|
||||
// width: 100%;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
justify-content: start;
|
||||
}
|
||||
.customText {
|
||||
display: grid;
|
||||
|
|
@ -1176,7 +1171,7 @@
|
|||
user-select: none;
|
||||
|
||||
.textButton {
|
||||
margin: 0 0.5rem;
|
||||
padding: 0.5em 1em;
|
||||
&.noInteraction {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -927,7 +927,7 @@ $(document).on("keydown", async (event) => {
|
|||
if (
|
||||
allowTyping &&
|
||||
!wordsFocused &&
|
||||
!["Enter", "Tab", ...ModifierKeys].includes(event.key)
|
||||
!["Enter", " ", "Escape", "Tab", ...ModifierKeys].includes(event.key)
|
||||
) {
|
||||
TestUI.focusWords();
|
||||
if (Config.showOutOfFocusWarning && !event.ctrlKey && !event.metaKey) {
|
||||
|
|
|
|||
|
|
@ -93,32 +93,32 @@ export async function update(): Promise<void> {
|
|||
|
||||
if (Config.mode !== "zen") {
|
||||
$(".pageTest #testModesNotice").append(
|
||||
`<div class="textButton" commands="languages"><i class="fas fa-globe-americas"></i>${getLanguageDisplayString(
|
||||
`<button class="textButton" commands="languages"><i class="fas fa-globe-americas"></i>${getLanguageDisplayString(
|
||||
Config.language,
|
||||
Config.mode === "quote"
|
||||
)}</div>`
|
||||
)}</button>`
|
||||
);
|
||||
}
|
||||
|
||||
if (Config.difficulty === "expert") {
|
||||
$(".pageTest #testModesNotice").append(
|
||||
`<div class="textButton" commands="difficulty"><i class="fas fa-star-half-alt"></i>expert</div>`
|
||||
`<button class="textButton" commands="difficulty"><i class="fas fa-star-half-alt"></i>expert</button>`
|
||||
);
|
||||
} else if (Config.difficulty === "master") {
|
||||
$(".pageTest #testModesNotice").append(
|
||||
`<div class="textButton" commands="difficulty"><i class="fas fa-star"></i>master</div>`
|
||||
`<button class="textButton" commands="difficulty"><i class="fas fa-star"></i>master</button>`
|
||||
);
|
||||
}
|
||||
|
||||
if (Config.blindMode) {
|
||||
$(".pageTest #testModesNotice").append(
|
||||
`<div class="textButton" commands="blindMode"><i class="fas fa-eye-slash"></i>blind</div>`
|
||||
`<button class="textButton" commands="blindMode"><i class="fas fa-eye-slash"></i>blind</button>`
|
||||
);
|
||||
}
|
||||
|
||||
if (Config.lazyMode) {
|
||||
$(".pageTest #testModesNotice").append(
|
||||
`<div class="textButton" commands="lazyMode"><i class="fas fa-couch"></i>lazy</div>`
|
||||
`<button class="textButton" commands="lazyMode"><i class="fas fa-couch"></i>lazy</button>`
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -132,7 +132,7 @@ export async function update(): Promise<void> {
|
|||
});
|
||||
|
||||
$(".pageTest #testModesNotice").append(
|
||||
`<div class="textButton" commands="paceCaretMode"><i class="fas fa-tachometer-alt"></i>${
|
||||
`<button class="textButton" commands="paceCaretMode"><i class="fas fa-tachometer-alt"></i>${
|
||||
Config.paceCaret === "average"
|
||||
? "average"
|
||||
: Config.paceCaret === "pb"
|
||||
|
|
@ -142,7 +142,7 @@ export async function update(): Promise<void> {
|
|||
: Config.paceCaret === "daily"
|
||||
? "daily"
|
||||
: "custom"
|
||||
} pace ${speed}</div>`
|
||||
} pace ${speed}</button>`
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -165,76 +165,76 @@ export async function update(): Promise<void> {
|
|||
const text = `${avgWPMText} ${avgAccText}`.trim();
|
||||
|
||||
$(".pageTest #testModesNotice").append(
|
||||
`<div class="textButton" commands="showAverage"><i class="fas fa-chart-bar"></i>avg: ${text}</div>`
|
||||
`<button class="textButton" commands="showAverage"><i class="fas fa-chart-bar"></i>avg: ${text}</button>`
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
if (Config.minWpm !== "off") {
|
||||
$(".pageTest #testModesNotice").append(
|
||||
`<div class="textButton" commands="minWpm"><i class="fas fa-bomb"></i>min ${Format.typingSpeed(
|
||||
`<button class="textButton" commands="minWpm"><i class="fas fa-bomb"></i>min ${Format.typingSpeed(
|
||||
Config.minWpmCustomSpeed,
|
||||
{ showDecimalPlaces: false, suffix: ` ${Config.typingSpeedUnit}` }
|
||||
)}</div>`
|
||||
)}</button>`
|
||||
);
|
||||
}
|
||||
|
||||
if (Config.minAcc !== "off") {
|
||||
$(".pageTest #testModesNotice").append(
|
||||
`<div class="textButton" commands="minAcc"><i class="fas fa-bomb"></i>min ${Config.minAccCustom}% acc</div>`
|
||||
`<button class="textButton" commands="minAcc"><i class="fas fa-bomb"></i>min ${Config.minAccCustom}% acc</button>`
|
||||
);
|
||||
}
|
||||
|
||||
if (Config.minBurst !== "off") {
|
||||
$(".pageTest #testModesNotice").append(
|
||||
`<div class="textButton" commands="minBurst"><i class="fas fa-bomb"></i>min ${Format.typingSpeed(
|
||||
`<button class="textButton" commands="minBurst"><i class="fas fa-bomb"></i>min ${Format.typingSpeed(
|
||||
Config.minBurstCustomSpeed,
|
||||
{ showDecimalPlaces: false }
|
||||
)} ${Config.typingSpeedUnit} burst ${
|
||||
Config.minBurst === "flex" ? "(flex)" : ""
|
||||
}</div>`
|
||||
}</button>`
|
||||
);
|
||||
}
|
||||
|
||||
if (Config.funbox !== "none") {
|
||||
$(".pageTest #testModesNotice").append(
|
||||
`<div class="textButton" commands="funbox"><i class="fas fa-gamepad"></i>${Config.funbox
|
||||
`<button class="textButton" commands="funbox"><i class="fas fa-gamepad"></i>${Config.funbox
|
||||
.replace(/_/g, " ")
|
||||
.replace(/#/g, ", ")}</div>`
|
||||
.replace(/#/g, ", ")}</button>`
|
||||
);
|
||||
}
|
||||
|
||||
if (Config.confidenceMode === "on") {
|
||||
$(".pageTest #testModesNotice").append(
|
||||
`<div class="textButton" commands="confidenceMode"><i class="fas fa-backspace"></i>confidence</div>`
|
||||
`<button class="textButton" commands="confidenceMode"><i class="fas fa-backspace"></i>confidence</button>`
|
||||
);
|
||||
}
|
||||
if (Config.confidenceMode === "max") {
|
||||
$(".pageTest #testModesNotice").append(
|
||||
`<div class="textButton" commands="confidenceMode"><i class="fas fa-backspace"></i>max confidence</div>`
|
||||
`<button class="textButton" commands="confidenceMode"><i class="fas fa-backspace"></i>max confidence</button>`
|
||||
);
|
||||
}
|
||||
|
||||
if (Config.stopOnError !== "off") {
|
||||
$(".pageTest #testModesNotice").append(
|
||||
`<div class="textButton" commands="stopOnError"><i class="fas fa-hand-paper"></i>stop on ${Config.stopOnError}</div>`
|
||||
`<button class="textButton" commands="stopOnError"><i class="fas fa-hand-paper"></i>stop on ${Config.stopOnError}</button>`
|
||||
);
|
||||
}
|
||||
|
||||
if (Config.layout !== "default") {
|
||||
$(".pageTest #testModesNotice").append(
|
||||
`<div class="textButton" commands="layouts"><i class="fas fa-keyboard"></i>emulating ${Config.layout.replace(
|
||||
`<button class="textButton" commands="layouts"><i class="fas fa-keyboard"></i>emulating ${Config.layout.replace(
|
||||
/_/g,
|
||||
" "
|
||||
)}</div>`
|
||||
)}</button>`
|
||||
);
|
||||
}
|
||||
|
||||
if (Config.oppositeShiftMode !== "off") {
|
||||
$(".pageTest #testModesNotice").append(
|
||||
`<div class="textButton" commands="oppositeShiftMode"><i class="fas fa-exchange-alt"></i>opposite shift${
|
||||
`<button class="textButton" commands="oppositeShiftMode"><i class="fas fa-exchange-alt"></i>opposite shift${
|
||||
Config.oppositeShiftMode === "keymap" ? " (keymap)" : ""
|
||||
}</div>`
|
||||
}</button>`
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -248,10 +248,10 @@ export async function update(): Promise<void> {
|
|||
|
||||
if (tagsString !== "") {
|
||||
$(".pageTest #testModesNotice").append(
|
||||
`<div class="textButton" commands="tags"><i class="fas fa-tag"></i>${tagsString.substring(
|
||||
`<button class="textButton" commands="tags"><i class="fas fa-tag"></i>${tagsString.substring(
|
||||
0,
|
||||
tagsString.length - 2
|
||||
)}</div>`
|
||||
)}</button>`
|
||||
);
|
||||
}
|
||||
} catch {}
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ export async function instantUpdate(): Promise<void> {
|
|||
$("#testConfig .puncAndNum").css({
|
||||
width: 0,
|
||||
opacity: 0,
|
||||
visibility: "hidden",
|
||||
});
|
||||
$("#testConfig .spacer").addClass("scrolled");
|
||||
$("#testConfig .time").addClass("hidden");
|
||||
|
|
@ -33,6 +34,7 @@ export async function instantUpdate(): Promise<void> {
|
|||
$("#testConfig .puncAndNum").css({
|
||||
width: "unset",
|
||||
opacity: 1,
|
||||
visibility: "visible",
|
||||
});
|
||||
$("#testConfig .leftSpacer").removeClass("scrolled");
|
||||
$("#testConfig .rightSpacer").removeClass("scrolled");
|
||||
|
|
@ -43,6 +45,7 @@ export async function instantUpdate(): Promise<void> {
|
|||
$("#testConfig .puncAndNum").css({
|
||||
width: "unset",
|
||||
opacity: 1,
|
||||
visibility: "visible",
|
||||
});
|
||||
|
||||
$("#testConfig .leftSpacer").removeClass("scrolled");
|
||||
|
|
@ -60,6 +63,7 @@ export async function instantUpdate(): Promise<void> {
|
|||
$("#testConfig .puncAndNum").css({
|
||||
width: "unset",
|
||||
opacity: 1,
|
||||
visibility: "visible",
|
||||
});
|
||||
|
||||
$("#testConfig .leftSpacer").removeClass("scrolled");
|
||||
|
|
@ -139,6 +143,7 @@ export async function update(
|
|||
.css({
|
||||
opacity: puncAndNumVisible[current] ? 0 : 1,
|
||||
width: previousWidth,
|
||||
visibility: "visible",
|
||||
})
|
||||
.animate(
|
||||
{
|
||||
|
|
@ -150,6 +155,8 @@ export async function update(
|
|||
() => {
|
||||
if (currentWidth !== 0) {
|
||||
puncAndNumEl.css("width", "unset");
|
||||
} else {
|
||||
puncAndNumEl.css("visibility", "hidden");
|
||||
}
|
||||
}
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue