diff --git a/public/css/style.scss b/public/css/style.scss index f3383dcde..078992668 100644 --- a/public/css/style.scss +++ b/public/css/style.scss @@ -1229,15 +1229,19 @@ key { display: flex; // margin-top: -0.5rem; - .crownWrapper { - width: 1.7rem; - overflow: hidden; - height: 1.7rem; - margin-left: 0.5rem; - // margin-top: 0.98rem; - margin-top: -0.5rem; + // .crownWrapper { + // width: 1.7rem; + // overflow: hidden; + // height: 1.7rem; + // margin-left: 0.5rem; + // // margin-top: 0.98rem; + // margin-top: -0.5rem; .crown { + height: 1.7rem; + width: 1.7rem; + margin-left: 0.5rem; + font-size: 0.7rem; line-height: 1.7rem; background: var(--main-color); @@ -1248,7 +1252,7 @@ key { width: 1.7rem; height: 1.7rem; } - } + // } } .bottom { diff --git a/public/index.html b/public/index.html index bcd3505bd..a85e88c21 100644 --- a/public/index.html +++ b/public/index.html @@ -920,10 +920,10 @@
wpm -
-
+
-
-
diff --git a/public/js/script.js b/public/js/script.js index 68679c04e..1c127e6ed 100644 --- a/public/js/script.js +++ b/public/js/script.js @@ -1597,11 +1597,11 @@ function calculateStats() { } function hideCrown() { - $("#result .stats .wpm .crownWrapper").css("opacity", 0); + $("#result .stats .wpm .crownWrapper").css("opacity", 0).addClass('hidden'); } function showCrown() { - $("#result .stats .wpm .crownWrapper").animate( + $("#result .stats .wpm .crown").removeClass('hidden').css('opacity','0').animate( { opacity: 1, }, @@ -1893,6 +1893,7 @@ function showResult(difficultyFailed = false) { accountIconLoading(true); let localPb = false; let dontShowCrown = false; + let pbDiff = 0; db_getLocalPB( config.mode, mode2, @@ -1912,9 +1913,13 @@ function showResult(difficultyFailed = false) { } if (lpb < stats.wpm) { //new pb based on local + pbDiff = Math.abs(stats.wpm - lpb); if (!dontShowCrown) { hideCrown(); showCrown(); + $("#result .stats .wpm .crown").attr('aria-label', '+' + roundTo2(pbDiff)); + } else { + $("#result .stats .wpm .crown").attr('aria-label', ''); } localPb = true; }