//Assets

var myFontBook, myFontBold, myFontItalic;

var Title, Version, Instruction, SelectR; 

var Map;

var pics = [];

var i = 0;

​

//Color palette

/*

var color1 = '#0f1626';

var color2 = '#e9af28';

var color3 = '#ff533d';

var color4 = '#ab987a';

var color5 = '#f5f5f5';

var color6 = '#000000';

*/

​

var color1 = '#200605';

var color2 = '#fcb702';

var color3 = '#d51101';

var color4 = '#e35901';

var color5 = '#f7ead8';

var color6 = '#000000';

​

//Page titles

var line1, line2, line3, line4;

​

//Buttons

var button1, button2, region1, region2, region3, region4, region5, discardb1, retain1, resetb;

​

//Counters

var selectedImg = 0;

var currentImg;

var discards = 0;

var discardsMin = 1;

var shufflesMax = 5;

var randColour;

​

//Result page

var resultMsg = "";

var splitString;

​

function preload() {

  //Pre-load font

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

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

  myFontItalic = loadFont('Assets/Font/GothamRounded-BookItalic.otf');

  //Pre-load images

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

  Version = loadImage('Assets/Images/01-Version-1.png');

  Instruction = loadImage('Assets/Images/02-Text-1.png');

  SelectR = loadImage('Assets/Images/03-Text-1.png');

  //Map = loadImage('Assets/Images/03-Base-Ref.png');

  for (i=0; i<9; i++) {

  pics[i] = loadImage("Assets/Images/Pic0"+i+".png"); 

  }

}

​

​

function setup() {

​

  createCanvas(windowWidth, windowHeight);

  background(color1);

  imageMode(CENTER);

  textAlign(CENTER);

  textFont(myFontBook);

  textSize(18);

  noStroke();

  fill(color5);

  drawScene1();

​

}

​

function draw() {

//NA

}

​

function drawScene1(){

  background(color1);

  image(Title,width/2,height/2-25);

  image(Version,width/2,height/2+290);

  button1 = createImg('Assets/Images/01-Button-1.png'); 

  button1.mousePressed(drawScene2);

  button1.position(width/2-112,height/2+160);

}

​

function drawScene2(){

  background(color1);

  button1.hide();

  image(Instruction,width/2,height/2-280);

  line2 = "Lorem ipsum dolor sit amet, consectetu /adipiscing elit, sed do eiusmod tempor /incididunt ut labore et dolore magna aliqua./Quis ipsum suspendisse ultrices gravida. /Risus commodo viverra maecenas/ accumsan lacus vel facilisis. /Lorem ipsum dolor sit amet, consectetur/ adipiscing elit, sed do eiusmod tempor /incididunt ut labore et dolore magna aliqua./ Quis ipsum suspendisse ultrices gravida. /Risus commodo viverra maecenas /accumsan lacus vel facilisis. "

  splitString = split(line2, '/');

      text(splitString[0], width / 2, height / 2-100-10);

      text(splitString[1], width / 2, height / 2-75-10);

      text(splitString[2], width / 2, height / 2-50-10);

      text(splitString[3], width / 2, height / 2-25-10);

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

      text(splitString[5], width / 2, height / 2+25-10);

      text(splitString[6], width / 2, height / 2+50-10);

      text(splitString[7], width / 2, height / 2+75-10);

      text(splitString[8], width / 2, height / 2+100-10);

  button2 = createImg('Assets/Images/02-Button-1.png');

  button2.mousePressed(drawScene3);

  button2.position(width/2-74,height/2+170);

}

​

function drawScene3(){

  background(color1);

  button2.hide();

  image(SelectR,width/2,height/2-280);

  //image(Map,width/2,height/2);

  region1 = createImg('Assets/Images/03-Region-1.png');

  region1.mousePressed(drawScene4);

  region1.position(width/2-162,height/2-202);

  region2 = createImg('Assets/Images/03-Region-2.png');

  region2.mousePressed(drawScene4);

  region2.position(width/2-90,height/2-107);

  region3 = createImg('Assets/Images/03-Region-3.png');

  region3.mousePressed(drawScene4);

  region3.position(width/2+62,height/2-94);

  region4 = createImg('Assets/Images/03-Region-4.png');

  region4.mousePressed(drawScene4);

  region4.position(width/2-180,height/2-44);

  region5 = createImg('Assets/Images/03-Region-5.png');

  region5.mousePressed(drawScene4);

  region5.position(width/2-118,height/2+33);

  textFont(myFontItalic);

  textSize(16);

  fill(color2);

  line3=text("Select a region to colonize",width/2,height/2+300);

}

​

function drawScene4() {

  background(color1);

  region1.hide();

  region2.hide();

  region3.hide();

  region4.hide();

  region5.hide();

  /*

  line4=text("OVERLAY OF SWIPE INDICATORS",width/2,height/2);

  let colours = ['#e9af28', '#101627', '#fb5444', '#ab987d'];

  let colour = random(colours);

  background(colour);

  selectedImg = int(random(1, 9));

  image(pics[selectedImg], width / 2, height / 2); 

  */

​

  selectedImg = int(0, 8);

  print(selectedImg);

  currentImg = pics[selectedImg];

  image(currentImg, width / 2, height / 2);

  discardb1 = createButton ("Discard");

  discardb1.mousePressed(discard);

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

  retainb1 = createButton ("Retain");

  retainb1.mousePressed(retain);

  retainb1.position(width/2+100,height-100);

} 

function drawScene5() {

  background(color1);

  print(selectedImg);

  currentImg = pics[selectedImg];  

  image(currentImg, width / 2, height / 2);

  discardb1 = createButton ("Discard");

  discardb1.mousePressed(discard);

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

  retainb1 = createButton ("Retain");

  retainb1.mousePressed(retain);

  retainb1.position(width/2+100,height-100);

}

​

function discard (){

  discardb1.hide();

  retainb1.hide();

  selectedImg++;

  discards ++;

  if (selectedImg < shufflesMax){ 

    drawScene5();

  } else {

    resultPage();

  }

}

​

function retain (){

  discardb1.hide();

  retainb1.hide();

  selectedImg++;

  if (selectedImg < shufflesMax){

    drawScene5();

  } else {

    resultPage();

  }

}

function resultPage(){

  background(color1); 

  if (discards > discardsMin) { 

​

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

    textFont(myFontBold); 

      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);

  } else {  

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

    textFont(myFontBold);

      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);

  }

  resetb = createButton ("Colonize more!");

  resetb.mousePressed(resetAll);

  resetb.position(width/2-50,height-100);

}

​

function resetAll (){

  resetb.hide();

  drawScene1();

}

​

​

​