Update score and highscore boxes in standard themes

Author: Coteh

index.html

@@ -40,12 +40,12 @@
                     </div>
                     <div class="score-wrap-box">
                         <div class="score-box">
-                            <span class="score-label">Score:</span>
+                            <span class="score-label">Score</span>
                             <span class="score" id="score"></span>
                         </div>
                         <div class="space"></div>
                         <div class="highscore-box">
-                            <span class="score-label">Highscore:</span>
+                            <span class="score-label">Best</span>
                             <span class="highscore" id="highscore"></span>
                         </div>
                     </div>

src/index.ts

@@ -437,14 +437,20 @@ document.addEventListener("DOMContentLoaded", async () => {
             });
         }
         const welcomeText = document.querySelector(".classic-welcome-text") as HTMLElement;
+        const scoreLabel = document.querySelector(".score-box > .score-label") as HTMLElement;
+        const highscoreLabel = document.querySelector(".highscore-box > .score-label") as HTMLElement;
         if (selectedTheme === CLASSIC_THEME) {
             welcomeText.style.display = "block";
             classicTimeout = setTimeout(() => {
                 welcomeText.style.display = "";
             }, 5000);
+            scoreLabel.innerText = "Score:";
+            highscoreLabel.innerText = "Highscore:";
         } else {
             clearTimeout(classicTimeout);
             welcomeText.style.display = "";
+            scoreLabel.innerText = "Score";
+            highscoreLabel.innerText = "Best";
         }
     };
 

src/styles/game/menu.css

@@ -47,10 +47,32 @@
 
 .top-menu > .menu-options > .score-wrap-box {
     display: flex;
-    flex-direction: column;
-    align-items: flex-end;
+    justify-content: flex-end;
 }
 
 .score-box {
     position: relative;
 }
+
+body:not(.classic) .score-box,
+body:not(.classic) .highscore-box {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 4px;
+    min-width: 50px;
+    background-color: lightgray;
+}
+
+body:not(.classic) .score-box > .score-label,
+body:not(.classic) .highscore-box > .score-label {
+    text-transform: uppercase;
+    font-weight: bold;
+    font-size: 12px;
+    color: #6b6b6b;
+}
+
+body:not(.classic) .score-wrap-box {
+    gap: 6px;
+}

src/styles/themes/dark.css

@@ -62,3 +62,13 @@ body.dark button.button > * {
     color: #f2f2f2;
     font-weight: bold;
 }
+
+body.dark .score-box,
+body.dark .highscore-box {
+    background-color: grey;
+}
+
+body.dark .score-box > .score-label,
+body.dark .highscore-box > .score-label {
+    color: white;
+}