Code viewer for World: Cook A Long
$('body').css( "margin", "20px" );
  $('body').css( "padding", "20px" );

 
document.write ( `

<div style="width:60vw; background-color:white;  border: 1px solid black; margin:20; padding: 20px;">
<h3> Me </h3>
<INPUT style="width:50vw;" id=me >
<button onclick="sendchat();"     class=ab-normbutton > Send </button> 
</div>

<div style="width:60vw; background-color:#ffffcc;  border: 1px solid black; margin:20; padding: 20px;">
<h3> Them </h3>
<div id=them > </div>
</div>

<div style="width:60vw; background-color:#ffffcc;  border: 1px solid black; margin:20; padding: 20px;">
<h3> Users online </h3>
<div id=themlist > </div>
</div>
 
<pre>

</pre>


` );



// Enter will also send chat:

	document.getElementById('me').onkeydown   = function(event) 	{ if (event.keyCode == 13)  sendchat(); };


// start socket for this World

AB.socketStart();



// --- Send my line of text to server ----------------------------------------------------------------

function sendchat()
{
  var theline = $("#me").val();
  
  var data = 
  {
    userid:     AB.myuserid,
    username:   AB.myusername,
    line:       theline
  };
  
  AB.socketOut ( data );        // server gets this, and sends the data to all clients running this World
}



// given AB userid, username, construct a link to that user 
// if not run logged in, userid = "none"

function userlink ( userid, username )
{
   if ( userid == "none" ) return ( "Anon user" );
   else                    return ( "<a target='_blank' href='https://ancientbrain.com/user.php?userid=" + userid + "'>" + username + "</a>" );
}



// --- re-define AB socket handler functions -------------------------------------
// re-define these handler functions from default (which is do nothing)

// When someone else enters text, server will trigger AB.socketIn.
// Here I define what to do for it.

AB.socketIn = function(data)
{
   var userhtml = userlink ( data.userid, data.username );
   $("#them").html ( userhtml + ": " + data.line );
};


// At startup, and when list of users changes, server will trigger AB.socketUserlist.  
// Here I define what to do for it.

AB.socketUserlist = function ( a ) 
{ 
    console.log ( "Got user list: " );
    console.log ( JSON.stringify ( a, null, ' ' ) );

    if ( a.length < 2 )  
    { 
        $("#themlist").html ( "<h3 style='color:red'> You are alone. Get someone else to run this World. </h3>"); 
        return; 
    }
    
    // else  
    var str = " <ol> ";
    for (var i = 0; i < a.length; i++) 
    {
        var userhtml = userlink ( a[i][0], a[i][1] );
        str = str + " <li> " + userhtml ;
    }
    $("#themlist").html ( str + " </ol> " );
};


let none;
let flatKnife;
let stove;
let stove2;
let stove_hot;
let pot;
let pot_oil;
let pot_chicken;
let pot_chicken_garlic;
let pot_cream;
let pot_pasta;
let pot_broth;
let pot_lid;
let pot_parm;
let pot_parm_stirred;
let garlic;
let garlic_chopped;
let chicken;
let chicken_chopped;
let board;
let knife;
let oil;
let tbsp;
let tbsp_oil;
let tbsp2;
let cream;
let cup;
let cup_cream;
let pasta;
let pasta_empty;
let broth;
let parm;
let parm_empty;
let lid;
let spoon;
let spoon2;
let bowl;
let bowl_full;
let dial;
let dial_on;
let dial_hot;
let dial2;
let dialhot = false;
let dialon = false;
let dialon2 = false;
let dialon3 = false;
let next;
let next2;
let next3;
let next4;
let next5;
let next6;
let next7;
let next8;
let note1;
let note2;
let note3;
let note4;
let note5;
let note6;
let note7;
let note8;
let note9;
let note_2 = false;
let note_3 = false;
let note_4 = false;
let note_5 = false;
let note_6 = false;
let note_7 = false;
let note_8 = false;
let note_9 = false;
var dragging = false;
var rollover = false;
var woahknife = false;
let chop1 = false;
let chop2 = false;
let chop3 = false;
let chop4 = false;
let chop5 = false;
let chop6 = false;
let chop7 = false;
let chop8 = false;
let chop9 = false;
let chop10 = false;
let chop11 = false;
let chop12 = false;
let chop13 = false;
let chop14 = false;
let chop15 = false;
let chop16 = false;
let chop17 = false;
let chop18 = false;
let chop19 = false;
let chop20 = false;
let chop21 = false;
let chop22 = false;
let chop23 = false;

// let note2=false;

let img;
let x, y, w, h;
let offsetX, offsetY;

//animations

let wait;
let wait2;

let stir;
let steam;
let clock;
let clock2;



//sounds

let chopgarlic_sound;
let chopchicken_sound;
let ignite_sound;
let sizzle_sound;
let sizzle_sound2;
let pour_sound;


// Loading all the pictures used
function preload() {
  BG = loadImage('/uploads/joseph24/KitchenGame_BG.png');
  flatKnife = loadImage('/uploads/joseph24/flatKnife.png');
  knife = loadImage('/uploads/joseph24/knife.png');
  pot = loadImage('/uploads/joseph24/pot.png');
  pot_oil = loadImage('/uploads/joseph24/pot_oil.png');
  pot_chicken = loadImage('/uploads/joseph24/pot_chicken.png');
  pot_cream = loadImage('/uploads/joseph24/pot_cream.png');
  pot_chicken_garlic = loadImage('/uploads/joseph24/pot_chicken_garlic.png');
  pot_pasta = loadImage('/uploads/joseph24/pot_pasta.png');
  pot_broth = loadImage('/uploads/joseph24/pot_broth.png');
  pot_parm = loadImage('/uploads/joseph24/pot_parm.png');
  pot_parm_stirred = loadImage('/uploads/joseph24/pot_parm_stirred.png');
  pot_lid = loadImage('/uploads/joseph24/pot_lid.png');
  garlic = loadImage('/uploads/joseph24/garlic.png');
  garlic_chopped = loadImage('/uploads/joseph24/garlic_chopped.png');
  board = loadImage('/uploads/joseph24/board.png');
  note1 = loadImage('/uploads/joseph24/note1.png');
  note2 = loadImage('/uploads/joseph24/note2.png');
  note3 = loadImage('/uploads/joseph24/note3.png');
  note4 = loadImage('/uploads/joseph24/note4.png');
  note5 = loadImage('/uploads/joseph24/note5.png');
  note6 = loadImage('/uploads/joseph24/note6.png');
  note7 = loadImage('/uploads/joseph24/note7.png');
  note8 = loadImage('/uploads/joseph24/note8.png');
  note9 = loadImage('/uploads/joseph24/note9.png');
  chicken = loadImage('/uploads/joseph24/chicken.png');
  chicken_chopped = loadImage('/uploads/joseph24/chicken_chopped.png');
  next = loadImage('/uploads/joseph24/next.png');
  next2 = loadImage('/uploads/joseph24/next.png');
  next3 = loadImage('/uploads/joseph24/next.png');
  next4 = loadImage('/uploads/joseph24/next.png');
  next5 = loadImage('/uploads/joseph24/next.png');
  next6 = loadImage('/uploads/joseph24/next.png');
  next7 = loadImage('/uploads/joseph24/next.png');
  next8 = loadImage('/uploads/joseph24/next.png');
  oil = loadImage('/uploads/joseph24/oil.png');
  tbsp = loadImage('/uploads/joseph24/tbsp.png');
  tbsp_oil = loadImage('/uploads/joseph24/tbsp_oil.png');
  tbsp2 = loadImage('/uploads/joseph24/tbsp.png');
  dial = loadImage('/uploads/joseph24/dial.png');
  dial_on = loadImage('/uploads/joseph24/dial_on.png');
  dial_hot = loadImage('/uploads/joseph24/dial_hot.png');
  dial2 = loadImage('/uploads/joseph24/dial.png');
  stove = loadImage('/uploads/joseph24/stove.png');
  stove2 = loadImage('/uploads/joseph24/stove.png');
  stove_hot = loadImage('/uploads/joseph24/stove_hot.png');
  none = loadImage('/uploads/joseph24/none.png');
  cup = loadImage('/uploads/joseph24/cup.png');
  cup2 = loadImage('/uploads/joseph24/cup.png');
  cup_cream = loadImage('/uploads/joseph24/cup_cream.png');
  cream = loadImage('/uploads/joseph24/cream.png');
  pasta = loadImage('/uploads/joseph24/pasta.png');
  pasta_empty = loadImage('/uploads/joseph24/pasta_empty.png');
  broth = loadImage('/uploads/joseph24/broth.png');
  lid = loadImage('/uploads/joseph24/lid.png');
  parm = loadImage('/uploads/joseph24/parm.png');
  parm_empty = loadImage('/uploads/joseph24/parm_empty.png');
  spoon = loadImage('/uploads/joseph24/spoon.png');
  spoon2 = loadImage('/uploads/joseph24/spoon.png');
  bowl = loadImage('/uploads/joseph24/bowl.png');
  bowl_full = loadImage('/uploads/joseph24/bowl_full.png');
  
   //animation 


  stir = loadAnimation(
    '/uploads/joseph24/pot_stir1.png',
    '/uploads/joseph24/pot_stir2.png',
    '/uploads/joseph24/pot_stir3.png',
    '/uploads/joseph24/pot_stir4.png',
    '/uploads/joseph24/pot_stir5.png',
    '/uploads/joseph24/pot_stir6.png',
    '/uploads/joseph24/pot_stir7.png',
    '/uploads/joseph24/pot_stir1.png',
    '/uploads/joseph24/pot_stir2.png',
    '/uploads/joseph24/pot_stir3.png',
    '/uploads/joseph24/pot_stir4.png',
    '/uploads/joseph24/pot_stir5.png',
    '/uploads/joseph24/pot_stir6.png',
    '/uploads/joseph24/pot_stir7.png',
    '/uploads/joseph24/pot_stir1.png',
    '/uploads/joseph24/pot_stir2.png',
    '/uploads/joseph24/pot_stir3.png',
    '/uploads/joseph24/pot_stir4.png',
    '/uploads/joseph24/pot_stir5.png',
    '/uploads/joseph24/pot_stir6.png',
    '/uploads/joseph24/pot_stir7.png',
    '/uploads/joseph24/none.png');
  stir.looping = false;
  
  steam = loadAnimation(
    '/uploads/joseph24/steam-16.png',
    '/uploads/joseph24/steam-17.png',
    '/uploads/joseph24/steam-18.png',
    '/uploads/joseph24/steam-19.png',
    '/uploads/joseph24/steam-20.png',
    '/uploads/joseph24/steam-16.png',
    '/uploads/joseph24/steam-17.png',
    '/uploads/joseph24/steam-18.png',
    '/uploads/joseph24/steam-19.png',
    '/uploads/joseph24/steam-20.png',
    '/uploads/joseph24/steam-16.png',
    '/uploads/joseph24/steam-17.png',
    '/uploads/joseph24/steam-18.png',
    '/uploads/joseph24/steam-19.png',
    '/uploads/joseph24/steam-20.png');
     
  clock = loadAnimation(
    '/uploads/joseph24/clock1.png',
    '/uploads/joseph24/clock2.png',
    '/uploads/joseph24/clock3.png',
    '/uploads/joseph24/clock4.png',
    '/uploads/joseph24/clock5.png',
    '/uploads/joseph24/clock6.png',
    '/uploads/joseph24/clock7.png',
    '/uploads/joseph24/clock8.png',
    '/uploads/joseph24/clock1.png',
    '/uploads/joseph24/clock2.png',
    '/uploads/joseph24/clock3.png',
    '/uploads/joseph24/clock4.png',
    '/uploads/joseph24/clock5.png',
    '/uploads/joseph24/clock6.png',
    '/uploads/joseph24/clock7.png',
    '/uploads/joseph24/clock8.png',
    '/uploads/joseph24/none.png');
  clock.looping = false;
  
  clock2 = loadAnimation(
    '/uploads/joseph24/clock1.png',
    '/uploads/joseph24/clock2.png',
    '/uploads/joseph24/clock3.png',
    '/uploads/joseph24/clock4.png',
    '/uploads/joseph24/clock5.png',
    '/uploads/joseph24/clock6.png',
    '/uploads/joseph24/clock7.png',
    '/uploads/joseph24/clock8.png',
    '/uploads/joseph24/clock1.png',
    '/uploads/joseph24/clock2.png',
    '/uploads/joseph24/clock3.png',
    '/uploads/joseph24/clock4.png',
    '/uploads/joseph24/clock5.png',
    '/uploads/joseph24/clock6.png',
    '/uploads/joseph24/clock7.png',
    '/uploads/joseph24/clock8.png',
    '/uploads/joseph24/clock1.png',
    '/uploads/joseph24/clock2.png',
    '/uploads/joseph24/clock3.png',
    '/uploads/joseph24/clock4.png',
    '/uploads/joseph24/clock5.png',
    '/uploads/joseph24/clock6.png',
    '/uploads/joseph24/clock7.png',
    '/uploads/joseph24/clock8.png',
    '/uploads/joseph24/none.png');
  clock2.looping = false;
    
  // SOUNDS
  
  chopgarlic_sound = loadSound('/uploads/joseph24/chop_sound.mp3');
  chopchicken_sound = loadSound('/uploads/joseph24/chop_sound.mp3');
  music = loadSound('/uploads/joseph24/background-1.mp3');
  page_turn = loadSound('/uploads/joseph24/page_turn.mp3');
  ignite_sound = loadSound('/uploads/joseph24/ignite.mp3');
  sizzle_sound = loadSound('/uploads/joseph24/sizzle.mp3');
  sizzle_sound2 = loadSound('/uploads/joseph24/sizzle.mp3');
  pour_sound= loadSound('/uploads/joseph24/pour.mp3');
  pasta_pour_sound= loadSound('/uploads/joseph24/pasta_pour.mp3');
  timer_sound= loadSound('/uploads/joseph24/timer.mp3');
  
  // Panels and Buttons
  music_panel = loadImage('/uploads/joseph24/music_panel.png');
  musicUp = loadImage('/uploads/joseph24//usicUp.png');
  musicDown = loadImage('/uploads/joseph24/musicDown.png');
  play = loadImage('/uploads/joseph24/play.png');
  pause = loadImage('/uploads/joseph24/pause.png');
  pause2 = loadImage('/uploads/joseph24/pause.png');
  
  sound_panel = loadImage('/uploads/joseph24/sound_panel.png');
  soundUp = loadImage('/uploads/joseph24/soundUp.png');
  soundDown = loadImage('/uploads/joseph24/soundDown.png');
}



function setup() {
  createCanvas(668, 502);
  stove = new boom(stove, 434, 156, 109, 63);
  stove_hot = new boom(stove_hot);
  stove2 = new boom(stove2);
  flatKnife = new boom(flatKnife, 300, 210, 70, 50);
  knife = new boom(knife);
  pot = new boom(pot, 430, 110, 106.472, 98.545);
  pot_oil = new boom(pot_oil);
  pot_chicken = new boom(pot_chicken);
  pot_chicken_garlic = new boom(pot_chicken_garlic);
  pot_cream = new boom(pot_cream);
  pot_pasta = new boom(pot_pasta);
  pot_broth = new boom(pot_broth);
  pot_lid = new boom(pot_lid);
  pot_parm = new boom(pot_parm);
  pot_parm_stirred = new boom(pot_parm_stirred);
  garlic = new boom(garlic, 190, 210, 30, 25);
  garlic_chopped = new boom(garlic_chopped);
  board = new boom(board, 160, 230, 194, 117);
  chicken = new boom(chicken, 130, 230, 55, 50);
  chicken_chopped = new boom(chicken_chopped);
  next = new boom(next, 623, 412, 35, 30);
  next2 = new boom(next2, 623, 412, 35, 30);
  next3 = new boom(next3, 623, 412, 35, 30);
  next4 = new boom(next4, 623, 412, 35, 30);
  next5 = new boom(next5, 623, 412, 35, 30);
  next6 = new boom(next6, 623, 412, 35, 30);
  next7 = new boom(next7, 623, 412, 35, 30);
  next8 = new boom(next8, 623, 412, 35, 30);
  note1 = new boom(note1, 460, 320, 198, 122);
  note2 = new boom(note2, 460, 320, 198, 122);
  note3 = new boom(note3, 460, 320, 198, 122);
  note4 = new boom(note4, 460, 320, 198, 122);
  note5 = new boom(note5, 460, 320, 198, 122);
  note6 = new boom(note6, 460, 320, 198, 122);
  note7 = new boom(note7, 460, 320, 198, 122);
  note8 = new boom(note8, 460, 320, 198, 122);
  note9 = new boom(note9, 460, 320, 198, 122);
  oil = new boom(oil, 60, 210, 40, 120);
  tbsp = new boom(tbsp, 110, 340, 43, 38);
  tbsp_oil = new boom(tbsp_oil);
  tbsp2 = new boom(tbsp2);
  pasta = new boom(pasta, 90, 290, 53, 103);
  pasta_empty = new boom(pasta_empty);
  broth = new boom(broth, 170, 330, 53, 103);
  dial = new boom(dial, 530, 260, 20, 20);
  dial2 = new boom(dial2);
  dial_on = new boom(dial_on);
  dial_hot = new boom(dial_hot);
  none = new boom(none);
  cup = new boom(cup, 110, 250, 55, 34);
  cream = new boom(cream, 180, 150, 53, 103);
  cup_cream = new boom(cup_cream);
  cup2 = new boom(cup2);
  lid = new boom(lid, 110, 200, 100, 65);
  spoon = new boom(spoon, 80, 45, 25, 85);
  spoon2 = new boom(spoon2);
  parm = new boom(parm, 110, 330, 56, 42);
  parm_empty = new boom(parm_empty);
  bowl = new boom(bowl, 110, 330, 56, 42);
  bowl_full = new boom(bowl_full);
  
  
  
//   music_panel = new boom(music_panel, 170,451,130,40);
//   sound_panel = new boom(sound_panel, 355,451,130,40);

}

function draw() {
    background(243,133,32);
    image(BG, 10, 10, 648, 432);
    
    
    dial.show();
    stove.show2();
    pot.show();
    pot.move();
    board.show();
    garlic.show();
    garlic.move();
    chicken.show();
    chicken.move();
    flatKnife.show();
    flatKnife.move();
    spoon.show();
    spoon.move();
    note1.show2();
    
    // music_panel.show2();
    // sound_panel.show2();
    
    //garlic interaction 
  if (board.x < garlic.x + garlic.w &&
    board.x + board.w > garlic.x &&
    board.y < garlic.y + garlic.h &&
    board.y + board.h > garlic.y) {
    if (flatKnife.x < garlic.x + garlic.w &&
      flatKnife.x + flatKnife.w > garlic.x &&
      flatKnife.y < garlic.y + garlic.h &&
      flatKnife.y + flatKnife.h > garlic.y) {
      // chop_sound.rate(0.5);
      
        chop1 = true;
        garlic.img = garlic_chopped.img;
      
    }
      
  }
    
    //step 1 cross-out lines
    if (chop1) {
      strokeWeight(2);
      stroke(255, 0, 0);
      line(495, 368, 590, 368);
    }
    if (chop2) {
      strokeWeight(2);
      stroke(255, 0, 0);
      line(495, 398, 590, 398);
    }

    if (chop1 && chop2) {
      strokeWeight(2);
      stroke(255, 0, 0);
      line(495, 425, 590, 425);
      next.show();
    }

    //chicken interaction
    //chicken interaction
  if (board.x < chicken.x + chicken.w &&
    board.x + board.w > chicken.x &&
    board.y < chicken.y + chicken.h &&
    board.y + board.h > chicken.y) {
    if (flatKnife.x < chicken.x + chicken.w &&
      flatKnife.x + flatKnife.w > chicken.x &&
      flatKnife.y < chicken.y + chicken.h &&
      flatKnife.y + flatKnife.h > chicken.y) {
      chop2 = true;
      chicken.img = chicken_chopped.img;
    }
  }
  
  if (woahknife) {
    flatKnife.img = knife.img;
  } else {
    flatKnife.img = flatKnife.img;
  }
  
  //step2
  if (note_2) {
    note2.show2();
    oil.show();
    oil.move();
    tbsp.show();
    tbsp.move();
    if (tbsp.x < oil.x + oil.w &&
      tbsp.x + tbsp.w > oil.x &&
      tbsp.y < oil.y + oil.h &&
      tbsp.y + tbsp.h > oil.y) {
      chop3 = true;
      tbsp.img = tbsp_oil.img;
    }
    if (chop3) {
    strokeWeight(2);
    stroke(255, 0, 0);
    line(495, 368, 620, 368);

      if (tbsp.x < pot.x + pot.w-30 &&
        tbsp.x + tbsp.w > pot.x+40 &&
        tbsp.y < pot.y + pot.h-30 &&
        tbsp.y + tbsp.h > pot.y+30) {
        chop4 = true;
        pot.img = pot_oil.img;
        tbsp.x=100;tbsp.y=330;
        // tbsp.x = 100px; tbsp.y = 330px;
      }

      if (chop4) {
        tbsp.img = tbsp2.img;
        strokeWeight(2);
        stroke(255, 0, 0);
        line(495, 398, 620, 398);
        if (dialon) {

          dial.img = dial_on.img;
          stove.img = stove_hot.img;
          strokeWeight(2);
          stroke(255, 0, 0);
          line(495, 425, 590, 425);
          next2.show();
          chop5 = true;
        }
      }
    }
    
    //step3  

    if (chop5) {
      if (note_3) {
        //   ignite_sound.stop();
          note3.show2();
          if (chicken.x < pot.x + pot.w &&
            chicken.x + chicken.w > pot.x &&
            chicken.y < pot.y + pot.h &&
            chicken.y + chicken.h > pot.y) {
            pot.img = pot_chicken.img;
            chop6 = true;     
          }
          if (chop6) {
            chicken.x=0;chicken.y=0;
            chicken.img=none.img;
            strokeWeight(2);
            stroke(255, 0, 0);
            line(495, 368, 620, 368);
            chop7 = true;
          }
  
          if (chop7) {
            if (garlic.x < pot.x + pot.w &&
              garlic.x + garlic.w > pot.x &&
              garlic.y < pot.y + pot.h &&
              garlic.y + garlic.h > pot.y) {
              pot.img = pot_chicken_garlic.img;
              chop8 = true;
            }
          }
          if (chop8) {
            garlic.x=0;garlic.y=0;
            garlic.img=none.img;
            strokeWeight(2);
            stroke(255, 0, 0);
            line(495, 398, 600, 398);
            next3.show();
            chop9 = true;
          }
          
          //step4
        if (chop9) {
          if (note_4) {
          
            tbsp.img = none.img;
            oil.img = none.img;
            note4.show2();
            cream.show();
            cream.move();
            cup.show();
            cup.move();
          }

          if (cup.x < cream.x + cream.w &&
            cup.x + cup.w > cream.x &&
            cup.y < cream.y + cream.h &&
            cup.y + cup.h > cream.y) {
            chop7=false;
            cup.img = cup_cream.img;
            chop10 = true;


          }
          if (chop10) {
            strokeWeight(2);
            stroke(255, 0, 0);
            line(495, 368, 620, 368);
            line(495, 383, 620, 383);
            if (cup.x < pot.x + pot.w-30 &&
              cup.x + cup.w > pot.x+30 &&
              cup.y < pot.y + pot.h-30 &&
              cup.y + cup.h > pot.y+30) {
              pot.img = pot_cream.img;
              cup.x=100; cup.y=240;
            

              chop11 = true;
            }
            if (chop11) {

              strokeWeight(2);
              stroke(255, 0, 0);
              line(495, 410, 620, 410);
              cup.img = cup2.img;
              next4.show();
              chop12 = true;

          }
        }
      }
      
      if (chop12){
        if (note_5) {
          note5.show2();
          pasta.show();
          pasta.move();
          broth.show();
          broth.move();
          if (pasta.x < pot.x + pot.w-30 &&
            pasta.x + pasta.w > pot.x+30 &&
            pasta.y < pot.y + pot.h-30 &&
            pasta.y + pasta.h > pot.y+30) {
            chop13 = true;
            pasta.x=80;pasta.y=280;
            pasta.img = pasta_empty.img;
            pot.img = pot_pasta.img
          } 
          if (chop13) {
            strokeWeight(2);
            stroke(255, 0, 0);
            line(495, 368, 620, 368);
            line(495, 383, 620, 383);
            if (broth.x < pot.x + pot.w-30 &&
                broth.x + broth.w > pot.x+30 &&
                broth.y < pot.y + pot.h-30 &&
                broth.y + broth.h > pot.y+30) {
                
                chop14 = true;
                
                    // if (pour_sound.isPlaying()) {
                    // pour_sound.stop();
                    // } else {
                    // pour_sound.play();
                    // }
                broth.x=160; broth.y=320;
                pot.img = pot_broth.img;
            }
            if (chop14) {      
                strokeWeight(2);
                stroke(255, 0, 0);
                line(495, 410, 620, 410);
                line(495, 425, 620, 425);
                chop15 = true;
                next5.show();
            }
          }
        }
        
        if (chop15){
            if (note_6) {
                note6.show2();
                if (dialhot) {
                  dial.img = dial_hot.img
                  strokeWeight(2);
                  stroke(255, 0, 0);
                  line(495, 368, 620, 368);
                  line(495, 383, 620, 383);
                  frameRate(15);
                  //   animation(clock, 380, 220);
                  //   if (frameCount%30 == 0) {
                  chop16 = true;
                     
                  //   }
                  if (chop16) {

                    frameRate(30);
                    // wait.remove();
                  strokeWeight(2);
                  stroke(255, 0, 0);
                  line(495, 410, 620, 410);
                  line(495, 425, 620, 425);
                    next6.show();
                  }
                }
            }
            
            //step7
            if (chop16) {
              if (note_7) {
              
                pasta.img = none.img;
                broth.img = none.img;
                cup.img = none.img;
                cream.img = none.img;
                note7.show2();
                lid.show();
                lid.move();

                if (lid.x < pot.x + pot.w &&
                  lid.x + lid.w > pot.x &&
                  lid.y < pot.y + pot.h &&
                  lid.y + lid.h > pot.y) {

                  pot.img = pot_lid.img;
                  lid.img = none.img;
                  chop17 = true;
                }
                if (chop17) {
                  strokeWeight(2);
                  stroke(255, 0, 0);
                  line(495, 368, 590, 368);

                  if (dialon2) {
                    dial.img = dial_on.img;
                    strokeWeight(2);
                    stroke(255, 0, 0);
                    line(495, 398, 590, 398);
                    frameRate(15);
                    // animation(clock2, 380, 220);
                    // if (frameCount%30 == 0) {
                    chop18 = true;
                    // }

                    if (chop18) {
                      frameRate(30);
                      // wait.remove();
                      strokeWeight(2);
                       stroke(255, 0, 0);
                      line(495, 425, 620, 425);
                      next7.show();

                    }

                  }
                }
                
                // Step8 
              if (note_8) {
                note8.show2();
                parm.show();
                parm.move();
                // pot.img = pot_broth.img;

                if (dialon3) {
                  dial.img = dial2.img;
                  stove_hot.img = stove2.img;
                  pot.img=pot_broth.img;
                  strokeWeight(2);
                  stroke(255, 0, 0);
                  line(495, 365, 590, 365);
                  //   chop19 = true;
                  // }


                  // if (chop19) {

                  if (parm.x < pot.x + pot.w-30 &&
                    parm.x + parm.w > pot.x+30 &&
                    parm.y < pot.y + pot.h-30 &&
                    parm.y + parm.h > pot.y+30) {
                    chop20 = true;
                    parm.x=100;parm.y=320;
                  }


                  if (chop20) {
                    parm.img = parm_empty.img;
                    pot.img = pot_parm.img;
                    strokeWeight(2);
                    stroke(255, 0, 0);
                    line(495, 395, 620, 395);
                      if (spoon.x < pot.x + pot.w &&
                    spoon.x + spoon.w > pot.x &&
                    spoon.y < pot.y + pot.h &&
                    spoon.y + spoon.h > pot.y) {
                        chop21=true;
                      }
                    if(chop21){
                        spoon.img=none.img;
                        pot.img=none.img;
                        // animation(stir, 487, 148);
                        // if (frameCount%30 == 0) {
                        chop22=true;
                        
                        // }
                if (chop22) {
                  pot.img=pot_parm_stirred.img;
                    strokeWeight(2);
                    stroke(255, 0, 0);
                    line(495, 427, 620, 427);
                    next8.show();
                  // spoon.img=spoon2.img;
                
                  }
                  }
                  }
                  
              if(note_9){
              note9.show2();
              parm.img=none.img;
              bowl.show();  
              bowl.move();
                 if (bowl.x < pot.x + pot.w &&
                    bowl.x + bowl.w > pot.x &&
                    bowl.y < pot.y + pot.h &&
                    bowl.y + bowl.h > pot.y) {
                        chop23=true;
              }
                if(chop23){
                  bowl.img=none.img;
                  steam = true;
                }
              }
                }
              }
                  
              }
                
            }
            

        }
      }


        }
    }
}

}
    
    

function mousePressed() {
  if (mouseX > flatKnife.x && mouseX < flatKnife.x + flatKnife.w && mouseY > flatKnife.y && mouseY < flatKnife.y + flatKnife.h) {
    woahknife = !woahknife;
  }

  flatKnife.clicked();
  garlic.clicked();
  chicken.clicked();
  oil.clicked();
  tbsp.clicked();
  cup.clicked();
  cream.clicked();
  pasta.clicked();
  broth.clicked();
  lid.clicked();
  parm.clicked();
  spoon.clicked();
  bowl.clicked();

  
   if (chop1 && chop2){ 
  if (mouseX > next.x && mouseX < next.x + next.w && mouseY > next.y && mouseY < next.y + next.h) {
    
    // page_turn.play();
    // page_turn.setVolume(sound);
    note_2 = true;
  }
   }

  if (chop4) {
    if (mouseX > dial.x && mouseX < dial.x + dial.w && mouseY > dial.y && mouseY < dial.y + dial.h) {
    //   ignite_sound.play();
    //   ignite_sound.setVolume(sound);
      dialon = true;
    }
  }

  if (chop15) {
    if (mouseX > dial.x && mouseX < dial.x + dial.w && mouseY > dial.y && mouseY < dial.y + dial.h) {
      dialhot = true;
    }
  }

  if (chop17) {
    if (mouseX > dial.x && mouseX < dial.x + dial.w && mouseY > dial.y && mouseY < dial.y + dial.h) {
      dialon2 = true;
    }
  }

  if (note_8) {
    if (mouseX > dial.x && mouseX < dial.x + dial.w && mouseY > dial.y && mouseY < dial.y + dial.h) {
      dialon3 = true;
    }
  }

  if (chop5) {
    if (mouseX > next2.x && mouseX < next2.x + next2.w && mouseY > next2.y && mouseY < next2.y + next2.h) {

      note_3 = true;

    }
  }

  if (chop9) {
    if (mouseX > next3.x && mouseX < next3.x + next3.w && mouseY > next3.y && mouseY < next3.y + next3.h) {

      note_4 = true;

    }
  }

  if (chop12) {
    if (mouseX > next4.x && mouseX < next4.x + next4.w && mouseY > next4.y && mouseY < next4.y + next4.h) {

      note_5 = true;

    }
  }



  if (chop15) {
    if (mouseX > next5.x && mouseX < next5.x + next5.w && mouseY > next5.y && mouseY < next5.y + next5.h) {

      note_6 = true;

    }
  }

  if (chop16) {
    if (mouseX > next6.x && mouseX < next6.x + next6.w && mouseY > next6.y && mouseY < next6.y + next6.h) {

      note_7 = true;

    }
  }

  if (chop18) {
    if (mouseX > next7.x && mouseX < next7.x + next7.w && mouseY > next7.y && mouseY < next7.y + next7.h) {

      note_8 = true;

    }
  }
  


if (chop22) {
    if (mouseX > next8.x && mouseX < next8.x + next8.w && mouseY > next8.y && mouseY < next8.y + next8.h) {

      note_9 = true;

    }
  }

//sound and stuff
 
if (mouseX > pause.x && mouseX < pause.x + pause.w && mouseY > pause.y && mouseY < pause.y + pause.h) {
  if(!music.isPlaying()){
    // music.setVolume(music_sound)
    // music.loop();
    
     music.play();
    pause.img=pause2.img;
     }else{
      // music.setVolume(music_sound)
      pause.img=play.img; 
       music.stop();
     }
  }
}




function mouseReleased() {
  flatKnife.released();
  garlic.released();
  chicken.released();
  oil.released();
  tbsp.released();
  cup.released();
  cream.released();
  pasta.released();
  broth.released();
  lid.released();
  parm.released();
  spoon.released();
  bowl.released();
}


class boom {
  constructor(img, x, y, w, h) {
    this.img = img;
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.dragging = false;
    this.rollover = false;
    this.offsetX = 0;
    this.offsetY = 0;
  }

  show() {

    if (mouseX > this.x && mouseX < this.x + this.w && mouseY > this.y && mouseY < this.y + this.h) {
      this.rollover = true;
      image(this.img, this.x-2.5, this.y-2.5, this.w + 5, this.h + 5);
    } else {
      this.rollover = false;
      image(this.img, this.x, this.y, this.w, this.h);
    }
  }

  show2() {
    image(this.img, this.x, this.y, this.w, this.h);
  }

  clicked() {
    if (mouseX > this.x && mouseX < this.x + this.w && mouseY > this.y && mouseY < this.y + this.h) {
      this.dragging = true;
      this.offsetX = this.x - mouseX;
      this.offsetY = this.y - mouseY;

    }

  }

  move() {
    if (this.dragging) {
      this.x = mouseX + this.offsetX;
      this.y = mouseY + this.offsetY;
    }

  }
  released() {
    this.dragging = false;
  }

}