Add rating algorithm tooltips

client/package.json

@@ -83,7 +83,7 @@
 		"resolve": "1.12.0",
 		"resolve-url-loader": "3.1.0",
 		"socicon": "3.0.5",
-		"tachi-common": "0.4.22"
+		"tachi-common": "0.4.23"
 	},
 	"devDependencies": {
 		"@types/humanize-duration": "3.25.1",

client/pnpm-lock.yaml

@@ -85,7 +85,7 @@ specifiers:
   serve: 11.2.0
   socicon: 3.0.5
   style-loader: 1.0.0
-  tachi-common: 0.4.22
+  tachi-common: 0.4.23
   terser-webpack-plugin: 1.4.1
   ts-pnp: 1.1.4
   typescript: 4.3.5
@@ -158,7 +158,7 @@ dependencies:
   resolve: 1.12.0
   resolve-url-loader: 3.1.0
   socicon: 3.0.5
-  tachi-common: 0.4.22
+  tachi-common: 0.4.23
 
 devDependencies:
   '@types/humanize-duration': 3.25.1
@@ -11277,8 +11277,8 @@ packages:
       strip-ansi: 6.0.0
     dev: true
 
-  /tachi-common/0.4.22:
-    resolution: {integrity: sha512-+3gQSUq3yp3GStTvrUxN+BVl9iGG7Vnqow5sKnV3zuYzjvJuZXy020B9/xqHgRtcy0GUig4IWRqkA7dHfUFI2g==}
+  /tachi-common/0.4.23:
+    resolution: {integrity: sha512-MlE2wY9XfNTiZoKJ+7utDdO/ItV3eb8KLEkOPXZMn+sqQbrJd0WSIM1j9vecdYUWG02+3NJf6awmud0Q6upgPA==}
     dependencies:
       monk: 7.3.4
     transitivePeerDependencies:

client/src/components/layout/misc/QuickTooltip.tsx

@@ -1,13 +1,25 @@
 import { nanoid } from "nanoid";
-import React from "react";
+import React, { CSSProperties } from "react";
 import { OverlayTrigger, Tooltip } from "react-bootstrap";
 
 export default function QuickTooltip({
 	children,
 	tooltipContent,
-}: { tooltipContent: React.ReactChild } & { children: JSX.Element }) {
+	wide,
+}: {
+	tooltipContent: React.ReactChild;
+	wide?: boolean;
+	children: JSX.Element;
+}) {
 	return (
-		<OverlayTrigger placement="top" overlay={<Tooltip id={nanoid()}>{tooltipContent}</Tooltip>}>
+		<OverlayTrigger
+			placement="top"
+			overlay={
+				<Tooltip className={wide ? "tooltip-wide" : ""} id={nanoid()}>
+					{tooltipContent}
+				</Tooltip>
+			}
+		>
 			{children}
 		</OverlayTrigger>
 	);

client/src/components/user/UGPTStatsOverview.tsx

@@ -1,13 +1,24 @@
 import ClassBadge from "components/game/ClassBadge";
+import QuickTooltip from "components/layout/misc/QuickTooltip";
 import MiniTable from "components/tables/components/MiniTable";
+import Divider from "components/util/Divider";
+import Icon from "components/util/Icon";
 import React from "react";
-import { GetGamePTConfig, IDStrings, ScoreCalculatedDataLookup, UserGameStats } from "tachi-common";
+import {
+	GetGamePTConfig,
+	IDStrings,
+	ScoreCalculatedDataLookup,
+	UGSRatingsLookup,
+	UserGameStats,
+} from "tachi-common";
 import { GameClassSets } from "tachi-common/js/game-classes";
 import { FormatGPTRating, UppercaseFirst } from "util/misc";
 
 export default function UGPTRatingsTable({ ugs }: { ugs: UserGameStats }) {
 	const gptConfig = GetGamePTConfig(ugs.game, ugs.playtype);
 
+	const ratings = Object.entries(ugs.ratings) as [UGSRatingsLookup[IDStrings], number][];
+
 	return (
 		<MiniTable className="table-sm text-center" headers={["Player Stats"]} colSpan={2}>
 			<>
@@ -32,9 +43,34 @@ export default function UGPTRatingsTable({ ugs }: { ugs: UserGameStats }) {
 						</tr>
 					)
 				)}
-				{Object.entries(ugs.ratings).map(([k, v]) => (
+				{ratings.map(([k, v]) => (
 					<tr key={k}>
-						<td>{UppercaseFirst(k)}</td>
+						<td>
+							<QuickTooltip
+								tooltipContent={
+									<div>
+										{gptConfig.profileRatingAlgDescriptions[k]}
+										{k in gptConfig.scoreRatingAlgDescriptions && (
+											<>
+												<Divider />({UppercaseFirst(k)}:{" "}
+												{/* @ts-expect-error I know better. */}
+												{gptConfig.scoreRatingAlgDescriptions[k]})
+											</>
+										)}
+									</div>
+								}
+								wide
+							>
+								<div
+									style={{
+										textDecoration: "underline",
+										textDecorationStyle: "dotted",
+									}}
+								>
+									{UppercaseFirst(k)}
+								</div>
+							</QuickTooltip>
+						</td>
 						<td>
 							{FormatGPTRating(
 								ugs.game,