Bottom Bar change, Leaderboard bug fix

css/bottom.css

@@ -1,5 +1,5 @@
 :root {
-    --bottom-bar-distance: 400px;
+    --bottom-bar-distance: 430px;
 }
 
 #bottom {
@@ -127,11 +127,11 @@
     position: absolute;
 	padding: 10px 0px 10px 0px;
 	text-align: center;
-	border-radius: 30px;
+	/* border-radius: 30px;
     border-style: solid;
     border-width: 8px;
-    border-color: #15151e;
-	bottom: 10px;
+    border-color: #15151e; */
+	bottom: 20px;
 	width: 150px;
 	color: white;
 	font-size: 25px;
@@ -141,18 +141,18 @@
 	overflow: hidden;
 	text-overflow: ellipsis;
 	text-shadow: 0 2px 5px rgba(0, 0, 0, 1);
-	left: 625px;
+	left: 580px;
 }
 
 #pp {
     position: absolute;
 	padding: 10px 0px 10px 0px;
 	text-align: center;
-	border-radius: 30px;
+	/* border-radius: 30px;
     border-style: solid;
     border-width: 8px;
-    border-color: #15151e;
-	bottom: 10px;
+    border-color: #15151e; */
+	bottom: 20px;
 	width: 150px;
 	color: white;
 	font-size: 25px;
@@ -162,7 +162,7 @@
 	overflow: hidden;
 	text-overflow: ellipsis;
 	text-shadow: 0 2px 5px rgba(0, 0, 0, 1);
-	right: 625px;
+	right: 580px;
 }
 
 #accInfo {
@@ -290,19 +290,29 @@
 
 .bottomBar {
     position: absolute;
-    bottom: 40px;
-    width: 220px;
-    padding: 5px;
+    bottom: 0px;
+    width: 400px;
+	height: 67px;
     border-radius: 10px;
     background-color: #15151e;
+	mask-size: 100%;
+	mask-repeat: no-repeat;
+	mask-position: center;
+	-webkit-mask-size: 100%;
+	-webkit-mask-repeat: no-repeat;
+	-webkit-mask-position: center;
 }
 
 #comboBar {
     left: var(--bottom-bar-distance);
+	mask-image: url('../static/bottombar1.png');
+	-webkit-mask-image: url('../static/bottombar1.png');
 }
 
 #ppBar {
     right: var(--bottom-bar-distance);
+	mask-image: url('../static/bottombar2.png');
+	-webkit-mask-image: url('../static/bottombar2.png');
 }
 
 #recorderContainer {

index.html

@@ -49,10 +49,10 @@
 						<div id="h50" class="odometer"></div>
 						<div id="h0" class="odometer"></div>
 					</div>
-					<div id="combo" class="odometer combo"></div>
-					<div id="pp" class="odometer pp"></div>
 					<div id="comboBar" class="bottomBar"></div>
 					<div id="ppBar" class="bottomBar"></div>
+					<div id="combo" class="odometer combo"></div>
+					<div id="pp" class="odometer pp"></div>
 				</div>
 				<div id="URIndex" class="odometer"><b></b></div>
 				<div id="URbar">
@@ -199,7 +199,7 @@
 			<defs>
 			  <clipPath id="myClip">
 				<polygon points="1536,972 1920,972 1920,1080 1536,1080"/>
-				<polygon points="800,1030 1120,1030 1120,1080, 800,1080" />
+				<polygon points="750,1030 1170,1030 1170,1080, 750,1080" />
 			  </clipPath>
 			</defs>
 		  </svg>

index.js

@@ -853,14 +853,14 @@ async function setupUser(name) {
         tickRight.style.boxShadow = `0 0 10px 3px hsl(${avatarColor[1]})`;
 
         document.getElementById("comboBar").style.backgroundColor = `hsl(${avatarColor[0]})`;
-        document.getElementById("comboBar").style.boxShadow = `0 0 10px 3px hsl(${avatarColor[0]})`;
+        // document.getElementById("comboBar").style.filter = `drop-shadow(0 0 10px hsl(${avatarColor[0]}))`;
         document.getElementById("ppBar").style.backgroundColor = `hsl(${avatarColor[1]})`;
-        document.getElementById("ppBar").style.boxShadow = `0 0 10px 3px hsl(${avatarColor[1]})`;
+        // document.getElementById("ppBar").style.boxShadow = `0 0 10px 3px hsl(${avatarColor[1]})`;
 
-        combo.style.borderColor = `hsl(${avatarColor[0]})`;
-        combo.style.boxShadow = `0 0 10px 3px hsl(${avatarColor[0]})`;
-        pp.style.borderColor = `hsl(${avatarColor[1]})`;
-        pp.style.boxShadow = `0 0 10px 3px hsl(${avatarColor[1]})`;
+        // combo.style.borderColor = `hsl(${avatarColor[0]})`;
+        // combo.style.boxShadow = `0 0 10px 3px hsl(${avatarColor[0]})`;
+        // pp.style.borderColor = `hsl(${avatarColor[1]})`;
+        // pp.style.boxShadow = `0 0 10px 3px hsl(${avatarColor[1]})`;
     }
 }
 
@@ -945,7 +945,7 @@ grader = (h300, h100, h50, h0, isHD) => {
                 return `<div id="gradeOurplayer" style="width: 50px; color: #de3950; filter: drop-shadow(0 0 5px #de3950)">X</div>`;
                 break;
             }
-            playerGradeLB.innerHTML = `<div id=grade${i}"  style="width: 50px; color: #ffffff; filter: drop-shadow(0 0 5px #ffffff)">X</div>`;
+            return `<div id="gradeOurplayer"  style="width: 50px; color: #ffffff; filter: drop-shadow(0 0 5px #ffffff)">X</div>`;
             break;
         case (acc > 90 && h50 / maxCombo < 0.01 && h0 === 0):
             if (isHD === -1) {