index.html

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link
      href="https://fonts.googleapis.com/css?family=Lato&display=swap"
      rel="stylesheet"
    />
    <title>Checkers</title>

    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>

  <body>
    <div id="boardContainer">
      <div id="board"></div>
      <div class="infoContainer">
        <h1 class="headline">Checkers</h1>
        <h2>Scoreboard</h2>
        <h3>Red :<span id="redScore">12</span></h3>
        <h3>Black :<span id="blackScore">12</span></h3>
        <span id="player"></span>
        <p>Set up controls and start</p>
        <div class="buttons">
          <button id="start" onclick="g.start()">Start</button>
          <button id="reset" onclick="g.restart()">Reset</button>
          <button id="ai" onclick="g.aiMove()">
            Do Single AI
          </button>
          <button id="toggleAI" onclick="g.toggleAI()">Toggle AI</button>
          
        </div>
        <div class="buttons">
            <button  id="startIteration" onclick="g.startIteration()">Start Iteration</button>
            <button  id="stopIteration" onclick="g.stopIteration()">Stop Iteration</button>
        </div>
      </div>
    </div>
    <!-- Library to handle the gui part.-->
    <script src="two.js"></script>
    <!-- Library to handle the controls of the game -->
    <script src="dat.gui.min.js"></script>

    <!-- Project related js files -->
    <script src="Game.js"></script>
    <script src="AI.js"></script>
    <script src="BoardState.js"></script>
    <script src="./Players.js"></script>
    <script>
      var g;
      window.onload = () => {
        g = new Game();
      };

    </script>
  </body>
</html>