let videoPlay = false;

let currentPage = 0;

let previousKey = "0";

let resetTimer;

let resetKey = " ";

let font;

let soundBlowing, soundPickaxe, soundDrill, typeWriter, bling;

let newPageSound = false;

​

let Pg1Text =

  "The wolf is feeling hungry.\nHelp the wolf find the right \npath to some yummy pork!";

let Pg2Text =

  "The wolf thinks he can hear \nsome sounds at the brick house.\n Help the wolf peek through \nthe window and check \nif anyone is home!";

let Pg3Text =

  "There are some piggies \nhome. Help the wolf get \nin the house!";

let Pg4Text =

  "The brick house is too \nsturdy. Help the wolf find \nan opening through the roof \nto get in the house!";

let visibleChar = 0;

let speed = 1;

​

function preload() {

  font = loadFont("assets/kg-primary-penmanship.penmanship-lined.ttf");

  //sound elements

  soundBlowing = loadSound("Page3_Blowing.mp3");

  soundPickaxe = loadSound("//audio/page3_pickaxe.wav");

  soundDrill = loadSound("Page3_Drill.mp3");

  typeWriter = loadSound("typewriter.mp3");

  bling = loadSound("bling.mp3");

  //video elements

  fireVideo = createVideo("BBB_Fire2.mp4");

  fireVideo.hide();

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  background("#e3f8ff");

  textFont(font);

  textAlign(CENTER, CENTER);

}

​

function draw() {

  background("#e3f8ff");

  textSize(40);

​

  if (currentPage !== 5) {

    fireVideo.stop();

  } else {

    typeWriter.stop();

  }

​

  // PAGE 0 \\

  if (currentPage == 0) {

    textSize(90);

    text("Big Bad Wolf", width / 2, height / 2);

  }

  // PAGE 1 \\

  if (currentPage == 1) {

    // newPage();

    // if (frameCount % speed === 0 && visibleChar < Pg1Text.length) {

    //   visibleChar++;

    //   typing();

    // }

    background("#F8C375");

    //let Pg1 = Pg1Text.substring(0, visibleChar);

    text(Pg1Text, width / 2, height / 2);

​

    // if (visibleChar >= Pg1Text.length && typeWriter.isPlaying()) {

    //   typeWriter.stop();

    // }

  }

​

  // PAGE 2 \\

  else if (currentPage == 2) {

//     newPage();

​

//     if (frameCount % speed === 0 && visibleChar < Pg2Text.length) {

//       visibleChar++;

//       typing();

//     }

    background("#DD8401");

    //let Pg2 = Pg2Text.substring(0, visibleChar);

    text(Pg2Text, width / 2, height / 2);

​

    // if (visibleChar >= Pg2Text.length && typeWriter.isPlaying()) {

    //   typeWriter.stop();

    // }

  }

​

  // PAGE 3 \\

  else if (currentPage == 3) {

    // newPage();

    // //increment characters

    // if (frameCount % speed === 0 && visibleChar < Pg3Text.length) {

    //   visibleChar++;

    //   typing();

    // }

    background("brown");

    //let Pg3 = Pg3Text.substring(0, visibleChar);

    text(Pg3Text, width / 2, height / 2);

​

    // if (visibleChar >= Pg3Text.length && typeWriter.isPlaying()) {

    //   typeWriter.stop();

    // }

  }

  // PAGE 4 \\

  else if (currentPage == 4) {

    // newPage();

    // if (frameCount % speed === 0 && visibleChar < Pg4Text.length) {

    //   visibleChar++;

    //   typing();

    // }

    background("rgb(255,97,0)");

    //let Pg4 = Pg4Text.substring(0, visibleChar);

    text(Pg4Text, width / 2, height / 2);

​

    // if (visibleChar >= Pg4Text.length && typeWriter.isPlaying()) {

    //   typeWriter.stop();

    // }

​

    // PAGE 5 \\

  } else if (currentPage == 5) {

    videoPlay = true;

    image(fireVideo, 0, -125);

    if (fireVideo.time() >= fireVideo.duration()) {

      fireVideo.time(0);

      videoPlay = false;

      console.log("video restart");

    } else if ((videoPlay = true)) {

      fireVideo.play();

      console.log("video is playing");

    }

  }

}

​

function keyPressed() {

  clearTimeout(resetTimer);

​

  // end function if no difference in page

  // if (key == previousKey) {

  //   return;

  // }

​

  // Book is closed

  if (key === "0") {

  }

​

  // PAGE 1

  if (key === "1") {

    currentPage = 1;

    visibleChar = 0;

    newPageSound = false;

    console.log("Page,", key);

    key = "1";

  }

​

  // PAGE 2

  if (key === "2") {

    currentPage = 2;

    visibleChar = 0;

    newPageSound = false;

    console.log("Page,", key);

    key = "2";

  }

​

  // PAGE 3

  if (key === "3") {

    currentPage = 3;

    visibleChar = 0;

    newPageSound = false;

    console.log("Page,", key);

  }

​

  // PAGE 4

  if (key === "4") {

    currentPage = 4;

    visibleChar = 0;

    newPageSound = false;

    console.log("Page,", key);

  }

​

  // PAGE 5

  if (key === "5") {

    currentPage = 5;

    console.log("Page,", key);

  }

​

  if (currentPage == 3) {

    // c key triggers windblower

    if (key === "c") {

      soundBlowing.stop();

      soundBlowing.play();

      soundDrill.stop();

      soundPickaxe.stop();

      key = " ";

      console.log("Page,", key);

    }

​

    // a key triggers drill

    if (key === "a") {

      soundBlowing.stop();

      console.log("Drill Stop");

      soundDrill.play();

      console.log("Drill play");

      soundBlowing.stop();

      soundPickaxe.stop();

      key = " ";

    }

    // b key triggers pickaxe

    if (key === "b") {

      console.log("b");

      soundBlowing.stop();

      soundPickaxe.play();

      soundDrill.stop();

      soundBlowing.stop();

      key = " ";

    }

  } else {

    stopAllSounds();

  }

​

  // resetTimer = setTimeout(() => {

  //   previousKey = resetKey;

  //   console.log("Previous key reset to:", resetKey);

  // }, 500); //after 0.5s reset key

​

  // stores information for next loop run

  previousKey = key;

  //console.log(previousKey);

}

​

// full screening will change the size of the canvas

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

​

//typing sound function

function typing() {

  if (!typeWriter.isPlaying()) {

    typeWriter.play();

    typeWriter.setVolume(0.7);

  }

}

​

//new page sound function

function newPage() {

  if (!newPageSound) {

    bling.play();

    newPageSound = true;

  }

}

​

function stopAllSounds() {

  soundBlowing.stop();

  soundDrill.stop();

  soundPickaxe.stop();

}

​

​

// FOR TRIGGERING FULL SCREEN

​

function touchStarted() {

  if (!fullscreen()) {

    fullscreen(true);

  }

}

​

// prevents the mobile browser from processing some default

// touch events, like swiping left for "back" or scrolling the page.

​

document.ontouchmove = function (event) {

  event.preventDefault();

};

​

​