Add tiers and custom CSS for OBS overlay

package.json

@@ -1,7 +1,7 @@
 {
     "name": "coh3-stats-desktop-app",
     "private": true,
-    "version": "1.2.2",
+    "version": "1.2.3",
     "type": "module",
     "scripts": {
         "dev": "vite",

src-tauri/Cargo.toml

@@ -1,8 +1,8 @@
 [package]
 name = "coh3-stats-desktop-app"
-version = "1.2.2"
-description = "A Tauri App"
-authors = ["you"]
+version = "1.2.3"
+description = "COH3 Stats Desktop App"
+authors = ["coh3stats team"]
 license = ""
 repository = ""
 edition = "2021"

src-tauri/tauri.conf.json

@@ -7,7 +7,7 @@
     },
     "package": {
         "productName": "Coh3 Stats Desktop App",
-        "version": "1.2.2"
+        "version": "1.2.3"
     },
     "tauri": {
         "allowlist": {
@@ -90,7 +90,7 @@
                 "fullscreen": false,
                 "resizable": true,
                 "focus": true,
-                "title": "CoH3 Stats Desktop App",
+                "title": "COH3 Stats Desktop App",
                 "width": 1200,
                 "minWidth": 900,
                 "height": 600,

src/About.tsx

@@ -86,7 +86,7 @@ export const About: React.FC = () => {
               <img
                 src="https://storage.ko-fi.com/cdn/cup-border.png"
                 alt="Ko-fi donations"
-                width={20}
+                width={18}
               />
               Donate
             </Group>

src/Settings.tsx

@@ -217,6 +217,16 @@ 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>
+
             </Text>
             <Group pt="md">
               <Text>Path to streamerOverlay.html:</Text>

src/components/PlayerCard.tsx

@@ -21,6 +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";
 
 export interface PlayerCardProps extends FullPlayerData {}
 
@@ -56,6 +57,7 @@ export const PlayerCard: React.FC<PlayerCardProps> = ({
           </Col>
           <Col span="auto">
             <Stack align="stretch">
+              <Group position={"apart"}>
               <Group>
                 {!ai ? (
                   <Tooltip label={countryName}>
@@ -77,10 +79,13 @@ export const PlayerCard: React.FC<PlayerCardProps> = ({
                 </Title>
                 {/*<ColorSwatch color={color} />*/}
               </Group>
+              <RankIcon size={35} rank={rank || 0} rating={rating || 0} />
+              </Group>
 
               <Group position="apart" grow>
                 <PlayerRank rank={rank} />
                 <PlayerELO rating={!rank || rank < 1 ? undefined : rating} />
+
                 <PlayerStreak streak={streak} />
                 <PlayerWinRatio wins={wins} losses={losses} />
                 <PlayerWins wins={wins} />

src/components/other/rank-icon.tsx

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

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

@@ -6,7 +6,7 @@ export interface HTMLProps {
 
 /**
  * You cannot use mantine here!
- * This react component is meant for the streamerOverlay where only inline styles work!
+ * This React component is meant for the streamerOverlay where only inline styles work!
  */
 export const HTML: React.FC<HTMLProps> = ({ html }) => {
   return (
@@ -30,12 +30,74 @@ export const HTML: React.FC<HTMLProps> = ({ html }) => {
           href="https://fonts.googleapis.com/css2?family=Tilt+Warp&display=swap"
           rel="stylesheet"
         />
-        <title>Coh3 Stats Desktop App Overlay</title>
+        <title>COH3 Stats Desktop App Overlay</title>
         <style>
           {`
-                        html {
-                            font-family: 'Tilt Warp', cursive;
+                        .coh3stats-overlay {
+                            display: flex;
+                            flex-wrap: wrap;
+                            justify-content: flex-start;
+                            align-items: stretch;
+                            position: absolute;
+                            left: calc((100vw / 2) - 485px);
+                            right: calc((100vw / 2) - 485px);
+                            top: 65px;
                         }
+
+                        .coh3stats-overlay-left {
+                            flex-grow: 1;
+                            flex-basis: 0;
+                            padding-right: 40px;
+                            padding-left: 10px;
+                        }
+
+                        .coh3stats-overlay-right {
+                            flex-grow: 1;
+                            flex-basis: 0;
+                            padding-left: 40px;
+                            padding-right: 10px;
+                        }
+
+                        .coh3stats-overlay-player {
+                          color: white;
+                          font-size: 20px;
+                          font-family: Tilt Warp;
+                        }
+
+                        .coh3stats-overlay-player-factionIcon {
+                          padding-right: 10px;
+                          width: 25px;
+                          height: 25px;
+                        }
+
+                        .coh3stats-overlay-player-flagIcon {
+                          padding-right: 10px;
+                          width: 25px;
+                          height: 25px;
+                        }
+
+                        .coh3stats-overlay-player-rank {
+                          padding-right: 10px;
+                          min-width: 4ch;
+                          display: inline-block;
+                          text-align: center;
+                        }
+
+                        .coh3stats-overlay-player-rating {
+                          padding-right: 10px;
+                          min-width: 4ch;
+                          display: inline-block;
+                          text-align: center;
+                        }
+
+                        .coh3stats-overlay-player-name {
+                          max-width: 17ch;
+                          display: inline-block;
+                          text-overflow: ellipsis;
+                          overflow: hidden;
+                          white-space: nowrap;
+                        }
+
                     `}
         </style>
       </head>
@@ -47,7 +109,7 @@ export const HTML: React.FC<HTMLProps> = ({ html }) => {
 }
 
 /*
-                            background: url(https://i.ytimg.com/vi/NVqOvsHxqFc/maxresdefault.jpg) no-repeat center center fixed; 
+                            background: url(https://i.ytimg.com/vi/NVqOvsHxqFc/maxresdefault.jpg) no-repeat center center fixed;
                             -webkit-background-size: cover;
                             -moz-background-size: cover;
                             -o-background-size: cover;

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

@@ -25,24 +25,10 @@ export const OverlayApp: React.FC<OverlayAppProps> = ({
       gameData.state === "Loading" ||
       gameData.state === "InGame" ? (
         <div
-          style={{
-            display: "flex",
-            flexWrap: "wrap",
-            justifyContent: "flex-start",
-            alignItems: "stretch",
-            position: "absolute",
-            left: "calc(calc(100vw / 2) - 485px)",
-            right: "calc(calc(100vw / 2) - 485px)",
-            top: 65,
-          }}
+          className={"coh3stats-overlay"}
         >
           <div
-            style={{
-              flexGrow: 1,
-              flexBasis: 0,
-              paddingRight: 40,
-              paddingLeft: 10,
-            }}
+            className={"coh3stats-overlay-left"}
           >
             {gameData.left.players.map((player, index) => (
               <PlayerEntry
@@ -53,12 +39,7 @@ export const OverlayApp: React.FC<OverlayAppProps> = ({
             ))}
           </div>
           <div
-            style={{
-              flexGrow: 1,
-              flexBasis: 0,
-              paddingLeft: 40,
-              paddingRight: 10,
-            }}
+            className={"coh3stats-overlay-right"}
           >
             {gameData.right.players.map((player, index) => (
               <PlayerEntry

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

@@ -16,66 +16,42 @@ export const PlayerEntry: React.FC<PlayerEntryProps> = ({
 }) => {
   return (
     <div
-      style={{
-        color: "white",
-        fontSize: 20,
-        fontFamily: "'Tilt Warp', cursive",
-      }}
+      className={"coh3stats-overlay-player"}
     >
       <img
+        className={"coh3stats-overlay-player-factionIcon"}
         src={
           "https://raw.githubusercontent.com/cohstats/coh3-stats-desktop-app/master/public/factions/" +
           playerData.faction +
           ".webp"
         }
-        width={25}
-        height={25}
-        style={{ paddingRight: 10 }}
       />
       {flags ? (
         <img
+          className={"coh3stats-overlay-player-flagIcon"}
           src={
             "https://raw.githubusercontent.com/cohstats/coh3-stats-desktop-app/master/public/flags/4x3/" +
             playerData.country +
             ".svg"
           }
-          width={25}
-          height={25}
-          style={{ paddingRight: 10 }}
         />
       ) : null}
       <span
-        style={{
-          paddingRight: 10,
-          minWidth: "4ch",
-          display: "inline-block",
-          textAlign: "center",
-        }}
+        className={"coh3stats-overlay-player-rank"}
       >
         {playerData.rank === undefined || playerData.rank === -1
           ? "-"
           : "#" + playerData.rank}
       </span>{" "}
       <span
-        style={{
-          paddingRight: 10,
-          minWidth: "4ch",
-          display: "inline-block",
-          textAlign: "center",
-        }}
+        className={"coh3stats-overlay-player-rating"}
       >
         {playerData.rating === undefined || playerData.rating === -1
           ? "-"
           : playerData.rating}
       </span>{" "}
       <span
-        style={{
-          maxWidth: "17ch",
-          display: "inline-block",
-          textOverflow: "ellipsis",
-          overflow: "hidden",
-          whiteSpace: "nowrap",
-        }}
+        className={"coh3stats-overlay-player-name"}
       >
         {playerData.name}
       </span>