p6_2.js

var p6_2 = function(s) {

  var generateColor;
  var calendarColor;
  var homeColor;
  var principlesColor;
  var arrowColor;
  var challenge;
  var seen;

  s.setup = function() {
    generateColor = '#FFFFFF';
    calendarColor = '#FFFFFF';
    homeColor = '#e61dff';
    principlesColor = '#e61dff';
    arrowColor = '#e61dff';
    challenge = private_challenges[Math.floor(Math.random() * private_challenges.length)];
    seen = false;

    //Canvas
    s.createCanvas(s.displayWidth, s.displayHeight);
    s.background('#731DD3');
    s.noStroke();
    s.textFont('Futura');
    s.fill(homeColor);
    s.textStyle(s.BOLD);
    s.textSize(12);
  };

  s.draw = function() {

    if(s.select('#p6_2').style('display') == 'block') {
      // console.log("Sixth Principle – Part 2");
      //Background
      s.background('#731DD3');
      s.textAlign(s.LEFT);

      //Page number
      s.fill('#FFFFFF');
      s.textFont('Futura');
      s.textStyle(s.BOLD);
      s.textSize(16);
      s.text('6 / 7', 20, s.windowHeight - 20);

      //Menu
      s.noStroke();
      s.fill(homeColor);
      s.textSize(12);
      s.text('i n i c i o', s.windowWidth/2 - 110, 30);
      s.rect(s.windowWidth/2 - 68, 35, 12, 6);
      s.fill(principlesColor);
      s.text('p r i n c i p i o s', s.windowWidth/2, 30);
      s.rect(s.windowWidth/2 + 86, 35, 12, 6);

      //Title
      s.textAlign(s.CENTER);
      s.textStyle(s.NORMAL);
      s.fill('#e61dff');
      s.textSize(35);
      s.text('RETO', s.windowWidth/2, s.windowHeight/5);
      s.textStyle(s.BOLD);
      s.textSize(70);
      s.text('PRIVADO', s.windowWidth/2, s.windowHeight/5 + 70);

      //Challenge
      s.noStroke();
      s.textFont('Futura');
      s.fill('#FFFFFF');
      s.textSize(37);
      s.text(challenge.name, s.windowWidth/2 - 400, s.windowHeight/2 - 100, 800, 600);

      //Calendar
      s.textStyle(s.BOLD);
      s.fill('#ff83ff');
      s.rect(s.windowWidth/2 - 170, s.windowHeight/2 + 115, 340, 50);
      s.fill(calendarColor);
      s.textSize(20);
      s.text('AGREGAR AL CALENDARIO', s.windowWidth/2, s.windowHeight/2 + 148);

      //Generate
      s.textStyle(s.BOLD);
      s.fill('#e61dff');
      s.rect(s.windowWidth/2 - 100, s.windowHeight/2 + 188, 200, 50);
      s.fill(generateColor);
      s.textSize(20);
      s.text('GENERAR OTRO', s.windowWidth/2, s.windowHeight/2 + 220);

      //Arrow
      s.fill(arrowColor);
      var mx = s.windowWidth/2 - 10;
      var my = s.windowHeight - 60;
      s.noStroke();
      s.beginShape();
      s.vertex(mx, my);
      s.vertex(mx + 20, my);
      s.vertex(mx + 20, my + 20);
      s.vertex(mx + 30, my + 20);
      s.vertex(mx + 10, my + 40);
      s.vertex(mx - 10, my + 20);
      s.vertex(mx, my + 20);
      s.vertex(mx, my);
      s.endShape(s.CLOSE);
    }
  };

  s.mouseInsideArrow = function() {
    var mx = s.windowWidth/2 - 10;;
    var my = s.windowHeight - 60;
    //Check if the mouse is inside the arrow's rectangle
    var dx = s.mouseX - mx;
    var dy = s.mouseY - my;
    if(0 < dx && dx < 20 && 0 < dy && dy < 20) {
      return true;
    } else {
      //Check if the mouse is inside the arrow's left triangle
      var lx = Math.abs(s.mouseX - mx + 10);
      var ly = Math.abs(s.mouseY - my - 20);
      if(lx < 20 && ly < 20 && lx > ly) {
        return true;
      } else {
        //Check if the mouse is inside the arrow's right triangle
        var rx = 20 - Math.abs(s.mouseX - mx - 10);
        var ry = Math.abs(s.mouseY - my - 20);
        if(rx < 20 && ry < 20 && rx > ry) {
          return true;
        }
        return false;
      }
    }
  };

  s.mouseInsideHome = function() {
    var hx1 = s.windowWidth/2 - 110;
    var hx2 = s.windowWidth/2 - 50;
    var hy1 = 10;
    var hy2 = 50;
    if( s.mouseX > hx1 && s.mouseX < hx2 && s.mouseY > hy1 && s.mouseY < hy2 ) {
      return true;
    } else {
      return false;
    }
  };

  s.mouseInsidePrinciples = function() {
    var hx1 = s.windowWidth/2;
    var hx2 = s.windowWidth/2 + 100;
    var hy1 = 10;
    var hy2 = 50;
    if( s.mouseX > hx1 && s.mouseX < hx2 && s.mouseY > hy1 && s.mouseY < hy2 ) {
      return true;
    } else {
      return false;
    }
  };

  s.mouseInsideGenerate = function() {
    var hx1 = s.windowWidth/2 - 100;
    var hx2 = s.windowWidth/2 + 100;
    var hy1 = s.windowHeight/2 + 188;
    var hy2 = s.windowHeight/2 + 238;
    if( s.mouseX > hx1 && s.mouseX < hx2 && s.mouseY > hy1 && s.mouseY < hy2 ) {
      return true;
    } else {
      return false;
    }
  };

  s.mouseInsideCalendar = function() {
    s.rect(s.windowWidth/2 - 170, s.windowHeight/2 + 115, 340, 50);
    var hx1 = s.windowWidth/2 - 170;
    var hx2 = s.windowWidth/2 + 170;
    var hy1 = s.windowHeight/2 + 115;
    var hy2 = s.windowHeight/2 + 165;
    if( s.mouseX > hx1 && s.mouseX < hx2 && s.mouseY > hy1 && s.mouseY < hy2 ) {
      return true;
    } else {
      return false;
    }
  };

  s.mouseClicked  = function() {
    if(s.mouseInsideArrow()){
      s.next();
    } else if(s.mouseInsideGenerate()){
      s.another();
    } else if(s.mouseInsideCalendar()) {
      s.share();
    } else if(s.mouseInsideHome()) {
      s.home();
    } else if(s.mouseInsidePrinciples()) {
      s.first();
    }
  };

  s.mouseMoved = function() {
    if(s.mouseInsideArrow()){
      s.cursor(s.HAND);
      arrowColor = '#FFFFFF';
    } else if(s.mouseInsideGenerate()){
      s.cursor(s.HAND);
      generateColor = '#731DD3';
    } else if(s.mouseInsideCalendar()) {
      s.cursor(s.HAND);
      calendarColor = '#731DD3';
    } else if(s.mouseInsideHome()) {
      homeColor = '#FFFFFF';
      s.cursor(s.HAND);
    } else if(s.mouseInsidePrinciples()) {
      principlesColor = '#FFFFFF';
      s.cursor(s.HAND);
    } else {
      s.cursor(s.ARROW);
      homeColor = '#E61DFF';
      principlesColor = '#E61DFF';
      generateColor = '#ffffff';
      calendarColor = '#ffffff';
      arrowColor = '#E61DFF';
    }
  };

  s.another = function() {
    challenge = private_challenges[Math.floor(Math.random() * private_challenges.length)];
  };
  Date.prototype.addHours = function(h) {    
    this.setTime(this.getTime() + (h*60*60*1000)); 
    return this;   
  };

  Date.prototype.addDays = function(days) {
    var dat = new Date(this.valueOf());
    dat.setDate(dat.getDate() + days);
    return dat;
  }

  s.share = function() {
    // date of today
    let today = new Date();
    // number of days from today that the event will be programmed
    let numberOfDaysToAdd = 7;
    // number of hours that the event will last
    let numberOfHoursToAdd = 1;
    // initial date of the event
    let iDate = today.addDays(numberOfDaysToAdd);
    // final date of the event
    let fDate = today.addDays(numberOfDaysToAdd).addHours(numberOfHoursToAdd);
    // name of the event
    let eventName = '#TOD_S';
    // name of the file fileName.ics
    let fileName = eventName;
    // location of the event
    let location = '';
    var cal = ics();
    cal.addEvent(eventName, challenge.name, location, iDate, fDate);
    cal.download(fileName);
   
  };

  s.next = function() {
    seen = true;
    s.select('#p6_3').show();
    s.select('#p6_2').hide();
  };

  // s.done = function() {
  //   s.select('#p6_4').show();
  //   s.select('#p6_2').hide();
  // };

  s.home = function() {
    s.select('#home').show();
    s.select('#p6_2').hide();
  };

  s.first = function() {
    s.select('#p1_1').show();
    s.select('#p6_2').hide();
  };
}

var p6_2 = new p5(p6_2, 'p6_2');