added a button to restart the test with the same wordset. closes #119

This commit is contained in:
Jack 2020-06-06 02:05:21 +01:00
parent 356102f494
commit cd6776f085
3 changed files with 56 additions and 19 deletions

View file

@ -778,11 +778,17 @@ key {
}
}
#restartTestButton, #showWordHistoryButton, #copyResultToClipboardButton {
position: relative;
.pageTest #resultExtraButtons{
opacity: 0;
display: grid;
grid-auto-flow: column;
gap: 1rem;
}
#restartTestButton, #showWordHistoryButton, #copyResultToClipboardButton, #restartTestButtonWithSameWordset {
position: relative;
border-radius: var(--roundness);
padding: 1rem 5rem;
padding: 1rem 2rem;
width: min-content;
width: -moz-min-content;
color: var(--sub-color);

View file

@ -213,9 +213,12 @@
<div id="words" class=""></div>
<div id="liveWpm">123</div>
<div class="buttons">
<div id="restartTestButton" class="" tabindex="0" onclick="this.blur();"><i class="fas fa-redo-alt"></i></div>
<div id="showWordHistoryButton" class="hidden" tabindex="0" onclick="this.blur();"><i class="fas fa-align-left"></i></div>
<div id="copyResultToClipboardButton" class="hidden" tabindex="0" onclick="this.blur();"><i class="far fa-image"></i></div>
<div id="restartTestButton" class="" tabindex="0" onclick="this.blur();"><i class="fas fa-fw fa-redo-alt"></i></div>
<div id="resultExtraButtons" class="hidden">
<div id="restartTestButtonWithSameWordset" tabindex="0" onclick="this.blur();"><i class="fas fa-fw fa-sync-alt"></i></div>
<div id="showWordHistoryButton" tabindex="0" onclick="this.blur();"><i class="fas fa-fw fa-align-left"></i></div>
<div id="copyResultToClipboardButton" tabindex="0" onclick="this.blur();"><i class="far fa-fw fa-image"></i></div>
</div>
</div>
</div>
<div class="page pageAbout hidden">

View file

@ -20,6 +20,7 @@ let resultVisible = false;
let activeWordTopBeforeJump = 0;
let activeWordTop = 0;
let activeWordJumped = false;
let sameWordset = false;
let accuracyStats = {
correct: 0,
@ -570,8 +571,7 @@ function showResult(difficultyFailed = false) {
$("#result .stats .time .bottom").text(testtime+'s');
setTimeout(function() {
$("#showWordHistoryButton").removeClass('hidden').css('opacity',1);
$("#copyResultToClipboardButton").removeClass('hidden').css('opacity',1);
$("#resultExtraButtons").removeClass('hidden').css('opacity',1);
}, 125);
@ -589,9 +589,11 @@ function showResult(difficultyFailed = false) {
let pbVal = 0;
if(difficultyFailed){
showNotification("Test failed",3000);
showNotification("Test failed",2000);
}else if(afkDetected){
showNotification("Test invalid - AFK detected",3000);
showNotification("Test invalid - AFK detected",2000);
}else if(sameWordset){
showNotification("Test invalid - repeated",2000);
}else{
let completedEvent = {
wpm: stats.wpm,
@ -693,6 +695,9 @@ function showResult(difficultyFailed = false) {
if(testInvalid){
otherText += "<br>invalid"
}
if(sameWordset){
otherText += "<br>repeated"
}
if(otherText == ""){
$("#result .stats .info").addClass('hidden');
@ -784,7 +789,7 @@ function showResult(difficultyFailed = false) {
});
}
function restartTest() {
function restartTest(withSameWordset = false) {
clearIntervals();
time = 0;
afkDetected = false;
@ -817,15 +822,10 @@ function restartTest() {
}, 125, ()=>{
$("#wordsTitle").slideUp(0);
});
$("#showWordHistoryButton").stop(true,true).animate({
$("#resultExtraButtons").stop(true,true).animate({
opacity: 0
}, 125, ()=>{
$("#showWordHistoryButton").addClass('hidden');
});
$("#copyResultToClipboardButton").stop(true,true).animate({
opacity: 0
}, 125, ()=>{
$("#copyResultToClipboardButton").addClass('hidden');
$("#resultExtraButtons").addClass('hidden');
});
}
resultVisible = false;
@ -833,7 +833,21 @@ function restartTest() {
el.stop(true, true).animate({
opacity: 0
}, 125, () => {
initWords();
if(!withSameWordset){
sameWordset = false;
initWords();
}else{
sameWordset = true;
testActive = false;
currentWordIndex = 0;
accuracyStats = {
correct: 0,
incorrect: 0
}
inputHistory = [];
currentInput = "";
showWords();
}
$("#result").addClass('hidden');
$("#words").css('opacity', 0).removeClass('hidden').stop(true, true).animate({
opacity: 1
@ -1232,6 +1246,20 @@ $(document.body).on("click", "#showWordHistoryButton", (event) => {
toggleResultWordsDisplay();
});
$(document.body).on("click", "#restartTestButtonWithSameWordset", (event) => {
restartTest(true);
});
$(document).on("keypress", "#restartTestButtonWithSameWordset", (event) => {
if (event.keyCode == 32 || event.keyCode == 13) {
restartTest(true);
}
});
$(document.body).on("click", "#copyResultToClipboardButton", (event) => {
copyResultToClipboard();
});