UPDATE - SOLVED
I solved this problem using formulae from this post Calculating the origin of a rotated HTML element
ORIGINAL QUESTION
This question is in continuation of my previous question below: How to translate Mouse X,Y Coordinates to move HTML element inside a container where container is rotated to some angle
Here is some background, if you did not read previous link:
I am making a card games in HTML/JS that shows real-time perspectives for all players.
For a 4 player table, table is rotated at 0, 90, 180 and 270 degress.
For a 6 player table is rotated into 6 sides as 0 degree, 60 degrees, 120 degrees, and up to 300 degrees.
The structure of table and cards on it is like this:
<gameTable style=”position: relative;”>
<card style=”position: absolute; top: 1%, left: 1%;”></card>
</gameTable>
The cards are absolutely positions so movements are uniform across all screen sizes.
Now I am making a function that allows me to store a setting of cards on the table and save them as objects. I calculate their offsets from current player and store them.
Offsets mean:
if Player = 0 degree, offsetY = 100 - card.top and OffsetX = 100 - card.left
Similary, I use formulae (brute method) to store offsets for other 3 players of 4 player table.
if Player = 180 degree, offsetY = card.top and OffsetX = card.left
if Player = 90 degree, offsetY = card.left and OffsetX = 100 - card.top
if Player = 270 degree, offsetY = 100 - card.left and OffsetX = card.top
I interchange values to store correct offsets and then whenever I want to display them again, I used same formulae to show them in correct positions, no matter which of the 4 players called it.
Basically, target is to store correct offsets no matter from where which angle side I store it, and then show correctly, no matter on which angle table side I use it.
Example: To position a card after extracting its object.
if player is 90 degree, card.left = offsetY and card.top = 100 - offsetX
Now this works perfectly for 4 player table where all players are orthogonal to each other.
However, when it comes to 6 player table, where each player has angle of 60 degrees between them, I an unable to solve it yet.
I tried couple of things but none got me anywhere yet. This is closest:
let cosTheta = Math.cos((Math.PI / 180) * (tableRotationInDegrees));
let cosTheta = Math.sin((Math.PI / 180) * (tableRotationInDegrees));
card.style.left = `${offsetX * cosTheta}%`;
card.style.top = `${offsetY * sinTheta}%`;
I think the following link might contain answer to what I am looking for, but I did not really understand much, as I am not so good in Math unfortunately.
https://math.stackexchange.com/questions/51111/calculating-point-on-a-circle-given-an-offset
Here are attached pictures for reference.
