Publish an event to an Ably channel

script.js

// get each of the squares in the svg
const squares = document.getElementsByClassName('square');

// create an onClick function
const onClick = (e) => colorAndPublish(e, channel);

// add an eventlistener for a click event to each square
for (let square of squares) {
  square.addEventListener("click", onClick, false);   
}

function colorAndPublish(e, channel) {
  // get the number of the clicked pixel from it's id
  let pixel = e.target.id.replace('square', '');
  
  // change the colour of the pixel to the selected colour
  e.target.style.fill = selected;  
  
  // publish the pixel number and the rgb value of the selected colour to the tshirt channel
  channel.publish("tshirt", pixel + rgb);  
}