refactor: remove disableHardwareAccel setting and related code

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",

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) {

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)";
         }
     });

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
 };

src/sockets/settings.ts

@@ -4,32 +4,31 @@ 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",
     color100: "transparent",
     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<Settings>) => {
             } 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<Settings>) => {
     }
 };
 
-// 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();
 };

src/sockets/types.d.ts

@@ -72,7 +72,6 @@ export interface Settings {
     color50: string;
     color0: string;
     showSD: boolean;
-    disableHardwareAcceleration: boolean;
     useCustomTimingWindows: boolean;
     customTimingWindows: string;
 }