Displays a live timer bar at the top of the screen when in timed mode.
Displays a live timer for timed tests.
show
hide
diff --git a/public/js/commandline.js b/public/js/commandline.js
index f48af328a..0ae9ad4a1 100644
--- a/public/js/commandline.js
+++ b/public/js/commandline.js
@@ -37,7 +37,7 @@ let commands = {
},
{
id: "toggleTimerBar",
- display: "Toggle timer bar display",
+ display: "Toggle timer display",
exec: () => {
config.showTimerBar = !config.showTimerBar;
saveConfigToCookie();
@@ -110,6 +110,15 @@ let commands = {
showCommandLine();
}
},
+ {
+ id: "changeTimerStyle",
+ display: "Change timer...",
+ subgroup: true,
+ exec: () => {
+ currentCommands.push(commandsTimerStyle);
+ showCommandLine();
+ }
+ },
{
id: "changeTheme",
display: "Change theme...",
@@ -245,6 +254,28 @@ let commandsCaretStyle = {
]
}
+
+let commandsTimerStyle = {
+ title: "Change timer...",
+ list: [
+ {
+ id: "setTimerStyleBar",
+ display: "bar",
+ exec: () => {
+ setTimerStyle('bar');
+ }
+ },
+ {
+ id: "setTimerStyleText",
+ display: "text",
+ exec: () => {
+ setTimerStyle('text');
+ }
+ },
+
+ ]
+}
+
let commandsWordCount = {
title: "Change word count...",
list: [
diff --git a/public/js/script.js b/public/js/script.js
index 4b86c3984..3a32cf006 100644
--- a/public/js/script.js
+++ b/public/js/script.js
@@ -413,28 +413,47 @@ function highlightBadWord(index,showError) {
function showTimer() {
if (!config.showTimerBar) return;
- $("#timerWrapper").animate({
- "opacity": 1
- },125);
+ if(config.timerStyle === "bar"){
+ $("#timerWrapper").animate({
+ "opacity": 1
+ },250);
+ }else if(config.timerStyle === "text"){
+ $("#timerNumber").animate({
+ "opacity": .25
+ },250);
+ }
}
function hideTimer() {
- $("#timerWrapper").animate({
- "opacity": 0
- },125);
+ if(config.timerStyle === "bar"){
+ $("#timerWrapper").animate({
+ "opacity": 0
+ },125);
+ }else if(config.timerStyle === "text"){
+ $("#timerNumber").animate({
+ "opacity": 0
+ },125);
+ }
}
function restartTimer() {
- $("#timer").stop(true, true).animate({
- "width": "100vw"
- },0);
+ if(config.timerStyle === "bar"){
+ $("#timer").stop(true, true).animate({
+ "width": "100vw"
+ },0);
+ }
}
-function updateTimerBar() {
- let percent = 100 - (((time + 1) / config.time) * 100);
- $("#timer").stop(true, true).animate({
- "width": percent + "vw"
- },1000,"linear");
+function updateTimer() {
+ if(config.timerStyle === "bar"){
+ let percent = 100 - (((time + 1) / config.time) * 100);
+ $("#timer").stop(true, true).animate({
+ "width": percent + "vw"
+ },1000,"linear");
+ }else if(config.timerStyle === "text"){
+ $("#timerNumber").html(config.time - time);
+ }
+
}
@@ -625,6 +644,7 @@ function showResult(difficultyFailed = false) {
setFocus(false);
hideCaret();
hideLiveWpm();
+ hideTimer();
testInvalid = false;
let stats = calculateStats();
if(stats === undefined){
@@ -1636,11 +1656,11 @@ $(document).keypress(function(event) {
restartTimer();
showTimer();
}
- updateTimerBar();
+ updateTimer();
clearIntervals();
timers.push(setInterval(function() {
time++;
- updateTimerBar();
+ updateTimer();
let wpm = liveWPM();
updateLiveWpm(wpm);
showLiveWpm();
diff --git a/public/js/settings.js b/public/js/settings.js
index 13e65f917..b6c79d70a 100644
--- a/public/js/settings.js
+++ b/public/js/settings.js
@@ -72,6 +72,8 @@ function updateSettingsPage(){
setActiveFontSizeButton();
setActiveDifficultyButton();
setActiveCaretStyleButton();
+ setActiveTimerStyleButton();
+
if (config.showKeyTips) {
$(".pageSettings .tip").removeClass('hidden');
@@ -112,6 +114,11 @@ function setActiveCaretStyleButton() {
$(`.pageSettings .section.caretStyle .buttons .button[caret=`+config.caretStyle+`]`).addClass('active');
}
+function setActiveTimerStyleButton() {
+ $(`.pageSettings .section.timerStyle .buttons .button`).removeClass('active');
+ $(`.pageSettings .section.timerStyle .buttons .button[timer=`+config.timerStyle+`]`).addClass('active');
+}
+
function setSettingsButton(buttonSection,tf) {
if (tf) {
$(".pageSettings .section."+buttonSection+" .buttons .button.on").addClass('active');
diff --git a/public/js/userconfig.js b/public/js/userconfig.js
index 575c3f811..baf06d4cf 100644
--- a/public/js/userconfig.js
+++ b/public/js/userconfig.js
@@ -20,7 +20,8 @@ let defaultConfig = {
flipTestColors: false,
layout:"default",
showDiscordDot: true,
- maxConfidence: false
+ maxConfidence: false,
+ timerStyle: "bar"
}
let config = defaultConfig;
@@ -60,6 +61,7 @@ function loadConfigFromCookie() {
setDiscordDot(newConfig.hideDiscordDot,true);
setExtraTestColor(newConfig.extraTestColor,true);
setMaxConfidence(newConfig.maxConfidence,true);
+ setTimerStyle(newConfig.timerStyle,true);
if(newConfig.resultFilters == null || newConfig.resultFilters == undefined){
newConfig.resultFilters = ["all"];
}
@@ -213,6 +215,15 @@ function setCaretStyle(caretStyle, nosave) {
if(!nosave) saveConfigToCookie();
}
+
+function setTimerStyle(style, nosave) {
+ if (style == null || style == undefined) {
+ style = 'bar';
+ }
+ config.timerStyle = style;
+ if(!nosave) saveConfigToCookie();
+}
+
//key tips
function setKeyTips(keyTips, nosave) {
config.showKeyTips = keyTips;