fix(client): move breakdown to the main session view

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

@@ -3,7 +3,6 @@ import { CreateChartMap, CreateScoreIDMap, CreateSongMap } from "util/data";
 import { DelayedPageReload } from "util/misc";
 import useSetSubheader from "components/layout/header/useSetSubheader";
 import SessionOverview from "components/sessions/SessionOverview";
-import SessionRaiseBreakdown from "components/sessions/SessionRaiseBreakdown";
 import ScoreTable from "components/tables/scores/ScoreTable";
 import ApiError from "components/util/ApiError";
 import Divider from "components/util/Divider";
@@ -69,7 +68,7 @@ function SessionPage({ data, game, playtype }: Props & { data: SessionReturns })
 		`${user.username}: ${session.name}`
 	);
 
-	const [view, setView] = useState<"raises" | "overview" | "scores">("overview");
+	const [view, setView] = useState<"overview" | "scores">("overview");
 
 	const songMap = CreateSongMap(songs);
 	const chartMap = CreateChartMap(charts);
@@ -204,10 +203,6 @@ function SessionPage({ data, game, playtype }: Props & { data: SessionReturns })
 					</>
 				)}
 				<div className="btn-group">
-					<SelectButton value={view} setValue={setView} id="raises">
-						<Icon type="receipt" />
-						Raises
-					</SelectButton>
 					<SelectButton value={view} setValue={setView} id="overview">
 						<Icon type="chart-area" />
 						Overview
@@ -219,9 +214,7 @@ function SessionPage({ data, game, playtype }: Props & { data: SessionReturns })
 				</div>
 				<Divider />
 			</Col>
-			{view === "raises" ? (
-				<SessionRaiseBreakdown sessionData={data} />
-			) : view === "overview" ? (
+			{view === "overview" ? (
 				<SessionOverview scoreDataset={scoreDataset} sessionData={data} />
 			) : (
 				<Col xs={12}>

client/src/components/sessions/SessionOverview.tsx

@@ -4,10 +4,11 @@ import Card from "components/layout/page/Card";
 import ScoreTable from "components/tables/scores/ScoreTable";
 import Divider from "components/util/Divider";
 import React from "react";
-import { Col } from "react-bootstrap";
-import { GetGamePTConfig } from "tachi-common";
+import { Col, Row } from "react-bootstrap";
+import { GetGamePTConfig, SessionDocument } from "tachi-common";
 import { SessionReturns } from "types/api-returns";
 import { ScoreDataset } from "types/tables";
+import SessionRaiseBreakdown from "./SessionRaiseBreakdown";
 
 export default function SessionOverview({
 	sessionData,
@@ -18,8 +19,6 @@ export default function SessionOverview({
 }) {
 	const { scores, session } = sessionData;
 
-	const gptConfig = GetGamePTConfig(session.game, session.playtype);
-
 	return (
 		<>
 			<StatThing name="Scores" value={session.scoreInfo.length} />
@@ -30,30 +29,12 @@ export default function SessionOverview({
 			<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>
+
+				<Card header="Breakdown">
+					<Row>
+						<SessionRaiseBreakdown sessionData={sessionData} />
+					</Row>
+				</Card>
 			</Col>
 			<Col xs={12}>
 				<Divider />
@@ -65,10 +46,40 @@ export default function SessionOverview({
 					/>
 				</Card>
 			</Col>
+			<RatingsOverview session={session} />
 		</>
 	);
 }
 
+// Temporarily shoved to the bottom, as it needs to be significantly improved,
+// but we can't really just remove it lol.
+function RatingsOverview({ session }: { session: SessionDocument }) {
+	const gptConfig = GetGamePTConfig(session.game, session.playtype);
+
+	return (
+		<Col xs={12}>
+			<Divider />
+			<Card header="Ratings">
+				<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>
+			</Card>
+		</Col>
+	);
+}
+
 function StatThing({
 	value,
 	name,