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 @@
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;
}