/*
[Sep 24 06:00 Amanda's note sharing with Fatma]

Hey! I have done with following things on top of your work yesterday. 

1. Drew three white & three black buttons for each six results' mouseClicked dimensions
2. Accordingly defined each variables (hat, fire, sunglasses, bruise, love, knife) with the dimensions & siwtch toggle functionability for each buttons at function mouseClicked()
3. Took four figures fire, sunglasses, bruise, love for visual outcome 
*Struggle(1): Fire shape made so far is not satisfying. Need more detail..!
*Struggle(2) Setting the position of sunglasses dynamically on eye part. How would you do in this case?
**You could add detail for your two figures - hat(white button) & knife(black button) 
4. Added title text
5. Adjusted the colors for background, face, and body. Feel free to change if you want adjustment.

Please check and let me know if you need further more discussions outside of the code!

*/

let bodyX = 300;
let bodyY = 300;
let headX = 180;
let headY = 200;
let eyeX = 20;
let eyeY = 20;
let hat = false;
let fire = false;
let sunglasses = false;
let bruise = false;
let love = false;
let knife = false;

function setup() {
  createCanvas(800, 500);
  oneThirdX = width / 3;
  oneThirdY = height / 3;
  halfX = width / 2;
  halfY = height / 2;
  twoThirdX = (width * 2) / 3;
  twoThirdY = (height * 2) / 3;
  threeForthY = (height * 3) / 4;
}

function draw() {
  background(150, 100, 120);
  // Title text
  fill(200);
  textStyle(NORMAL);
  stroke(150, 50, 150);
  textSize(30);
  text("click box one per line", 160, 50);
  textSize(25);
  textStyle(ITALIC);
  textAlign(CENTER);
  text("shape their fate, blindly", 150, 90);

  // BODY
  stroke("black");
  strokeWeight(5);
  fill("purple");
  rectMode(CENTER);
  rect(halfX, threeForthY + height / 20, bodyX, bodyY, 40);

  // BODY control buttons (AMANDA)
  stroke(50);
  strokeWeight(5);
  fill("Thistle");
  rect(halfX + 230, oneThirdY + 210, 50, 50); // WHITE - HEART
  fill("RebeccaPurple");
  rect(halfX + 300, oneThirdY + 210, 50, 50); // BLACK - KNIFE

  // BODY-WHITE button clicked -> HEART
  if (love == true) {
    fill(255, 0, 0);
    beginShape();
    vertex(halfX + 60, threeForthY - 10);
    bezierVertex(
      halfX - 20 + 60,
      threeForthY - 30,
      halfX - 50 + 60,
      threeForthY + 20,
      halfX + 60,
      threeForthY + 40
    );
    bezierVertex(
      halfX + 50 + 60,
      threeForthY + 20,
      halfX + 20 + 60,
      threeForthY - 30,
      halfX + 60,
      threeForthY - 10
    );
    endShape(CLOSE);
  }

  // BODY-BLACK button clicked -> KNIFE (fatma)
  if (knife == true) {
    fill(100);
    rect(halfX - 50, threeForthY + 50, 20, 80);
  }

  // HEAD
  stroke("black");
  strokeWeight(5);
  fill(218, 177, 218);
  ellipse(halfX, oneThirdY, headX, headY);

  // HEAD control buttons (AMANDA)
  stroke(50);
  strokeWeight(5);
  fill("Thistle");
  rect(halfX + 230, oneThirdY + 80, 50, 50); // WHITE - HAT
  fill("RebeccaPurple");
  rect(halfX + 300, oneThirdY + 80, 50, 50); // BLACK - FIRE

  // HEAD-WHITE button: HAT
  if (hat == true) {
    square(halfX, oneThirdY - 120, 80);
  }

  // HEAD-BLACK button clicked FIRE
  // --> AMANDA COMMENT: Hmmmm I want to make this more fire-like visual but currently looking like this
  if (fire == true) {
    fill(255, 0, 0);
    noStroke();
    triangle(
      halfX,
      oneThirdY - 150,
      halfX - 30,
      oneThirdY - 100,
      halfX + 30,
      oneThirdY - 100
    );
    triangle(
      halfX - 30,
      oneThirdY - 140,
      halfX - 60,
      oneThirdY - 100,
      halfX,
      oneThirdY - 100
    );
    triangle(
      halfX + 30,
      oneThirdY - 140,
      halfX,
      oneThirdY - 100,
      halfX + 60,
      oneThirdY - 100
    );
    ellipse(halfX, oneThirdY - headY / 2 + 5, 120, 50);
  }

  // FACE
  // FACE control buttons (AMANDA)
  stroke(50);
  strokeWeight(5);
  fill("Thistle");
  rect(halfX + 230, oneThirdY - 50, 50, 50); // WHITE - BRUISE
  fill("RebeccaPurple");
  rect(halfX + 300, oneThirdY - 50, 50, 50); // BLACK - SUNGLASSES

  // FACE-WHITE button clicked BRUISE --> Bruise with tears as the final visual!
  if (bruise == true) {
    noStroke();
    fill(100, 149, 237);
    ellipse(halfX - halfX / 10, oneThirdY, eyeX + 20, eyeY + 30);
    strokeWeight(10);
    stroke("skyblue");
    line(halfX - halfX / 10, oneThirdY, halfX - halfX / 10, oneThirdY + 90); //tears under bruise rigyt eye
    line(halfX + halfX / 10, oneThirdY, halfX + halfX / 10, oneThirdY + 90); // tears right eye
  }

  // FACE-BLACK button clicked -> SUNGLASSES
  // AMANDA COMMENT: --> Setting the position of sunglasses dynamically on eye part I'm struggling
  if (sunglasses == true) {
    fill(0);

    // Left lens - Align with left eye
    let leftEyeX = halfX - halfX / 10;
    let rightEyeX = halfX + halfX / 10;
    rect(leftEyeX - 25, oneThirdY - 15, 50, 30, 5);
    // Right lens - Align with right eye
    rect(rightEyeX - 25, oneThirdY - 15, 50, 30, 5);
    // Connecting arc between lenses (aligning between the eyes)
    noFill();
    stroke(0);
    strokeWeight(3);
    arc(halfX, oneThirdY - 15, rightEyeX - leftEyeX + 50, 30, PI, TWO_PI);
    // Left sunglasses leg
    line(leftEyeX - 25, oneThirdY + 5, leftEyeX - 50, oneThirdY - 10);
    // Right sunglasses leg
    line(rightEyeX + 25, oneThirdY + 5, rightEyeX + 50, oneThirdY - 10);
  }

  //left eye
  stroke("black");
  strokeWeight(3);
  fill(0, 38, 99);
  ellipse(halfX - halfX / 10, oneThirdY, eyeX, eyeY);

  //right eye
  stroke("black");
  strokeWeight(3);
  fill(0, 38, 99);
  ellipse(halfX + halfX / 10, oneThirdY, eyeX, eyeY);
}

function mouseClicked() {
  // FACE-WHITE button: HAT
  if (
    mouseX > halfX + 230 &&
    mouseX < halfX + 280 &&
    mouseY > oneThirdY - 50 &&
    mouseY < oneThirdY
  ) {
    hat = !hat;
  }

  // FACE-BLACK button: FIRE
  if (
    mouseX > halfX + 300 &&
    mouseX < halfX + 350 &&
    mouseY > oneThirdY - 50 &&
    mouseY < oneThirdY
  ) {
    fire = !fire;
  }

  // HEAD-WHITE button: BRUISE
  if (
    mouseX > halfX + 230 &&
    mouseX < halfX + 280 &&
    mouseY > oneThirdY + 80 &&
    mouseY < oneThirdY + 130
  ) {
    bruise = !bruise;
  }

  // HEAD-BLACK button: SUNGLASSES
  if (
    mouseX > halfX + 300 &&
    mouseX < halfX + 350 &&
    mouseY > oneThirdY + 80 &&
    mouseY < oneThirdY + 130
  ) {
    sunglasses = !sunglasses;
  }

  // BODY-WHITE button: LOVE
  if (
    mouseX > halfX + 230 &&
    mouseX < halfX + 280 &&
    mouseY > oneThirdY + 210 &&
    mouseY < oneThirdY + 260
  ) {
    love = !love;
  }

  // BODY-BLACK button: KNIFE
  if (
    mouseX > halfX + 300 &&
    mouseX < halfX + 350 &&
    mouseY > oneThirdY + 210 &&
    mouseY < oneThirdY + 260
  ) {
    knife = !knife;
  }
}