.skip-button {

margin-left: 1.25rem;

}

// tutorial states

const [tutorialPage, setTutorialPage] = useState(1);

<div className="collapse show settings-menu" id="settings-collapse">

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

(tutorialPage == 1) ? 'Graph Algorithms'

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

: (tutorialPage == 3) ? 'Mazes/Terrain'

: 'Options'

}</b></h5>

<div className="modal-body p-0">{

(tutorialPage == 1) ? <p>Pathfinding is closely related to the shortest path problem, within graph theory, which examines how to identify the path that best meets some criteria (shortest, cheapest, fastest, etc) between two points in a large network. This site is a tool to visualize these different graph pathfinding algorithms to better understand them.</p>

: (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>

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

{(tutorialPage > 1) ? <button className="btn btn-outline-light" id="skip-button" onClick={()=>setTutorialPage(x=>x-1)}>Previous</button> : ''}

{(tutorialPage<4) ? <button className="btn btn-outline-light" id="skip-button" onClick={()=>setTutorialPage(x=>x+1)}>Next</button> : ''}

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