GridWorld/index.html

<!DOCTYPE html><html><head>
    <script src="p5.min.js"></script>
    <script src="p5.dom.min.js"></script>
    <script src="p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    <meta charset="utf-8">

  </head>
  <body>
    <div class="my-4 row align-items-center justify-content-center">
      <div class="text-center">
        <button id="default_btn" type="button" class="btn btn-light">Default</button>
        <button id="brick_btn" type="button" class="btn btn-dark">Brick</button>
        <button id="reward_btn" type="button" class="btn btn-primary">Reward</button>
        <div class="slidecontainer">
            <label for="speed_slider">Gamma</label>
            <input type="range" min="1" max="999" value="900" class="slider slider-horizontal" id="gamma_range_slider">
            <label for="myRange" id="gamma_label"></label>
        </div>
        <div class="slidecontainer">
            <label for="speed_slider">Speed</label>
            <input type="range" min="0" max="1000" value="500" class="slider slider-horizontal" id="speed_slider">
            <label for="speed_slider" id="speed_label"></label>
        </div>
        <div class="slidecontainer">
            <label for="reward_slider">Reward</label>
            <input type="range" min="-100" max="100" value="1" class="slider slider-horizontal"  id="reward_slider">
            <label for="reward_slider" id="reward_label"></label>
        </div>
        <div id="sketch-holder">

        </div>
        <button id="reset_btn" type="button" class="btn btn-info" data-toggle="button" aria-pressed="false" autocomplete="off">Reset</button>
        <button id="toggle_value_iteration_btn" type="button" class="btn btn-info" data-toggle="button" aria-pressed="false" autocomplete="off"> Toggle Value Iteration</button>
        <button id="toggle_policy_iteration_btn" type="button" class="btn btn-info" data-toggle="button" aria-pressed="false" autocomplete="off"> Toggle Policy Iteration</button>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
    <script src="setup.js"></script>
    <script src="gridWorld.js"></script>
    <script src="state.js"></script>
    <script src="mdpsolver.js"></script>
    <script src="sketch.js"></script>

</body></html>