var h = 240;

var w = 180;

var showUIW = false;

var saveMX;

var saveMY;

var card1 = false;

var cardA = false;

var aTime = 0;

var aTimeC = 0;

var aTimeP = 0;

var cashA = false;

var picA = false;

​

function setup() {

  createCanvas(600, 600);

}

​

function draw() {

  background(220);

  let leather = color(139,69,19);

  let lLeather = color(160,82,45);

  let golden = color(212,175,55);

  let cardLogo = color(255,165,0);

  let cash = color(0,128,0);

  let cashD = color(0,100,0);

​

  if (phase === 0) //wallet is closed

    {

      fill (leather);

      noStroke();

      rectMode(CENTER);

      rect(width / 2,height / 2,w,h);

      strokeWeight(5);

      stroke(lLeather);

      line(380,190,380,410)

      noFill();

      stroke(lLeather,200);

      ellipse(245,215,50)

      //draw wallet

    }

  else if (phase === 1) //wallet is open

    {

      fill (leather);

      noStroke();

      rectMode(CENTER);

      rect(width / 2 + w / 2,height / 2,w,h);

      rect(width / 2 - w / 2,height / 2,w,h);

      //cash

      let stopTC = 70;

      let cashSpeed = 1.7

      if(aTimeC <= stopTC && cashA == true)

        {

          aTimeC++;

          let cashC = cashSpeed * aTimeC;

          fill(cashD);

          rect(width / 2, height / 2 - cashC,330, 330 / 6.14 * 2.61)

          fill(cash);

          rect(width / 2, height / 2 + 15 - cashC,330, 330 / 6.14 * 2.61)

          fill(cashD)

          textSize(60);

          textAlign(CENTER,CENTER);

          text("$",width / 2, height / 2 + 15 - cashC);

        }

      else if (cashA == true && aTimeC > stopTC)

        {

          let cashF = cashSpeed * stopTC;

          fill(cashD);

          rect(width / 2, height / 2 - cashF,330, 330 / 6.14 * 2.61)

          fill(cash);

          rect(width / 2, height / 2 + 15 - cashF,330, 330 / 6.14 * 2.61)

          fill(cashD)

          textSize(60);

          textAlign(CENTER,CENTER);

          text("$",width / 2, height / 2 + 15 - cashF);

        }

      textAlign(LEFT,CENTER);

      //cash holder

      fill(leather);

      rectMode(CORNER);

      rect(120,height / 2 - h / 2 + 40,360,200)

      strokeWeight(5);

      stroke(lLeather);

      strokeCap(SQUARE);

      line(width / 2, height / 2 + h / 2, width / 2, height / 2 - h / 2 + 40); //middle line

      line(width / 2 + w, height / 2 - h / 2 + 40, width / 2 - w, height / 2 - h / 2 + 40); //top line

      //card 1

      noStroke();

      fill(200);

      let stopT = 90;

      if (card1== false)

        {

          rect(width / 2 +2.5,height / 2 - h / 2 + 55,w - 5,(w-2.5) / 85.5 * 54,5);

          fill(0);

          textSize(12);

          text("5432 9876 1908 0838", (width / 2 + 2.5) + 10, height / 2 - h / 2 + 60 + (w-2.5) / 85.5 * 54 - 35);

          text("PETER LEE    08/32",(width / 2 + 2.5) + 10, height / 2 - h / 2 + 60 + (w-2.5) / 85.5 * 54 - 20);

          fill(golden);

          rect(width / 2 + 12.5,(height-h) / 2 + (w-2.5) / 85.5 * 54 - 20,40,30,5)

          fill(cardLogo);

          ellipse((width / 2 + 2.5) + 155, height / 2 - h / 2 + 60 + (w-2.5) / 85.5 * 54 - 25,20);

        }

        else if(aTime <= stopT && cardA == true)

        {

          aTime++;

          fill(200);

          rect(width / 2 +2.5,height / 2 - h / 2 + 55 - aTime,w - 5,(w-2.5) / 85.5 * 54,5);

          fill(0);

          textSize(12);

          text("5432 9876 1908 0838", (width / 2 + 2.5) + 10, height / 2 - h / 2 + 60 + (w-2.5) / 85.5 * 54 - 35 - aTime);

          text("PETER LEE    08/32",(width / 2 + 2.5) + 10, height / 2 - h / 2 + 60 + (w-2.5) / 85.5 * 54 - 20 - aTime);

          fill(golden);

          rect(width / 2 + 12.5,(height-h) / 2 + (w-2.5) / 85.5 * 54 - 20 - aTime,40,30,5)

          fill(cardLogo);

          ellipse((width / 2 + 2.5) + 155, height / 2 - h / 2 + 60 + (w-2.5) / 85.5 * 54 - 25 - aTime,20);

          // console.log(aTime);

        }

      else

        {

          fill(200);

          rect(width / 2 +2.5,height / 2 - h / 2 + 55 - stopT,w - 5,(w-2.5) / 85.5 * 54,5);

          fill(0);

          textSize(12);

          text("5432 9876 1908 0838", (width / 2 + 2.5) + 10, height / 2 - h / 2 + 60 + (w-2.5) / 85.5 * 54 - 35 - stopT);

          text("PETER LEE    08/32",(width / 2 + 2.5) + 10, height / 2 - h / 2 + 60 + (w-2.5) / 85.5 * 54 - 20 - stopT);

          fill(golden);

          rect(width / 2 + 12.5,(height-h) / 2 + (w-2.5) / 85.5 * 54 - 20 - stopT,40,30,5)

          fill(cardLogo);

          ellipse((width / 2 + 2.5) + 155, height / 2 - h / 2 + 60 + (w-2.5) / 85.5 * 54 - 25 - stopT,20);

        }

​

//       card holder #1

      fill(leather);

      rect(width / 2 +2.5,height / 2 - h / 2 + 80,w - 2.5,height / 2 + h / 2 - (height / 2 - h / 2 + 80));

      for (i = 0; i <= 2; i++)

        { 

          strokeWeight(5);

          stroke(lLeather);

          strokeCap(SQUARE);

          line(width / 2, height / 2 - h / 2 + 80 + 40 * i, width / 2 + w, height / 2 - h / 2 + 80 + 40 * i);

        } //card holder

      let stopTP = 80;

      if(picA == false)

        {

          fill(135,206,235);

          noStroke();

          rect(width / 2 - w + 25, height / 2, 130, 95)

          fill(0,191,255);

          rect(width / 2 - w + 25, height / 2 + 45, 130, 50)

          fill(244,164,96);

          rect(width / 2 - w + 25, height / 2 + 65, 130, 30)

          fill(0);

          rect(width / 2 - w + 70, height / 2 + 35, 30, 60)

          fill(255,239,213)

          rect(width / 2 - w + 80, height / 2 + 45, 20, 25)

          fill(255,0,0);

          rect(width / 2 - w + 80, height / 2 + 70, 20, 25)

        }

      else if (picA == true && aTimeP <= stopTP)

        {

          aTimeP++;

          fill(135,206,235);

          noStroke();

          rect(width / 2 - w + 25, height / 2 - aTimeP, 130, 95)

          fill(0,191,255);

          rect(width / 2 - w + 25, height / 2 + 45 - aTimeP, 130, 50)

          fill(244,164,96);

          rect(width / 2 - w + 25, height / 2 + 65 -aTimeP, 130, 30)

          fill(0);

          rect(width / 2 - w + 70, height / 2 + 35 -aTimeP, 30, 60)

          fill(255,239,213)

          rect(width / 2 - w + 80, height / 2 + 45 -aTimeP, 20, 25)

          fill(255,0,0);

          rect(width / 2 - w + 80, height / 2 + 70 -aTimeP, 20, 25)

        }

      else if(picA == true && aTimeP > stopTP)

        {

          fill(135,206,235);

          noStroke();

          rect(width / 2 - w + 25, height / 2 - stopTP, 130, 95)

          fill(0,191,255);

          rect(width / 2 - w + 25, height / 2 + 45 - stopTP, 130, 50)

          fill(244,164,96);

          rect(width / 2 - w + 25, height / 2 + 65 - stopTP, 130, 30)

          fill(0);

          rect(width / 2 - w + 70, height / 2 + 35 -stopTP, 30, 60)

          fill(255,239,213)

          rect(width / 2 - w + 80, height / 2 + 45 -stopTP, 20, 25)

          fill(255,0,0);

          rect(width / 2 - w + 80, height / 2 + 70 -stopTP, 20, 25)

        }

​

        // picture holder

      fill(180,180,180,150);

      rect(width / 2 - w + 20, height / 2, 140, 100)

      textSize(15);

      fill(255,0,0)

      text("Try to click stuff in the wallet", 10,20);

      text("Press spacebar to reset", 10,40);

    }

  if (showUIW == true)

    {

      fill(220);

      noStroke();

      ellipse(saveMX,saveMY,15);

      noFill();

      stroke(220);

      strokeWeight(2);

      ellipse(saveMX,saveMY,120);

      fill(255,0,0);

      noStroke();

      ellipse(saveMX + 60, saveMY, 20)

      textSize(15);

      text("Press the red button to open wallet", 10,20)

    }

}

​

function mousePressed()

{

  if (mouseX <= 420 && mouseX >= 180 && mouseY >= 210 && mouseY <= 390 && phase === 0 && showUIW == false)

    {

      // console.log("yes");

      showUIW = true;

      saveMX = mouseX;

      saveMY = mouseY;

    }

  if(phase === 0 && showUIW === true && mouseX >= saveMX + 60 - 10 && mouseX <= saveMX + 60 +10 && mouseY <= saveMY + 10 && mouseY >= saveMY - 10)

    {

       // console.log("yes");

       showUIW = false;

       phase ++;

    }

  else if(phase === 1 && mouseY <= height / 2 - h / 2 + 80 && mouseY >= height / 2 - h / 2 + 55 && mouseX >= width / 2 && mouseX <= width / 2 + w && card1 == false)

    {

      // console.log("yes");

      card1 = true;

      cardA = true;

    }

  else if(mouseX >= width / 2 - w / 2 && mouseX <= width / 2 + w / 2 && phase === 1 && mouseY <= height / 2 - h / 2 + 40 && mouseY >= height / 2 - h / 2)

    {

                  // console.log("yes");

            cashA = true;

    }

  else if(phase === 1 && mouseX >= width / 2 - w + 20 && mouseX <= width / 2 - w + 160 && mouseY >= height / 2 && mouseY <= height / 2 + 100)

    {

            picA = true;

    }

}

​

function keyPressed()

{

  if (keyCode == 32)

    {

      phase = 0;

      showUIW = false;

      card1 = false;

      cardA = false;

      aTime = 0;

      aTimeC = 0;

      aTimeP = 0;

      cashA = false;

      picA = false;

    }

}