​

function preload(){

  logo = loadImage('Logo.JPG');

}

​

function setup() {

  createCanvas(400, 400);

  codeInput = createInput('Enter Code');

  codeInput.style('font-size', '20px');

  codeInput.position(90, 160);

  submitButton = createButton('Submit');

  submitButton.style('font-size', '20px');

  submitButton.position(160, 215);

}

​

function draw() {

  if(state === 'login'){

    loginScreen();

  }

  if(state === 'home'){

    homeScreen();

  }

}

​

function setName(){

  if(codeInput.value() === 'Ahnv06'){

    playerName = 'Abhinav';

    col = '#30D5C8';

    errVisible = false;

    state = 'home';

  }

  if(codeInput.value() === 'Ysvrhn09'){

    playerName = 'Yash';

    col = '#007FFF';

    errVisible = false;

    state = 'home';

  }

  if(codeInput.value() === 'Nkieh07'){

    playerName = 'Nikhilesh';   

    col = '#FF0000';

    errVisible = false;

    state = 'home';

  }

  if(codeInput.value() === 'Vnhn08'){

    playerName = 'Vendhan';

    col = 'white';

    errVisible = false;

    state = 'home';

  }

  if(codeInput.value() !== 'Ahnv06' && codeInput.value() !== 'Ysvrhn09' && codeInput.value() !== 'Nkieh07' && codeInput.value() !== 'Vnhn08'){

    errVisible = true;

  }

}

​

function loginScreen(){

  background(40);

  submitButton.mousePressed(setName);

  if(errVisible === true){

    fill('red'); 

    textAlign(CENTER);

    textSize(25);

    text('Please enter the correct code!', 200, 300);

  }

  image(logo, 0,0,400,65);

  image(logo, 0,335,400,65);

}

​

function homeScreen(){

  background(col);

  codeInput.hide();

  submitButton.hide();

}