Merge pull request #368 from cohstats/antd-50-update

Update Antd to v5 & lot of additional fixes
cohstats · Jan 28, 2025 · 0ed7d68 · 0ed7d68
2 parents 8d8f96e + dde0e65
commit 0ed7d68
Show file tree

Hide file tree

Showing 19 changed files with 719 additions and 217 deletions.
diff --git a/packages/app/src/renderer/windows/settings/app.tsx b/packages/app/src/renderer/windows/settings/app.tsx
@@ -536,10 +536,11 @@ const App = (): JSX.Element => {
                   disabled={!settings.streamOverlay}
                   value={settings.streamOverlayPosition}
                   onChange={handleStreamViewLayoutChange}
-                >
-                  <Select.Option value="top">Top</Select.Option>
-                  <Select.Option value="left">Left</Select.Option>
-                </Select>
+                  options={[
+                    { value: "top", label: "Top" },
+                    { value: "left", label: "Left" },
+                  ]}
+                />
               </Form.Item>
             </Collapse.Panel>
           </Collapse>

diff --git a/packages/web/package.json b/packages/web/package.json
@@ -11,14 +11,14 @@
     "analyze": "source-map-explorer build/static/js/*.js"
   },
   "dependencies": {
-    "@ant-design/icons": "4.7.0",
+    "@ant-design/icons": "5.6.0",
     "@ant-design/plots": "1.2.6",
     "@nivo/bar": "0.72.0",
     "@nivo/core": "0.72.0",
     "@nivo/geo": "0.72.0",
     "@nivo/heatmap": "0.72.0",
     "@nivo/pie": "0.72.0",
-    "antd": "4.24.16",
+    "antd": "5.13.3",
     "connected-react-router": "6.9.3",
     "date-fns": "2.29.3",
     "dayjs": "1.11.11",

diff --git a/packages/web/src/components/charts/map-stats/play-time-histogram.tsx b/packages/web/src/components/charts/map-stats/play-time-histogram.tsx
@@ -39,7 +39,7 @@ export const PlayTimeHistogram: React.FC<IProps> = ({ data }) => {
 
   return (
     <ResponsiveBar
-      margin={{ top: 0, right: 0, bottom: 40, left: 45 }}
+      margin={{ top: 0, right: 0, bottom: 40, left: 55 }}
       // @ts-ignore
       data={chartData as data[] | undefined}
       layout={"vertical"}
@@ -55,7 +55,7 @@ export const PlayTimeHistogram: React.FC<IProps> = ({ data }) => {
         tickPadding: 5,
         tickRotation: 0,
         legendPosition: "middle",
-        legendOffset: -40,
+        legendOffset: -50,
         legend: "Amout of games",
       }}
       axisBottom={{

diff --git a/packages/web/src/components/main-footer.tsx b/packages/web/src/components/main-footer.tsx
@@ -10,8 +10,8 @@ const { Link } = Typography;
 
 export const MainFooter: React.FC = () => {
   return (
-    <Footer style={{ textAlign: "center", padding: 20 }}>
-      <Divider />
+    <Footer style={{ textAlign: "center", padding: 0, paddingBottom: 10, marginTop: 20 }}>
+      <Divider style={{ marginTop: 0 }} />
       This is unofficial fan-made site for Company Of Heroes 2. Not associated with Relic
       Entertainment.
       <br />
@@ -21,14 +21,22 @@ export const MainFooter: React.FC = () => {
       <br />
       © 2025 COH2stats.com
       <br />
-      <a href={"https://github.com/cohstats/coh2stats"} target="_blank" rel="noopener noreferrer">
+      <Link
+        href={"https://github.com/cohstats/coh2stats"}
+        target="_blank"
+        rel="noopener noreferrer"
+        style={{ marginRight: 15 }}
+      >
         <img width={30} height={30} src={"/resources/github-dark.png"} alt={"GitHub Logo"} />
-      </a>
-      {"  "}
-      <a href={config.discordInviteLink} target="_blank" rel="noopener noreferrer">
+      </Link>
+      <Link
+        href={config.discordInviteLink}
+        target="_blank"
+        rel="noopener noreferrer"
+        style={{ marginRight: 15 }}
+      >
         <img width={30} height={30} src={"/resources/discord-icon.svg"} alt={"Discord Logo"} />
-      </a>
-      {"  "}
+      </Link>
       <Link href={config.donationLink} target="_blank" rel="noopener noreferrer" strong>
         <img
           width={30}
@@ -48,9 +56,11 @@ export const MainFooter: React.FC = () => {
           }
         />
       </div>
-      The Company of Heroes is registered trademark of SEGA Holdings. Co
-      <br />
-      The COH2 Images and other assets are owned by Relic Entertainment and/or SEGA
+      <Typography.Text type="secondary" style={{ fontSize: "12px" }}>
+        The Company of Heroes is registered trademark of SEGA Holdings. Co
+        <br />
+        The COH2 Images and other assets are owned by Relic Entertainment and/or SEGA
+      </Typography.Text>
       <br />
       <br />
       Visit{" "}

diff --git a/packages/web/src/components/main-header.tsx b/packages/web/src/components/main-header.tsx
@@ -174,7 +174,7 @@ export const MainHeader: React.FC = () => {
                 whiteSpace: "nowrap",
               }}
             >
-              CoH 2 Logs & Stats
+              COH 2 Stats
             </div>
           </Link>
         </div>

diff --git a/packages/web/src/components/online-players.tsx b/packages/web/src/components/online-players.tsx
@@ -10,54 +10,31 @@ const OnlinePlayers: React.FC = () => {
     timeStampMs: number;
   }>(null);
 
+  const fetchPlayerCount = async () => {
+    try {
+      const fetchData = await fetch(onlineGamePlayersOnSteamUrl);
+      const data = await fetchData.json();
+      if (data && data.response.player_count > 0) {
+        setOnlinePlayersData({
+          playerCount: data.response.player_count,
+          timeStampMs: new Date(fetchData.headers.get("last-modified") || "").getTime(),
+        });
+      }
+    } catch (e) {
+      console.error("Failed to fetch player count:", e);
+    }
+  };
+
   useEffect(() => {
-    (async () => {
-      try {
-        if (
-          (onlinePlayersData &&
-            onlinePlayersData.timeStampMs < new Date().getTime() - 1000 * 60 * 4) ||
-          !onlinePlayersData
-        ) {
-          const fetchData = await fetch(onlineGamePlayersOnSteamUrl);
-          // reader header last-modified:
-          const data = await fetchData.json();
-          setOnlinePlayersData({
-            playerCount: data.response.player_count,
-            timeStampMs: new Date(fetchData.headers.get("last-modified") || "").getTime(),
-          });
-        }
+    // Initial fetch
+    fetchPlayerCount();
 
-        // Update the data every 5 minutes
-        const intervalId = setInterval(async () => {
-          try {
-            if (
-              (onlinePlayersData &&
-                onlinePlayersData.timeStampMs < new Date().getTime() - 1000 * 60 * 4) ||
-              !onlinePlayersData
-            ) {
-              const fetchData = await fetch(onlineGamePlayersOnSteamUrl);
-              const data = await fetchData.json();
-              if (data && data.player_count > 0) {
-                setOnlinePlayersData({
-                  playerCount: data.response.player_count,
-                  timeStampMs: new Date(fetchData.headers.get("last-modified") || "").getTime(),
-                });
-              }
-            }
-          } catch (e) {
-            console.error(e);
-          }
-        }, 1000 * 60 * 5);
+    // Set up interval for updates every 5 minutes
+    const intervalId = setInterval(fetchPlayerCount, 1000 * 60 * 5);
 
-        return () => {
-          clearInterval(intervalId);
-        };
-      } catch (e) {
-        console.error(e);
-      }
-    })();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+    // Cleanup interval on unmount
+    return () => clearInterval(intervalId);
+  }, []); // Empty dependency array is fine here since fetchPlayerCount is stable
 
   return (
     <>

diff --git a/packages/web/src/config.tsx b/packages/web/src/config.tsx
@@ -24,7 +24,7 @@ const config = {
   firebase,
   firebaseFunctions,
   devHostnames,
-  discordInviteLink: "https://discord.gg/jRrnwqMfkr",
+  discordInviteLink: "https://discord.gg/4Bj2y84WAR",
   donationLink: "https://ko-fi.com/cohstats",
   coh2steamGameId: 231430,
   api: {

diff --git a/packages/web/src/pages/about/about.tsx b/packages/web/src/pages/about/about.tsx
@@ -3,7 +3,6 @@ import { Typography } from "antd";
 import { doc, getDoc, getFirestore } from "firebase/firestore";
 import { KofiDonate } from "./kofi-donate";
 import config from "../../config";
-import { PayPalDonation } from "./paypal-donations";
 
 const { Title, Link, Text, Paragraph } = Typography;
 
@@ -82,46 +81,6 @@ const About: React.FC = () => {
         <br />
         Such games are never gathered. As 6 hours is hard stop in our crawler system.
       </Paragraph>
-      <s>
-        <Paragraph>
-          We are currently crawling top 200 positions from all kinds of COH2 leaderboards (1v1,2v2
-          etc). This gives us 5200(~3000 unique) top players for the given day. We then proceed
-          with analysing/saving their matches for the given day. This gives us ~4000 matches /
-          day.
-          <br />
-          And we are tracking only <Text strong>auto-match games</Text> which are against players
-          (filter out vs AI games).
-          <br />
-          Update 22/Aug/21: Query top 400 positions.
-          <br />
-          Update 25/Oct/21: Query top 600 positions.
-        </Paragraph>
-        More technical description of this process can be found{" "}
-        <Link href="https://github.com/cohstats/coh2stats#crawler-process" target="_blank">
-          here
-        </Link>
-        <br />
-        <br />
-        <s>
-          However based on{" "}
-          <Link href="http://coh2chart.com/" target="_blank">
-            this data
-          </Link>{" "}
-          from 2017 we expect that there is around ~50k matches/day. Which means{" "}
-          <Text strong>we are processing around 8% of all games</Text>.
-        </s>
-        <br />
-        Update June 2022: Thanks to the access to the live games we know that we analyze 40% of
-        all games.
-        <br />
-        To be precise: 1v1 - 25%, 2v2 - 37%, 3v3 - 41%, 4v4 - 47%. We aim to get to 100%
-        <br />
-        <br />
-        The amount of data with some types of games is really a problem. You can see that winrate
-        each day can really fluctuate by tens of % if the amount of games is under 1k for the
-        given date.
-      </s>
-      <br />
       <br />
       <b>So far analyzed {analyzedMatches} matches.</b>
       <a href={"#top200"}>
@@ -178,7 +137,6 @@ const About: React.FC = () => {
       </Link>{" "}
       for more info. Any contributions are welcomed.
       <br />
-      <br />
       You can report any bugs or feature requests on{" "}
       <Link href="https://github.com/cohstats/coh2stats/issues" target="_blank">
         GitHub issues
@@ -187,7 +145,7 @@ const About: React.FC = () => {
       <br />
       <br />
       For any discussion, ideas or anything else. Visit our{" "}
-      <Link href="https://discord.gg/jRrnwqMfkr" target="_blank">
+      <Link href={config.discordInviteLink} target="_blank">
         discord channel
       </Link>{" "}
       or head over to the coh2.org{" "}
@@ -199,10 +157,6 @@ const About: React.FC = () => {
       </Link>
       .
       <br />
-      You can also use this site email or dm me{" "}
-      <Link href="https://www.coh2.org/user/112252/pagep" target="_blank">
-        at the forums.
-      </Link>
       <br />
       <Text strong>
         {" "}
@@ -254,10 +208,6 @@ const About: React.FC = () => {
           <br />
           no registration required.
         </i>
-        <br />
-        <br />
-        <PayPalDonation />
-        <i>Direct PayPal</i>
       </div>
     </div>
   );
-Original file line number
+Diff line change
@@ Expand Up / @@ -174,7 +174,7 @@ export const MainHeader: React.FC = () => { @@
                     whiteSpace: "nowrap",
                   }}
                 >
-                  CoH 2 Logs & Stats
+                  COH 2 Stats
                 </div>
               </Link>
             </div>
@@ Expand Down @@