Different user client images with websockets


I’ve made a glitch sketch with posenet and p5.js, where a tree grows when two people( on different broswers) hands touch. I attached my own hand images to the wrist positions. In client.js, when two different hands touch, it triggers the code (this.draw_pose_growTree) which makes a tree grow.

the problem is, it is hard to identify which hand you are because its the same image and colour. I have a black colour hand image in draw_pose which is drawn locally, and So I uploaded a different white colour hand image for the second user, in this.draw_pose_growTree, which is called globally in client.js.

However, when there are two clients (ie two people who opened the page) this creates three pairs of hands, two white and one black. It should have a pair of black hands and a pair of white ones instead. I think because locally, the black hand image gets called twice?

How can I add this to my data (in Agent.js) , so it chooses one or another hands?
my glitch code is here https://glitch.com/edit/#!/tin-peridot-dinghy?path=public%2Fpose.js%3A129%3A11