const socket = io('localhost:3000');

const SIZE = 10;
let coord = [];

socket.on("connect", () => {
  console.log('Connected');
});

socket.on('data', (data) => {
  coord = data
});

function setup() {
  createCanvas(800, 600);

  createButton('Save').position(0, 0).mousePressed( () => {
    socket.emit('save', coord);
  });

  socket.emit('load', coord);
}



function draw() {
  background(0);
  fill(255);
  noStroke();
  if (coord.length == 0) return;
  for (let {x,y} of coord){
    ellipse(x, y, SIZE, SIZE);
  }
}

function mousePressed(){
  coord.push ({x:mouseX, y:mouseY});    
}