feat: option to disable transparency in overlay

_docs/changelog.md

@@ -3,6 +3,10 @@ template: changelog
 title: Changelog
 ---
 
+## 01 October 2023
+
+- <span class="feature--new">New</span> Added option to disable transparency on background. (Requested by Ski Freak)
+
 ## 23 November 2021
 
 - <span class="feature--changed">Changed</span> TMVIZ just got a performance boost! Not much has changed visually, but under the hood, there's a major rework in how gamepads are rendered. This makes the overlay much less demanding in terms of render count, which (hopefully) results in way less memory usage + freezing on OBS.

src/modules/customizer/customizer-form.tsx

@@ -108,6 +108,10 @@ const CustomizerForm: React.FC = () => {
                           />
                           <CheckboxField label="Hide brake" name="appearance.disableBrake" />
                           <CheckboxField label="Hide steering" name="appearance.disableSteering" />
+                          <CheckboxField
+                            label="Disable transparency"
+                            name="appearance.disableTransparency"
+                          />
                         </Grid>
                       </Stack>
                     </FormSection>

src/modules/customizer/utils/build-url-query.ts

@@ -1,7 +1,8 @@
 import queryString from 'query-string';
 import { GlobalOverlaySettings } from '~/types/overlay';
 
-const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL ?? 'https://tmviz.vercel.app';
+const BASE_URL =
+  `https://${process.env.NEXT_PUBLIC_VERCEL_URL}` ?? process.env.NEXT_PUBLIC_BASE_URL ?? '';
 
 function buildURLQuery(settings: GlobalOverlaySettings, baseUrl: string = BASE_URL) {
   const query = { version: settings.version, ...settings.appearance, ...settings.config };

src/modules/parser/utils/parse-appearance.ts

@@ -13,6 +13,7 @@ export function parseAppearance({
   disableAccelerate,
   disableBrake,
   disableSteering,
+  disableTransparency,
 }: Partial<ParsedUrlQuery> = {}): GlobalOverlaySettings['appearance'] {
   return {
     accelerateColor: Array.isArray(accelerateColor)
@@ -25,5 +26,6 @@ export function parseAppearance({
     disableAccelerate: parseIfDefined(disableAccelerate, false),
     disableBrake: parseIfDefined(disableBrake, false),
     disableSteering: parseIfDefined(disableSteering, false),
+    disableTransparency: parseIfDefined(disableTransparency, false),
   };
 }

src/modules/trackmania/telemetry/telemetry-button.tsx

@@ -35,6 +35,7 @@ function useButtonProperties(variant: TelemetryButtonVariants) {
   return {
     hide: variant === 'brake' ? appearance.disableBrake : appearance.disableAccelerate,
     color: variant === 'brake' ? appearance.brakeColor : appearance.accelerateColor,
+    disableTransparency: appearance.disableTransparency,
   } as const;
 }
 
@@ -44,8 +45,12 @@ const TelemetryButton: React.FC<TelemetryButtonProps> = ({
   variant = 'accelerate',
 }) => {
   const currentController = useCurrentController();
-  const { hide, color } = useButtonProperties(variant);
-  const backgroundColor = useTelemetryInputStyle(color, typeof currentController !== 'undefined');
+  const { hide, color, disableTransparency } = useButtonProperties(variant);
+  const backgroundColor = useTelemetryInputStyle({
+    color,
+    isConnected: typeof currentController !== 'undefined',
+    disableTransparency,
+  });
   const value = useAxisValue(variant);
 
   return (

src/modules/trackmania/telemetry/telemetry-steering.tsx

@@ -41,13 +41,18 @@ function useSteeringProperties() {
   return {
     hide: appearance.disableSteering,
     color: appearance.steeringColor,
+    disableTransparency: appearance.disableTransparency,
   } as const;
 }
 
 const TelemetrySteering: React.FC<TelemetrySteeringProps> = ({ className, style, direction }) => {
   const currentController = useCurrentController();
-  const { hide, color } = useSteeringProperties();
-  const backgroundColor = useTelemetryInputStyle(color, typeof currentController !== 'undefined');
+  const { hide, color, disableTransparency } = useSteeringProperties();
+  const backgroundColor = useTelemetryInputStyle({
+    color,
+    isConnected: typeof currentController !== 'undefined',
+    disableTransparency,
+  });
   const value = useSteeringValue();
 
   return (

src/modules/trackmania/utils/normalize-gamepad-values.ts

@@ -6,7 +6,7 @@ export function normalizeSteeringDpadValue(
   if (gamepad && config) {
     const button = gamepad.buttons[Number(config)];
 
-    if (button.value) {
+    if (button?.value) {
       if (direction === 'left') {
         return -button.value;
       }

src/modules/trackmania/utils/use-telemetry-input-style.ts

@@ -1,20 +1,40 @@
 import * as React from 'react';
-import { transparentize } from 'polished';
+import { hsl, parseToHsl, transparentize } from 'polished';
 import isValidHex from '~/utils/is-valid-hex';
 import theme from '~/utils/theme';
 
 const defaultColor = theme.colors.gray[500];
 
-export function useTelemetryInputStyle(color: string = defaultColor, isConnected?: boolean) {
+export interface UseTelemetryInputStyleProps {
+  color?: string;
+  isConnected?: boolean;
+  disableTransparency?: boolean;
+}
+
+function getColorHsl(color: unknown) {
+  // Find the proper HSL lightness based on max-val/min-val percentage:
+  // (maxVal - minVal) * percentage + minVal
+  if (typeof color === 'string' && isValidHex(color)) {
+    const colorHsl = parseToHsl(color);
+
+    return hsl(colorHsl.hue, colorHsl.saturation, colorHsl.lightness * ((0.75 - 0.25) * 0 + 0.25));
+  }
+
+  return undefined;
+}
+
+export function useTelemetryInputStyle({
+  color = defaultColor,
+  isConnected,
+  disableTransparency,
+}: UseTelemetryInputStyleProps) {
   const backgroundColor = React.useMemo(() => {
-    // Find the proper HSL lightness based on max-val/min-val percentage:
-    // (maxVal - minVal) * percentage + minVal
     if (isConnected && color && isValidHex(color)) {
-      return transparentize(0.75, color);
+      return disableTransparency ? getColorHsl(color) : transparentize(0.75, color);
     }
 
-    return transparentize(0.75, defaultColor);
-  }, [color, isConnected]);
+    return disableTransparency ? getColorHsl(defaultColor) : transparentize(0.75, defaultColor);
+  }, [color, isConnected, disableTransparency]);
 
   return backgroundColor;
 }

src/types/overlay.ts

@@ -17,6 +17,7 @@ export interface GamepadAppearanceSettings {
   disableSteering?: boolean;
   disableAccelerate?: boolean;
   disableBrake?: boolean;
+  disableTransparency?: boolean;
 }
 
 export interface ControllerTelemetry {