Add rating algorithm tooltips

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,