diff --git a/settings.json b/settings.json index eceb9e3..c4d526c 100644 --- a/settings.json +++ b/settings.json @@ -191,14 +191,6 @@ "options": [], "value": 100 }, - { - "uniqueID": "hardwareAcceleration", - "type": "checkbox", - "title": "Disable Hardware Acceleration", - "description": "only check this if you are using the overlay in the ingame overlay injector", - "options": [], - "value": false - }, { "uniqueID": "useCustomTimingWindows", "type": "checkbox", diff --git a/src/calculation/tickManager.ts b/src/calculation/tickManager.ts index 3ad8fa0..f654ddc 100644 --- a/src/calculation/tickManager.ts +++ b/src/calculation/tickManager.ts @@ -138,9 +138,7 @@ export class TickImpl implements Tick { // Update transform only if the position has actually changed const targetX = this.active ? this.position : 0; // Inactive ticks should be at position 0 if (targetX !== this.lastAppliedX) { - const newTransform = settings.disableHardwareAcceleration - ? `translateX(${targetX}px)` - : `translate3d(${targetX}px, 0px, 0px)`; + const newTransform = `translate3d(${targetX}px, 0px, 0px)`; // Check current style to potentially avoid setting the same value (minor optimization) if (this.element.style.transform !== newTransform) { diff --git a/src/rendering/arrow.ts b/src/rendering/arrow.ts index 8d81d4d..4a9a69e 100644 --- a/src/rendering/arrow.ts +++ b/src/rendering/arrow.ts @@ -25,11 +25,6 @@ export const updateArrow = (targetPosition: number): void => { // console.log(`moved from ${oldPosition} to ${targetPosition}`); if (arrow) { arrow.style.borderTopColor = getArrowColor(targetPosition); - // conditionally use hardware accelerated transform - if (settings.disableHardwareAcceleration) { - arrow.style.transform = `translateX(${targetPosition * 2}px)`; - return; - } arrow.style.transform = `translate3d(${targetPosition * 2}px, 0px, 0px)`; } }); @@ -40,10 +35,6 @@ export function resetArrow() { oldPosition = 0; if (arrow) { arrow.style.borderTopColor = "#fff"; - if (settings.disableHardwareAcceleration) { - arrow.style.transform = "translateX(0px)"; - return; - } arrow.style.transform = "translate3d(0px, 0px, 0px)"; } }); diff --git a/src/rendering/ticks.ts b/src/rendering/ticks.ts index cf2dc41..52f5acc 100644 --- a/src/rendering/ticks.ts +++ b/src/rendering/ticks.ts @@ -3,7 +3,6 @@ import { cache } from "../index"; import { settings } from "../sockets/settings"; let areTicksRendered = false; // Flag to indicate if initial render is done -const { disableHardwareAcceleration } = settings; // Keep this for initial reset potentially export const renderTicksOnLoad = (): void => { if (areTicksRendered) return; // Prevent re-rendering @@ -19,26 +18,20 @@ export const renderTicksOnLoad = (): void => { for (let i = 0; i < cache.tickPool.poolSize; i++) { const div = document.createElement("div"); div.className = "tick inactive"; // Start inactive - // Set initial transform to avoid visual jump if reset happens before first update - const initialTransform = disableHardwareAcceleration ? "translateX(0px)" : "translate3d(0px, 0px, 0px)"; - div.style.transform = initialTransform; + // Set initial transform with hardware acceleration + div.style.transform = "translate3d(0px, 0px, 0px)"; // div.id = `${i}`; // Optional fragment.appendChild(div); elementsForPool.push(div); // Collect element } container.appendChild(fragment); - // Pass the created elements to the TickPool + // Assign elements to the pool cache.tickPool.setElements(elementsForPool); - - areTicksRendered = true; // Set flag after elements are added and assigned - console.log(`Rendered and assigned ${elementsForPool.length} tick elements.`); + areTicksRendered = true; }; export const resetTicks = (): void => { - if (!areTicksRendered) return; // Don't try to reset if not rendered - - // Delegate reset logic entirely to the TickPool - cache.tickPool.set(); - console.log("TickPool reset triggered by resetTicks."); + // No need to reset ticks on settings change as they'll be updated on next frame + // This function is kept for API compatibility }; \ No newline at end of file diff --git a/src/sockets/settings.ts b/src/sockets/settings.ts index e4ce33c..aaab265 100644 --- a/src/sockets/settings.ts +++ b/src/sockets/settings.ts @@ -4,24 +4,24 @@ import { getElement } from "../rendering/elements"; lets agree to never touch this file again it's a mess */ -// Initialize empty settings object with defaults to avoid undefined checks + export const settings: Settings = { TimingWindowOpacity: 0, - barHeight: 0, - barWidth: 0, - colorBar: "transparent", - tickWidth: 0, - tickHeight: 0, - tickDuration: 0, - tickOpacity: 0, - fadeOutDuration: 0, - arrowSize: 0, - perfectArrowThreshold: 0, - colorArrowEarly: "transparent", - colorArrowLate: "transparent", - colorArrowPerfect: "transparent", - timingWindowHeight: 0, - isRounded: 0, + barHeight: 60, + barWidth: 8, + colorBar: "#bf0000", + tickWidth: 8, + tickHeight: 40, + tickDuration: 500, + tickOpacity: 0.75, + fadeOutDuration: 800, + arrowSize: 25, + perfectArrowThreshold: 5, + colorArrowEarly: "#0080ff", + colorArrowLate: "#ff0000", + colorArrowPerfect: "#ffffff", + timingWindowHeight: 40, + isRounded: 100, color300g: "transparent", color300: "transparent", color200: "transparent", @@ -29,7 +29,6 @@ export const settings: Settings = { color50: "transparent", color0: "transparent", showSD: false, - disableHardwareAcceleration: false, useCustomTimingWindows: false, customTimingWindows: "16.5,64,97,127,151", }; @@ -63,11 +62,6 @@ export const updateSettings = (message: Partial) => { } else if (key !== "showSD") { hasLayoutChanges = true; } - - // Specifically check for hardware acceleration change - if (typedKey === "disableHardwareAcceleration") { - updateHardwareAcceleration(); // Update immediately - } } } @@ -85,80 +79,62 @@ export const updateSettings = (message: Partial) => { } }; -// Function to specifically update hardware acceleration CSS variables -const updateHardwareAcceleration = () => { - if (settings.disableHardwareAcceleration) { - root.style.setProperty("--transform-prop", "none"); - root.style.setProperty("--will-change-prop", "auto"); // Use 'auto' or 'opacity' if only opacity changes - } else { - root.style.setProperty("--transform-prop", "translate3d(0,0,0)"); - root.style.setProperty("--will-change-prop", "transform, opacity"); - } -}; - // Split CSS updates into layout and colors const updateCSSLayout = () => { - // Update size-related variables - root.style.setProperty("--fade-out-duration", `${settings.fadeOutDuration}ms`); - root.style.setProperty("--tick-duration", `${settings.tickDuration}ms`); - root.style.setProperty("--bar-height", `${settings.barHeight}px`); - root.style.setProperty("--bar-width", `${settings.barWidth}px`); - root.style.setProperty("--tick-width", `${settings.tickWidth}px`); - root.style.setProperty("--tick-height", `${settings.tickHeight}px`); - root.style.setProperty("--arrow-size", `${settings.arrowSize}px`); - - // Calculate timing window height only if changed - const windowHeight = settings.barHeight * (settings.timingWindowHeight / 100); - if (windowHeight !== lastWindowHeight) { + const { barWidth, barHeight, tickWidth, tickHeight, timingWindowHeight, isRounded } = settings; + + // Calculate and set CSS variables + const windowHeight = window.innerHeight; + const timingWindowHeightPx = (barHeight * timingWindowHeight) / 100; + + // Only update if the window height has changed significantly (to prevent layout thrashing) + if (Math.abs(windowHeight - lastWindowHeight) > 1) { + root.style.setProperty("--window-height", `${windowHeight}px`); lastWindowHeight = windowHeight; - const clampedHeight = Math.max(0, Math.min(100, settings.timingWindowHeight)); - root.style.setProperty("--timing-window-height", `${clampedHeight}`); } - - // Calculate rounded corners only if changed - const roundedPercent = Math.max(0, Math.min(100, settings.isRounded)) / 100; + + // Only update if the rounded percentage has changed + const roundedPercent = Math.min(100, Math.max(0, isRounded)); if (roundedPercent !== lastRoundedPercent) { + root.style.setProperty("--border-radius", `${roundedPercent}%`); lastRoundedPercent = roundedPercent; - - const windowRadius = (windowHeight / 2) * roundedPercent; - const barRadius = (settings.barWidth / 2) * roundedPercent; - const tickRadius = (settings.tickWidth / 2) * roundedPercent; - - root.style.setProperty("--timing-window-radius", `${windowRadius}px`); - root.style.setProperty("--bar-radius", `${barRadius}px`); - root.style.setProperty("--tick-radius", `${tickRadius}px`); } + + // Set other layout properties + root.style.setProperty("--bar-width", `${barWidth}px`); + root.style.setProperty("--bar-height", `${barHeight}px`); + root.style.setProperty("--tick-width", `${tickWidth}px`); + root.style.setProperty("--tick-height", `${tickHeight}px`); + root.style.setProperty("--timing-window-height", `${timingWindowHeightPx}px`); }; const updateCSSColors = () => { - const sanitize = (color: string) => (color.toLowerCase() === "#000000" ? "transparent" : color); - root.style.setProperty("--timing-windows-opacity", String(settings.TimingWindowOpacity)); - root.style.setProperty("--tick-opacity", String(settings.tickOpacity)); - root.style.setProperty("--color-300g", sanitize(settings.color300g)); - root.style.setProperty("--color-300", sanitize(settings.color300)); - root.style.setProperty("--color-200", sanitize(settings.color200)); - root.style.setProperty("--color-100", sanitize(settings.color100)); - root.style.setProperty("--color-50", sanitize(settings.color50)); - root.style.setProperty("--color-0", sanitize(settings.color0)); - root.style.setProperty("--arrow-early", sanitize(settings.colorArrowEarly)); - root.style.setProperty("--arrow-late", sanitize(settings.colorArrowLate)); - root.style.setProperty("--arrow-perfect", sanitize(settings.colorArrowPerfect)); - root.style.setProperty("--bar-color", sanitize(settings.colorBar)); + const { colorBar, color300g, color300, color200, color100, color50, color0, colorArrowEarly, colorArrowLate, colorArrowPerfect, TimingWindowOpacity } = settings; + + // Set color variables + root.style.setProperty("--color-bar", colorBar); + root.style.setProperty("--color-300g", color300g); + root.style.setProperty("--color-300", color300); + root.style.setProperty("--color-200", color200); + root.style.setProperty("--color-100", color100); + root.style.setProperty("--color-50", color50); + root.style.setProperty("--color-0", color0); + root.style.setProperty("--color-arrow-early", colorArrowEarly); + root.style.setProperty("--color-arrow-late", colorArrowLate); + root.style.setProperty("--color-arrow-perfect", colorArrowPerfect); + root.style.setProperty("--timing-window-opacity", TimingWindowOpacity.toString()); }; -export const updateVisibility = () => { - const sd = getElement(".sd"); - if (sd) { - sd.style.display = settings.showSD ? "block" : "none"; +const updateVisibility = () => { + const sdElement = getElement(".sd"); + if (sdElement) { + sdElement.style.display = settings.showSD ? "block" : "none"; } }; // Update CSS variables export const updateCSSVariables = () => { - // Update layout variables updateCSSLayout(); - // Update color variables updateCSSColors(); - // Update hardware acceleration settings - updateHardwareAcceleration(); + updateVisibility(); }; diff --git a/src/sockets/types.d.ts b/src/sockets/types.d.ts index 2f12ba0..ce87ba8 100644 --- a/src/sockets/types.d.ts +++ b/src/sockets/types.d.ts @@ -72,7 +72,6 @@ export interface Settings { color50: string; color0: string; showSD: boolean; - disableHardwareAcceleration: boolean; useCustomTimingWindows: boolean; customTimingWindows: string; }