monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-11-07 11:30:24 +08:00
Code Issues Projects Releases Packages Wiki Activity

updated timer bar to start filled

Browse source
This commit is contained in:
Jack 2020-06-15 22:52:47 +01:00
parent 39ba52c6cc
commit 85176f5bee
3 changed files with 35 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
public/css/style.scss
View file

@ -345,14 +345,14 @@ a:hover {
#timer {
position: fixed;
top: 0;
right: 0;
width: 0vw;
left: 0;
width: 100vw;
/* height: 0.5rem; */
height: 0.5rem;
background: var(--sub-color);
/* background: #0f0f0f; */
/* background: red; */
transition: 1s linear;
// transition: 1s linear;
z-index: -1;
}

18
public/index.html
View file

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Monkey Type</title>
<link rel="stylesheet" href="css/fa.css">
<link rel="stylesheet" href="css/style.css?v=13">
<link rel="stylesheet" href="css/style.css?v=14">
<link rel="stylesheet" href="themes/serika_dark.css" id="currentTheme">
<link id="favicon" rel="shortcut icon" href="fav.png">
<link rel="shortcut icon" href="fav.png">
@ -709,14 +709,14 @@
<script src="js/chartjs-plugin-trendline.js"></script>
<script src="js/chartjs-plugin-annotation.js"></script>
<script src="js/html2canvas.js"></script>
<script src="js/words.js?v=14"></script>
<script src="js/layouts.js?v=14"></script>
<script src="js/db.js?v=14"></script>
<script src="js/userconfig.js?v=14"></script>
<script src="js/commandline.js?v=14"></script>
<script src="js/settings.js?v=14"></script>
<script src="js/account.js?v=14"></script>
<script src="js/script.js?v=14"></script>
<script src="js/words.js?v=15"></script>
<script src="js/layouts.js?v=15"></script>
<script src="js/db.js?v=15"></script>
<script src="js/userconfig.js?v=15"></script>
<script src="js/commandline.js?v=15"></script>
<script src="js/settings.js?v=15"></script>
<script src="js/account.js?v=15"></script>
<script src="js/script.js?v=15"></script>
</html>

40
public/js/script.js
View file

@ -413,18 +413,28 @@ function highlightBadWord(index,showError) {
function showTimer() {
if (!config.showTimerBar) return;
$("#timerWrapper").css("opacity", 1);
$("#timerWrapper").animate({
"opacity": 1
},125);
}
function hideTimer() {
$("#timerWrapper").css("opacity", 0);
$("#timerWrapper").animate({
"opacity": 0
},125);
}
function restartTimer() {
$("#timer").stop(true, true).animate({
"width": "100vw"
},0);
}
function updateTimerBar() {
let percent = ((time + 1) / config.time) * 100;
$("#timer")
.stop(true, true)
.css("width", percent + "vw");
let percent = 100 - (((time + 1) / config.time) * 100);
$("#timer").stop(true, true).animate({
"width": percent + "vw"
},1000,"linear");
}
@ -932,6 +942,8 @@ function restartTest(withSameWordset = false) {
errorsPerSecond = [];
currentErrorCount = 0;
currentTestLine = 0;
hideTimer();
// restartTimer();
let el = null;
if(resultVisible){
//results are being displayed
@ -957,7 +969,10 @@ function restartTest(withSameWordset = false) {
});
}
resultVisible = false;
// .css("transition", "1s linear");
el.stop(true, true).animate({
opacity: 0
}, 125, () => {
@ -989,16 +1004,6 @@ function restartTest(withSameWordset = false) {
clearIntervals();
$("#restartTestButton").css('opacity', 1);
if ($("#commandLineWrapper").hasClass('hidden')) focusWords();
hideTimer();
setTimeout(function() {
$("#timer")
.css("transition", "none")
.css("width", "0vw")
.stop(true, true)
.animate({ top: 0 }, 0, () => {
$("#timer").css("transition", "1s linear");
});
}, 250);
wpmOverTimeChart.options.annotation.annotations[0].value = "-20";
wpmOverTimeChart.update();
@ -1628,6 +1633,7 @@ $(document).keypress(function(event) {
testActive = true;
testStart = Date.now();
if (config.mode == "time") {
restartTimer();
showTimer();
}
updateTimerBar();