Add proper multiranking things

client/package.json

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

client/pnpm-lock.yaml

@@ -82,7 +82,7 @@ specifiers:
   serve: 11.2.0
   socicon: 3.0.5
   style-loader: 1.0.0
-  tachi-common: 0.3.6
+  tachi-common: 0.3.8
   terser-webpack-plugin: 1.4.1
   ts-pnp: 1.1.4
   typescript: 4.3.5
@@ -152,7 +152,7 @@ dependencies:
   resolve: 1.12.0
   resolve-url-loader: 3.1.0
   socicon: 3.0.5
-  tachi-common: 0.3.6
+  tachi-common: 0.3.8
 
 devDependencies:
   '@types/humanize-duration': 3.25.1
@@ -11211,8 +11211,8 @@ packages:
       strip-ansi: 6.0.0
     dev: true
 
-  /tachi-common/0.3.6:
-    resolution: {integrity: sha512-Ivo5e9PoFrD+yUhlfVibIGOCDiEnJ45imxADSQpUf3G23u/e0gt+tpIa7J1u/QWE+nCuERMCuozLx2UrAmXFbw==}
+  /tachi-common/0.3.8:
+    resolution: {integrity: sha512-qELLS57zTgftvvAuHrojq8myJs2OV6FWMQUXcSZd5tk43jbDZH7tS4N/NExGSw/COAdCR1eLcspYAkM8WTdUaw==}
     dependencies:
       monk: 7.3.4
     transitivePeerDependencies:

client/src/app/pages/dashboard/users/games/_game/_playtype/OverviewPage.tsx

@@ -7,7 +7,9 @@ import UGPTStatShowcase from "components/user/UGPTStatShowcase";
 import AsyncLoader from "components/util/AsyncLoader";
 import Divider from "components/util/Divider";
 import Icon from "components/util/Icon";
+import Muted from "components/util/Muted";
 import SelectButton from "components/util/SelectButton";
+import { useProfileRatingAlg } from "components/util/useScoreRatingAlg";
 import { DateTime } from "luxon";
 import React, { useMemo, useState } from "react";
 import { Badge } from "react-bootstrap";
@@ -280,13 +282,16 @@ function UserHistory({
 	const gptConfig = GetGamePTConfig(game, playtype);
 
 	const [mode, setMode] = useState<"ranking" | "playcount" | "rating">("ranking");
-	const [rating, setRating] = useState<keyof UserGameStats["ratings"]>(
-		gptConfig.defaultProfileRatingAlg
-	);
+
+	const preferredRating = useProfileRatingAlg(game, playtype);
+
+	const [rating, setRating] = useState<keyof UserGameStats["ratings"]>(preferredRating);
 
 	const propName = useMemo(() => {
 		if (mode === "rating" && rating) {
 			return UppercaseFirst(rating);
+		} else if (mode === "ranking") {
+			return `${UppercaseFirst(rating)} Ranking`;
 		}
 
 		return UppercaseFirst(mode);
@@ -296,7 +301,12 @@ function UserHistory({
 		if (mode === "rating" && rating) {
 			return data[0].ratings[rating] ? data[0].ratings[rating]!.toFixed(2) : "N/A";
 		} else if (mode === "ranking") {
-			return `#${data[0].ranking}`;
+			return (
+				<>
+					#{data[0].rankings[rating].ranking}
+					<Muted>/{data[0].rankings[rating].outOf}</Muted>
+				</>
+			);
 		}
 
 		return data[0].playcount;
@@ -337,7 +347,24 @@ function UserHistory({
 			</div>
 			<Divider className="mt-6 mb-2" />
 			{mode === "ranking" ? (
-				<RankingTimeline data={data} />
+				<>
+					<div className="col-12 offset-md-4 col-md-4 mt-4">
+						<select
+							className="form-control"
+							value={rating}
+							onChange={e =>
+								setRating(e.target.value as keyof UserGameStats["ratings"])
+							}
+						>
+							{gptConfig.profileRatingAlgs.map(e => (
+								<option key={e} value={e}>
+									{UppercaseFirst(e)}
+								</option>
+							))}
+						</select>
+					</div>
+					<RankingTimeline data={data} rating={rating} />
+				</>
 			) : mode === "playcount" ? (
 				<TimelineChart
 					height="30rem"
@@ -433,7 +460,13 @@ function RatingTimeline({
 	);
 }
 
-function RankingTimeline({ data }: { data: UGPTHistory }) {
+function RankingTimeline({
+	data,
+	rating,
+}: {
+	data: UGPTHistory;
+	rating: keyof UserGameStats["ratings"];
+}) {
 	return (
 		<TimelineChart
 			height="30rem"
@@ -441,7 +474,7 @@ function RankingTimeline({ data }: { data: UGPTHistory }) {
 			data={[
 				{
 					id: "ranking",
-					data: data.map(d => ({ x: d.timestamp, y: d.ranking })),
+					data: data.map(d => ({ x: d.timestamp, y: d.rankings[rating].ranking })),
 				},
 			]}
 			axisBottom={{