User Page works

client/src/components/user/UGPTHeader.tsx

@@ -19,6 +19,8 @@ import ClassBadge from "components/game/ClassBadge";
 import { FormatGPTRating, UppercaseFirst } from "util/misc";
 import ProfileBadges from "./ProfileBadges";
 import { GameClassSets } from "tachi-common/js/game-classes";
+import UGPTRatingsTable from "./UGPTStatsOverview";
+import RankingData from "./UGPTRankingData";
 
 export function UGPTHeaderBody({
 	reqUser,
@@ -73,44 +75,7 @@ export function UGPTHeaderBody({
 				</MiniTable>
 			</div>
 			<div className="col-12 col-md-6 col-lg-3">
-				<MiniTable className="table-sm text-center" headers={["Player Stats"]} colSpan={2}>
-					<>
-						{(Object.keys(
-							gptConfig.classHumanisedFormat
-						) as GameClassSets[IDStrings][]).map(k => (
-							<tr key={k}>
-								<td>{UppercaseFirst(k)}</td>
-								<td>
-									{stats.gameStats.classes[k] ? (
-										<ClassBadge
-											showSetOnHover={false}
-											key={`${k}:${stats.gameStats.classes[k]}`}
-											game={game}
-											playtype={playtype}
-											classSet={k}
-											classValue={stats.gameStats.classes[k]!}
-										/>
-									) : (
-										"No Data"
-									)}
-								</td>
-							</tr>
-						))}
-						{Object.entries(stats.gameStats.ratings).map(([k, v]) => (
-							<tr key={k}>
-								<td>{UppercaseFirst(k)}</td>
-								<td>
-									{FormatGPTRating(
-										game,
-										playtype,
-										k as ScoreCalculatedDataLookup[IDStrings],
-										v
-									)}
-								</td>
-							</tr>
-						))}
-					</>
-				</MiniTable>
+				<UGPTRatingsTable ugs={stats.gameStats} />
 			</div>
 			<div className="col-12 col-lg-3">
 				<RankingData ranking={stats.rankingData.ranking} outOf={stats.rankingData.outOf} />
@@ -119,20 +84,6 @@ export function UGPTHeaderBody({
 	);
 }
 
-function RankingData({ ranking, outOf }: { ranking: number; outOf: number }) {
-	return (
-		<div className="row text-center">
-			<div className="col-12">
-				<h4>Ranking</h4>
-			</div>
-			<div className="col-12">
-				<strong className="display-4">#{ranking}</strong>
-				<span className="text-muted">/{outOf}</span>
-			</div>
-		</div>
-	);
-}
-
 export function UGPTBottomNav({ baseUrl }: { baseUrl: string }) {
 	return (
 		<div className="row align-items-center mb-0">

client/src/components/user/UGPTRankingData.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+export default function RankingData({ ranking, outOf }: { ranking: number; outOf: number }) {
+	return (
+		<div className="row text-center">
+			<div className="col-12">
+				<h4>Ranking</h4>
+			</div>
+			<div className="col-12">
+				<strong className="display-4">#{ranking}</strong>
+				<span className="text-muted">/{outOf}</span>
+			</div>
+		</div>
+	);
+}

client/src/components/user/UGPTStatShowcase.tsx

@@ -0,0 +1,363 @@
+import Card from "components/layout/page/Card";
+import CardHeader from "components/layout/page/CardHeader";
+import CardNavButton from "components/layout/page/CardNavButton";
+import AsyncLoader from "components/util/AsyncLoader";
+import { UserContext } from "context/UserContext";
+import { UserGameStatsContext } from "context/UserGameStatsContext";
+import { nanoid } from "nanoid";
+import React, { useContext, useState } from "react";
+import { OverlayTrigger, Tooltip } from "react-bootstrap";
+import { Link } from "react-router-dom";
+import {
+	PublicUserDocument,
+	Game,
+	GetGamePTConfig,
+	SongDocument,
+	ChartDocument,
+	FormatChart,
+	FolderDocument,
+} from "tachi-common";
+import { UGPTPreferenceStatsReturn } from "types/api-returns";
+import { GamePT } from "types/react";
+import { Playtype } from "types/tachi";
+import { APIFetchV1 } from "util/api";
+
+export default function StatShowcase({
+	reqUser,
+	game,
+	playtype,
+}: { reqUser: PublicUserDocument } & GamePT) {
+	const { ugs } = useContext(UserGameStatsContext);
+	const { user } = useContext(UserContext);
+
+	const [projectingStats, setProjectingStats] = useState(false);
+
+	const hasUserPlayedGame =
+		ugs && !!ugs.filter(e => e.game === game && e.playtype === playtype).length;
+
+	const userIsReqUser = user && user.id === reqUser.id;
+
+	const shouldFetchThisUserData = hasUserPlayedGame && !userIsReqUser;
+
+	return (
+		<Card
+			className="card-dark"
+			header={
+				<CardHeader
+					rightContent={
+						userIsReqUser ? (
+							<CardNavButton
+								type="edit"
+								to={`/dashboard/users/${
+									user!.username
+								}/games/${game}/${playtype}/settings`}
+								hoverText="Modify your statistics showcase."
+							/>
+						) : null
+					}
+				>
+					<h3>
+						{projectingStats
+							? `${user!.username}'s Stat Showcase (Projected onto ${
+									reqUser.username
+							  })`
+							: `${reqUser.username}'s Stat Showcase`}
+					</h3>
+				</CardHeader>
+			}
+			footer={
+				<div className="d-flex w-100 justify-content-center">
+					<div className="btn-group">
+						{hasUserPlayedGame &&
+							!userIsReqUser &&
+							(projectingStats ? (
+								<OverlayTrigger
+									placement="top"
+									overlay={
+										<Tooltip id="quick-panel-tooltip">
+											Return to {reqUser.username}'s selected stats.
+										</Tooltip>
+									}
+								>
+									<div
+										className="btn btn-success"
+										onClick={() => setProjectingStats(false)}
+									>
+										<i className="fas fa-sync" style={{ paddingRight: 0 }} />
+									</div>
+								</OverlayTrigger>
+							) : (
+								<OverlayTrigger
+									placement="top"
+									overlay={
+										<Tooltip id={nanoid()}>
+											Change the displayed stats to the same ones you use!
+										</Tooltip>
+									}
+								>
+									<div
+										className="btn btn-outline-secondary"
+										onClick={() => setProjectingStats(true)}
+									>
+										<i className="fas fa-sync" style={{ paddingRight: 0 }} />
+									</div>
+								</OverlayTrigger>
+							))}
+						<OverlayTrigger
+							placement="top"
+							overlay={
+								<Tooltip id="quick-panel-tooltip">
+									Evaluate a custom statistic.
+								</Tooltip>
+							}
+						>
+							<div className="btn btn-outline-secondary">
+								<i className="fas fa-file-signature" style={{ paddingRight: 0 }} />
+							</div>
+						</OverlayTrigger>
+					</div>
+				</div>
+			}
+		>
+			<AsyncLoader
+				promiseFn={async () => {
+					const res = await APIFetchV1<UGPTPreferenceStatsReturn[]>(
+						`/users/${reqUser.id}/games/${game}/${playtype}/showcase${
+							projectingStats ? `?projectUser=${user!.id}` : ""
+						}`
+					);
+
+					if (!res.success) {
+						throw new Error(res.description);
+					}
+
+					if (shouldFetchThisUserData) {
+						const res2 = await APIFetchV1<UGPTPreferenceStatsReturn[]>(
+							`/users/${user!.id}/games/${game}/${playtype}/showcase${
+								!projectingStats ? `?projectUser=${reqUser.id}` : ""
+							}`
+						);
+
+						if (!res2.success) {
+							throw new Error(res2.description);
+						}
+
+						return { reqUserData: res.body, thisUserData: res2.body };
+					}
+
+					return { reqUserData: res.body };
+				}}
+			>
+				{data => (
+					<div className="container">
+						{data.reqUserData.length === 0 ? (
+							<div className="row">
+								<div className="col-12 text-center">
+									{userIsReqUser ? "You have" : "This user has"} no stats
+									configured.
+								</div>
+								{userIsReqUser && (
+									<div className="col-12 mt-2 text-center">
+										Why not{" "}
+										<Link
+											to={`/dashboard/users/${
+												user!.username
+											}/games/${game}/${playtype}/settings`}
+										>
+											Set Some?
+										</Link>
+									</div>
+								)}
+							</div>
+						) : (
+							<div className="row justify-content-center">
+								{data.reqUserData.map((e, i) => (
+									<div
+										key={nanoid()}
+										className="col-12 col-md-4 d-flex align-items-stretch mt-8"
+									>
+										<StatDisplay
+											statData={e}
+											compareData={
+												data.thisUserData ? data.thisUserData[i] : undefined
+											}
+											game={game}
+											playtype={playtype}
+										/>
+									</div>
+								))}
+							</div>
+						)}
+					</div>
+				)}
+			</AsyncLoader>
+		</Card>
+	);
+}
+
+function StatDelta({
+	v1,
+	v2,
+	mode,
+	property,
+	game,
+	playtype,
+}: {
+	v1: number;
+	v2?: number;
+	mode: "folder" | "chart";
+	property: UGPTPreferenceStatsReturn["stat"]["property"];
+	game: Game;
+	playtype: Playtype;
+}) {
+	if (!v2) {
+		return null;
+	}
+
+	let d: string | number = v2 - v1;
+	const formattedV2 = FormatValue(game, playtype, mode, property, v2);
+	if (property === "percent") {
+		d = `${d.toFixed(2)}%`;
+	}
+
+	let colour;
+	if (v2 === v1) {
+		colour = "warning";
+	} else if (v2 > v1) {
+		colour = "success";
+	} else {
+		colour = "danger";
+	}
+
+	return (
+		<div className={`mt-2 text-${colour}`}>
+			<span>
+				You: {formattedV2} ({v2 > v1 ? `+${d}` : d})
+			</span>
+		</div>
+	);
+}
+
+function FormatValue(
+	game: Game,
+	playtype: Playtype,
+	mode: "folder" | "chart",
+	prop: "grade" | "lamp" | "score" | "percent" | "playcount",
+	value: number
+) {
+	if (mode === "folder") {
+		return value;
+	}
+
+	const gptConfig = GetGamePTConfig(game, playtype);
+
+	if (prop === "percent") {
+		return `${value.toFixed(2)}%`;
+	} else if (prop === "grade") {
+		return gptConfig.grades[value];
+	} else if (prop === "lamp") {
+		return gptConfig.lamps[value];
+	}
+
+	return value;
+}
+
+function FormatPropertyGTE(
+	game: Game,
+	playtype: Playtype,
+	prop: "grade" | "lamp" | "score" | "percent" | "playcount",
+	gte: number
+) {
+	const gptConfig = GetGamePTConfig(game, playtype);
+
+	if (prop === "grade") {
+		return gptConfig.grades[gte];
+	} else if (prop === "lamp") {
+		return gptConfig.lamps[gte];
+	} else if (prop === "score" || prop === "playcount") {
+		return gte;
+	}
+	// else if (prop === "percent") {
+	return gte.toFixed(2);
+	// }
+}
+
+function StatDisplay({
+	statData,
+	compareData,
+	game,
+	playtype,
+}: { statData: UGPTPreferenceStatsReturn; compareData?: UGPTPreferenceStatsReturn } & GamePT) {
+	const { stat, value, related } = statData;
+
+	if (stat.mode === "chart") {
+		const { song, chart } = related as { song: SongDocument; chart: ChartDocument };
+
+		return (
+			<Card
+				className="text-center stat-overview-card w-100"
+				header={<h5 className="text-muted mb-0">Chart</h5>}
+			>
+				<>
+					<h4>{FormatChart(game, song, chart)}</h4>
+					<h4>
+						{stat.property[0].toUpperCase() + stat.property.substring(1)}:{" "}
+						{value.value
+							? stat.property === "percent"
+								? `${value.value.toFixed(2)}%`
+								: value.value
+							: "No Data."}
+					</h4>
+					<StatDelta
+						v1={statData.value.value}
+						v2={compareData?.value.value}
+						mode={stat.mode}
+						property={stat.property}
+						game={game}
+						playtype={playtype}
+					/>
+				</>
+			</Card>
+		);
+	} else if (stat.mode === "folder") {
+		const { folders } = related as { folders: FolderDocument[] };
+
+		let headerStr;
+		if (folders.length === 1) {
+			headerStr = folders[0].title;
+		} else {
+			headerStr = folders.map(e => e.title).join(" and ");
+		}
+
+		return (
+			<Card
+				className="text-center stat-overview-card w-100"
+				header={<h5 className="text-muted mb-0">Folder</h5>}
+			>
+				<>
+					<h4>{headerStr}</h4>
+					<h5>
+						{stat.property[0].toUpperCase() + stat.property.substring(1)} &gt;={" "}
+						{FormatPropertyGTE(game, playtype, stat.property, stat.gte)}
+					</h5>
+					<h4>
+						{value.value}
+						{/* @ts-expect-error temp */}
+						<small className="text-muted">/{value.outOf}</small>
+					</h4>
+
+					<StatDelta
+						v1={statData.value.value}
+						v2={compareData?.value.value}
+						mode={stat.mode}
+						property={stat.property}
+						game={game}
+						playtype={playtype}
+					/>
+				</>
+			</Card>
+		);
+	}
+
+	return <></>;
+}

client/src/components/user/UGPTStatsOverview.tsx

@@ -0,0 +1,52 @@
+import ClassBadge from "components/game/ClassBadge";
+import MiniTable from "components/tables/components/MiniTable";
+import React from "react";
+import { GetGamePTConfig, IDStrings, ScoreCalculatedDataLookup, UserGameStats } from "tachi-common";
+import { GameClassSets } from "tachi-common/js/game-classes";
+import { UppercaseFirst, FormatGPTRating } from "util/misc";
+import { MillisToSince } from "util/time";
+
+export default function UGPTRatingsTable({ ugs }: { ugs: UserGameStats }) {
+	const gptConfig = GetGamePTConfig(ugs.game, ugs.playtype);
+
+	return (
+		<MiniTable className="table-sm text-center" headers={["Player Stats"]} colSpan={2}>
+			<>
+				{(Object.keys(gptConfig.classHumanisedFormat) as GameClassSets[IDStrings][]).map(
+					k => (
+						<tr key={k}>
+							<td>{UppercaseFirst(k)}</td>
+							<td>
+								{ugs.classes[k] ? (
+									<ClassBadge
+										showSetOnHover={false}
+										key={`${k}:${ugs.classes[k]}`}
+										game={ugs.game}
+										playtype={ugs.playtype}
+										classSet={k}
+										classValue={ugs.classes[k]!}
+									/>
+								) : (
+									"No Data"
+								)}
+							</td>
+						</tr>
+					)
+				)}
+				{Object.entries(ugs.ratings).map(([k, v]) => (
+					<tr key={k}>
+						<td>{UppercaseFirst(k)}</td>
+						<td>
+							{FormatGPTRating(
+								ugs.game,
+								ugs.playtype,
+								k as ScoreCalculatedDataLookup[IDStrings],
+								v
+							)}
+						</td>
+					</tr>
+				))}
+			</>
+		</MiniTable>
+	);
+}

client/src/components/user/UserHeader.tsx

@@ -6,6 +6,7 @@ import Navbar from "components/nav/Navbar";
 import NavItem from "components/nav/NavItem";
 import ProfileBadges from "./ProfileBadges";
 import { UserContext } from "context/UserContext";
+import Muted from "components/util/Muted";
 
 export function UserHeaderBody({ reqUser }: { reqUser: PublicUserDocument }) {
 	return (
@@ -21,6 +22,10 @@ export function UserHeaderBody({ reqUser }: { reqUser: PublicUserDocument }) {
 					<Divider className="mt-4 mb-4" />
 				</div>
 			</div>
+			<div className="col-12 col-lg-6 d-flex justify-content-center">{reqUser.about}</div>
+			<div className="col-12 col-lg-3 d-flex justify-content-center">
+				<Muted>UserID: {reqUser.id}</Muted>
+			</div>
 		</>
 	);
 }
@@ -38,7 +43,7 @@ export function UserBottomNav({
 
 	const navItems = [
 		<NavItem key="about" to={`${baseUrl}/`}>
-			About
+			Overview
 		</NavItem>,
 		<NavItem key="games" to={`${baseUrl}/games`}>
 			Games