Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head>
    <meta name="description" content="Connect 4 - UI" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://documentcloud.github.io/underscore/underscore-min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script type='text/javascript' src='https://cdn.firebase.com/v0/firebase.js'></script>
    <meta charset=utf-8 />
    <title>Connect Four AI</title>
  </head>
  <body ng-app="ConnectFourApp">
    <div ng-controller="AppCtrl" class="container">
      <div class="row">
        <div class="col-md-12 stats">
          <div ng-show="debugMode">
            Best Score: {{bestScore}}<br/>
            Depth: {{depth}}
          </div>
          <div class="connectfour" ng-show="!playing"><a href="http://en.wikipedia.org/wiki/Connect_Four" target="_blank">Connect Four</a></div>
          <div class="total">
            <span class="glyphicon glyphicon-chevron-right zippy-icon zippy-right-icon" ng-show="collapsed" ng-click="toggleStats()"></span>
            <span class="glyphicon glyphicon-chevron-down zippy-icon zippy-down-icon" ng-hide="collapsed" ng-click="toggleStats()"></span>
            <span class="zippy-title" ng-click="toggleStats()">{{total}} {{(total==1) && 'game' || 'games'}} played</stats>
          </div>
          <div class="game-stats" toggle-on="collapsed">
            <table class="table table-bordered">
              <tr>
                <td>COMPUTER</td>
                <td>Win</td>
                <td>Draw</td>
                <td>Loss</td>
              </tr>
              <tr ng-repeat="row in stats">
                <td>plays {{$index && 'second' || 'first'}}</td>
                <td ng-repeat="count in row">{{count}}</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12 main-content">
          <table class="arrows table" ng-show="playing">
            <tr>
              <td ng-repeat="dummy in colRange">
                <span ng-click="humanPlay($index)" ng-show="isValid(1, $index)" class="glyphicon glyphicon-arrow-down arrow-down red-turn"></span>
                <span ng-click="humanPlay($index)" ng-show="isValid(2, $index)" class="glyphicon glyphicon-arrow-down arrow-down yellow-turn"></span>
                <span ng-show="isFull($index)" class="glyphicon glyphicon-arrow-down arrow-down place-holder"></span>
              </td>
            </tr>            
          </table>
          <table class="board table table-bordered">
            <tr ng-repeat="row in board">
              <td ng-repeat="square in row">
                <div class="square-container" ng-class="{lastMove: $parent.$index == lastMove.row && $index == lastMove.col}">
                  <div class="empty player" ng-show="square==0"></div>
                  <div class="red player" ng-show="square==1"></div>
                  <div class="yellow player" ng-show="square==2"></div>
                </div>
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div class="row">        
        <div class="col-md-12 info">
          <div ng-hide="playing">
            <div ng-show="firstPlayer == 1">Computer will play first?</div>
            <div ng-hide="firstPlayer == 1">You will play first?</div>
          </div>
          <div ng-show="playing && !resultMsg">
            <div ng-show="isHumanTurn()">It's your turn to play.</div>
            <div ng-hide="isHumanTurn()">Computer is thinking...</div>
          </div>
          <div ng-show="resultMsg" class="game-result">{{resultMsg}}</div>
        </div>
      </div>
      <div class="row">        
        <div class="col-md-12 actions">
          <div ng-show="playing">
            <button ng-click="newGame()" class="btn btn-success" ng-disabled="computerColor == turn && !resultMsg">New game</button>
            <button ng-click="undo()" class="btn btn-primary" ng-disabled="!undoable()">Undo ({{undoLeft}})</button>
          </div>
          <div ng-hide="playing">
            <button ng-click="startGame()" class="btn btn-success">OK, go</button>
            <button ng-click="switchTurn()" class="btn btn-primary">Switch turn</button>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
js_ninjapro
0viewers