var myFontBook, myFontBold;

var Title, Logo, Button01,  Pic01, Pic05, Pic06;

var button1, button2, button3;

var line1, line2, line3;

​

var options; 

var hammer;

var startMsg = "Start Colonizing!";

var instructMsg;

var discards = 0;

var discardsMin = 1;

var shuffles = 0;

var shufflesMax = 5;

var resultMsg = "";

var splitString;

​

function preload() {

  myFontBook = loadFont('Assets/Font/GothamRounded-Book.otf');

  myFontBold = loadFont('Assets/Font/GothamRounded-Bold.otf');

  Title = loadImage('Assets/Images/Title.png');

  Logo = loadImage('Assets/Images/Logo.png');

  Pic01 = loadImage('Assets/Images/Pic01.png');

  Pic05 = loadImage('Assets/Images/Pic05.png');

  Pic06 = loadImage('Assets/Images/Pic06.png');

}

​

function setup() { 

  createCanvas(windowWidth, windowHeight);

  imageMode(CENTER);

  textAlign(CENTER);

  drawScene1();

} 

function draw() { 

//nothing in draw function

}

​

​

function drawScene1(){

  background(0);

  button1 = createImg('Assets/Images/Button001.png'); 

  //button1 = createButton ("button1");

  button1.mousePressed(drawScene2);

  button1.position(width/2-100,height/1.5);

  image(Title,width/2,height/2.2);

  //line1=text("SCENE 1",width/2,height/2);

}

​

function drawScene2(){

  background(160);

  // do some stuff

  button1.hide();

  button2 = createButton ("button2");

  button2.mousePressed(drawScene3);

  button2.position(width/2,height/4);

  line2=text("SCENE 2",width/2,10);

}

​

function drawScene3(){

  background(120);

  // do some stuff

  button2.hide();

  button3 = createButton ("button3");

  button3.mousePressed(drawScene4);

  button3.position(width/2,height/8);

  line3=text("SCENE 3",width/2,10);

}

​

function drawScene4(){

  background(80);

  // do some stuff

  button3.hide();

  line4=text("SCENE 4",width/2,10);

    // set options to prevent default behaviors for swipe, pinch, etc.

    options = {

    preventDefault: true

  };

​

  // document.body registers gestures anywhere on the page

  hammer = new Hammer(document.body, options);

  hammer.get('swipe').set({

    direction: Hammer.DIRECTION_ALL

  });

  hammer.on("swipe", swipePage);

}

​

​

function swipePage(event) {

  background(16, 22, 39);

  //button3.hide();

  //line4=text("SCENE 4",width/2,10);

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

  textAlign(CENTER);

  text("total number of left swipes " + discards, width / 2, height / 4);

  text("total number of photos " + shuffles, width / 2, height / 6);

  console.log(event);

  if (event.direction == 4) {

    startMsg = "you swiped right";

    shuffles ++;

  } else if (event.direction == 8) {

    startMsg = "you swiped up";

    shuffles ++;

  } else if (event.direction == 16) {

    startMsg = "you swiped down";

    shuffles ++;

  } else if (event.direction == 2) {

    startMsg = "you swiped left";

    shuffles ++;

    discards ++;

  }

  resultScene5();

}

​

function resultScene5(){

  if (shuffles > shufflesMax && discards > discardsMin) {

    hammer.off("swipe", swipePage);

    background(255, 221, 0);  

    resultMsg = "Well done! You have/successfully discarded/" + discards + " out of " + shufflesMax + " people./This equates to " + discards*20 + "% of/the selected population.";

    fill(0, 0, 0);

    textFont(myFontBold); 

    textAlign(CENTER);

  splitString = split(resultMsg, '/');

  text(splitString[0], width / 2, height / 2.65);

  text(splitString[1], width / 2, height / 2.35);

  text(splitString[2], width / 2, height / 2.1);

  text(splitString[3], width / 2, height / 1.9);

  text(splitString[4], width / 2, height / 1.75);

  text(splitString[5], width / 2, height / 1.25);

  }

    if (shuffles > shufflesMax && discards <= discardsMin) {

    hammer.off("swipe", swipePage);

    background(255, 221, 0); 

    resultMsg = "Too bad! You were/only able to discard/" + discards + " out of " + shufflesMax + " people./This equates to " + discards*20 + "% of/the selected population.";;

    fill(0, 0, 0);

    textFont(myFontBold);

      textAlign(CENTER);

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

  splitString = split(resultMsg, '/');

  text(splitString[0], width / 2, height / 2.65);

  text(splitString[1], width / 2, height / 2.35);

  text(splitString[2], width / 2, height / 2.1);

  text(splitString[3], width / 2, height / 1.9);

  text(splitString[4], width / 2, height / 1.75);

  text(splitString[5], width / 2, height / 1.25);

  }

}

​