feat: make it possible to change slider value with gamepad in ui

Author: zardoy

src/app/gamepadCursor.ts

@@ -2,6 +2,8 @@ import { Command, contro } from '../controls'
 import { hideAllModals, hideCurrentModal, miscUiState } from '../globalState'
 import { gamepadUiCursorState, moveGamepadCursorByPx } from '../react/GamepadUiCursor'
 
+let lastHoveredElement: HTMLElement | null = null
+
 contro.on('movementUpdate', ({ vector, soleVector, gamepadIndex }) => {
   if (gamepadIndex !== undefined && gamepadUiCursorState.display) {
     const deadzone = 0.1 // TODO make deadzone configurable
@@ -11,6 +13,7 @@ contro.on('movementUpdate', ({ vector, soleVector, gamepadIndex }) => {
     moveGamepadCursorByPx(soleVector.x, true)
     moveGamepadCursorByPx(soleVector.z, false)
     emitMousemove()
+    trackHoveredElement()
   }
 })
 
@@ -26,7 +29,40 @@ const emitMousemove = () => {
   }))
 }
 
-// Setup right stick scrolling for UI mode
+const trackHoveredElement = () => {
+  const { x, y } = gamepadUiCursorState
+  const xAbs = x / 100 * window.innerWidth
+  const yAbs = y / 100 * window.innerHeight
+  const element = document.elementFromPoint(xAbs, yAbs) as HTMLElement | null
+
+  if (element !== lastHoveredElement) {
+    // Emit mouseout for previous element
+    if (lastHoveredElement) {
+      const mouseoutEvent = new MouseEvent('mouseout', {
+        bubbles: true,
+        clientX: xAbs,
+        clientY: yAbs
+      }) as any
+      mouseoutEvent.isGamepadCursor = true
+      lastHoveredElement.dispatchEvent(mouseoutEvent)
+    }
+
+    // Emit mouseover for new element
+    if (element) {
+      const mouseoverEvent = new MouseEvent('mouseover', {
+        bubbles: true,
+        clientX: xAbs,
+        clientY: yAbs
+      }) as any
+      mouseoverEvent.isGamepadCursor = true
+      element.dispatchEvent(mouseoverEvent)
+    }
+
+    lastHoveredElement = element
+  }
+}
+
+// Setup right stick scrolling and input value changing for UI mode
 contro.on('stickMovement', ({ stick, vector }) => {
   if (stick !== 'right') return
   if (!gamepadUiCursorState.display) return
@@ -35,13 +71,36 @@ contro.on('stickMovement', ({ stick, vector }) => {
   if (Math.abs(x) < 0.18) x = 0
   if (Math.abs(z) < 0.18) z = 0
 
-  if (z === 0) return // No vertical movement
+  // Handle horizontal movement (for inputs)
+  if (x !== 0) {
+    emitGamepadInputChange(x, true)
+  }
 
-  emulateGamepadScroll(z)
+  // Handle vertical movement (for scrolling)
+  if (z !== 0) {
+    emulateGamepadScroll(z)
+  }
 
   miscUiState.usingGamepadInput = true
 })
 
+// todo make also control with left/right
+
+const emitGamepadInputChange = (x: number, isStickMovement: boolean) => {
+  const cursorX = gamepadUiCursorState.x / 100 * window.innerWidth
+  const cursorY = gamepadUiCursorState.y / 100 * window.innerHeight
+  const element = document.elementFromPoint(cursorX, cursorY) as HTMLElement | null
+
+  if (element) {
+    // Emit custom event for input value change
+    const customEvent = new CustomEvent('gamepadInputChange', {
+      bubbles: true,
+      detail: { direction: x > 0 ? 1 : -1, value: x, isStickMovement },
+    })
+    element.dispatchEvent(customEvent)
+  }
+}
+
 const emulateGamepadScroll = (z: number) => {
   // Get element under cursor
   const cursorX = gamepadUiCursorState.x / 100 * window.innerWidth

src/react/Slider.tsx

@@ -1,5 +1,6 @@
 // Slider.tsx
 import React, { useState, useEffect, useRef, useCallback } from 'react'
+import { useFloating, arrow, FloatingArrow, offset as offsetMiddleware } from '@floating-ui/react'
 import styles from './slider.module.css'
 import SharedHudVars from './SharedHudVars'
 
@@ -18,6 +19,9 @@ interface Props extends React.ComponentProps<'div'> {
   updateOnDragEnd?: boolean;
 }
 
+const ARROW_HEIGHT = 7
+const GAP = 0
+
 const Slider: React.FC<Props> = ({
   label,
   unit = '%',
@@ -45,6 +49,11 @@ const Slider: React.FC<Props> = ({
   const timeoutRef = useRef<NodeJS.Timeout | null>(null)
   const lastValueRef = useRef<number>(valueProp)
 
+  // Gamepad support
+  const [showGamepadTooltip, setShowGamepadTooltip] = useState(false)
+  const lastChangeTime = useRef(0)
+  const containerRef = useRef<HTMLDivElement>(null!)
+
   useEffect(() => {
     setValue(valueProp)
   }, [valueProp])
@@ -89,15 +98,80 @@ const Slider: React.FC<Props> = ({
     }
   }, [updateValue])
 
+  // Handle gamepad hover and input changes
+  useEffect(() => {
+    const element = containerRef.current
+    if (!element) return
+
+    const handleMouseOver = (e: MouseEvent & { isGamepadCursor?: boolean }) => {
+      if (e.isGamepadCursor && !disabledReason) {
+        setShowGamepadTooltip(true)
+      }
+    }
+
+    const handleMouseOut = (e: MouseEvent & { isGamepadCursor?: boolean }) => {
+      if (e.isGamepadCursor) {
+        setShowGamepadTooltip(false)
+      }
+    }
+
+    const handleGamepadInputChange = (e: CustomEvent<{ direction: number, value: number, isStickMovement: boolean }>) => {
+      if (disabledReason) return
+
+      const now = Date.now()
+      // Throttle changes to prevent too rapid updates
+      if (now - lastChangeTime.current < 200 && e.detail.isStickMovement) return
+      lastChangeTime.current = now
+
+      const step = 1
+      const newValue = value + (e.detail.direction * step)
+
+      // Apply min/max constraints
+      const constrainedValue = Math.max(min, Math.min(max, newValue))
+
+      setValue(constrainedValue)
+      fireValueUpdate(false, constrainedValue)
+    }
+
+    element.addEventListener('mouseover', handleMouseOver as EventListener)
+    element.addEventListener('mouseout', handleMouseOut as EventListener)
+    element.addEventListener('gamepadInputChange', handleGamepadInputChange as EventListener)
+
+    return () => {
+      element.removeEventListener('mouseover', handleMouseOver as EventListener)
+      element.removeEventListener('mouseout', handleMouseOut as EventListener)
+      element.removeEventListener('gamepadInputChange', handleGamepadInputChange as EventListener)
+    }
+  }, [disabledReason, value, min, max])
+
   const fireValueUpdate = (dragEnd: boolean, v = value) => {
     throttledUpdateValue(v, dragEnd)
   }
 
   const labelText = `${label}: ${valueDisplay ?? value} ${unit}`
 
+  const arrowRef = useRef<any>(null)
+  const { refs, floatingStyles, context } = useFloating({
+    middleware: [
+      arrow({
+        element: arrowRef
+      }),
+      offsetMiddleware(ARROW_HEIGHT + GAP),
+    ],
+    placement: 'top',
+  })
+
   return (
     <SharedHudVars>
-      <div className={`${styles['slider-container']} settings-text-container ${labelText.length > 17 ? 'settings-text-container-long' : ''}`} style={{ width }} {...divProps}>
+      <div
+        ref={(node) => {
+          containerRef.current = node!
+          refs.setReference(node)
+        }}
+        className={`${styles['slider-container']} settings-text-container ${labelText.length > 17 ? 'settings-text-container-long' : ''}`}
+        style={{ width }}
+        {...divProps}
+      >
         <input
           type="range"
           className={styles.slider}
@@ -127,6 +201,26 @@ const Slider: React.FC<Props> = ({
           {labelText}
         </label>
       </div>
+      {showGamepadTooltip && (
+        <div
+          ref={refs.setFloating}
+          style={{
+            ...floatingStyles,
+            background: 'rgba(0, 0, 0, 0.8)',
+            fontSize: 10,
+            pointerEvents: 'none',
+            userSelect: 'none',
+            padding: '4px 8px',
+            borderRadius: 4,
+            textShadow: '1px 1px 2px BLACK',
+            zIndex: 1000,
+            whiteSpace: 'nowrap'
+          }}
+        >
+          Use right stick left/right to change value
+          <FloatingArrow ref={arrowRef} context={context} style={{ fill: 'rgba(0, 0, 0, 0.8)' }} />
+        </div>
+      )}
     </SharedHudVars>
   )
 }