display: block;

}

padding-top: .5rem;

}

font-size: .85rem;

}

margin-right: .5rem;

}

background-color: black;

border: 1px solid white

}

margin-left: 1.25rem;

}

padding-top: 1.25rem;

margin-right: 1.25rem;

margin-left: 1.25rem;

text-align: center;

}

text-align: center;

}

import { dijkstra, aStarManhattan, aStarDiagonal, aStarEuclidean, depthFirstSearch, breadthFirstSearch, getNodesInShortestPathOrder } from "./graph_components/graphAlgorithms";

import { recursiveDivision, randomMaze, randomWeightedMaze, prims, dfsMaze, binaryTreeMaze, terrainMap, fileReaderTerrain } from "./graph_components/mazeAlgorithms";

import {Node} from './graph_components/Node';

import Webcam from "react-webcam";

let nodeSize = 1.6;

let prevTimeout = 0;

let mouseButton = -1;

[endRow, endCol] = [grid.length-3, grid[0].length-3];

resetGrid();

})

resizeGrid();

window.addEventListener('resize', resizeGrid);

document.addEventListener("mousedown", handleMouseDown);

resetGrid();

const walls = mazeFunction(grid);

const wallsPerIteration = delay > 2 ? 1 : Math.ceil(2 / delay);

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

<input type="file" onChange={(e) => {fileReaderTerrain(grid, readImageInput(e)).then(walls => generateMaze(() => walls)).catch((err) => {console.log(err)})}} accept=".jpg, .jpeg, .png"/>

<i className="far fa-image fa-sm"></i>Image Terrain

</li></label>

<li type="button" data-bs-toggle="modal" data-bs-target="#modal" onClick={()=>{setWebcamState(true)}}><i className="fas fa-camera fa-sm"></i>Webcam Terrain</li>

</ul>

</div>

animationSpeed = parseInt(e.target.value);

}} />

</div>

</div>

{/* Graph Algorithm Grid */}

</div>

{/* Tutorial Popup Window */}

<div className="modal-content camera-modal">

<div className="modal-header">

<h5 className="col-12 modal-title text-white" id="modal-label"><b>Tutorial - {

(tutorialPage == 1) ? 'Graph Algorithms'

: (tutorialPage == 2) ? 'Weighted/Unweighted'

: (tutorialPage == 2) ? <p>All of the algorithms on this application are adapted for a 2D grid, movement through a node has a "cost" of 1. Different weights can be added by utilizing the Wall Weight Slider under the options menu. Weighted algorithms will take into consideration of these different weights on the grid whereas unweighted algorithms will ignore them entirely.</p>

: (tutorialPage == 3) ? <p>You can generate a maze using the algorithms within the maze dropdown. Weighted mazes are referred to as terrains. These can be created via image upload, webcam picture, or created within the application.</p>

: <p>The option menu allows the user to adapt the grid to their liking. This includes features such as setting wall weights, adjusting the grid size, and changing the animation speed.</p>

}</div>

<div className="modal-footer">

{(tutorialPage == 1) ? <button className="btn btn-outline-light" id="skip-button" data-bs-dismiss="modal">Skip</button> : ''}