Static mode behaves weird (with mouse on a PC)

[eniv]

Hi,
Thanks for this package.
There's an issue with the static mode on a PC with a mouse, where the nipple would move to a different direction than the position of a mouse click. That does not happen with the dynamic mode.
It appears that if position:"relative" is removed from the styling then the behavior is correct, but then the nipple location is not in the middle of the touch area.

[eniv]

The solution to this, to whom ever interested, was to wait with the rendering of the nipple until its container div is ready.
For example, this could be done by initially setting a boolean which would determine whether to render the nipple to false and later changing it true:

function MyJoystick {
  const [drawJoystick, setDrawJoystick] = useState(false);
  
  if (!drawJoystick) {
    let joystickDiv = document.getElementById("joystickDivId");
    if (joystickDiv) setDrawJoystick(true);
  }

  return (
    <div id="joystickDivId">
      {drawJoystick &&
        <ReactNipple
         ...
        />
      }
    </div>
  )
}

[chfritz]

Thanks, @eniv , you're my hero! This saved me a lot of time.

I found that one can avoid the use of an explicit id by using useEffect, which acts like componentDidMount:

const Joystick = () => {
  const [ready, setReady] = useState(false);
  useEffect(() => { setReady(true); }, []);
  return ready && <ReactNipple ...  />;
};

[eniv]

I'm glad that was helpful.