let imgFlipped;

let textOffset = 70;

let state = 0;

let game;

let message;

let address;

const messageTimer = 5000; // second gap between addresses

​

let addresses = [];

​

const directions = ['North', 'South', 'East', 'West'];

const streetDirections = ['Sutton', 'Muirfield', 'Madison', 'Hendrie', 'Cavanaugh', 'Pembroke', 'Country', 'Lincoln', 'Frances', 'Holmberg', 'Haverhill', 'Cranbrook', 'Maple', 'Woodward', 'Church', 'Liberty', 'Hill', 'Langdon', 'Walnut', 'State', 'Johnson', 'Michigan', 'Pennsylvania'];

const streets = ['Avenue', 'Street', 'Road', 'Boulevard', 'Drive', 'Way', 'Place', 'Park', 'Lake'];

​

const instructions = [

  'Remember the following addresses using only your hands.',

  'Each address will appear for 5 seconds.Try to see if you can \nassociate each address with features of your hands or body.',

  'You\'re encouraged to use notecards or paper, but do not write \nthe address down'

]

​

class Address {

  constructor(x, y, w, h) {

    let streetNum = Math.round(random(0, 100));

    let direction = directions[Math.floor(Math.random() * directions.length)];

    let street = streets[Math.floor(Math.random() * streets.length)];

    let streetDirection = streetDirections[Math.floor(Math.random() * streetDirections.length)];

    let title = `${streetNum} ${direction} ${streetDirection} ${street}`;

    address = title;

  }

}

​

const showAddresses = function() {

  let newAddress = new Address(20, 20, 300, 100);

  addresses.push(newAddress);

​

  if (state === 7) {

    return

  }

  setTimeout(function() {

    state++;

    showAddresses();

  }, messageTimer);

}

​

class Game {

  nextState() {

    state += 1;

    if (state > 3) {

      state = 3;

    }

    if (state === 3) {

      showAddresses();

    }

  }

}

​

function preload() {

  img = loadImage('hand.png');

  imgFlipped = loadImage('hand_flipped.png');

}

​

function setup() {

  createCanvas(600, 600);

​

  game = new Game();

}

​

function draw() {

  background('#f2f2f2');

  fill('purple');

  textSize(25);

  text('KAYTEK', 25, 50);

  if (state < 2) {

    button = createButton("Next");

    button.style("background-color", "orange");

  } else {

    if (state > 7) {

    }

    button = createButton("Play");

    button.style("background-color", "green");

  }

​

  button.mousePressed(game.nextState);

  button.position(250, 250);

  button.size(100, 50);

  button.style("font-family", "Helvetica");

  button.style("color", "white");

​

  image(img, 0, 340, 300, 300);

  image(imgFlipped, 300, 340, 300, 300);

  noStroke();

  fill(120, 120, 120)

  textSize(15)

  if (state < 2) {

    text(instructions[state], 100, 200)

  } else {

    if (state >= 7) {

      text('Try to recall the addresses now!\nGood luck!', 200, 200);

      return;

    }

    text('\t\tRemember as many of the \nabove addresses as you can by\n\t\t using your hands or body.', 200, 200);

    let x = 175;

    let y = 20;

    let w = 250;

    let h = 50;

    if (address) {

      stroke('black');

      fill('purple');

      rect(x, y, w, h);

      fill('white');

      noStroke();

      textSize(13);

      text(address, x + (w / 2) - textOffset, y + (h / 2) + 5);

      fill(0);

      textSize(20);

      text(`${state - 2} / 5`, 275, 125)

    }

  }

​

}