rotate the arms of weight balance using phaser 3

Phaser 3
1

I don’t know if this is the right place to ask. I’m new to phaser and discord. So please forgive me if I posted here wrongly. I have a doubt about implementing a weight balance. The player needs to drag and drop the objects with different weights into the weight tray. And after dropping the objects into the weight tray, the player will click on the Balance button. Now there are 3 cases

  1. If the player added 1kg weight objects in both left and right side weight trays, the bar should rotate up and down to some degree angle, say around 5-10 degrees, and then it should come to a resting state after a few rotations. since the weights are 1kg on both sides, the bar will not have an inclination and it will be horizontally balanced
  2. If the player added 1kg weight on the left side and 0.5 kg weight on the right side weight tray, the bar should rotate up and down to some degree angle, say around 5- 10 degrees, and then it should come to a resting state after a few rotations. since the weight is more on the left side, the bar will be inclined to the left side after coming to a resting state.
  3. If the player added 1kg weight on the right side and 0.7 kg weight on the left side weight tray, the bar should rotate up and down to some degree angle, say around 5- 10 degrees, and then it should come to a resting state after a few rotations. since the weight is more on the right side, the bar will be inclined to the right side after coming to a resting state.
    One thing to note here is that, in the 2nd and 3rd cases, since the weight difference is more in the 2nd case, of about 0.5 kg, the inclination angle will be more in the 2nd case. The inclination angle of the bar is less in 3rd case as the weight difference is only 0.3 kg.

The bar’s pivot is set to its center position and I have used tween to rotate the bar using this code:

this.tweens.add({
targets: this.bar, angle: { from: value, to: -value }, ease: Phaser.Math.Easing.Linear, duration: 1000, yoyo: true, repeat: 1})

But my doubt is how to make the weight trays on the left and right sides move up or down at the same rate, as the bar rotates up and down. I have also used tween.addcounter like this:

let angle = 0;
var tween = this.tweens.addCounter({ from: 0, to: 20, duration: 1000, repeat: 0,ease: Phaser.Math.Easing.Linear, yoyo: true, onUpdate: function (tween) {
angle += 0.05;
const value = Math.floor(tween.getValue());
const value2 = Math.sin(angle) * value;
console.log(value2);
this.bar.angle = value2;
//how to move the tray up and down as the bar rotates
},
onUpdateScope: this,
})

test
test800×600 21.7 KB

Can someone please help me with this?

2 
tray1.copyPosition(bar.getLeftCenter());
tray2.copyPosition(bar.getRightCenter());