feat: rating-based colored text for cells (#1126)

* feat: chunithm + maimaidx rating colored cells * fix: nest a div inside for better rainbow rendering * feat: maimai + ongeki * fix: maimai's "rating" value is called "rate". oops. * feat: vf6 color * chore: lint code * chore: um why is this here? * feat: wacca rating cell * fix: undefine white color so it doesn't blend in * chore: lint code
zkrising · Jul 13, 2024 · 7060728 · 7060728
1 parent 8f2a235
commit 7060728
Show file tree

Hide file tree

Showing 8 changed files with 331 additions and 40 deletions.
diff --git a/client/src/components/tables/cells/CHUNITHMRatingCell.tsx b/client/src/components/tables/cells/CHUNITHMRatingCell.tsx
@@ -0,0 +1,56 @@
+import React from "react";
+import { PBScoreDocument, ScoreDocument } from "tachi-common";
+
+export default function CHUNITHMRatingCell({ score }: { score: ScoreDocument | PBScoreDocument }) {
+	let color: undefined | string = undefined;
+
+	const rating = score.calculatedData.rating;
+
+	if (rating === null || rating === undefined) {
+		color = undefined;
+	} else if (rating >= 16.0) {
+		color =
+			"linear-gradient(-45deg, #f0788a, #f48fb1, #9174c2, #79bcf2, #70a173, #f7ff99, #faca7d, #ff9d80, #f0788a)";
+		return (
+			<td>
+				<div
+					style={{
+						background: color,
+						backgroundClip: "text",
+						outline: "white",
+						WebkitTextFillColor: "transparent",
+					}}
+				>
+					<strong>{score.calculatedData.rating?.toFixed(2) ?? "N/A"}</strong>
+				</div>
+			</td>
+		);
+	} else if (rating >= 15.25) {
+		color = "silver";
+	} else if (rating >= 14.5) {
+		color = "var(--bs-warning)";
+	} else if (rating >= 13.25) {
+		color = "gray";
+	} else if (rating >= 12.0) {
+		color = "sienna";
+	} else if (rating >= 10.0) {
+		color = "purple";
+	} else if (rating >= 7.0) {
+		color = "red";
+	} else if (rating >= 4.0) {
+		color = "orange";
+	} else if (rating >= 0) {
+		color = "green";
+	}
+
+	return (
+		<td
+			style={{
+				color,
+				outline: "white",
+			}}
+		>
+			<strong>{score.calculatedData.rating?.toFixed(2) ?? "N/A"}</strong>
+		</td>
+	);
+}
diff --git a/client/src/components/tables/cells/GitadoraJudgementCell copy.tsx b/client/src/components/tables/cells/GitadoraJudgementCell copy.tsx
diff --git a/client/src/components/tables/cells/MaimaiDXRatingCell.tsx b/client/src/components/tables/cells/MaimaiDXRatingCell.tsx
@@ -0,0 +1,60 @@
+import React from "react";
+import { PBScoreDocument, ScoreDocument } from "tachi-common";
+
+export default function MaimaiDXRatingCell({ score }: { score: ScoreDocument | PBScoreDocument }) {
+	let color: undefined | string = undefined;
+
+	const rating = score.calculatedData.rate;
+
+	if (rating === null || rating === undefined) {
+		color = undefined;
+	} else if (rating >= 300) {
+		color =
+			"linear-gradient(-45deg, #f0788a, #f48fb1, #9174c2, #79bcf2, #70a173, #f7ff99, #faca7d, #ff9d80, #f0788a)";
+		return (
+			<td>
+				<div
+					style={{
+						background: color,
+						backgroundClip: "text",
+						outline: "white",
+						WebkitTextFillColor: "transparent",
+					}}
+				>
+					<strong>{score.calculatedData.rate ?? "N/A"}</strong>
+				</div>
+			</td>
+		);
+	} else if (rating >= 290) {
+		color = "lightgoldenrodyellow";
+	} else if (rating >= 280) {
+		color = "var(--bs-warning)";
+	} else if (rating >= 260) {
+		color = "gray";
+	} else if (rating >= 240) {
+		color = "brown";
+	} else if (rating >= 200) {
+		color = "purple";
+	} else if (rating >= 140) {
+		color = "red";
+	} else if (rating >= 80) {
+		color = "yellow";
+	} else if (rating >= 40) {
+		color = "green";
+	} else if (rating >= 20) {
+		color = "blue";
+	} else if (rating >= 0) {
+		color = undefined;
+	}
+
+	return (
+		<td
+			style={{
+				color,
+				outline: "white",
+			}}
+		>
+			<strong>{score.calculatedData.rate ?? "N/A"}</strong>
+		</td>
+	);
+}
diff --git a/client/src/components/tables/cells/MaimaiRatingCell.tsx b/client/src/components/tables/cells/MaimaiRatingCell.tsx
@@ -0,0 +1,59 @@
+import React from "react";
+import { PBScoreDocument, ScoreDocument } from "tachi-common";
+
+export default function MaimaiRatingCell({ score }: { score: ScoreDocument | PBScoreDocument }) {
+	let color: undefined | string = undefined;
+
+	const rating = score.calculatedData.rate;
+
+	if (rating === null || rating === undefined) {
+		color = undefined;
+	} else if (rating >= 15.0) {
+		color =
+			"linear-gradient(-45deg, #f0788a, #f48fb1, #9174c2, #79bcf2, #70a173, #f7ff99, #faca7d, #ff9d80, #f0788a)";
+		return (
+			<td>
+				<div
+					style={{
+						background: color,
+						backgroundClip: "text",
+						outline: "white",
+						WebkitTextFillColor: "transparent",
+					}}
+				>
+					<strong>{score.calculatedData.rating?.toFixed(2) ?? "N/A"}</strong>
+				</div>
+			</td>
+		);
+	} else if (rating >= 14.5) {
+		color = "var(--bs-warning)";
+	} else if (rating >= 14.0) {
+		color = "gray";
+	} else if (rating >= 13.0) {
+		color = "brown";
+	} else if (rating >= 12.0) {
+		color = "purple";
+	} else if (rating >= 10.0) {
+		color = "red";
+	} else if (rating >= 7.0) {
+		color = "yellow";
+	} else if (rating >= 4.0) {
+		color = "green";
+	} else if (rating >= 2.0) {
+		color = "cyan";
+	} else if (rating >= 0.0) {
+		// undefining so the rating text isn't permanently white on light mode
+		color = undefined;
+	}
+
+	return (
+		<td
+			style={{
+				color,
+				outline: "white",
+			}}
+		>
+			<strong>{score.calculatedData.rating?.toFixed(2) ?? "N/A"}</strong>
+		</td>
+	);
+}
diff --git a/client/src/components/tables/cells/OngekiRatingCell.tsx b/client/src/components/tables/cells/OngekiRatingCell.tsx
@@ -0,0 +1,58 @@
+import React from "react";
+import { PBScoreDocument, ScoreDocument } from "tachi-common";
+
+export default function OngekiRatingCell({ score }: { score: ScoreDocument | PBScoreDocument }) {
+	let color: undefined | string = undefined;
+
+	const rating = score.calculatedData.rating;
+
+	if (rating === null || rating === undefined) {
+		color = undefined;
+	} else if (rating >= 15.0) {
+		color =
+			"linear-gradient(-45deg, #f0788a, #f48fb1, #9174c2, #79bcf2, #70a173, #f7ff99, #faca7d, #ff9d80, #f0788a)";
+		return (
+			<td>
+				<div
+					style={{
+						background: color,
+						backgroundClip: "text",
+						outline: "white",
+						WebkitTextFillColor: "transparent",
+					}}
+				>
+					<strong>{score.calculatedData.rating?.toFixed(2) ?? "N/A"}</strong>
+				</div>
+			</td>
+		);
+	} else if (rating >= 14.5) {
+		color = "silver";
+	} else if (rating >= 14.0) {
+		color = "var(--bs-warning)";
+	} else if (rating >= 13.0) {
+		color = "gray";
+	} else if (rating >= 12.0) {
+		color = "sienna";
+	} else if (rating >= 10.0) {
+		color = "purple";
+	} else if (rating >= 7.0) {
+		color = "red";
+	} else if (rating >= 4.0) {
+		color = "orange";
+	} else if (rating >= 2.0) {
+		color = "green";
+	} else if (rating >= 0.0) {
+		color = "var(--bs-info)";
+	}
+
+	return (
+		<td
+			style={{
+				color,
+				outline: "white",
+			}}
+		>
+			<strong>{score.calculatedData.rating?.toFixed(2) ?? "N/A"}</strong>
+		</td>
+	);
+}
diff --git a/client/src/components/tables/cells/VF6Cell.tsx b/client/src/components/tables/cells/VF6Cell.tsx
@@ -5,6 +5,7 @@ import React, { useContext } from "react";
 import { Volforce } from "rg-stats";
 import {
 	ChartDocument,
+	COLOUR_SET,
 	GetGPTString,
 	GetSpecificGPTConfig,
 	PBScoreDocument,
@@ -61,8 +62,40 @@ export default function VF6Cell({
 
 	const maxVF = Volforce.calculateVF6(10_000_000, "PERFECT ULTIMATE CHAIN", chart.levelNum);
 
+	let color = undefined;
+	const vf = score.calculatedData.VF6;
+
+	if (vf === null || vf === undefined) {
+		color = undefined;
+	} else if (vf >= 0.4) {
+		color = COLOUR_SET.vibrantPurple;
+	} else if (vf >= 0.38) {
+		color = COLOUR_SET.vibrantRed;
+	} else if (vf >= 0.36) {
+		color = "var(--bs-warning)";
+	} else if (vf >= 0.34) {
+		color = COLOUR_SET.white;
+	} else if (vf >= 0.32) {
+		color = COLOUR_SET.pink;
+	} else if (vf >= 0.3) {
+		color = COLOUR_SET.vibrantPink;
+	} else if (vf >= 0.28) {
+		color = COLOUR_SET.teal;
+	} else if (vf >= 0.24) {
+		color = COLOUR_SET.gold;
+	} else if (vf >= 0.2) {
+		color = COLOUR_SET.paleBlue;
+	} else if (vf >= 0) {
+		color = COLOUR_SET.red;
+	}
+
 	return (
-		<td>
+		<td
+			style={{
+				color,
+				outline: "white",
+			}}
+		>
 			<strong className="underline-on-hover">{score.calculatedData.VF6}</strong>
 
 			{vf6Target !== 0 && vf6Target && user?.id === score.userID && (

diff --git a/client/src/components/tables/cells/WACCARatingCell.tsx b/client/src/components/tables/cells/WACCARatingCell.tsx
@@ -0,0 +1,56 @@
+import React from "react";
+import { PBScoreDocument, ScoreDocument } from "tachi-common";
+
+export default function WACCARatingCell({ score }: { score: ScoreDocument | PBScoreDocument }) {
+	let color: undefined | string = undefined;
+
+	const rating = score.calculatedData.rate;
+
+	if (rating === null || rating === undefined) {
+		color = undefined;
+	} else if (rating >= 50) {
+		color =
+			"linear-gradient(-45deg, #f0788a, #f48fb1, #9174c2, #79bcf2, #70a173, #f7ff99, #faca7d, #ff9d80, #f0788a)";
+		return (
+			<td>
+				<div
+					style={{
+						background: color,
+						backgroundClip: "text",
+						outline: "white",
+						WebkitTextFillColor: "transparent",
+					}}
+				>
+					<strong>{score.calculatedData.rate ?? "N/A"}</strong>
+				</div>
+			</td>
+		);
+	} else if (rating >= 44) {
+		color = "var(--bs-warning)";
+	} else if (rating >= 38) {
+		color = "silver";
+	} else if (rating >= 32) {
+		color = "var(--bs-info)";
+	} else if (rating >= 26) {
+		color = "purple";
+	} else if (rating >= 20) {
+		color = "red";
+	} else if (rating >= 12) {
+		color = "orange";
+	} else if (rating >= 6) {
+		color = "darkblue";
+	} else if (rating >= 0) {
+		color = "var(--bs-secondary)";
+	}
+
+	return (
+		<td
+			style={{
+				color,
+				outline: "white",
+			}}
+		>
+			<strong>{score.calculatedData.rate ?? "N/A"}</strong>
+		</td>
+	);
+}