Merge branch 'master' of https://github.com/RedcXca/Catch-Map-Visualizer

osu-ctb-vis · May 13, 2024 · e0ceb28 · e0ceb28
2 parents 2dd96ab + c9646b2
commit e0ceb28
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 14 deletions.
diff --git a/src/modules/ControlBar/ControlBtns.jsx b/src/modules/ControlBar/ControlBtns.jsx
@@ -85,16 +85,28 @@ function PlaybackRateButton(props) {
 					}
 				</div>
 
-				<ControlBtnMenuSlider
-					min="0.1"
-					max="2"
-					step="0.01"
-					value={playbackRate}
-					onInput={(e) => {
-						setPlaybackRate(parseFloat(e.target.value));
-					}}
-				/>
-				<div className="control-btn-menu-annotation">
+				<div className="slider-button-container">
+					<ControlBtnMenuSlider
+						min="0.1"
+						max="2"
+						step="0.05"
+						value={playbackRate}
+						onInput={(e) => {
+							setPlaybackRate(parseFloat(e.target.value));
+						}}
+					/>
+
+					<div className="playback-rate-buttons">
+						<div className={clsx("playback-rate-button", {"semi-selected": playbackRate < 0.75, "selected": playbackRate === 0.75})} onClick={() => setPlaybackRate(0.75)}>
+							<div className="button-label">HT</div>
+						</div>
+						<div className={clsx("playback-rate-button", {"semi-selected": playbackRate > 1.5, "selected": playbackRate === 1.5})} onClick={() => setPlaybackRate(1.5)}>
+							<div className="button-label">DT</div>
+						</div>
+					</div>
+				</div>
+
+				{/* <div className="control-btn-menu-annotation">
 					{
 						gameSpeed < 1 &&
 						<span>
@@ -110,7 +122,7 @@ function PlaybackRateButton(props) {
 					<span>
 						{formatSpeed(actualSpeed)}x
 					</span>
-				</div>
+				</div> */}
 			</div>
 		</button>
 	)

diff --git a/src/modules/ControlBar/ControlBtns.scss b/src/modules/ControlBar/ControlBtns.scss
@@ -45,7 +45,7 @@
 				top: 0;
 				height: 200%;
 				background: var(--navbar-color-light-hover);
-				width: 200px;
+				width: 300px;
 				max-width: calc(100vw - 12px);
 				display: flex;
 				padding: 5px 15px;
@@ -118,16 +118,62 @@
 	}
 
 	.playback-rate-btn {
+		.playback-rate-container {
+			display: flex;
+			justify-content: space-between;
+		}		
 		font-size: 18px;
 		font-weight: 600;
 		.small {
 			font-size: 14px;
 			opacity: 0.8;
 			font-weight: 400;
 		}
+		.slider-button-container {
+			display: flex;
+			justify-content: space-between;
+		}
 		.control-btn-menu.playback-rate-menu {
 			top: 0%;
 			height: 100%;
+			display: flex;
+			flex-direction: column;
+			justify-content: space-between;
+		}
+		.control-btn-menu.playback-rate-menu .playback-rate-buttons {
+			display: flex;
+			flex-direction: row;
+			justify-content: space-evenly;
+			padding: 5px 0px;
+			cursor: pointer;
+			transition: background-color 0.2s;
+			margin-left: auto;
+		}
+		.control-btn-menu.playback-rate-menu .playback-rate-button {
+			width: 50px;
+			text-align: center;
+			padding: 2px 2px;
+			margin-left: 15px;
+			border-radius: 100px;
+			border: 2px solid var(--accent-color);
+			position: relative;
+			bottom: 5px; 
+			font-size: 0.5em;
+			font-weight: 500;
+			transition: background-color 0.2s, color 0.2s, filter 0.2s, font-weight 0.2s;
+		}
+		.control-btn-menu.playback-rate-menu .playback-rate-button:hover {
+			background-color: #fff1;
+			filter: drop-shadow(0 0 4px var(--accent-color));
+		}
+		.control-btn-menu.playback-rate-menu .playback-rate-button.semi-selected {
+			background-color: color-mix(in srgb, var(--accent-color) 20%, transparent 80%);
+			filter: drop-shadow(0 0 4px var(--accent-color));
+		}
+		.control-btn-menu.playback-rate-menu .playback-rate-button.selected {
+			background-color: var(--accent-color);
+			font-weight: 800;
+			filter: drop-shadow(0 0 4px var(--accent-color));
 		}
 	}
 

diff --git a/src/modules/Navbar/SettingsPanel.scss b/src/modules/Navbar/SettingsPanel.scss
@@ -238,7 +238,6 @@
 					filter: drop-shadow(0 0 4px var(--accent-color));
 				}
 			}
-
 		}
 	}
 

diff --git a/src/parser/banana-path-calculation b/src/parser/banana-path-calculation
-Original file line number
+Diff line change
@@ Expand Up / @@ -238,7 +238,6 @@ @@
     					filter: drop-shadow(0 0 4px var(--accent-color));
     				}
     			}
     		}
     	}
@@ Expand Down @@