impr: leaderboard showing times in utc and local time (@fehmer) (monkeytypegame#6332)

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

Author: fehmer

frontend/src/html/pages/leaderboards.html

@@ -4,7 +4,7 @@
       <div class="bigtitle">
         <div class="text">-</div>
         <div class="subtext">
-          <div class="text"></div>
+          <div class="text" data-balloon-pos="down" data-balloon-break></div>
           <div class="divider hidden"></div>
           <button class="textButton hidden" data-action="toggleYesterday">
             <i class="fas fa-backward"></i>

frontend/src/styles/media-queries-purple.scss

@@ -22,6 +22,12 @@
       }
     }
   }
+  .pageLeaderboards {
+    .content .bigtitle .text:after {
+      left: 0.1rem;
+      transform: none;
+    }
+  }
   header {
     nav {
       font-size: 0.9rem;

frontend/src/ts/pages/leaderboards.ts

@@ -11,7 +11,16 @@ import * as Notifications from "../elements/notifications";
 import Format from "../utils/format";
 import { Auth, isAuthenticated } from "../firebase";
 import * as DB from "../db";
-import { format } from "date-fns";
+import {
+  endOfDay,
+  endOfWeek,
+  format,
+  startOfDay,
+  startOfWeek,
+  subDays,
+  subHours,
+  subMinutes,
+} from "date-fns";
 import { differenceInSeconds } from "date-fns/differenceInSeconds";
 import * as DateTime from "../utils/date-and-time";
 import { getHtmlByUserFlags } from "../controllers/user-flag-controller";
@@ -22,22 +31,20 @@ import {
   isDevEnvironment,
 } from "../utils/misc";
 import { abbreviateNumber } from "../utils/numbers";
-import {
-  getCurrentWeekTimestamp,
-  getLastWeekTimestamp,
-  getStartOfDayTimestamp,
-} from "@monkeytype/util/date-and-time";
 import { formatDistanceToNow } from "date-fns/formatDistanceToNow";
 import { z } from "zod";
 import { LocalStorageWithSchema } from "../utils/local-storage-with-schema";
 import {
   safeParse as parseUrlSearchParams,
   serialize as serializeUrlSearchParams,
 } from "zod-urlsearchparams";
+import { UTCDateMini } from "@date-fns/utc";
 // import * as ServerConfiguration from "../ape/server-configuration";
 
 const LeaderboardTypeSchema = z.enum(["allTime", "weekly", "daily"]);
 type LeaderboardType = z.infer<typeof LeaderboardTypeSchema>;
+const utcDateFormat = "EEEE, do MMMM yyyy";
+const localDateFormat = "EEEE, do MMMM yyyy HH:mm";
 
 type AllTimeState = {
   type: "allTime";
@@ -166,15 +173,15 @@ function updateTitle(): void {
         `);
     }
 
-    let timestamp = getStartOfDayTimestamp(new Date().getTime());
-
+    let timestamp = startOfDay(new UTCDateMini());
     if (state.yesterday) {
-      timestamp -= 24 * 60 * 60 * 100;
+      timestamp = subHours(timestamp, 24);
     }
 
-    const dateString = format(timestamp, "EEEE, do MMMM yyyy");
-    $(".page.pageLeaderboards .bigtitle .subtext > .text").text(
-      `${dateString}`
+    updateTimeText(
+      format(timestamp, utcDateFormat) + " UTC",
+      utcToLocalDate(timestamp),
+      utcToLocalDate(endOfDay(timestamp))
     );
   } else if (state.type === "weekly") {
     $(".page.pageLeaderboards .bigtitle .subtext").removeClass("hidden");
@@ -199,18 +206,20 @@ function updateTitle(): void {
         `);
     }
 
-    let fn = getCurrentWeekTimestamp();
-
+    let timestamp = startOfWeek(new UTCDateMini(), { weekStartsOn: 1 });
     if (state.lastWeek) {
-      fn = getLastWeekTimestamp();
+      timestamp = subDays(timestamp, 7);
     }
-
-    const dateString = `${format(fn, "EEEE, do MMMM yyyy")} - ${format(
-      fn + 6 * 24 * 60 * 60 * 1000,
-      "EEEE, do MMMM yyyy"
-    )}`;
-    $(".page.pageLeaderboards .bigtitle .subtext > .text").text(
-      `${dateString}`
+    const endingTimestamp = endOfWeek(timestamp, { weekStartsOn: 1 });
+
+    const dateString = `${format(timestamp, utcDateFormat)} - ${format(
+      endingTimestamp,
+      utcDateFormat
+    )} UTC`;
+    updateTimeText(
+      dateString,
+      utcToLocalDate(timestamp),
+      utcToLocalDate(endingTimestamp)
     );
   }
 }
@@ -979,12 +988,7 @@ let updateTimer: number | undefined;
 
 function updateTimerElement(): void {
   if (state.type === "daily") {
-    const date = new Date();
-    date.setUTCHours(0, 0, 0, 0);
-    date.setDate(date.getDate() + 1);
-    const dateNow = new Date();
-    dateNow.setUTCMilliseconds(0);
-    const diff = differenceInSeconds(date, dateNow);
+    const diff = differenceInSeconds(new Date(), endOfDay(new UTCDateMini()));
 
     $(".page.pageLeaderboards .titleAndButtons .timer").text(
       "Next reset in: " + DateTime.secondsToString(diff, true)
@@ -998,10 +1002,8 @@ function updateTimerElement(): void {
       "Next update in: " + DateTime.secondsToString(totalSeconds, true)
     );
   } else if (state.type === "weekly") {
-    const nextWeekTimestamp =
-      getCurrentWeekTimestamp() + 7 * 24 * 60 * 60 * 1000;
-    const currentTime = new Date().getTime();
-    const totalSeconds = Math.floor((nextWeekTimestamp - currentTime) / 1000);
+    const nextWeekTimestamp = endOfWeek(new UTCDateMini(), { weekStartsOn: 1 });
+    const totalSeconds = differenceInSeconds(new Date(), nextWeekTimestamp);
     $(".page.pageLeaderboards .titleAndButtons .timer").text(
       "Next reset in: " +
         DateTime.secondsToString(totalSeconds, true, true, ":", true, true)
@@ -1318,3 +1320,23 @@ export const page = new Page({
 $(async () => {
   Skeleton.save("pageLeaderboards");
 });
+
+function utcToLocalDate(timestamp: UTCDateMini): Date {
+  return subMinutes(timestamp, new Date().getTimezoneOffset());
+}
+
+function updateTimeText(
+  dateString: string,
+  localStart: Date,
+  localEnd: Date
+): void {
+  const localDateString =
+    "local time \n" +
+    format(localStart, localDateFormat) +
+    " - \n" +
+    format(localEnd, localDateFormat);
+
+  const text = $(".page.pageLeaderboards .bigtitle .subtext > .text");
+  text.text(`${dateString}`);
+  text.attr("aria-label", localDateString);
+}