let widthGray = 150; //width of my gray area

let trackerText; //list of text trackers

let badges = [];

let badgeAmount = 5;

let badgeSize = 100;

//let locked = false;

let myFont;

let myFontB;

let c;

let saveX;

let saveY;

let x;

let colorButton = 150;

let overButton = false;

let begin = false;

let login = "";

let grade = "";

let resp;

let nameOk = false;

​

function preload() {

  //load all badge images into an array

  for (let i = 1; i < badgeAmount; i++){

    badges [i] = loadImage('assets/badge'+ i + ".png");

  }

  myFont = loadFont('assets/CaeciliaLTStd-Roman.otf');

  myFontB = loadFont('assets/CaeciliaLTStd-Bold.otf');

}

​

function setup() {

  c = createCanvas(windowWidth, windowHeight);

​

  saveX = width - 50;

  saveY = height - 50;

  x = (width + widthGray) / 2

​

  // for (let i = 0; i < trackerText.length; i++) {

  //   let y = 10 + 2.5 * trackerText.length * i

  //   trackers[i] = new Tracker(trackerText[i], 15, y, 120, 30);

  //}

}

​

function draw() {

  background(255);

  //questionName();

  //if (nameOk) {

    background(255);

    saveButton()

    //text(name, widthGray + 10, 10);

    for (let i=0; i<5; i++) {

      image(badges[i], 100,100,badgeSize,badgeSize);

    }

  //}

}

​

function questionName() {

  noStroke();

  fill(100);

  textSize(15);

  textAlign(LEFT);

  textFont(myFont);

  text("Type your school login and press ENTER (e.g.: diana.dias): ", widthGray + 10, 30)

  fill(0);

  text(name, 585, 30)

  //name = createInput("Type here your name+class and press ENTER (e.g.: Fulano_6A)");

  //name.size(400, 24);

  //name.position(widthGray+10, 10);

  //text("type your name and class as the example 'fulano_6a', press ENTER to continue", width / 2, height / 2, 200);

  // text(name, width / 2, height / 2 + 20, 200);

​

}

​

​

​

function keyTyped() {

  if (!nameOk) {

    name += key;

    //print(name.substring(15));

  }

}

​

​

function keyPressed() {

  if (keyCode == RETURN || keyCode == ENTER) {

​

    //var output = markov.generateSentences(1)[0];

    nameOk = true

    //name = name.substring(15)

    //resp = createP(name);

    //resp.position(300, 100);

  }

  if (keyCode == BACKSPACE) {

    name = name.substring(0, name.length - 1);

  }

}

​

​

​

function saveButton() {

  //savebutton

  let d = dist(mouseX, mouseY, saveX, saveY)

  if (d < 50) {

    colorButton = 0;

    overButton = true;

  } else {

    colorButton = 150;

    overButton = false;

  }

​

  fill(colorButton);

  ellipse(saveX, saveY, 50, 50)

  fill(255)

  textFont(myFontB);

  textSize(12);

  text("Save!", saveX - 15, saveY + 5)

}

​

function mousePressed() {

  for (let i = 0; i < trackers.length; i++) {

    trackers[i].click(mouseX, mouseY);

  }

  if (overButton) {

    saveCanvas(c, name, 'jpg');

  }

}

​

// function mouseDragged() {

//   for (let i = 0; i < trackers.length; i++) {

//     trackers[i].draggred(mouseX, mouseY);

//   }

// }

​

// function mouseReleased() {

//   for (let i = 0; i < trackers.length; i++) {

//     trackers[i].release(mouseX, mouseY);

//   }

//   overButton = false;

// }

​