Polish the maps on the matches (#52)

* Polish the maps on the matches

* Polish the maps on the matches

* Fix prettier

README.md

@@ -13,7 +13,7 @@ Anyone can put a hand in building this site. Please consider joining our [Discor
 
 ## Getting Started with development
 
-https://dev.coh3stats.com/
+Master branch is deployed to https://dev.coh3stats.com/
 
 First install dependencies:
 
@@ -27,12 +27,12 @@ Run the development server:
 yarn next:dev
 ```
 
-Note: if images does not show up, you can also use `yarn next:dev`
-
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
 You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
 
+Before making an MR please create an issue describing what you want to change / how you want to change it.
+So we can have some discussion, also it avoids multiple people working on the same thing.
+
 ## Development aproach
 
 ### High level architecture
@@ -63,10 +63,14 @@ Example pages:
 
 #### Reasons:
 
-- Because it's public website, SSR pages will be much better readed by search engines and generally it will provide better experience
-- All the data fetching (from DB, cloud functions and other) should happen in SSR, because GCP services are blocked in some countries ( China, Russia), that way we can offer site avaliabily everywhere.
-- The SSR functions can connect to some public APIs and will fetch the data from Firestore and may call some cloud functions
-- The SSR functions should be "light weight" if we need to run some big data computations we should do so Cloud Functions on GCP where we can control the performance
+- Because it's public website, SSR pages will be much better readed by search engines and generally it will provide
+  better experience
+- All the data fetching (from DB, cloud functions and other) should happen in SSR, because GCP services are blocked in
+  some countries ( China, Russia), that way we can offer site avaliabily everywhere.
+- The SSR functions can connect to some public APIs and will fetch the data from Firestore and may call some cloud
+  functions
+- The SSR functions should be "light weight" if we need to run some big data computations we should do so Cloud
+  Functions on GCP where we can control the performance
 - The whole source code for NextJS will be in this repo and will be open source
 - The BE of the CF will be closed source because, we will most likely connect to sensitive APIs
 
@@ -90,7 +94,8 @@ Backend:
 - Firebase Cloud Functions - in TypeScript
 - Database:
   - Firestore - for basic data
-  - Other DB? We might need a different DB for storing the info - as we might expect high amount of reads / writes -- not perfect for FireStore
+  - Other DB? We might need a different DB for storing the info - as we might expect high amount of reads / writes --
+    not perfect for FireStore
   - Big Query - for stored matches (we need to do pricing calculations on this)
 
 ## Learn More
@@ -100,4 +105,5 @@ To learn more about Next.js, take a look at the following resources:
 - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
 - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions
+are welcome!

components/player-card/player-recent-matches.tsx

@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { Badge, Anchor, Text, Group, Button, Card, Center } from "@mantine/core";
+import { Badge, Anchor, Text, Group, Button } from "@mantine/core";
 import Image from "next/image";
 import { DataTable } from "mantine-datatable";
 import React from "react";
@@ -50,16 +50,25 @@ const PlayerRecentMatches = ({
     return matchRecord.matchhistoryreportresults[0];
   };
 
-  const renderMap = (name: any) => {
+  const renderMap = (name: string) => {
+    // In case we don't track the map, eg custom maps
+    if (!maps[name]) {
+      return (
+        <div>
+          <Text align="center" style={{ whiteSpace: "nowrap" }}>
+            {name}
+          </Text>
+        </div>
+      );
+    }
+
     return (
-      <Card style={{ background: "none" }}>
-        <Card.Section>
-          <Center>
-            <Image src={maps[name]?.url} width={160} height={160} alt={name} loading="lazy" />
-          </Center>
-        </Card.Section>
-        <Text align="center">{maps[name]?.name}</Text>
-      </Card>
+      <div>
+        <Image src={maps[name]?.url} width={60} height={60} alt={name} loading="lazy" />
+        <Text align="center" style={{ whiteSpace: "nowrap" }}>
+          {maps[name]?.name}
+        </Text>
+      </div>
     );
   };
 
@@ -73,7 +82,7 @@ const PlayerRecentMatches = ({
           const ratingPlayedWith = matchHistory.oldrating;
           const ratingChange = matchHistory.newrating - matchHistory.oldrating;
           const ratingChangeAsElement =
-            ratingChange > 0 ? (
+            ratingChange >= 0 ? (
               <Text color={"green"}>+{ratingChange}</Text>
             ) : (
               <Text color={"red"}>{ratingChange}</Text>
@@ -202,7 +211,7 @@ const PlayerRecentMatches = ({
                 matchTypesAsObject[matchtype_id]["localizedName"] ||
                 matchTypesAsObject[matchtype_id]["name"] ||
                 "unknown";
-              return <>{matchType.toLowerCase()}</>;
+              return <div style={{ whiteSpace: "nowrap" }}>{matchType.toLowerCase()}</div>;
             },
           },
           {

components/player-card/player-standings-table.tsx

@@ -1,15 +1,15 @@
-import { leaderBoardType, raceID, raceType, RawLeaderboardStat } from "../../src/coh3/coh3-types";
+import { leaderBoardType, raceType, RawLeaderboardStat } from "../../src/coh3/coh3-types";
 import { DataTable } from "mantine-datatable";
 import FactionIcon from "../../pages/faction-icon";
-import { localizedNames, matchTypesAsObject, raceIDs } from "../../src/coh3/coh3-data";
+import { localizedNames } from "../../src/coh3/coh3-data";
 import { Space, Group, Text, Title, Anchor } from "@mantine/core";
 
 import React from "react";
 import dynamic from "next/dynamic";
 import Link from "next/link";
-import CountryFlag from "../country-flag";
 import { getLeaderBoardRoute } from "../../src/routes";
 
+// We need to do this because of the SSR. It would have different time while the data reach FE
 const DynamicTimeAgo = dynamic(() => import("../internal-timeago"), {
   ssr: false,
   // @ts-ignore
@@ -59,8 +59,7 @@ const PlayerStandingsTable = ({
               if (!rank || rank < 0) {
                 return "-";
               }
-
-              const startPosition = Math.abs(rank - 10) + 1;
+              const startPosition = Math.max(rank - 10, 0) + 1;
 
               return (
                 <Anchor

src/coh3/coh3-data.ts

@@ -282,20 +282,20 @@ const matchTypesAsObject: Record<number, { id: number; name: string; localizedNa
 };
 
 const maps: { [key: string]: { name: string; url: string } } = {
-  twin_beach_2p_mkii: { name: "Twin Beaches", url: "/maps/twin_beaches.png" },
-  desert_village_2p_mkiii: { name: "Road to Tunis", url: "/maps/road_to_tunis.png" },
-  cliff_crossing_2p: { name: "Taranto Coastline", url: "/maps/taranto_coastline.png" },
-  rails_and_sand_4p: { name: "Campbell's Convoy", url: "/maps/campbells_convoy.png" },
-  rural_town_4p: { name: "Pachino Farmlands", url: "/maps/pachino_farmlands.png" },
-  torrente_4p_mkiii: { name: "Torrente", url: "/maps/torrente.png" },
-  rural_castle_4p: { name: "Aere Perennius", url: "/maps/aere_perennius.png" },
+  twin_beach_2p_mkii: { name: "Twin Beaches", url: "/icons/maps/twin_beaches.webp" },
+  desert_village_2p_mkiii: { name: "Road to Tunis", url: "/icons/maps/road_to_tunis.webp" },
+  cliff_crossing_2p: { name: "Taranto Coastline", url: "/icons/maps/taranto_coastline.webp" },
+  rails_and_sand_4p: { name: "Campbell's Convoy", url: "/icons/maps/campbells_convoy.webp" },
+  rural_town_4p: { name: "Pachino Farmlands", url: "/icons/maps/pachino_farmlands.webp" },
+  torrente_4p_mkiii: { name: "Torrente", url: "/icons/maps/torrente.webp" },
+  rural_castle_4p: { name: "Aere Perennius", url: "/icons/maps/aere_perennius.webp" },
   desert_airfield_6p_mkii: {
     name: "Gazala Landing Ground",
-    url: "/maps/gazala_landing_ground.png",
+    url: "/icons/maps/gazala_landing_ground.webp",
   },
-  industrial_railyard_6p_mkii: { name: "L'Aquila", url: "/maps/laquila.png" },
-  winter_line_8p_mkii: { name: "Winter Line", url: "/maps/winter_line.png" },
-  mountain_ruins_8p_mkii: { name: "Mignano Gap", url: "/maps/mignano_gap.png" },
+  industrial_railyard_6p_mkii: { name: "L'Aquila", url: "/icons/maps/laquila.webp" },
+  winter_line_8p_mkii: { name: "Winter Line", url: "/icons/maps/winter_line.webp" },
+  mountain_ruins_8p_mkii: { name: "Mignano Gap", url: "/icons/maps/mignano_gap.webp" },
 };
 
 export {