feat: leaderboard scroll to users position when using the user button (@fehmer) (monkeytypegame#6285)

- scroll to users position when using the user button
- add scroll to top button on leaderboard page

---------

Co-authored-by: Miodec <[email protected]>

Author: fehmer

frontend/src/html/pages/about.html

@@ -1,7 +1,4 @@
 <div class="page pageAbout hidden full-width content-grid" id="pageAbout">
-  <div class="scrollToTopButton invisible">
-    <i class="fas fa-angle-double-up"></i>
-  </div>
   <div class="created">
     Created with love by Miodec.
     <br />

frontend/src/html/pages/account.html

@@ -1,7 +1,4 @@
 <div class="page pageAccount hidden full-width" id="pageAccount">
-  <div class="scrollToTopButton invisible">
-    <i class="fas fa-angle-double-up"></i>
-  </div>
   <div class="preloader hidden">
     <div class="icon">
       <i class="fas fa-fw fa-spin fa-circle-notch"></i>

frontend/src/html/pages/settings.html

@@ -1,7 +1,4 @@
 <div class="page pageSettings hidden full-width content-grid" id="pageSettings">
-  <div class="scrollToTopButton invisible">
-    <i class="fas fa-angle-double-up"></i>
-  </div>
   <div class="settingsGroup quickNav">
     <div class="links">
       <a class="textButton" href="#group_behavior">

frontend/src/index.html

@@ -21,6 +21,11 @@
         <div class="bar"></div>
       </div>
     </div>
+    <div class="content-grid scrollToTopContainer">
+      <div class="scrollToTopButton invisible breakout">
+        <i class="fas fa-angle-double-up"></i>
+      </div>
+    </div>
     <div id="popups">
       <load src="html/popups.html" />
     </div>

frontend/src/styles/core.scss

@@ -59,35 +59,37 @@
   --padding-inline: 2rem;
   --content-max-width: 1536px;
 
-  // --breakout-max-width: 1200px;
-
-  // --breakout-size: calc(
-  //   (var(--breakout-max-width) - var(--content-max-width)) / 2
-  // );
+  --breakout-size: calc(
+    (calc(var(--content-max-width) + 12rem) - var(--content-max-width)) / 2
+  );
 
   justify-content: center;
   display: grid;
   grid-template-columns:
-    [full-width-start] minmax(0, var(--padding-inline))
-    [full-width-padding-start] minmax(0, 1fr)
-    // [breakout-start] minmax(0, var(--breakout-size))
-    [content-start] min(
-      100% - (var(--padding-inline) * 2),
-      var(--content-max-width)
-    )
+    [full-width-start]
+    var(--padding-inline)
+    [full-width-padding-start]
+    minmax(0, 1fr)
+    [breakout-start]
+    minmax(0, var(--breakout-size))
+    [content-start]
+    min(100% - (var(--padding-inline) * 2), var(--content-max-width))
     [content-end]
-    // minmax(0, var(--breakout-size)) [breakout-end]
-    minmax(0, 1fr) [full-width-padding-end]
-    minmax(0, var(--padding-inline)) [full-width-end];
+    minmax(0, var(--breakout-size))
+    [breakout-end]
+    minmax(0, 1fr)
+    [full-width-padding-end]
+    var(--padding-inline)
+    [full-width-end];
 }
 
 .content-grid > :not(.breakout, .full-width, .full-width-padding) {
   grid-column: content;
 }
 
-// #app > .breakout {
-//   grid-column: breakout;
-// }
+.content-grid > .breakout {
+  grid-column: breakout;
+}
 
 .content-grid > .full-width {
   grid-column: full-width;
@@ -283,24 +285,34 @@ key {
   visibility: hidden !important;
 }
 
-.scrollToTopButton {
-  bottom: 4rem;
-  right: 2rem;
+.scrollToTopContainer {
   position: fixed;
-  font-size: 2rem;
-  width: 4rem;
-  height: 4rem;
-  text-align: center;
-  line-height: 4rem;
-  background: var(--sub-alt-color);
-  border-radius: 99rem;
-  z-index: 99;
-  cursor: pointer;
-  color: var(--sub-color);
-  transition: 0.25s;
-  &:hover {
-    background: var(--text-color);
-    color: var(--bg-color);
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 99999999;
+
+  .scrollToTopButton {
+    pointer-events: all;
+    place-self: end end;
+    margin-bottom: 2rem;
+    font-size: 2rem;
+    width: 4rem;
+    height: 4rem;
+    text-align: center;
+
+    line-height: 4rem;
+    background: var(--sub-alt-color);
+    border-radius: 99rem;
+    outline: 0.5rem solid var(--bg-color);
+
+    cursor: pointer;
+    color: var(--sub-color);
+    transition: 0.25s;
+    &:hover {
+      background: var(--text-color);
+      color: var(--bg-color);
+    }
   }
 }
 

frontend/src/ts/elements/scroll-to-top.ts

@@ -4,6 +4,7 @@ import { prefersReducedMotion } from "../utils/misc";
 let visible = false;
 
 $(document).on("click", ".scrollToTopButton", () => {
+  $(".scrollToTopButton").addClass("invisible");
   window.scrollTo({
     top: 0,
     behavior: prefersReducedMotion() ? "instant" : "smooth",
@@ -13,14 +14,13 @@ $(document).on("click", ".scrollToTopButton", () => {
 $(window).on("scroll", () => {
   const page = ActivePage.get();
   if (page === "test") return;
-  if (page === "about" || page === "settings" || page === "account") {
-    const scroll = window.scrollY;
-    if (!visible && scroll > 100) {
-      $(".scrollToTopButton").removeClass("invisible");
-      visible = true;
-    } else if (visible && scroll < 100) {
-      $(".scrollToTopButton").addClass("invisible");
-      visible = false;
-    }
+
+  const scroll = window.scrollY;
+  if (!visible && scroll > 100) {
+    $(".scrollToTopButton").removeClass("invisible");
+    visible = true;
+  } else if (visible && scroll < 100) {
+    $(".scrollToTopButton").addClass("invisible");
+    visible = false;
   }
 });

frontend/src/ts/pages/leaderboards.ts

@@ -16,7 +16,11 @@ import { differenceInSeconds } from "date-fns/differenceInSeconds";
 import * as DateTime from "../utils/date-and-time";
 import { getHtmlByUserFlags } from "../controllers/user-flag-controller";
 import { getHTMLById as getBadgeHTMLbyId } from "../controllers/badge-controller";
-import { getDiscordAvatarUrl, isDevEnvironment } from "../utils/misc";
+import {
+  applyReducedMotion,
+  getDiscordAvatarUrl,
+  isDevEnvironment,
+} from "../utils/misc";
 import { abbreviateNumber } from "../utils/numbers";
 import {
   getCurrentWeekTimestamp,
@@ -66,6 +70,7 @@ type State = {
   title: string;
   error?: string;
   discordAvatarUrls: Map<string, string>;
+  scrollToUserAfterFill: boolean;
 } & (AllTimeState | WeeklyState | DailyState);
 
 const state = {
@@ -79,6 +84,7 @@ const state = {
   pageSize: 50,
   title: "All-time English Time 15 Leaderboard",
   discordAvatarUrls: new Map<string, string>(),
+  scrollToUserAfterFill: false,
 } as State;
 
 function updateTitle(): void {
@@ -896,6 +902,19 @@ function updateContent(): void {
   updateJumpButtons();
   updateTimerVisibility();
   fillTable();
+
+  if (state.scrollToUserAfterFill) {
+    const windowHeight = $(window).height() ?? 0;
+    const offset = $(`.tableAndUser .me`).offset()?.top ?? 0;
+    const scrollTo = offset - windowHeight / 2;
+    $([document.documentElement, document.body]).animate(
+      {
+        scrollTop: scrollTo,
+      },
+      applyReducedMotion(500)
+    );
+    state.scrollToUserAfterFill = false;
+  }
 }
 
 function updateTypeButtons(): void {
@@ -1068,6 +1087,7 @@ function handleJumpButton(action: string, page?: number): void {
           }
 
           state.page = page;
+          state.scrollToUserAfterFill = true;
         }
       }
     }