UI tweaks (#635)

cohstats · Oct 31, 2024 · 44c4d24 · 44c4d24
1 parent 2a9d35c
commit 44c4d24
Show file tree

Hide file tree

Showing 10 changed files with 146 additions and 64 deletions.
diff --git a/__tests__/src/coh3/helpers.test.ts b/__tests__/src/coh3/helpers.test.ts
@@ -35,13 +35,21 @@ describe("getMatchDuration", () => {
     expect(duration).toBe("01:00:00");
   });
 
+  test("calculates the duration for more than 24 hours", () => {
+    const startTime = 1645968000; // Feb 28, 2022 12:00:00 AM UTC
+    const endTime = 1645968000 + 90000; // Feb 29, 2022 1:00:00 AM UTC
+    const duration = getMatchDuration(startTime, endTime);
+
+    expect(duration).toBe("25:00:00");
+  });
+
   test("calculates the duration between start and end times (30 minutes)", () => {
     const startTime = 1645968000; // Feb 28, 2022 12:00:00 AM UTC
     const endTime = 1645970100; // Feb 28, 2022 12:35:00 AM UTC
 
     const duration = getMatchDuration(startTime, endTime);
 
-    expect(duration).toBe("00:35:00");
+    expect(duration).toBe("35:00");
   });
 
   test("calculates the duration between start and end times (1 minute)", () => {
@@ -50,7 +58,7 @@ describe("getMatchDuration", () => {
 
     const duration = getMatchDuration(startTime, endTime);
 
-    expect(duration).toBe("00:01:00");
+    expect(duration).toBe("01:00");
   });
 
   test("calculates the duration between start and end times (0 seconds)", () => {
@@ -59,7 +67,7 @@ describe("getMatchDuration", () => {
 
     const duration = getMatchDuration(startTime, endTime);
 
-    expect(duration).toBe("00:00:00");
+    expect(duration).toBe("00:00");
   });
 });
 

diff --git a/screens/home/news-section/news-section.tsx b/screens/home/news-section/news-section.tsx
@@ -35,6 +35,8 @@ const NewsCard = ({ title, image, gid }: { title: string; image: string; gid: st
               lineHeight: 1,
               fontSize: rem(28),
               marginTop: 0,
+              textShadow:
+                "1px 1px 1px var(--mantine-color-dark-6), -1px -1px 1px var(--mantine-color-dark-6), 1px -1px 1px var(--mantine-color-dark-6), -1px 1px 1px var(--mantine-color-dark-6)",
             }}
           >
             {title}
@@ -45,6 +47,8 @@ const NewsCard = ({ title, image, gid }: { title: string; image: string; gid: st
               fontSize: rem(18),
               fontWeight: 700,
               marginTop: theme.spacing.xs,
+              textShadow:
+                "1px 1px 1px var(--mantine-color-dark-6), -1px -1px 1px var(--mantine-color-dark-6), 1px -1px 1px var(--mantine-color-dark-6), -1px 1px 1px var(--mantine-color-dark-6)",
             }}
           >
             News

diff --git a/screens/players/tabs/activity-tab/activity-tab.tsx b/screens/players/tabs/activity-tab/activity-tab.tsx
@@ -79,7 +79,7 @@ const ActivityTab = ({
     );
 
   return (
-    <Container size={"lg"}>
+    <Container size={"lg"} pl={0} pr={0}>
       <Space h={"lg"} />
       <div style={{ height: 200 * yearDiff, paddingBottom: 30 }}>
         <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end" }}>

diff --git a/screens/players/tabs/components/player-summary.tsx b/screens/players/tabs/components/player-summary.tsx
@@ -1,10 +1,11 @@
-import { Group, Paper, Text, Tooltip } from "@mantine/core";
+import { Group, Paper, Text, Tooltip, useMantineTheme } from "@mantine/core";
 
 import DynamicTimeAgo from "../../../../components/other/dynamic-timeago";
 import React from "react";
 import { localizedNames, PlayerRank } from "../../../../src/coh3/coh3-data";
 import { PlayerSummaryType } from "../../../../src/players/utils";
 import Image from "next/image";
+import { useMediaQuery } from "@mantine/hooks";
 
 const PlayerSummary = ({
   playerSummary: { bestAlliesElo, bestAxisElo, totalGames, lastMatchDate, winRate },
@@ -19,6 +20,9 @@ const PlayerSummary = ({
     } | null;
   };
 }) => {
+  const theme = useMantineTheme();
+  const isMobile = useMediaQuery(`(max-width: ${theme.breakpoints.xs})`);
+
   const bestAxisEloText = bestAxisElo.bestElo ? bestAxisElo.bestElo : "-";
   const bestAlliesEloText = bestAlliesElo.bestElo ? bestAlliesElo.bestElo : "-";
 
@@ -27,13 +31,22 @@ const PlayerSummary = ({
       ? "No Rank Tier"
       : `${highestRankTier.tier.name} in ${highestRankTier.info?.type} as ${highestRankTier.info?.race}`;
 
+  const justifyText = isMobile ? "left" : "right";
+
   return (
-    <Paper
-      style={{
-        textAlign: "right",
-      }}
-    >
+    <Paper>
       <Group>
+        {isMobile && (
+          <Tooltip label={highestTierTooltip} position={"bottom"}>
+            <Image
+              src={highestRankTier.tier.url}
+              width={90}
+              height={90}
+              alt={highestRankTier.tier.name}
+              loading="lazy"
+            />
+          </Tooltip>
+        )}
         <Text span fz={"sm"}>
           <Tooltip
             label={
@@ -44,7 +57,7 @@ const PlayerSummary = ({
             }
             position={"bottom"}
           >
-            <Group justify={"right"} gap={"xs"}>
+            <Group justify={justifyText} gap={"xs"}>
               <>
                 <Text span fz={"sm"}>
                   Best AXIS ELO{" "}
@@ -64,7 +77,7 @@ const PlayerSummary = ({
               </>
             }
           >
-            <Group justify={"right"} gap={"xs"}>
+            <Group justify={justifyText} gap={"xs"}>
               <Text span fz={"sm"}>
                 Best ALLIES ELO{" "}
                 <Text inherit span fw={600}>
@@ -74,7 +87,7 @@ const PlayerSummary = ({
             </Group>
           </Tooltip>
           <Tooltip label={"Win Ratio in leaderboard games only."}>
-            <Group gap={5} justify={"right"}>
+            <Group gap={5} justify={justifyText}>
               <Text span fz={"sm"}>
                 WR{" "}
                 <Text span inherit fw={600}>
@@ -88,22 +101,24 @@ const PlayerSummary = ({
               </Text>
             </Group>
           </Tooltip>
-          <Group gap={4} justify="right">
+          <Group gap={4} justify={justifyText}>
             <Text span fz={"sm"}>
               Last match
             </Text>{" "}
             <DynamicTimeAgo timestamp={lastMatchDate} />
           </Group>
         </Text>
-        <Tooltip label={highestTierTooltip} position={"bottom"}>
-          <Image
-            src={highestRankTier.tier.url}
-            width={90}
-            height={90}
-            alt={highestRankTier.tier.name}
-            loading="lazy"
-          />
-        </Tooltip>
+        {!isMobile && (
+          <Tooltip label={highestTierTooltip} position={"bottom"}>
+            <Image
+              src={highestRankTier.tier.url}
+              width={90}
+              height={90}
+              alt={highestRankTier.tier.name}
+              loading="lazy"
+            />
+          </Tooltip>
+        )}
       </Group>
     </Paper>
   );

diff --git a/screens/players/tabs/detailed-stats-tab/inner-detailed-stats.tsx b/screens/players/tabs/detailed-stats-tab/inner-detailed-stats.tsx
@@ -66,7 +66,7 @@ const InnerDetailedStats = ({
     );
 
   return (
-    <Container size={"xl"}>
+    <Container size={"xl"} p={0}>
       <Grid justify="center">
         <Grid.Col span={{ base: 12, xs: 6, md: 6 }}>
           <Card p="md" shadow="sm" w={"100%"} withBorder>

diff --git a/screens/players/tabs/nemesis-tab.tsx b/screens/players/tabs/nemesis-tab.tsx
@@ -268,7 +268,7 @@ const NemesisTab = ({
 
   return (
     <>
-      <Container size={"md"}>
+      <Container size={"md"} pl={0} pr={0}>
         <Space h={"lg"} />
         <Title order={2}>1v1 Nemesis</Title>
         <Flex wrap={"wrap"}>

diff --git a/screens/players/tabs/recent-matches-tab/matches-table/render-map.tsx b/screens/players/tabs/recent-matches-tab/matches-table/render-map.tsx
@@ -21,7 +21,9 @@ const RenderMap = ({
   if (!isOfficialMap(mapName)) {
     return (
       <div>
-        <Text style={{ whiteSpace: "nowrap", textAlign: "center" }}>{mapName}</Text>
+        <Text style={{ whiteSpace: "nowrap", textAlign: "center" }} size={"sm"}>
+          {mapName}
+        </Text>
       </div>
     );
   }
@@ -41,7 +43,9 @@ const RenderMap = ({
           </div>
         </Tooltip>
         {renderTitle && (
-          <Text style={{ whiteSpace: "nowrap", textAlign: "center" }}>{maps[mapName]?.name}</Text>
+          <Text style={{ whiteSpace: "nowrap", textAlign: "center" }} size={"sm"}>
+            {maps[mapName]?.name}
+          </Text>
         )}
       </div>
     </>

diff --git a/screens/players/tabs/recent-matches-tab/player-recent-matches-tab.tsx b/screens/players/tabs/recent-matches-tab/player-recent-matches-tab.tsx
@@ -9,6 +9,7 @@ import {
   Tooltip,
   Center,
   Flex,
+  useMantineTheme,
 } from "@mantine/core";
 import { DataTable, DataTableSortStatus } from "mantine-datatable";
 import React from "react";
@@ -24,7 +25,7 @@ import FilterableHeader from "../filterable-header";
 
 import DynamicTimeAgo from "../../../../components/other/dynamic-timeago";
 import { getPlayerMatchHistoryResult, isPlayerVictorious } from "../../../../src/players/utils";
-import { useDisclosure, useLocalStorage } from "@mantine/hooks";
+import { useDisclosure, useLocalStorage, useMediaQuery } from "@mantine/hooks";
 import RenderPlayers from "./matches-table/render-players";
 import RenderMap from "./matches-table/render-map";
 
@@ -49,6 +50,9 @@ const PlayerRecentMatchesTab = ({
   error: string;
   customGamesHidden: boolean | undefined | null;
 }) => {
+  const theme = useMantineTheme();
+  const isMobile = useMediaQuery(`(max-width: ${theme.breakpoints.xs})`);
+
   const [opened, { open, close }] = useDisclosure(false);
   const [selectedMatchRecord, setSelectedMatchRecord] = React.useState<ProcessedMatch | null>(
     null,
@@ -177,7 +181,7 @@ const PlayerRecentMatchesTab = ({
         onClose={close}
       />
       <Flex justify={"space-between"} pb={"xs"}>
-        <Group gap={5}>
+        <Group gap={5} wrap={"nowrap"}>
           <IconInfoCircle size={18} />
           <Text span size={"sm"}>
             Click on the row for more details
@@ -274,9 +278,15 @@ const PlayerRecentMatchesTab = ({
                     <div
                       className={`${classes["row-indicator"]} ${classes["win-indicator"]}`}
                     ></div>
-                    <Badge color={"blue"} variant="filled" w={"16ch"}>
-                      VICTORY +{ratingChange}
-                    </Badge>
+                    {isMobile ? (
+                      <Badge color={"blue"} variant="filled">
+                        +{ratingChange}
+                      </Badge>
+                    ) : (
+                      <Badge color={"blue"} variant="filled" w={"16ch"}>
+                        VICTORY +{ratingChange}
+                      </Badge>
+                    )}
                   </div>
                 );
               } else {
@@ -286,9 +296,15 @@ const PlayerRecentMatchesTab = ({
                       <div
                         className={`${classes["row-indicator"]} ${classes["loss-indicator"]}`}
                       ></div>
-                      <Badge color={"red"} variant="filled" w={"16ch"}>
-                        DEFEAT {ratingChange}
-                      </Badge>
+                      {isMobile ? (
+                        <Badge color={"red"} variant="filled">
+                          {ratingChange}
+                        </Badge>
+                      ) : (
+                        <Badge color={"red"} variant="filled" w={"16ch"}>
+                          DEFEAT {ratingChange}
+                        </Badge>
+                      )}
                     </>
                   );
                 } else if (playerResult?.resulttype === 4) {
@@ -365,35 +381,46 @@ const PlayerRecentMatchesTab = ({
           },
           {
             title: (
-              <FilterableHeader
-                title="Mode"
-                options={filters.mode}
-                onChange={(filter) => handleFilterChange("mode", filter)}
-                onReset={() => handleFilterReset("mode")}
-              />
+              <>
+                <FilterableHeader
+                  title="Mode"
+                  options={filters.mode}
+                  onChange={(filter) => handleFilterChange("mode", filter)}
+                  onReset={() => handleFilterReset("mode")}
+                />
+                Duration
+              </>
             ),
             accessor: "matchtype_id",
             // sortable: true,
             textAlign: "center",
-            render: ({ matchtype_id }) => {
+            render: ({ matchtype_id, startgametime, completiontime }) => {
               const matchType =
                 matchTypesAsObject[matchtype_id as number]["localizedName"] ||
                 matchTypesAsObject[matchtype_id as number]["name"] ||
                 "unknown";
-              return <div style={{ whiteSpace: "nowrap" }}>{matchType.toLowerCase()}</div>;
-            },
-          },
-          {
-            title: "Duration",
-            accessor: "match_duration",
-            sortable: true,
-            textAlign: "center",
-            // The types in tables are broken, we need to figure out why
-            // @ts-ignore
-            render: ({ startgametime, completiontime }) => {
-              return <p>{getMatchDuration(startgametime as number, completiontime as number)}</p>;
+              return (
+                <>
+                  <div style={{ whiteSpace: "nowrap" }}>{matchType}</div>
+                  <span>
+                    {getMatchDuration(startgametime as number, completiontime as number)}
+                  </span>
+                </>
+              );
             },
           },
+          // {
+          //   title: "Duration",
+          //   accessor: "match_duration",
+          //   sortable: true,
+          //   hidden: true,
+          //   textAlign: "center",
+          //   // The types in tables are broken, we need to figure out why
+          //   // @ts-ignore
+          //   render: ({ startgametime, completiontime }) => {
+          //     return;
+          //   },
+          // },
           {
             accessor: "actions",
             title: "",