let preloadState = false;

let searchState = false;

let traverseState = false;

let endState = false;

let iceCream;

let obstacle;

let grass; 

let sand;

let water;

const numberOfFrames = 8;

let gifFrames = [];

let mapImages = new Map();

let mapSearches;

const ROWS = 10;

const COLS = 10;

let timeElapsed = 0;

let btns = new Map();

let solutionNotFound = false;

// searchTypes

// 0. None

// 1. BFS

// 2. DFS

// 3. Greedy Search

// 4. Uniform Cost Search

// 5. A* Search

let searchType = 0;

​

let foodEaten = 0;

// sleep fuction to stop execution and make it easier to see the search

function sleep(milliseconds) {

  const date = Date.now();

  let currentDate = null;

  do {

    currentDate = Date.now();

  } while (currentDate - date < milliseconds);

}

​

function preload(){

  iceCream = loadImage('ice-cream.png');  

  obstacle = loadImage('obstacle.png');

  grass = loadImage('grass.png'); 

  sand = loadImage('sand.png');

  water = loadImage('water.jpg');

  mapImages.set(-1, obstacle);

  mapImages.set(1, grass);

  mapImages.set(5, sand);

  mapImages.set(10, water);

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

    let framePath = `pug-${i}.gif`;

    let frameImage = loadImage(framePath);

    gifFrames.push(frameImage);

  }

  soundFormats('mp3');

  bark = loadSound('bark');

}

​

function setup() {

  let canvas = createCanvas(600, 600);

  mapSearches = new Map([

    [0, '-'],

    [1, 'BFS'],

    [2, 'DFS'],

    [3, 'Greedy Search'],

    [4, 'Uniform Cost Search'],

    [5, 'A* Search']

  ]);

  canvas.position(10,30)

  gridMap = new GridMap(iceCream);

  search = null;

  path = null;

  menuPage = new MenuPage();

  preloadState = true;

}

​

function draw() {

  background(220);

  if(preloadState){

    background(0);

    menuPage.draw();

    updateBoard(gridMap.agent.count, foodEaten, searchType, gridMap.agent.timer, gridMap.agent.timer);

    document.getElementById('btn-1').addEventListener("click", () => {

      searchType = 1;

      search = new BFS(gridMap);

      path = new Path(search);

      gridMap.resetTimer();

      preloadState = false;

      searchState = true;

    })

    document.getElementById('btn-2').addEventListener("click", () => {

      searchType = 2;

      search = new DFS(gridMap);

      path = new Path(search);

      gridMap.resetTimer();

      preloadState = false;

      searchState = true;

    })

    document.getElementById('btn-3').addEventListener("click", () => { // 3

      searchType = 3;

      search = new Greedy(gridMap);

      path = new Path(search);

      gridMap.resetTimer();

      preloadState = false;

      searchState = true;

    });

    document.getElementById('btn-4').addEventListener("click", () => { // 4

      searchType = 4;

      search = new UniformCost(gridMap);

      path = new Path(search);

      gridMap.resetTimer();

      preloadState = false;

      searchState = true;

    });

    document.getElementById('btn-5').addEventListener("click", () => { // 5

      searchType = 5;

      search = new AStar(gridMap);

      path = new Path(search);

      gridMap.resetTimer();

      preloadState = false;

      searchState = true;

    });

  }else{

    menuPage.hideSearchBtns();

  }

  // The agent is searching for the food

  if(searchState){

    background(0);

    updateBoard(gridMap.agent.count, foodEaten, searchType, gridMap.agent.timer);

    gridMap.draw();

    search.find();

    path.draw(gridMap.cellWidth, gridMap.cellHeight);

    sleep(50);

    // food is found, trantiton to traverse

    if(search.found){

      gridMap.clearMarkedAndVisited();

      searchState = false;

      traverseState = true;

    }

  }

  // The food is found now the agent needs to reach it

  if(traverseState){

    background(0);

    updateBoard(gridMap.agent.count, foodEaten, searchType, 0);

    gridMap.draw();

    path.draw(gridMap.cellWidth, gridMap.cellHeight);

    gridMap.agent.draw();

    gridMap.agent.definePath(path);

    gridMap.agent.defineTarget();

    gridMap.agent.defineSpeed();

    gridMap.agent.defineDirection();

    gridMap.agent.hasReachedTarget();

    // Reached the food and transition to ending menu

    if(gridMap.agent.hasReachedFood()){

      traverseState = false;

      endState = true;

      foodEaten++;

      bark.play();

    }else if(solutionNotFound){

      gridMap = new GridMap(iceCream);

      traverseState = false;

      preloadState = true;

      solutionNotFound = false;

    }

  }

  if(endState){

    gridMap.draw(false);

    updateBoard(gridMap.agent.count, foodEaten, searchType, 0);    

    menuPage.showMenuButtons();

    document.getElementById('btn-food').addEventListener('click', () => { 

      resetFood();

    });

​

    document.getElementById('btn-restart').addEventListener('click', () => {

      gridMap = new GridMap(iceCream);

      resetFood();

    });

​

    document.getElementById('btn-search').addEventListener('click', () => {

      gridMap = new GridMap(iceCream);

      endState = false;

      preloadState = true;

    });

  }else{

    menuPage.hideMenuButtons();

  }

}

​

function resetFood(){

  gridMap.resetAgent();

  gridMap.agent = new Agent(

    gridMap.agent.i, 

    gridMap.agent.j, 

    gridMap.cellWidth, 

    gridMap.cellHeight

  );

  gridMap.generateNewFood();

  gridMap.clearPrevious();

  gridMap.clearMarkedAndVisited();

  if(searchType == 1){

    search = new BFS(gridMap);

  }

  else if(searchType == 2){

    search = new DFS(gridMap);

  }

  else if(searchType == 3){

    gridMap.resetHeuristics();

    search = new Greedy(gridMap);

  }

  else if(searchType == 4){

    gridMap.resetHeuristics();

    search = new UniformCost(gridMap);

  }

  else if(searchType == 5){

    gridMap.resetHeuristics();

    search = new AStar(gridMap);

  }

​

  path = new Path(search);

  gridMap.clearPrevious();

  endState = false;

  searchState = true;

}

​

function updateBoard(cost, foodEaten, searchType, timer){

  document.getElementById("search-type").innerHTML = mapSearches.get(searchType);

  document.getElementById("path-cost").innerHTML = cost;

  document.getElementById("ice-creams").innerHTML = foodEaten;

  if(searchState) setTimer(timer);

}

​

function setTimer(timer){

    const timeElapsed = round((Date.now() - timer)/1000);

    document.getElementById('timer').innerHTML = `${timeElapsed} seconds`;

}