Chores (#150)

* Adjust wording for sync popup

* Refactor scroll feature and add scrolling effect

Author: codepvg

frontend/js/leaderboard/mobile-scroll-top.js

@@ -0,0 +1,42 @@
+const btn = document.getElementById("scroll-top-btn");
+
+if (btn) {
+  const THRESHOLD = 300;
+
+  window.addEventListener(
+    "scroll",
+    () => {
+      btn.classList.toggle("visible", window.scrollY > THRESHOLD);
+    },
+    { passive: true },
+  );
+
+  btn.addEventListener("click", () => {
+    document.body.classList.add("crt-scrolling");
+
+    const duration = 500; // ms
+    const startY = window.scrollY;
+    const startTime = performance.now();
+
+    function step(currentTime) {
+      const elapsed = currentTime - startTime;
+      const progress = Math.min(elapsed / duration, 1);
+
+      // Easing out cubic
+      const easeProgress = 1 - Math.pow(1 - progress, 3);
+
+      // Add slight vertical jitter while scrolling up for CRT effect
+      const jitter = progress < 1 ? Math.random() * 8 - 4 : 0;
+
+      window.scrollTo(0, Math.max(0, startY * (1 - easeProgress) + jitter));
+
+      if (progress < 1) {
+        requestAnimationFrame(step);
+      } else {
+        document.body.classList.remove("crt-scrolling");
+      }
+    }
+
+    requestAnimationFrame(step);
+  });
+}

frontend/js/leaderboard/sync-changes.js

@@ -40,7 +40,7 @@ document.addEventListener("DOMContentLoaded", () => {
     body.innerHTML = "";
 
     if (changes.no_changes) {
-      body.innerHTML = `<div class="changes-content-line"><span style="color:var(--text-muted);">No changes detected since last sync.</span></div>`;
+      body.innerHTML = `<div class="changes-content-line"><span style="color:var(--text-muted);">No changes detected in the most recent sync.</span></div>`;
       btn.classList.remove("pulse");
       return;
     }

frontend/leaderboard.html

@@ -164,7 +164,7 @@ <h1 class="page-title">Leaderboard</h1>
     <div id="changes-modal-overlay" class="changes-modal-overlay">
       <div class="changes-card">
         <div class="changes-card-header">
-          <span class="changes-card-title">[SYNC_CHANGES]</span>
+          <span class="changes-card-title">[ACTIVITY_LOG]</span>
           <button id="close-changes-btn" class="changes-card-close">
             [DISMISS]
           </button>
@@ -398,23 +398,7 @@ <h1 class="page-title">Leaderboard</h1>
     <!-- Scroll to Top button -->
     <button id="scroll-top-btn" aria-label="Scroll to top">⮝</button>
 
-    <script nonce="__NONCE__">
-      (function () {
-        var btn = document.getElementById("scroll-top-btn");
-        var THRESHOLD = 300;
-        window.addEventListener(
-          "scroll",
-          function () {
-            btn.classList.toggle("visible", window.scrollY > THRESHOLD);
-          },
-          { passive: true },
-        );
-        btn.addEventListener("click", function () {
-          window.scrollTo({ top: 0, behavior: "smooth" });
-        });
-      })();
-    </script>
-
+    <script src="js/leaderboard/mobile-scroll-top.js"></script>
     <script src="js/leaderboard/sync-changes.js"></script>
     <script src="js/footer.js"></script>
     <script src="js/matrix.js"></script>

frontend/styles/main.css

@@ -77,6 +77,11 @@ body::after {
   );
 }
 
+body.crt-scrolling {
+  animation: flicker 0.3s infinite;
+  filter: blur(0.5px) contrast(1.1) brightness(1.2);
+}
+
 /* ── Animations ── */
 @keyframes blink {
   0%,
@@ -1038,6 +1043,7 @@ body::after {
   -webkit-touch-callout: none;
   -webkit-tap-highlight-color: transparent;
 }
+
 .mobile-score span {
   user-select: none;
   -webkit-user-select: none;
@@ -2259,6 +2265,7 @@ body::-webkit-scrollbar-thumb {
 .score-caret::after {
   content: ">";
 }
+
 @media (hover: hover) and (pointer: fine) {
   .tooltip-score:hover .score-caret {
     color: var(--cyan);
@@ -2269,12 +2276,14 @@ body::-webkit-scrollbar-thumb {
   opacity: 1;
   visibility: visible;
 }
+
 @media (hover: hover) and (pointer: fine) {
   .tooltip-score:hover .score-tooltip {
     opacity: 1;
     visibility: visible;
   }
 }
+
 .tooltip-score.active .score-caret {
   transform: rotate(90deg);
   color: var(--cyan);
@@ -2553,10 +2562,11 @@ body::-webkit-scrollbar-thumb {
 
 /* scroll to top button */
 #scroll-top-btn {
-  display: none; /* hidden on desktop entirely */
+  display: none;
+  /* hidden on desktop entirely */
   position: fixed;
-  bottom: 1.5rem;
-  right: 1.25rem;
+  bottom: 70px;
+  right: 16px;
   z-index: 111999;
 
   visibility: hidden;
@@ -2565,30 +2575,38 @@ body::-webkit-scrollbar-thumb {
 
   background: transparent;
   border: 1px solid var(--green);
+  border-radius: 4px;
   color: var(--green);
 
-  font-family: "Fira Code", monospace;
-  font-size: 0.75rem;
+  width: 38px;
+  height: 38px;
+
+  font-family: inherit;
+  font-size: 18px;
   line-height: 1;
 
-  padding: 0.45rem 0.6rem;
+  align-items: center;
+  justify-content: center;
   cursor: pointer;
 
   box-shadow:
-    0 0 8px rgba(0, 229, 255, 0.25),
-    inset 0 0 8px rgba(0, 229, 255, 0.05);
+    0 0 8px rgba(0, 255, 65, 0.25),
+    inset 0 0 8px rgba(0, 255, 65, 0.05);
 
-  text-shadow: 0 0 6px rgba(0, 229, 255, 0.5);
+  text-shadow: 0 0 6px rgba(0, 255, 65, 0.5);
 
   transition:
     opacity 0.25s ease,
     visibility 0.25s ease,
-    box-shadow 0.2s ease;
+    box-shadow 0.2s ease,
+    background 0.2s ease,
+    color 0.2s ease,
+    transform 0.2s ease;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 940px) {
   #scroll-top-btn {
-    display: block;
+    display: flex;
   }
 
   #scroll-top-btn.visible {
@@ -2599,10 +2617,11 @@ body::-webkit-scrollbar-thumb {
 
   #scroll-top-btn:active {
     box-shadow:
-      0 0 14px rgba(0, 229, 255, 0.55),
-      inset 0 0 10px rgba(0, 229, 255, 0.15);
-
-    color: #fff;
+      0 0 14px rgba(0, 255, 65, 0.55),
+      inset 0 0 10px rgba(0, 255, 65, 0.15);
+    background: var(--green-dim);
+    color: var(--bg);
+    transform: translateY(0);
   }
 }
 
@@ -2730,6 +2749,7 @@ body::-webkit-scrollbar-thumb {
     opacity: 1;
     text-shadow: 0 0 5px var(--green);
   }
+
   50% {
     opacity: 0;
     text-shadow: none;