From 9fd199e1d869609bd6221b49ef18c03e5c39d70e Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Sat, 19 Aug 2023 17:04:45 +0300
Subject: [PATCH] Add winrates to seasons page

---
 .../seasonMapWinrateByUserId.server.ts        | 24 ++++++++++++++
 .../seasonSetWinrateByUserId.server.ts        | 25 +++++++++++++++
 app/routes/u.$identifier/seasons.tsx          | 31 +++++++++++++++++++
 app/styles/u.css                              |  8 +++++
 4 files changed, 88 insertions(+)
 create mode 100644 app/features/sendouq/queries/seasonMapWinrateByUserId.server.ts
 create mode 100644 app/features/sendouq/queries/seasonSetWinrateByUserId.server.ts

diff --git a/app/features/sendouq/queries/seasonMapWinrateByUserId.server.ts b/app/features/sendouq/queries/seasonMapWinrateByUserId.server.ts
new file mode 100644
index 000000000..a00a2be66
--- /dev/null
+++ b/app/features/sendouq/queries/seasonMapWinrateByUserId.server.ts
@@ -0,0 +1,24 @@
+import { sql } from "~/db/sql";
+
+const stm = sql.prepare(/* sql */ `
+  select
+    sum("wins") as "wins",
+    sum("losses") as "losses"
+  from
+    "MapResult"
+  where
+    "userId" = @userId
+    and "season" = @season
+  group by
+    "userId"
+`);
+
+export function seasonMapWinrateByUserId({
+  userId,
+  season,
+}: {
+  userId: number;
+  season: number;
+}): { wins: number; losses: number } {
+  return stm.get({ userId, season }) as any;
+}
diff --git a/app/features/sendouq/queries/seasonSetWinrateByUserId.server.ts b/app/features/sendouq/queries/seasonSetWinrateByUserId.server.ts
new file mode 100644
index 000000000..d8f8dfe37
--- /dev/null
+++ b/app/features/sendouq/queries/seasonSetWinrateByUserId.server.ts
@@ -0,0 +1,25 @@
+import { sql } from "~/db/sql";
+
+const stm = sql.prepare(/* sql */ `
+  select
+    (sum("setWins") / 4) as "wins",
+    (sum("setLosses") / 4) as "losses"
+  from
+    "PlayerResult"
+  where
+    "ownerUserId" = @userId
+    and "season" = @season
+    and "type" = 'ENEMY'
+  group by
+    "ownerUserId"
+`);
+
+export function seasonSetWinrateByUserId({
+  userId,
+  season,
+}: {
+  userId: number;
+  season: number;
+}): { wins: number; losses: number } {
+  return stm.get({ userId, season }) as any;
+}
diff --git a/app/routes/u.$identifier/seasons.tsx b/app/routes/u.$identifier/seasons.tsx
index 711a4ce95..1febe6660 100644
--- a/app/routes/u.$identifier/seasons.tsx
+++ b/app/routes/u.$identifier/seasons.tsx
@@ -44,6 +44,8 @@ import { rankedModesShort } from "~/modules/in-game-lists/modes";
 import { seasonsMatesEnemiesByUserId } from "~/features/sendouq/queries/seasonsMatesEnemiesByUserId.server";
 import Chart from "~/components/Chart";
 import { AlertIcon } from "~/components/icons/Alert";
+import { seasonMapWinrateByUserId } from "~/features/sendouq/queries/seasonMapWinrateByUserId.server";
+import { seasonSetWinrateByUserId } from "~/features/sendouq/queries/seasonSetWinrateByUserId.server";
 
 export const seasonsSearchParamsSchema = z.object({
   page: z.coerce.number().default(1),
@@ -72,6 +74,10 @@ export const loader = async ({ params, request }: LoaderArgs) => {
 
   return {
     currentOrdinal: currentMMRByUserId({ season: 0, userId: user.id }),
+    winrates: {
+      maps: seasonMapWinrateByUserId({ season: 0, userId: user.id }),
+      sets: seasonSetWinrateByUserId({ season: 0, userId: user.id }),
+    },
     skills: seasonAllMMRByUserId({ season: 0, userId: user.id }),
     tier,
     matches: {
@@ -121,6 +127,9 @@ export default function UserSeasonsPage() {
       {data.currentOrdinal ? (
         <div className="stack md">
           <Rank currentOrdinal={data.currentOrdinal} />
+          {data.winrates.maps.wins + data.winrates.maps.losses > 0 ? (
+            <Winrates />
+          ) : null}
           {data.skills.length >= 3 ? <PowerChart /> : null}
         </div>
       ) : null}
@@ -203,6 +212,28 @@ function SeasonHeader() {
   );
 }
 
+function Winrates() {
+  const data = useLoaderData<typeof loader>();
+
+  const winrate = (wins: number, losses: number) =>
+    Math.round((wins / (wins + losses)) * 100);
+
+  return (
+    <div className="stack horizontal sm">
+      <div className="u__season__winrate">
+        <span className="text-theme text-xxs">Sets</span>{" "}
+        {data.winrates.sets.wins}W {data.winrates.sets.losses}L (
+        {winrate(data.winrates.sets.wins, data.winrates.sets.losses)}%)
+      </div>
+      <div className="u__season__winrate">
+        <span className="text-theme text-xxs">Maps</span>{" "}
+        {data.winrates.maps.wins}W {data.winrates.maps.losses}L (
+        {winrate(data.winrates.maps.wins, data.winrates.maps.losses)}%)
+      </div>
+    </div>
+  );
+}
+
 function Rank({ currentOrdinal }: { currentOrdinal: number }) {
   const data = useLoaderData<typeof loader>();
 
diff --git a/app/styles/u.css b/app/styles/u.css
index 3e3b83800..b59c54cdd 100644
--- a/app/styles/u.css
+++ b/app/styles/u.css
@@ -386,3 +386,11 @@
   padding: var(--s-2-5) var(--s-2);
   border-radius: var(--rounded);
 }
+
+.u__season__winrate {
+  background-color: var(--bg-lighter);
+  padding: var(--s-0-5) var(--s-2);
+  border-radius: var(--rounded);
+  font-size: var(--fonts-xs);
+  font-weight: var(--semi-bold);
+}