diff --git a/__tests__/src/coh3/helpers.test.ts b/__tests__/src/coh3/helpers.test.ts index 23cde2ee..0f04ad82 100644 --- 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 index 60cb7474..b6ccceaa 100644 --- 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 index d0bbcd3c..e6d44028 100644 --- 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 ( - +
diff --git a/screens/players/tabs/components/player-summary.tsx b/screens/players/tabs/components/player-summary.tsx index 22300ef2..7bf8d42a 100644 --- 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 ( - + + {isMobile && ( + + {highestRankTier.tier.name} + + )} - + <> Best AXIS ELO{" "} @@ -64,7 +77,7 @@ const PlayerSummary = ({ } > - + Best ALLIES ELO{" "} @@ -74,7 +87,7 @@ const PlayerSummary = ({ - + WR{" "} @@ -88,22 +101,24 @@ const PlayerSummary = ({ - + Last match {" "} - - {highestRankTier.tier.name} - + {!isMobile && ( + + {highestRankTier.tier.name} + + )} ); diff --git a/screens/players/tabs/detailed-stats-tab/inner-detailed-stats.tsx b/screens/players/tabs/detailed-stats-tab/inner-detailed-stats.tsx index 49b13705..f0818839 100644 --- 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 ( - + diff --git a/screens/players/tabs/nemesis-tab.tsx b/screens/players/tabs/nemesis-tab.tsx index c73aef25..bbc12ae1 100644 --- a/screens/players/tabs/nemesis-tab.tsx +++ b/screens/players/tabs/nemesis-tab.tsx @@ -268,7 +268,7 @@ const NemesisTab = ({ return ( <> - + 1v1 Nemesis 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 index 821dcada..cbf67bfe 100644 --- 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 (
- {mapName} + + {mapName} +
); } @@ -41,7 +43,9 @@ const RenderMap = ({
{renderTitle && ( - {maps[mapName]?.name} + + {maps[mapName]?.name} + )}
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 index ae8979ef..dd7a8fa7 100644 --- 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( null, @@ -177,7 +181,7 @@ const PlayerRecentMatchesTab = ({ onClose={close} /> - + Click on the row for more details @@ -274,9 +278,15 @@ const PlayerRecentMatchesTab = ({
- - VICTORY +{ratingChange} - + {isMobile ? ( + + +{ratingChange} + + ) : ( + + VICTORY +{ratingChange} + + )} ); } else { @@ -286,9 +296,15 @@ const PlayerRecentMatchesTab = ({
- - DEFEAT {ratingChange} - + {isMobile ? ( + + {ratingChange} + + ) : ( + + DEFEAT {ratingChange} + + )} ); } else if (playerResult?.resulttype === 4) { @@ -365,35 +381,46 @@ const PlayerRecentMatchesTab = ({ }, { title: ( - handleFilterChange("mode", filter)} - onReset={() => handleFilterReset("mode")} - /> + <> + 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
{matchType.toLowerCase()}
; - }, - }, - { - 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

{getMatchDuration(startgametime as number, completiontime as number)}

; + return ( + <> +
{matchType}
+ + {getMatchDuration(startgametime as number, completiontime as number)} + + + ); }, }, + // { + // 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: "", diff --git a/src/coh3/coh3-data.ts b/src/coh3/coh3-data.ts index e0d44ac0..1eedbf19 100644 --- a/src/coh3/coh3-data.ts +++ b/src/coh3/coh3-data.ts @@ -432,99 +432,112 @@ export const raceIDsAsObject: Record< export const matchTypesAsObject: Record< number, - { id: number; name: string; localizedName?: string } + { id: number; name: string; localizedName: string } > = { 0: { id: 0, name: "Custom", + localizedName: "Custom", }, 1: { id: 1, name: "1V1_Ranked", - localizedName: "1 VS 1", + localizedName: "1 vs 1", }, 2: { id: 2, name: "2V2_Ranked", - localizedName: "2 VS 2", + localizedName: "2 vs 2", }, 3: { id: 3, name: "3V3_Ranked", - localizedName: "3 VS 3", + localizedName: "3 vs 3", }, 4: { id: 4, name: "4V4_Ranked", - localizedName: "4 VS 4", + localizedName: "4 vs 4", }, 5: { id: 5, name: "2V2_Ai_Easy", + localizedName: "2v2 AI Easy", }, 6: { id: 6, name: "2V2_Ai_Medium", + localizedName: "2v2 AI Medium", }, 7: { id: 7, name: "2V2_Ai_Hard", + localizedName: "2v2 AI Hard", }, 8: { id: 8, name: "2V2_Ai_Expert", + localizedName: "2v2 AI Expert", }, 9: { id: 9, name: "3V3_Ai_Easy", + localizedName: "3v3 AI Easy", }, 10: { id: 10, name: "3V3_Ai_Medium", + localizedName: "3v3 AI Medium", }, 11: { id: 11, name: "3V3_Ai_Hard", + localizedName: "3v3 AI Hard", }, 12: { id: 12, name: "3V3_Ai_Expert", + localizedName: "3v3 AI Expert", }, 13: { id: 13, name: "4V4_Ai_Easy", + localizedName: "4v4 AI Easy", }, 14: { id: 14, name: "4V4_Ai_Medium", + localizedName: "4v4 AI Medium", }, 15: { id: 15, name: "4V4_Ai_Hard", + localizedName: "4v4 AI Hard", }, 16: { id: 16, name: "4V4_Ai_Expert", + localizedName: "4v4 AI Expert", }, 20: { id: 20, name: "1V1_Unranked", - localizedName: "1 VS 1", + localizedName: "1 vs 1", }, 21: { id: 21, name: "2V2_Unranked", - localizedName: "2 VS 2", + localizedName: "2 vs 2", }, 22: { id: 22, name: "3V3_Unranked", - localizedName: "3 VS 3", + localizedName: "3 vs 3", }, 23: { id: 23, name: "4V4_Unranked", - localizedName: "4 VS 4", + localizedName: "4 vs 4", }, }; diff --git a/src/coh3/helpers.ts b/src/coh3/helpers.ts index 2e610ced..b0789974 100644 --- a/src/coh3/helpers.ts +++ b/src/coh3/helpers.ts @@ -24,7 +24,18 @@ const convertSteamNameToID = (name: string): string => { * @param endTime */ const getMatchDuration = (startTime: number, endTime: number) => { - return new Date((endTime - startTime) * 1000).toISOString().slice(11, 19); //return duration in HH:MM:SS format + const durationSeconds = endTime - startTime; + const hours = Math.floor(durationSeconds / 3600); + const minutes = Math.floor((durationSeconds % 3600) / 60); + const seconds = durationSeconds % 60; + + const pad = (num: number) => num.toString().padStart(2, "0"); + + if (hours > 0) { + return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`; + } else { + return `${pad(minutes)}:${pad(seconds)}`; + } }; /**