Add setting for banana path shade visibility

osu-ctb-vis · Nov 3, 2024 · 0b5d6e6 · 0b5d6e6
1 parent 2e0d3cb
commit 0b5d6e6
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 10 deletions.
diff --git a/src/contexts/SettingsContext.jsx b/src/contexts/SettingsContext.jsx
@@ -14,6 +14,8 @@ export const SettingsProvider = ({children}) => {
 	const [easy, easyRef, setEasy] = useSetting("easy", false);
 
 	const [gameSpeed, gameSpeedRef, setGameSpeed] = useSetting("gameSpeed", 1, false);
+
+	const [showBananaPathShade, showBananaPathShadeRef, setShowBananaPathShade] = useSetting("showBananaPathShade", true, true);
 
 	const [showFPS, showFPSRef, setShowFPS] = useSetting("showFPS", false, true);
 
@@ -32,6 +34,7 @@ export const SettingsProvider = ({children}) => {
 			hardRock, setHardRock, hardRockRef,
 			easy, setEasy, easyRef,
 			gameSpeed, setGameSpeed, gameSpeedRef,
+			showBananaPathShade, setShowBananaPathShade, showBananaPathShadeRef,
 			showFPS, setShowFPS, showFPSRef,
 			backgroundDim, setBackgroundDim, backgroundDimRef,
 			volume, setVolume, volumeRef,

diff --git a/src/modules/Main/Playfield/ObjectsCanvas.jsx b/src/modules/Main/Playfield/ObjectsCanvas.jsx
@@ -22,9 +22,9 @@ export function ObjectsCanvas({
 
 
 	const { verticalScale,
-		derandomize, derandomizeRef,
-		hardRock, hardRockRef,
-		easy, easyRef,
+		derandomize,
+		hardRock, easy,
+		showBananaPathShade
 	} = useContext(SettingsContext);
 
 	const {playing, playerRef, getPreciseTime} = useContext(PlayStateContext);
@@ -57,6 +57,10 @@ export function ObjectsCanvas({
 		managerRef.current.setBananaSegmentPaths(bananaSegmentPaths);
 	}, [bananaSegmentPaths]);
 
+	useEffect(() => {
+		managerRef.current.setShowBananaPathShade(showBananaPathShade);
+	}, [showBananaPathShade]);
+
 	useEffect(() => {
 		managerRef.current.setHardRock(hardRock);
 		managerRef.current.setEasy(easy);
@@ -186,6 +190,9 @@ class PixiManager {
 	getCatchWidth() {
 		return CalculateCatchWidthByCircleSize(this.getModdedCircleSize());
 	}
+	getShowBananaPathShade() {
+		return this.showBananaPathShade;
+	}
 	setSkinAssets(skin) {
 		this.skinAssets = skin;
 		this.applyToAllFruits(fruit => fruit.updateTexture());
@@ -212,6 +219,10 @@ class PixiManager {
 		this.bananaSegmentPaths = bananaSegmentPaths;
 		if (this.rendering) this.initBananaPathPolylines();
 	}
+	setShowBananaPathShade(showBananaPathShade) {
+		this.showBananaPathShade = showBananaPathShade;
+		this.applyToAllPolyLines(polyline => polyline.setVisiblity(showBananaPathShade));
+	}
 	setRendering(rendering) {
 		this.rendering = rendering;
 	}
@@ -242,7 +253,6 @@ class PixiManager {
 			const bananaPathPolyline = new BananaPathPolyline(this, path);
 			this.bananaPathPolylines.push(bananaPathPolyline);
 		}
-		this.applyToAllPolyLines(polyline => polyline.updatePosition());
 	}
 
 	applyToAllPolyLines(func) {
@@ -480,6 +490,7 @@ class BananaPathPolyline {
 			this.shade.fill(0xffff00);
 		}
 		const drawCatcherOutline = (fromX, fromTime, toX, toTime) => {
+			// outline
 			this.outline.lineTo(transformX(fromX), transformY(fromTime));
 			this.outline.lineTo(transformX(toX), transformY(toTime));
 		}
@@ -504,11 +515,9 @@ class BananaPathPolyline {
 		manager.app.stage.addChild(this.outline);
 
 
-		//this.setVisiblity(false);
+		this.setVisiblity(manager.getShowBananaPathShade());
 
-		//this.updateSize();
-		//this.updateComboColour();
-		//this.updateVisualStyle();
+		this.updatePosition();
 
 		manager.app.stage.addChild(this.shade);
 	}
@@ -527,7 +536,7 @@ class BananaPathPolyline {
 	}
 
 	setVisiblity(visible) {
-		this.shade.visible = visible;
+		this.shade.visible = this.outline.visible = visible;
 	}
 
 	destory() {

diff --git a/src/modules/Navbar/SettingsPanel.jsx b/src/modules/Navbar/SettingsPanel.jsx
@@ -17,6 +17,7 @@ export function SettingsPanel () {
 		hardRock, setHardRock,
 		easy, setEasy,
 		gameSpeed, setGameSpeed,
+		showBananaPathShade, setShowBananaPathShade,
 		showFPS, setShowFPS,
 		backgroundDim, setBackgroundDim,
 		useLegacyDOMRenderer, setUseLegacyDOMRenderer,
@@ -36,7 +37,7 @@ export function SettingsPanel () {
 				}}
 			>
 				<MdSettings />
-				<div className="settings-panel-menu" onClick={(e) => e.stopPropagation()}>
+				<div className="settings-panel-menu" onClick={(e) => e.stopPropagation()} onWheel={(e) => e.stopPropagation()}>
 					<Checkbox
 						label="Show Grid"
 						description="Show grid lines on the playfield"
@@ -126,6 +127,14 @@ export function SettingsPanel () {
 						defaultValue={0.2}
 						onChange={(value) => setMaxSpinLeniency(value)}
 					/>
+					<Checkbox
+						label="Show Banana Path Shade"
+						description="Visualize the catcher path for bananas"
+						value={showBananaPathShade}
+						onChange={(value) => {
+							setShowBananaPathShade(value);
+						}}
+					/>
 					<Checkbox
 						label="Show FPS"
 						description="Show performance monitor"