I am making a simple 2 player browser game, where there's a rotating entity which jumps from one square to another on mouse click. Server is on NodeJS.

To determine which square to jump into, I used 2D Ray-casting shown here

Now my problem is that sometimes, if the line points to the corner of the square, the resulting action into the another client is not the same. (e.g. In player 1's view, he can successfully jump to the next square, while in player 2's view, player 1 is not successful.)

The way I sync both player is that I only send the click action and the current angle of the action owner, then reverse it (since in the other player's view, the enemy is on the opposite side).

At first I thought that it's because of the reversing angle that the result is not the same so I tried rotating the canvas but I still got the same result.

I also tried increasing the line (ray) which detects which square to jump into, but I still got an inaccurate result.

Another attempt is to forcefully update the ray casted on action sync, but I still got an inaccurate result.

Is it possible to achieve the desired result without making the server authoritative? (e.g. recreate the environment and entity rects in the server, and get the result from there, problem here is I don't know how.)

Here's a visual representation of the problem