Turtlesim virtual joystick navigation

edit

I am writing code interfacing a virtual joystick on a website with ROS, using values from the joystick to drive the Turtle by publishing to cmd_vel.

If chopping down the the X and Y values by 10% so the Turtles' movements are more controlled.

My challenge is that I can't get the Turtles movements right especially when the joystick is moved in 2 directions at the same time like right+up OR left+down.

I'm using the following code:

x_axis *= 0.01;
y_axis *= 0.01;
let data = { linear : { x : x_axis, y : 0.0, z : 0.0  }, angular : { x : 0.0, y : 0.0, z : 0.0} };

switch (direction.direction.angle) {
    case 'left':
        console.log('GOING LEFT');
        x_axis = x_axis * -1;
        data = { linear : { x : x_axis, y : 0.0, z : 0.0  }, angular : { x : 0.0, y : 0.0, z : 0.0} };
    break;
    case 'down':
        console.log('GOING DOWN');
        y_axis = y_axis * -1;
        data = { linear : { x : 0.0, y : 0.0, z : 0.0  }, angular : { x : 0.0, y : 0.0, z : y_axis} };
    default:
    break;
}
.
.
.

With the code above, using down as an example, my turtle only orients downwards. If I alter it to the following to include a value for linear x:

data = { linear : { x : x_axis, y : 0.0, z : 0.0  }, angular : { x : 0.0, y : 0.0, z : y_axis} };

... the turtle just ends up going around in circles

Can anyone help me understand how to implement a joystick custom interface into ROS? OR, direct me to material I can read to help me understand?