Prettier everything and add .gitattributes files

.gitattributes

@@ -0,0 +1,9 @@
+* text eol=lf
+# Denote all files that are truly binary and should not be modified.
+*.png binary
+*.jpg binary
+*.ico binary
+*.gif binary
+*.7z binary
+*.ico binary
+*.webp binary

src/Settings.tsx

@@ -216,17 +216,17 @@ export const Settings: React.FC = () => {
                 }
               >
                 Setup instructions
+              </Anchor>{" "}
+              &{" "}
+              <Anchor
+                onClick={() =>
+                  openLink(
+                    "https://github.com/cohstats/coh3-stats-desktop-app#custom-css-for-the-overlay"
+                  )
+                }
+              >
+                Custom CSS instructions
               </Anchor>
-              {" "}&{" "}<Anchor
-              onClick={() =>
-                openLink(
-                  "https://github.com/cohstats/coh3-stats-desktop-app#custom-css-for-the-overlay"
-                )
-              }
-            >
-              Custom CSS instructions
-            </Anchor>
-
             </Text>
             <Group pt="md">
               <Text>Path to streamerOverlay.html:</Text>

src/components/PlayerCard.tsx

@@ -21,7 +21,7 @@ import { PlayerWinRatio } from "./PlayerWinRatio"
 import { PlayerWins } from "./PlayerWins"
 import { open } from "@tauri-apps/api/shell"
 import { getFactionName, getCountryName } from "../utils/renameLabels"
-import RankIcon from "./other/rank-icon";
+import RankIcon from "./other/rank-icon"
 
 export interface PlayerCardProps extends FullPlayerData {}
 
@@ -58,28 +58,28 @@ export const PlayerCard: React.FC<PlayerCardProps> = ({
           <Col span="auto">
             <Stack align="stretch">
               <Group position={"apart"}>
-              <Group>
-                {!ai ? (
-                  <Tooltip label={countryName}>
-                    <Image
-                      src={"/flags/4x3/" + country + ".svg"}
-                      alt={country}
-                      width={35}
-                    />
-                  </Tooltip>
-                ) : null}
+                <Group>
+                  {!ai ? (
+                    <Tooltip label={countryName}>
+                      <Image
+                        src={"/flags/4x3/" + country + ".svg"}
+                        alt={country}
+                        width={35}
+                      />
+                    </Tooltip>
+                  ) : null}
 
-                <Title
-                  size="h3"
-                  onClick={() =>
-                    open("https://coh3stats.com/players/" + relicID)
-                  }
-                >
-                  <Anchor>{name}</Anchor> {self ? <>(You)</> : null}
-                </Title>
-                {/*<ColorSwatch color={color} />*/}
-              </Group>
-              <RankIcon size={35} rank={rank || 0} rating={rating || 0} />
+                  <Title
+                    size="h3"
+                    onClick={() =>
+                      open("https://coh3stats.com/players/" + relicID)
+                    }
+                  >
+                    <Anchor>{name}</Anchor> {self ? <>(You)</> : null}
+                  </Title>
+                  {/*<ColorSwatch color={color} />*/}
+                </Group>
+                <RankIcon size={35} rank={rank || 0} rating={rating || 0} />
               </Group>
 
               <Group position="apart" grow>

src/components/other/rank-icon.tsx

@@ -1,23 +1,27 @@
-import { Tooltip, Image } from "@mantine/core";
-import {calculatePlayerTier} from "../../utils/utils";
-
+import { Tooltip, Image } from "@mantine/core"
+import { calculatePlayerTier } from "../../utils/utils"
 
 type Props = {
-  size: number;
-  rating: number;
-  rank: number;
-};
+  size: number
+  rating: number
+  rank: number
+}
 
 const RankIcon = ({ size, rank, rating }: Props) => {
-  const rankTier = calculatePlayerTier(rank, rating);
+  const rankTier = calculatePlayerTier(rank, rating)
 
   return (
     <>
       <Tooltip label={rankTier.name}>
-        <Image src={rankTier.url} width={size} height={size} alt={rankTier.name}  />
+        <Image
+          src={rankTier.url}
+          width={size}
+          height={size}
+          alt={rankTier.name}
+        />
       </Tooltip>
     </>
-  );
-};
+  )
+}
 
-export default RankIcon;
+export default RankIcon

src/streamer-overlay/SPECIAL-REACT/OverlayApp.tsx

@@ -24,12 +24,8 @@ export const OverlayApp: React.FC<OverlayAppProps> = ({
       {alwaysVisible ||
       gameData.state === "Loading" ||
       gameData.state === "InGame" ? (
-        <div
-          className={"coh3stats-overlay"}
-        >
-          <div
-            className={"coh3stats-overlay-left"}
-          >
+        <div className={"coh3stats-overlay"}>
+          <div className={"coh3stats-overlay-left"}>
             {gameData.left.players.map((player, index) => (
               <PlayerEntry
                 key={player.relicID + "_" + index}
@@ -38,9 +34,7 @@ export const OverlayApp: React.FC<OverlayAppProps> = ({
               />
             ))}
           </div>
-          <div
-            className={"coh3stats-overlay-right"}
-          >
+          <div className={"coh3stats-overlay-right"}>
             {gameData.right.players.map((player, index) => (
               <PlayerEntry
                 key={player.relicID + "_" + index}

src/streamer-overlay/SPECIAL-REACT/PlayerEntry.tsx

@@ -15,9 +15,7 @@ export const PlayerEntry: React.FC<PlayerEntryProps> = ({
   flags = false,
 }) => {
   return (
-    <div
-      className={"coh3stats-overlay-player"}
-    >
+    <div className={"coh3stats-overlay-player"}>
       <img
         className={"coh3stats-overlay-player-factionIcon"}
         src={
@@ -36,25 +34,17 @@ export const PlayerEntry: React.FC<PlayerEntryProps> = ({
           }
         />
       ) : null}
-      <span
-        className={"coh3stats-overlay-player-rank"}
-      >
+      <span className={"coh3stats-overlay-player-rank"}>
         {playerData.rank === undefined || playerData.rank === -1
           ? "-"
           : "#" + playerData.rank}
       </span>{" "}
-      <span
-        className={"coh3stats-overlay-player-rating"}
-      >
+      <span className={"coh3stats-overlay-player-rating"}>
         {playerData.rating === undefined || playerData.rating === -1
           ? "-"
           : playerData.rating}
       </span>{" "}
-      <span
-        className={"coh3stats-overlay-player-name"}
-      >
-        {playerData.name}
-      </span>
+      <span className={"coh3stats-overlay-player-name"}>{playerData.name}</span>
     </div>
   )
 }

src/utils/coh3-data.ts

@@ -1,5 +1,10 @@
-
-export type PlayerRank = { name: string; url: string; min: number; max: number; rank: number };
+export type PlayerRank = {
+  name: string
+  url: string
+  min: number
+  max: number
+  rank: number
+}
 
 export const PlayerRanks: Record<string, PlayerRank> = {
   // Requires 10 matches to get the placement rank.
@@ -153,4 +158,4 @@ export const PlayerRanks: Record<string, PlayerRank> = {
     max: 5000,
     rank: 1,
   },
-};
+}

src/utils/utils.ts

@@ -1,39 +1,41 @@
-import {PlayerRanks} from "./coh3-data";
+import { PlayerRanks } from "./coh3-data"
 
 export const calculatePlayerTier = (rank: number, rating: number) => {
   if (!rank || rank <= 0) {
-    return PlayerRanks.NO_RANK;
+    return PlayerRanks.NO_RANK
   }
 
   if (rating < 1600) {
-    const playerRank = Object.values(PlayerRanks).find((x) => x.min <= rating && rating <= x.max);
+    const playerRank = Object.values(PlayerRanks).find(
+      (x) => x.min <= rating && rating <= x.max
+    )
 
-    return playerRank || PlayerRanks.NO_RANK;
+    return playerRank || PlayerRanks.NO_RANK
   }
 
   // If rating is higher than 1600, take into account the rank.
   if (rating >= 1600) {
     // GOLD_1 is exception
     if (rank > 50) {
-      return PlayerRanks.GOLD_1;
+      return PlayerRanks.GOLD_1
     }
 
     // Create a sorted array of PlayerRanks entries
     const sortedPlayerRanks = Object.entries(PlayerRanks).sort(
-      ([, rankInfoA], [, rankInfoB]) => rankInfoA.rank - rankInfoB.rank,
-    );
+      ([, rankInfoA], [, rankInfoB]) => rankInfoA.rank - rankInfoB.rank
+    )
 
-    let rankKey = "CHALLENGER_5";
+    let rankKey = "CHALLENGER_5"
 
     for (const [key, rankInfo] of sortedPlayerRanks) {
       if (rank <= rankInfo.rank) {
-        rankKey = key;
-        break;
+        rankKey = key
+        break
       }
     }
 
-    return PlayerRanks[rankKey];
+    return PlayerRanks[rankKey]
   }
 
-  return PlayerRanks.NO_RANK;
-};
+  return PlayerRanks.NO_RANK
+}