let buttonHoldL;

function setup() {

// poseHold
buttonHoldL = new HandButton("Beat01", (100 / 1000) * width, height / 2, 180, 0);

function draw() {

  var handLandmarks = remapAllHandLandmarks(handResults);

	if (buttonA.update(handResults)) {
	    print("buttonA triggered");
	    triggerLoop("Beat02");
		  }
		  
	let beat01Color = "rgba(221, 218, 0, 0.4)";
  let beat02Color = "rgba(221, 218, 0, 0.4)";
  
  if (sounds.Beat01.isPlaying()) {
    beat01Color = "rgba(242,132,0,0.6)";
  }
  
  if (sounds.Beat02.isPlaying()) {
    beat02Color = "rgba(242,132,0,0.6)";
  }

  //button.display("rgba(230, 232, 191, 0.4)", "rgba(230, 232, 191, 1.0)", 15);
  buttonA.display(
    "rgba(242,132,0,1)",
    beat02Color,
    "rgba(221, 218, 0, 1.0)",
    15
  );
  
    displayHands(handResults);

}

//class properties

class HandButton {
  
  //first property
  constructor(_name, _x, _y, _d, _time, _trigger) {
    this.name = _name;
    this.x = _x;
    this.y = _y;
    this.d = _d;
    this.time = _time;
    this.timestamp = 0;
    this.active = false;
    this.triggered = false;

    this.trigger = _trigger;
  }

  //second property
update(results) {
    var check = false;

    if (results) {
      if (results.multiHandLandmarks) {
        for (var hand of results.multiHandLandmarks) {
          for (var i = 0; i < hand.length; i++) {
            var p = remapHandPoint(hand[i]);
            var tx = p.x;
            var ty = p.y;
            if (dist(this.x, this.y, tx, ty) < this.d / 2) {
              check = true;
              if (!this.active) {
                this.active = true;
                this.timestamp = millis();
              } else {
                if (millis() - this.timestamp > this.time && !this.triggered) {
                  this.triggered = true;
                  return true;
                }
              }
            }
          }
        }
      }
    }

    if (!check) {
      this.active = false;
      this.triggered = false;
    }
  }

  //third property
  reset() {
    this.active = false;
    this.triggered = false;
  }

	//fourth property
  display(_textColor, _fill, _stroke, _weight) {
    fill(_fill);
    noStroke();
    circle(this.x, this.y, this.d);

    stroke(_stroke);
    strokeWeight(_weight);
    noFill();
    var ratio = 0;
    if (this.active) {
      ratio = (millis() - this.timestamp) / this.time;
      ratio = constrain(ratio, 0, 1);
    }
    arc(this.x, this.y, this.d, this.d, 0, TWO_PI * ratio);

    noStroke();
    fill(_textColor);
    textAlign(CENTER, CENTER);
    textSize(_weight * 2);
    text(this.name, this.x, this.y);
  }
}