Update everything to honor new scoreBucket

client/package.json

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

client/pnpm-lock.yaml

@@ -84,7 +84,7 @@ specifiers:
   serve: 11.2.0
   socicon: 3.0.5
   style-loader: 1.0.0
-  tachi-common: 0.3.18
+  tachi-common: 0.3.19
   terser-webpack-plugin: 1.4.1
   ts-pnp: 1.1.4
   typescript: 4.3.5
@@ -156,7 +156,7 @@ dependencies:
   resolve: 1.12.0
   resolve-url-loader: 3.1.0
   socicon: 3.0.5
-  tachi-common: 0.3.18
+  tachi-common: 0.3.19
 
 devDependencies:
   '@types/humanize-duration': 3.25.1
@@ -11241,8 +11241,8 @@ packages:
       strip-ansi: 6.0.0
     dev: true
 
-  /tachi-common/0.3.18:
-    resolution: {integrity: sha512-Qom4IbPtLv83+6mW2OU3+thdqZIGrcUJaH9vhTWN6FoFTw60l0FjtBGsB7343qwsuK7l9JqcEaEJ/psKTDZb1w==}
+  /tachi-common/0.3.19:
+    resolution: {integrity: sha512-N3/n9emh2X9pA+3jQ1UfkLX9V8hk/oHGE1GPlkReRmyIR9gRAxhf3uZCiorPqibSkPzx9LrGLJcO52FR5NQ8oA==}
     dependencies:
       monk: 7.3.4
     transitivePeerDependencies:

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

@@ -10,6 +10,7 @@ import Loading from "components/util/Loading";
 import Muted from "components/util/Muted";
 import useApiQuery from "components/util/query/useApiQuery";
 import SelectButton from "components/util/SelectButton";
+import { useBucket } from "components/util/useBucket";
 import useUGPTBase from "components/util/useUGPTBase";
 import { UserContext } from "context/UserContext";
 import React, { useContext, useMemo, useState } from "react";
@@ -89,7 +90,9 @@ export function FolderInfoComponent({
 }: Props & { folder: FolderDocument; folderStats: FolderStatsInfo }) {
 	const gptConfig = GetGamePTConfig(game, playtype);
 
-	const [elements, setElements] = useState<"grade" | "lamp">(gptConfig.scoreBucket);
+	const scoreBucket = useBucket(game, playtype);
+
+	const [elements, setElements] = useState<"grade" | "lamp">(scoreBucket);
 
 	const base = useUGPTBase({ reqUser, game, playtype });
 

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

@@ -10,6 +10,7 @@ import Loading from "components/util/Loading";
 import Muted from "components/util/Muted";
 import useApiQuery from "components/util/query/useApiQuery";
 import SelectButton from "components/util/SelectButton";
+import { useBucket } from "components/util/useBucket";
 import { UserContext } from "context/UserContext";
 import React, { useContext, useEffect, useMemo, useState } from "react";
 import { Form, InputGroup } from "react-bootstrap";
@@ -218,10 +219,9 @@ function TableBarChart({
 	dataMap: Map<string, UGPTFolderStats>;
 }) {
 	const gptConfig = GetGamePTConfig(table.game, table.playtype);
+	const bucket = useBucket(table.game, table.playtype);
 
-	const [mode, setMode] = useState<"grades" | "lamps">(
-		gptConfig.scoreBucket === "grade" ? "grades" : "lamps"
-	);
+	const [mode, setMode] = useState<"grades" | "lamps">(bucket === "grade" ? "grades" : "lamps");
 
 	const colours = useMemo(() => {
 		if (mode === "grades") {

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

@@ -10,6 +10,7 @@ import Loading from "components/util/Loading";
 import Muted from "components/util/Muted";
 import useApiQuery from "components/util/query/useApiQuery";
 import SelectButton from "components/util/SelectButton";
+import { useBucket } from "components/util/useBucket";
 import { useFormik } from "formik";
 import { nanoid } from "nanoid";
 import React, { useEffect, useMemo, useState } from "react";
@@ -111,9 +112,6 @@ export default function SpecificFolderPage({ reqUser, game, playtype }: Props) {
 
 	return (
 		<div className="row">
-			<div className="col-12">
-				<Divider className="mb-4" />
-			</div>
 			<div className="col-12">{folderInfoHeader}</div>
 			<div className="col-12">
 				<Divider />
@@ -660,15 +658,38 @@ function FolderDatasetToTierlistInfo(
 }
 
 function FolderInfoHeader({ game, playtype, reqUser, folderDataset, data }: InfoProps) {
+	const scoreBucket = useBucket(game, playtype);
+	const [view, setView] = useState<"grade" | "lamp">(scoreBucket);
+
 	return (
 		<Card header={`${reqUser.username}'s ${data.folder.title} Breakdown`}>
-			<ScoreDistributionChart
-				game={game}
-				data={data}
-				folderDataset={folderDataset}
-				playtype={playtype}
-				reqUser={reqUser}
-			/>
+			<div className="col-12 d-flex justify-content-center">
+				<div className="btn-group">
+					<SelectButton value={view} setValue={setView} id="grade">
+						<Icon type="chart-area" />
+						Score Info
+					</SelectButton>
+					<SelectButton value={view} setValue={setView} id="lamp">
+						<Icon type="lightbulb" />
+						Lamp Info
+					</SelectButton>
+				</div>
+			</div>
+			<div className="col-12">
+				<Divider />
+			</div>
+
+			{view === "grade" ? (
+				<ScoreDistributionChart
+					game={game}
+					data={data}
+					folderDataset={folderDataset}
+					playtype={playtype}
+					reqUser={reqUser}
+				/>
+			) : (
+				<></>
+			)}
 		</Card>
 	);
 }

client/src/components/util/useBucket.tsx

@@ -0,0 +1,16 @@
+import { UGPTSettingsContext } from "context/UGPTSettingsContext";
+import { useContext } from "react";
+import { Game, GetGamePTConfig } from "tachi-common";
+import { Playtype } from "types/tachi";
+
+export function useBucket(game: Game, playtype: Playtype) {
+	const { settings } = useContext(UGPTSettingsContext);
+
+	if (!settings?.preferences.scoreBucket) {
+		const gptConfig = GetGamePTConfig(game, playtype);
+
+		return gptConfig.scoreBucket;
+	}
+
+	return settings.preferences.scoreBucket;
+}