mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2024-09-21 07:46:15 +08:00
updated the result screen structure, added a new 'next test' button
This commit is contained in:
Jack
parent
b6363fa689
commit
935f777806
|
|
@ -1105,8 +1105,37 @@ key {
|
|||
grid-template-columns: auto 1fr;
|
||||
grid-template-areas:
|
||||
"stats chart"
|
||||
"morestats morestats"
|
||||
"login login";
|
||||
"morestats morestats";
|
||||
// "wordsHistory wordsHistory"
|
||||
// "buttons buttons"
|
||||
// "login login"
|
||||
// "ssw ssw";
|
||||
|
||||
.buttons {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
// grid-area: buttons;
|
||||
grid-column: 1/3;
|
||||
}
|
||||
|
||||
.ssWatermark{
|
||||
// grid-area: ssw;
|
||||
grid-column: 1/3;
|
||||
}
|
||||
|
||||
#resultWordsHistory{
|
||||
// grid-area: wordsHistory;
|
||||
grid-column: 1/3;
|
||||
.words{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
align-content: flex-start;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
.chart {
|
||||
grid-area: chart;
|
||||
|
|
@ -1130,7 +1159,8 @@ key {
|
|||
grid-column: 1/3;
|
||||
text-align: center;
|
||||
color: var(--sub-color);
|
||||
grid-area: login;
|
||||
// grid-area: login;
|
||||
grid-column: 1/3;
|
||||
}
|
||||
|
||||
.stats {
|
||||
|
|
@ -1444,7 +1474,8 @@ key {
|
|||
#restartTestButton,
|
||||
#showWordHistoryButton,
|
||||
#copyResultToClipboardButton,
|
||||
#restartTestButtonWithSameWordset {
|
||||
#restartTestButtonWithSameWordset,
|
||||
#nextTestButton {
|
||||
position: relative;
|
||||
border-radius: var(--roundness);
|
||||
padding: 1rem 2rem;
|
||||
|
|
@ -1452,7 +1483,6 @@ key {
|
|||
width: -moz-min-content;
|
||||
color: var(--sub-color);
|
||||
transition: 0.25s;
|
||||
margin-top: 1rem;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
|
|
@ -1466,6 +1496,11 @@ key {
|
|||
}
|
||||
}
|
||||
|
||||
#restartTestButton{
|
||||
margin: 0 auto;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
#middle {
|
||||
.pageTest {
|
||||
.outOfFocusWarning {
|
||||
|
|
@ -1645,20 +1680,11 @@ key {
|
|||
.pageTest {
|
||||
position: relative;
|
||||
|
||||
.buttons {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ssWatermark {
|
||||
font-size: 1.25rem;
|
||||
color: var(--sub-color);
|
||||
// position: absolute;
|
||||
float: right;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
line-height: 1rem;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -907,13 +907,228 @@
|
|||
</div>
|
||||
<div id="middle">
|
||||
<div class="page pageTest active">
|
||||
<div id="capsWarning" class="hidden">
|
||||
<i class="fas fa-lock"></i>
|
||||
Caps Lock
|
||||
|
||||
<div id="typingTest">
|
||||
<div id="capsWarning" class="hidden">
|
||||
<i class="fas fa-lock"></i>
|
||||
Caps Lock
|
||||
</div>
|
||||
<div id="testModesNotice"></div>
|
||||
<div id="caret" class="default size15"></div>
|
||||
<input id="wordsInput" class="" tabindex="0" autocomplete="off" />
|
||||
<div id="timerNumber"><div>60</div></div>
|
||||
<div id="miniTimerAndLiveWpm">
|
||||
<div class="time hidden">1:00</div>
|
||||
<div class="wpm">60</div>
|
||||
</div>
|
||||
<div class="outOfFocusWarning"><i class="fas fa-mouse-pointer"></i> Click the words to focus</div>
|
||||
<div id="wordsWrapper">
|
||||
<div id="words" class="size15"></div>
|
||||
</div>
|
||||
<div id="liveWpm">123</div>
|
||||
<div class="keymap hidden">
|
||||
<!-- <div class="row r1">
|
||||
<div class="keymap-key inactive hidden-key">
|
||||
<span class="letter">`</span>
|
||||
</div>
|
||||
<div class="keymap-key inactive hidden-key" id="Key1">
|
||||
<span class="letter">1</span>
|
||||
</div>
|
||||
<div class="keymap-key inactive hidden-key" id="Key2">
|
||||
<span class="letter">2</span>
|
||||
</div>
|
||||
<div class="keymap-key inactive hidden-key" id="Key3">
|
||||
<span class="letter">3</span>
|
||||
</div>
|
||||
<div class="keymap-key inactive hidden-key" id="Key4">
|
||||
<span class="letter">4</span>
|
||||
</div>
|
||||
<div class="keymap-key inactive hidden-key" id="Key5">
|
||||
<span class="letter">5</span>
|
||||
</div>
|
||||
<div class="keymap-key inactive hidden-key" id="Key6">
|
||||
<span class="letter">6</span>
|
||||
</div>
|
||||
<div class="keymap-split-spacer"></div>
|
||||
|
||||
<div class="keymap-key inactive hidden-key" id="Key7">
|
||||
<span class="letter">7</span>
|
||||
</div>
|
||||
<div class="keymap-key inactive hidden-key" id="Key8">
|
||||
<span class="letter">8</span>
|
||||
</div>
|
||||
<div class="keymap-key inactive hidden-key" id="Key9">
|
||||
<span class="letter">9</span>
|
||||
</div>
|
||||
<div class="keymap-key inactive hidden-key" id="Key0">
|
||||
<span class="letter">0</span>
|
||||
</div>
|
||||
<div class="keymap-key inactive hidden-key" id="Key-">
|
||||
<span class="letter">-</span>
|
||||
</div>
|
||||
<div class="keymap-key inactive hidden-key" id="Key=">
|
||||
<span class="letter">=</span>
|
||||
</div>
|
||||
<div class="keymap-key inactive hidden-key">
|
||||
<span class="letter">delete</span>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="row r2">
|
||||
<div class="keymap-key hidden-key">
|
||||
<span class="letter"></span>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeyQ">
|
||||
<span class="letter">q</span>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeyW">
|
||||
<span class="letter">w</span>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeyE">
|
||||
<span class="letter">e</span>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeyR">
|
||||
<span class="letter">r</span>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeyT">
|
||||
<span class="letter">t</span>
|
||||
</div>
|
||||
<div class="keymap-split-spacer"></div>
|
||||
<div class="keymap-key" id="KeyY">
|
||||
<span class="letter">y</span>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeyU">
|
||||
<span class="letter">u</span>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeyI">
|
||||
<span class="letter">i</span>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeyO">
|
||||
<span class="letter">o</span>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeyP">
|
||||
<span class="letter">p</span>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeyLeftBracket">
|
||||
<span class="letter">[</span>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeyRightBracket">
|
||||
<span class="letter">]</span>
|
||||
</div>
|
||||
<div class="keymap-key hidden-key" id="Backslash">
|
||||
<span class="letter">\</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row r3">
|
||||
<div class="keymap-key hidden-key">
|
||||
<span class="letter"></span>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeyA">
|
||||
<span class="letter">a</span>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeyS">
|
||||
<span class="letter">s</span>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeyD">
|
||||
<span class="letter">d</span>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeyF">
|
||||
<span class="letter">f</span>
|
||||
<div class="bump"></div>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeyG">
|
||||
<span class="letter">g</span>
|
||||
</div>
|
||||
<div class="keymap-split-spacer"></div>
|
||||
<div class="keymap-key" id="KeyH">
|
||||
<span class="letter">h</span>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeyJ">
|
||||
<span class="letter">j</span>
|
||||
<div class="bump"></div>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeyK">
|
||||
<span class="letter">k</span>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeyL">
|
||||
<span class="letter">l</span>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeySemicolon">
|
||||
<span class="letter">;</span>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeyQuote">
|
||||
<span class="letter">'</span>
|
||||
</div>
|
||||
<div class="keymap-key hidden-key">
|
||||
<span class="letter"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row r4">
|
||||
<div class="keymap-key hidden-key">
|
||||
<span class="letter"></span>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeyZ">
|
||||
<span class="letter">z</span>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeyX">
|
||||
<span class="letter">x</span>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeyC">
|
||||
<span class="letter">c</span>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeyV">
|
||||
<span class="letter">v</span>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeyB">
|
||||
<span class="letter">b</span>
|
||||
</div>
|
||||
<div class="keymap-split-spacer"></div>
|
||||
<div class="keymap-key" id="KeyN">
|
||||
<span class="letter">n</span>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeyM">
|
||||
<span class="letter">m</span>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeyComma">
|
||||
<span class="letter">,</span>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeyPeriod">
|
||||
<span class="letter">.</span>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeySlash">
|
||||
<span class="letter">/</span>
|
||||
</div>
|
||||
<div class="keymap-key hidden-key">
|
||||
<span class="letter"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row r5">
|
||||
<div class="keymap-key hidden-key">
|
||||
<span class="letter"></span>
|
||||
</div>
|
||||
<div class="keymap-key key-split-space" id="KeySpace">
|
||||
<span class="letter"></span>
|
||||
</div>
|
||||
<div class="keymap-split-spacer"></div>
|
||||
<div class="keymap-key key-split-space" id="KeySpace2">
|
||||
<span class="letter"></span>
|
||||
</div>
|
||||
<div class="keymap-key hidden-key">
|
||||
<span class="letter"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
id="restartTestButton"
|
||||
aria-label="Restart test"
|
||||
data-balloon-pos="down"
|
||||
class=""
|
||||
tabindex="0"
|
||||
onclick="this.blur();"
|
||||
>
|
||||
<i class="fas fa-fw fa-redo-alt"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div id="testModesNotice"></div>
|
||||
<div id="caret" class="default size15"></div>
|
||||
<div id="result" class="hidden">
|
||||
<div id="result">
|
||||
<div class="stats">
|
||||
<!-- <div class="info">words 10<br>punctuation</div> -->
|
||||
|
||||
|
|
@ -984,236 +1199,33 @@
|
|||
<!-- <div class="title">wpm over time</div> -->
|
||||
<canvas id="wpmChart"></canvas>
|
||||
</div>
|
||||
<div id="resultWordsHistory" class="hidden">
|
||||
<div class="title">
|
||||
input history
|
||||
<span
|
||||
id="copyWordsListButton"
|
||||
class="icon-button"
|
||||
aria-label="Copy words list"
|
||||
data-balloon-pos="up"
|
||||
style="display: inline-block;"
|
||||
>
|
||||
<i class="fas fa-copy"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="words"></div>
|
||||
</div>
|
||||
<div class="loginTip">Sign in to save your results</div>
|
||||
</div>
|
||||
<input id="wordsInput" class="" tabindex="0" autocomplete="off" />
|
||||
<div id="wordsTitle">
|
||||
input history
|
||||
<span
|
||||
id="copyWordsListButton"
|
||||
class="icon-button"
|
||||
aria-label="Copy words list"
|
||||
data-balloon-pos="up"
|
||||
style="display: inline-block;"
|
||||
>
|
||||
<i class="fas fa-copy"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div id="timerNumber"><div>60</div></div>
|
||||
<div id="miniTimerAndLiveWpm">
|
||||
<div class="time hidden">1:00</div>
|
||||
<div class="wpm">60</div>
|
||||
</div>
|
||||
<div class="outOfFocusWarning"><i class="fas fa-mouse-pointer"></i> Click the words to focus</div>
|
||||
<div id="wordsWrapper">
|
||||
<div id="words" class="size15"></div>
|
||||
</div>
|
||||
<div id="liveWpm">123</div>
|
||||
<div class="ssWatermark hidden">monkey-type.com</div>
|
||||
<div class="keymap hidden">
|
||||
<!-- <div class="row r1">
|
||||
<div class="keymap-key inactive hidden-key">
|
||||
<span class="letter">`</span>
|
||||
</div>
|
||||
<div class="keymap-key inactive hidden-key" id="Key1">
|
||||
<span class="letter">1</span>
|
||||
</div>
|
||||
<div class="keymap-key inactive hidden-key" id="Key2">
|
||||
<span class="letter">2</span>
|
||||
</div>
|
||||
<div class="keymap-key inactive hidden-key" id="Key3">
|
||||
<span class="letter">3</span>
|
||||
</div>
|
||||
<div class="keymap-key inactive hidden-key" id="Key4">
|
||||
<span class="letter">4</span>
|
||||
</div>
|
||||
<div class="keymap-key inactive hidden-key" id="Key5">
|
||||
<span class="letter">5</span>
|
||||
</div>
|
||||
<div class="keymap-key inactive hidden-key" id="Key6">
|
||||
<span class="letter">6</span>
|
||||
</div>
|
||||
<div class="keymap-split-spacer"></div>
|
||||
|
||||
<div class="keymap-key inactive hidden-key" id="Key7">
|
||||
<span class="letter">7</span>
|
||||
</div>
|
||||
<div class="keymap-key inactive hidden-key" id="Key8">
|
||||
<span class="letter">8</span>
|
||||
</div>
|
||||
<div class="keymap-key inactive hidden-key" id="Key9">
|
||||
<span class="letter">9</span>
|
||||
</div>
|
||||
<div class="keymap-key inactive hidden-key" id="Key0">
|
||||
<span class="letter">0</span>
|
||||
</div>
|
||||
<div class="keymap-key inactive hidden-key" id="Key-">
|
||||
<span class="letter">-</span>
|
||||
</div>
|
||||
<div class="keymap-key inactive hidden-key" id="Key=">
|
||||
<span class="letter">=</span>
|
||||
</div>
|
||||
<div class="keymap-key inactive hidden-key">
|
||||
<span class="letter">delete</span>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="row r2">
|
||||
<div class="keymap-key hidden-key">
|
||||
<span class="letter"></span>
|
||||
<div class="ssWatermark hidden">monkey-type.com</div>
|
||||
<div class="buttons">
|
||||
<div
|
||||
id="nextTestButton"
|
||||
aria-label="Next test"
|
||||
data-balloon-pos="down"
|
||||
tabindex="0"
|
||||
onclick="this.blur();"
|
||||
>
|
||||
<i class="fas fa-fw fa-chevron-right"></i>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeyQ">
|
||||
<span class="letter">q</span>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeyW">
|
||||
<span class="letter">w</span>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeyE">
|
||||
<span class="letter">e</span>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeyR">
|
||||
<span class="letter">r</span>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeyT">
|
||||
<span class="letter">t</span>
|
||||
</div>
|
||||
<div class="keymap-split-spacer"></div>
|
||||
<div class="keymap-key" id="KeyY">
|
||||
<span class="letter">y</span>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeyU">
|
||||
<span class="letter">u</span>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeyI">
|
||||
<span class="letter">i</span>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeyO">
|
||||
<span class="letter">o</span>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeyP">
|
||||
<span class="letter">p</span>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeyLeftBracket">
|
||||
<span class="letter">[</span>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeyRightBracket">
|
||||
<span class="letter">]</span>
|
||||
</div>
|
||||
<div class="keymap-key hidden-key" id="Backslash">
|
||||
<span class="letter">\</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row r3">
|
||||
<div class="keymap-key hidden-key">
|
||||
<span class="letter"></span>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeyA">
|
||||
<span class="letter">a</span>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeyS">
|
||||
<span class="letter">s</span>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeyD">
|
||||
<span class="letter">d</span>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeyF">
|
||||
<span class="letter">f</span>
|
||||
<div class="bump"></div>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeyG">
|
||||
<span class="letter">g</span>
|
||||
</div>
|
||||
<div class="keymap-split-spacer"></div>
|
||||
<div class="keymap-key" id="KeyH">
|
||||
<span class="letter">h</span>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeyJ">
|
||||
<span class="letter">j</span>
|
||||
<div class="bump"></div>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeyK">
|
||||
<span class="letter">k</span>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeyL">
|
||||
<span class="letter">l</span>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeySemicolon">
|
||||
<span class="letter">;</span>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeyQuote">
|
||||
<span class="letter">'</span>
|
||||
</div>
|
||||
<div class="keymap-key hidden-key">
|
||||
<span class="letter"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row r4">
|
||||
<div class="keymap-key hidden-key">
|
||||
<span class="letter"></span>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeyZ">
|
||||
<span class="letter">z</span>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeyX">
|
||||
<span class="letter">x</span>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeyC">
|
||||
<span class="letter">c</span>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeyV">
|
||||
<span class="letter">v</span>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeyB">
|
||||
<span class="letter">b</span>
|
||||
</div>
|
||||
<div class="keymap-split-spacer"></div>
|
||||
<div class="keymap-key" id="KeyN">
|
||||
<span class="letter">n</span>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeyM">
|
||||
<span class="letter">m</span>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeyComma">
|
||||
<span class="letter">,</span>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeyPeriod">
|
||||
<span class="letter">.</span>
|
||||
</div>
|
||||
<div class="keymap-key" id="KeySlash">
|
||||
<span class="letter">/</span>
|
||||
</div>
|
||||
<div class="keymap-key hidden-key">
|
||||
<span class="letter"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row r5">
|
||||
<div class="keymap-key hidden-key">
|
||||
<span class="letter"></span>
|
||||
</div>
|
||||
<div class="keymap-key key-split-space" id="KeySpace">
|
||||
<span class="letter"></span>
|
||||
</div>
|
||||
<div class="keymap-split-spacer"></div>
|
||||
<div class="keymap-key key-split-space" id="KeySpace2">
|
||||
<span class="letter"></span>
|
||||
</div>
|
||||
<div class="keymap-key hidden-key">
|
||||
<span class="letter"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="buttons">
|
||||
<div
|
||||
id="restartTestButton"
|
||||
aria-label="Restart test"
|
||||
data-balloon-pos="down"
|
||||
class=""
|
||||
tabindex="0"
|
||||
onclick="this.blur();"
|
||||
>
|
||||
<i class="fas fa-fw fa-redo-alt"></i>
|
||||
</div>
|
||||
<div id="resultExtraButtons" class="hidden">
|
||||
<div
|
||||
id="restartTestButtonWithSameWordset"
|
||||
aria-label="Repeat test"
|
||||
|
|
|
|||
|
|
@ -2287,7 +2287,7 @@ function showResult(difficultyFailed = false) {
|
|||
|
||||
wpmOverTimeChart.update({ duration: 0 });
|
||||
wpmOverTimeChart.resize();
|
||||
swapElements($("#wordsWrapper"), $("#result"), 250, () => {
|
||||
swapElements($("#typingTest"), $("#result"), 250, () => {
|
||||
$("#words").empty();
|
||||
wpmOverTimeChart.resize();
|
||||
if (config.alwaysShowWordsHistory) {
|
||||
|
|
@ -2512,7 +2512,7 @@ function restartTest(withSameWordset = false) {
|
|||
el = $("#result");
|
||||
} else {
|
||||
//words are being displayed
|
||||
el = $("#wordsWrapper");
|
||||
el = $("#typingTest");
|
||||
}
|
||||
if (resultVisible) {
|
||||
if (
|
||||
|
|
@ -2523,34 +2523,6 @@ function restartTest(withSameWordset = false) {
|
|||
randomiseTheme();
|
||||
showNotification(config.theme.replace(/_/g, " "), 1500);
|
||||
}
|
||||
$("#wordsWrapper").stop(true, true).animate(
|
||||
{
|
||||
opacity: 0,
|
||||
},
|
||||
125
|
||||
);
|
||||
$("#wordsTitle")
|
||||
.stop(true, true)
|
||||
.animate(
|
||||
{
|
||||
opacity: 0,
|
||||
},
|
||||
125,
|
||||
() => {
|
||||
$("#wordsTitle").slideUp(0);
|
||||
}
|
||||
);
|
||||
$("#resultExtraButtons")
|
||||
.stop(true, true)
|
||||
.animate(
|
||||
{
|
||||
opacity: 0,
|
||||
},
|
||||
125,
|
||||
() => {
|
||||
$("#resultExtraButtons").addClass("hidden");
|
||||
}
|
||||
);
|
||||
}
|
||||
resultVisible = false;
|
||||
|
||||
|
|
@ -2562,6 +2534,9 @@ function restartTest(withSameWordset = false) {
|
|||
},
|
||||
125,
|
||||
() => {
|
||||
$("#typingTest")
|
||||
.css("opacity", 0)
|
||||
.removeClass("hidden");
|
||||
if (!withSameWordset) {
|
||||
sameWordset = false;
|
||||
initWords();
|
||||
|
|
@ -2600,7 +2575,7 @@ function restartTest(withSameWordset = false) {
|
|||
// 'height': 'auto',
|
||||
// 'margin-bottom': '1.25rem'
|
||||
});
|
||||
$("#wordsWrapper")
|
||||
$("#typingTest")
|
||||
.css("opacity", 0)
|
||||
.removeClass("hidden")
|
||||
.stop(true, true)
|
||||
|
|
@ -2612,7 +2587,6 @@ function restartTest(withSameWordset = false) {
|
|||
() => {
|
||||
hideCrown();
|
||||
clearTimeout(timer);
|
||||
$("#restartTestButton").css("opacity", 1);
|
||||
if ($("#commandLineWrapper").hasClass("hidden")) focusWords();
|
||||
wpmOverTimeChart.options.annotation.annotations[0].value = "-30";
|
||||
wpmOverTimeChart.update();
|
||||
|
|
@ -2964,63 +2938,33 @@ function accountIconLoading(truefalse) {
|
|||
|
||||
function toggleResultWordsDisplay() {
|
||||
if (resultVisible) {
|
||||
if ($("#wordsWrapper").stop(true, true).hasClass("hidden")) {
|
||||
if ($("#resultWordsHistory").stop(true, true).hasClass("hidden")) {
|
||||
//show
|
||||
$("#wordsTitle").css("opacity", 1).removeClass("hidden").slideDown(250);
|
||||
|
||||
|
||||
if (!$("#showWordHistoryButton").hasClass("loaded")) {
|
||||
$("#words").html(
|
||||
`<div class="preloader"><i class="fas fa-fw fa-spin fa-circle-notch"></i></div>`
|
||||
);
|
||||
loadWordsHistory();
|
||||
loadWordsHistory().then(() => {
|
||||
$("#resultWordsHistory").removeClass("hidden").css("display", "none").slideDown(250);
|
||||
});
|
||||
} else {
|
||||
$("#resultWordsHistory").removeClass("hidden").css("display", "none").slideDown(250);
|
||||
}
|
||||
|
||||
$("#words").css("height", "auto");
|
||||
let newHeight = $("#wordsWrapper")
|
||||
.removeClass("hidden")
|
||||
.css("height", "auto")
|
||||
.outerHeight();
|
||||
|
||||
$("#wordsWrapper")
|
||||
.css({
|
||||
height: 0,
|
||||
opacity: 0,
|
||||
})
|
||||
.animate(
|
||||
{
|
||||
height: newHeight,
|
||||
opacity: 1,
|
||||
},
|
||||
250
|
||||
);
|
||||
} else {
|
||||
//hide
|
||||
|
||||
$("#wordsTitle").slideUp(250);
|
||||
$("#resultWordsHistory").slideUp(250, () => {
|
||||
$("#resultWordsHistory").addClass("hidden");
|
||||
});
|
||||
|
||||
let oldHeight = $("#wordsWrapper").outerHeight();
|
||||
$("#wordsWrapper").removeClass("hidden");
|
||||
$("#wordsWrapper")
|
||||
.css({
|
||||
opacity: 1,
|
||||
height: oldHeight,
|
||||
})
|
||||
.animate(
|
||||
{
|
||||
height: 0,
|
||||
opacity: 0,
|
||||
},
|
||||
250,
|
||||
() => {
|
||||
$("#wordsWrapper").addClass("hidden");
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function loadWordsHistory() {
|
||||
$("#words").empty();
|
||||
$("#resultWordsHistory .words").empty();
|
||||
// inputHistory.forEach((input, index) => {
|
||||
for (let i = 0; i < inputHistory.length + 2; i++) {
|
||||
let input = inputHistory[i];
|
||||
|
|
@ -3100,9 +3044,10 @@ async function loadWordsHistory() {
|
|||
wordEl += "</div>";
|
||||
} catch (e) {}
|
||||
}
|
||||
$("#words").append(wordEl);
|
||||
$("#resultWordsHistory .words").append(wordEl);
|
||||
}
|
||||
$("#showWordHistoryButton").addClass("loaded");
|
||||
return true;
|
||||
}
|
||||
|
||||
function flipTestColors(tf) {
|
||||
|
|
@ -3740,6 +3685,17 @@ $(document.body).on("click", "#restartTestButton", (event) => {
|
|||
restartTest();
|
||||
});
|
||||
|
||||
$(document).on("keypress", "#nextTestButton", (event) => {
|
||||
if (event.keyCode == 13) {
|
||||
restartTest();
|
||||
}
|
||||
});
|
||||
|
||||
$(document.body).on("click", "#nextTestButton", (event) => {
|
||||
manualRestart = true;
|
||||
restartTest();
|
||||
});
|
||||
|
||||
$(document).on("keypress", "#showWordHistoryButton", (event) => {
|
||||
if (event.keyCode == 13) {
|
||||
toggleResultWordsDisplay();
|
||||
|
|
@ -4349,7 +4305,7 @@ loadConfigFromCookie();
|
|||
getReleasesFromGitHub();
|
||||
getPatreonNames();
|
||||
|
||||
$(document).on("mouseenter", "#words .word", (e) => {
|
||||
$(document).on("mouseenter", "#resultWordsHistory .words .word", (e) => {
|
||||
if (resultVisible) {
|
||||
let input = $(e.currentTarget).attr("input");
|
||||
if (input != undefined)
|
||||
|
|
@ -4357,7 +4313,7 @@ $(document).on("mouseenter", "#words .word", (e) => {
|
|||
}
|
||||
});
|
||||
|
||||
$(document).on("mouseleave", "#words .word", (e) => {
|
||||
$(document).on("mouseleave", "#resultWordsHistory .words .word", (e) => {
|
||||
$(".wordInputAfter").remove();
|
||||
});
|
||||
|
||||
|
|
@ -4470,7 +4426,7 @@ let wpmOverTimeChart = new Chart(ctx, {
|
|||
|
||||
let unique = [...new Set(wordsToHighlight)];
|
||||
unique.forEach((wordIndex) => {
|
||||
let wordEl = $($("#words .word")[wordIndex]);
|
||||
let wordEl = $($("#resultWordsHistory .words .word")[wordIndex]);
|
||||
let input = wordEl.attr("input");
|
||||
if (input != undefined)
|
||||
wordEl.append(`<div class="wordInputAfter">${input}</div>`);
|
||||
|
|
|
|||
Loading…
Reference in a new issue