From 7056191db55be6873f49116df9708d62e99a3ef8 Mon Sep 17 00:00:00 2001
From: zkldi <20380519+zkldi@users.noreply.github.com>
Date: Fri, 25 Mar 2022 23:16:17 +0000
Subject: [PATCH] Add rating algs to the session view.

---
 .../components/sessions/SessionOverview.tsx   | 31 +++++++++++++++++++
 client/src/util/misc.ts                       | 20 ++++++++++++
 2 files changed, 51 insertions(+)

diff --git a/client/src/components/sessions/SessionOverview.tsx b/client/src/components/sessions/SessionOverview.tsx
index dc28f388f..fc5ddd961 100644
--- a/client/src/components/sessions/SessionOverview.tsx
+++ b/client/src/components/sessions/SessionOverview.tsx
@@ -1,4 +1,5 @@
 import { FormatDuration } from "util/time";
+import { FormatSessionRating, UppercaseFirst } from "util/misc";
 import Card from "components/layout/page/Card";
 import ScoreTable from "components/tables/scores/ScoreTable";
 import Divider from "components/util/Divider";
@@ -7,6 +8,7 @@ import React, { useContext } from "react";
 import { Col } from "react-bootstrap";
 import { SessionReturns } from "types/api-returns";
 import { ScoreDataset } from "types/tables";
+import { GetGamePTConfig } from "tachi-common";
 
 export default function SessionOverview({
 	sessionData,
@@ -18,6 +20,8 @@ export default function SessionOverview({
 	const { scores, session } = sessionData;
 	const { user } = useContext(UserContext);
 
+	const gptConfig = GetGamePTConfig(session.game, session.playtype);
+
 	return (
 		<>
 			<StatThing name="Scores" value={session.scoreInfo.length} />
@@ -26,6 +30,33 @@ export default function SessionOverview({
 				value={FormatDuration(session.timeEnded - session.timeStarted)}
 			/>
 			<StatThing md12 name="Highlights" value={scores.filter(e => e.highlight).length} />
+			<Col xs={12}>
+				<Divider />
+				<div className="card">
+					<div className="card-body">
+						<div className="display-4 text-center">Ratings</div>
+						<Divider />
+						<div
+							className="d-flex text-center"
+							style={{ justifyContent: "space-evenly" }}
+						>
+							{gptConfig.sessionRatingAlgs.map(e => (
+								<div key={e}>
+									<div className="display-4">{UppercaseFirst(e)}</div>
+									<div style={{ fontSize: "1.2rem" }}>
+										{FormatSessionRating(
+											session.game,
+											session.playtype,
+											e,
+											session.calculatedData[e]
+										)}
+									</div>
+								</div>
+							))}
+						</div>
+					</div>
+				</div>
+			</Col>
 			<Col xs={12}>
 				<Divider />
 				<Card header="Highlights">
diff --git a/client/src/util/misc.ts b/client/src/util/misc.ts
index 9fc11f78b..3f9e54174 100644
--- a/client/src/util/misc.ts
+++ b/client/src/util/misc.ts
@@ -11,6 +11,7 @@ import {
 	integer,
 	ScoreCalculatedDataLookup,
 	ScoreDocument,
+	SessionDocument,
 } from "tachi-common";
 import { Playtype } from "types/tachi";
 
@@ -246,6 +247,25 @@ export function FormatScoreRating(
 	return formatter(value);
 }
 
+export function FormatSessionRating(
+	game: Game,
+	playtype: Playtype,
+	rating: keyof SessionDocument["calculatedData"],
+	value: number | null | undefined
+) {
+	if (value === null || value === undefined) {
+		return "No Data.";
+	}
+
+	const formatter = GetGamePTConfig(game, playtype).sessionRatingAlgFormatters[rating];
+
+	if (!formatter) {
+		return value.toFixed(2);
+	}
+
+	return formatter(value);
+}
+
 export function GetGradeFromPercent<I extends IDStrings = IDStrings>(
 	game: Game,
 	playtype: Playtype,