function setup() {
  createCanvas(window.innerWidth, window.innerHeight);
  background(153);
  textSize(32)
  textAlign(CENTER);
  text("Loading...", width / 2, height / 2)
}

let txt;

class SMessage {
  constructor(send, content) {
    this.send = send;
    this.content = content;
    this.alive = true;
    this.x = 0;
    this.y = 32;
    this.alpha = 255;
  }

  draw() {
    fill(color(0, 0, 0, this.alpha));
    textSize(18);
    text(`<${this.send}>: ${this.content}`, this.x, this.y);
  }

  update() {
    this.x += 1;
    if (this.x > 920) {
      this.x = 0;
      this.y += 32;
    }
  }
}

var _messages = [new SMessage("CLIENT", "Connected!")];
const minp = document.querySelector("#message_input");
minp.addEventListener("submit", (evt) => {
    _messages.push(new SMessage("Me", msg));
});
const minp3 = document.querySelector("#yomama");
minp3.addEventListener("click", (evt) => {
  const _minp = document.querySelector("#message_input");
  const val = _minp.value;
  _minp.value = "";
  _messages.push(new SMessage("Me", msg));
});

socket.on("messag", function(mstr, msg) {
  _messages.push(new SMessage(mstr, msg));
  console.log(msg)
});

function draw() {
  background(153);
  textSize(50)
  //text(txt, width / 2, height / 2)
  _messages.forEach((itm) => {
    if (itm) {
      itm.draw();
      itm.update();
    }
  });
}

socket.on("update", function(number) {
  txt = number
})