<!doctype html>
<html ng-app="scorekeep">
  <head>
    <title>Scorekeep</title>
    <meta charset="utf-8"/>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-resource.js"></script>
    <script src="app/scorekeep.js"></script>
    <script src="app/routes.js"></script>
    <script src="app/services.js"></script>
    <script src="app/session-controller.js"></script>
    <script src="app/sessions-controller.js"></script>
    <script src="app/games-controller.js"></script>
    <script src="app/game-controller.js"></script>
    <script src="app/user-controller.js"></script>
    <script src="app/user-collection.js"></script>
    <script src="app/session-collection.js"></script>
    <script src="app/game-collection.js"></script>
    <script src="app/main-controller.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/css/tether.css"/>
    <link rel="stylesheet" href="css/scorekeep.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
      <script>
    function showhide(div) {
     if ( document.getElementById(div).style.display == 'block') {
          document.getElementById(div).style.display = 'none';
        }
        else {
          document.getElementById(div).style.display = 'block';
        }
     }
  </script>
  </head>

  <body>
    <div class="site-wrapper">
      <div class="site-wrapper-inner">
        <div class="cover-container">
          <div class="masthead clearfix">
            <div class="inner">
              <h3 class="masthead-brand"><a href="#/" id="scorekeep-anchor">Scorekeep</a></h3>
              <nav class="nav nav-masthead">
                <a class="nav-link" href='#/' onclick="showhide('instructions');return false;">Instructions</a>
                <a class="nav-link" target="blank" href="https://aws.amazon.com/ecs/">Powered by AWS's EC2 Launch Type via Elastic Container Service</a>
              </nav>
            </div>
          </div>
          <div class="inner cover" id="instructions">
            <h3 class="cover-heading">Using the web app</h1>
            <p>Use the form below to create a user and session. When you click <b>Create</b>, the web app calls the Scorekeep API to create a user and a session, and joins the session lobby. If you don't enter a username, Scorekeep calls a separate web API to generate a random name.</p>
            <p>To create and join a second user to the session, open the web app in a second tab, enter the session ID shown in the lobby, and click <b>Join</b>.</p>
            <p>In the session lobby, enter a game name, and set the rules to <b>Tic Tac Toe</b>. Click <b>Create</b> to create a game. Open the networking tab in your browser's developer tools to see the calls that the web app makes to the API to keep the list of games up-to-date.</p>
            <p>Choose <b>Play</b> with each user to start the game.</p>
          </div>
          <div ng-view></div>
        </div>
      </div>
    </div>
  </body>
</html>