Add info button + default black theme (#244)

* Add info button + default black theme

* Disable codecov comments

codecov.yaml

@@ -0,0 +1,2 @@
+codecov:
+  comment: false

components/icon/relic-icon.tsx

@@ -0,0 +1,8 @@
+import relic_icon from "../../public/icons/general/relic_icon.png";
+import Image from "next/image";
+
+const RelicIcon = ({ size = 20 }: { size?: number }) => {
+  return <Image src={relic_icon} alt={`$Relic icon`} width={size} height={size} unoptimized />;
+};
+
+export default RelicIcon;

components/screens/players/components/player-id-icon.tsx

@@ -0,0 +1,33 @@
+import { ActionIcon, Code, Group, HoverCard, Text } from "@mantine/core";
+import { IconBrandSteam, IconInfoCircle } from "@tabler/icons-react";
+import React from "react";
+import RelicIcon from "../../../icon/relic-icon";
+
+const PlayerIdIcon = ({ relicID, steamID }: { relicID: number; steamID?: string }) => {
+  return (
+    <HoverCard width={260} shadow="md">
+      <HoverCard.Target>
+        <ActionIcon size="lg" variant="default" radius="md">
+          <IconInfoCircle size={25} />
+        </ActionIcon>
+      </HoverCard.Target>
+      <HoverCard.Dropdown>
+        <Group spacing={"xs"}>
+          <RelicIcon size={17} />
+          <Text size="sm">Relic ID &nbsp;</Text>
+
+          <Code>{relicID}</Code>
+        </Group>
+        {steamID && (
+          <Group spacing={"xs"}>
+            <IconBrandSteam size={15} />
+            <Text size="sm">Steam ID</Text>
+            <Code>{steamID}</Code>
+          </Group>
+        )}
+      </HoverCard.Dropdown>
+    </HoverCard>
+  );
+};
+
+export default PlayerIdIcon;

components/screens/players/index.tsx

@@ -29,6 +29,7 @@ import PlayerSummary from "./components/player-summary";
 import PlayerStandings from "./components/player-standings";
 import PlayerRecentMatches from "./components/player-recent-matches";
 import ErrorCard from "../../error-card";
+import PlayerIdIcon from "./components/player-id-icon";
 
 const createPlayerHeadDescription = (
   playerData: PlayerCardDataType,
@@ -158,6 +159,10 @@ const PlayerCard = ({
                   )}
                   {platform === "psn" && <PSNIcon label="Play Station player" />}
                   {platform === "xbox" && <XboxIcon label="XBOX player" />}
+                  <PlayerIdIcon
+                    relicID={playerData.info.relicID}
+                    steamID={playerData.info.steamID || undefined}
+                  />
                 </Group>
               </Stack>
             </Group>

components/screens/stats/game/charts/maps-played-bar.tsx

@@ -50,7 +50,7 @@ const MapsPlayedBarChart: React.FC<IProps> = ({ data }) => {
         tickSize: 5,
         tickPadding: 5,
         legend: "Number of games",
-        tickRotation: -45,
+        tickRotation: -55,
         legendPosition: "middle",
         legendOffset: 38,
       }}

components/screens/stats/maps/charts/maps-played-bar.tsx

@@ -36,7 +36,7 @@ const MapsPlayedBarChart: React.FC<IProps> = ({ data }) => {
         tickSize: 5,
         tickPadding: 5,
         legend: "Number of games",
-        tickRotation: -35,
+        tickRotation: -45,
         legendPosition: "middle",
         legendOffset: 38,
       }}

pages/_app.tsx

@@ -9,7 +9,7 @@ import { useColorScheme, useLocalStorage } from "@mantine/hooks";
 import Script from "next/script";
 import webFirebase from "../src/firebase/web-firebase";
 import { BetaVersion } from "../components/other/beta-version";
-import { useEffect, useRef } from "react";
+import { useEffect } from "react";
 import NProgress from "nprogress";
 import "../components/other/nprogress.css";
 import ContentContainer from "../components/Content-container";
@@ -25,14 +25,14 @@ export default function App(props: AppProps & { colorScheme: ColorScheme }) {
 
   // get system colorscheme
   const systemColorScheme = useColorScheme("dark");
-  const prevSystemColorSchemeRef = useRef(systemColorScheme);
-
-  // create a cookie on browser to store if the user is visiting the site for the first time
-  const [firstVisit, setFirstVisit] = useLocalStorage<boolean>({
-    key: "first-visit",
-    defaultValue: true,
-    getInitialValueInEffect: true,
-  });
+  // const prevSystemColorSchemeRef = useRef(systemColorScheme);
+  //
+  // // create a cookie on browser to store if the user is visiting the site for the first time
+  // const [firstVisit, setFirstVisit] = useLocalStorage<boolean>({
+  //   key: "first-visit",
+  //   defaultValue: true,
+  //   getInitialValueInEffect: true,
+  // });
 
   // create a cookie on browser to store colorscheme starting out with system colorscheme as default
   const [colorScheme, setColorScheme] = useLocalStorage<ColorScheme>({
@@ -41,20 +41,20 @@ export default function App(props: AppProps & { colorScheme: ColorScheme }) {
     getInitialValueInEffect: true,
   });
 
-  // useColorScheme returns an incorrect initial value due to serverside rendering
-  // when on the client for the first time set the colorscheme to system preferences
-  useEffect(() => {
-    if (typeof document !== "undefined") {
-      // only run on client side
-      if (prevSystemColorSchemeRef.current !== systemColorScheme) {
-        if (firstVisit) {
-          setColorScheme(systemColorScheme);
-          setFirstVisit(false);
-        }
-      }
-      prevSystemColorSchemeRef.current = systemColorScheme;
-    }
-  }, [systemColorScheme]);
+  // // useColorScheme returns an incorrect initial value due to serverside rendering
+  // // when on the client for the first time set the colorscheme to system preferences
+  // useEffect(() => {
+  //   if (typeof document !== "undefined") {
+  //     // only run on client side
+  //     if (prevSystemColorSchemeRef.current !== systemColorScheme) {
+  //       if (firstVisit) {
+  //         setColorScheme(systemColorScheme);
+  //         setFirstVisit(false);
+  //       }
+  //     }
+  //     prevSystemColorSchemeRef.current = systemColorScheme;
+  //   }
+  // }, [systemColorScheme]);
 
   // switch colorscheme
   const toggleColorScheme = (value?: ColorScheme) =>

src/coh3/coh3-types.ts

@@ -86,11 +86,12 @@ export type PlayerCardDataType = {
   COH3PlayTime: null;
   standings: InternalStandings;
   info: {
+    relicID: number;
     country: string;
     level: number;
     name: string;
     xp: number | undefined;
-    steamID: string | undefined;
+    steamID: string | null;
   };
 };
 

src/players/standings.ts

@@ -53,11 +53,12 @@ const getPlayerInfo = (statGroup: RawStatGroup) => {
   const possibleSteamId = convertSteamNameToID(playerData.name);
 
   return {
+    relicID: playerData.profile_id,
     name: playerData.alias,
     country: playerData.country,
     level: playerData.level,
     xp: playerData.xp,
-    steamID: possibleSteamId !== "" ? possibleSteamId : undefined,
+    steamID: possibleSteamId !== "" ? possibleSteamId : null,
   };
 };