On-screen Joystick Implementation Needs Refinement

[AntumDeluge]

🐞 Describe the bug

The current on-screen joystick detects direction based on the position of the inner circle relative to the outer (green represents up/down, violet left/right, gray dead zone):

But it should be like this:

I'm not great at working with circles & pi, so if anyone else wants to fix it please go ahead. Otherwise, not sure when I will get it done.

Its code is found here in methods getPressedDirection & updateInner.

Demonstration of joystick in use: https://youtu.be/bhZ4roXRYr0?t=27

Note: The inner button's movement should be restricted by the radius of the outer button & control should be maintained if touch/click is dragged outside said radius.

🌍 Environment

• Web client

[nhnb]

On this screenshot, I am expecting to walk right into the door. I am pressing into the direction up-up-right. Therefore I should be walking up, if it is possible. And right otherwise.

So basically, we need to send a primary and a secondary direction to the server.

Conceptionally we need these detection zones:

In practice, however, we need to implement it with high-low-watermark areas. If the cursor is in a purple area and it was in one of the adjacent areas before, no action may be sent to the server.

[AntumDeluge]

I have implemented secondary directions as decimal point values, though no action is sent to server yet:

.1 represents secondary direction counter-clockwise region of primary direction .2 represents secondary direction clockwise region of primary direction

E.g., 1.1 represents pressing up-left, 1.2 represents pressing up-right. Not sure if perhaps there is a better way to implement it.

It doesn't yet support "high-low-watermark areas". Still trying to wrap my head around that.