javiercejudo/javiercejudo.com

<div class="secretary-problem"
     data-ng-controller="SecretaryProblemCtrl"
     data-ng-init="initSecretaryProblem()">
  <p>
    Click on a briefcase to see its content. If you stop and bet on the one with
    the highest amount of money, you win; otherwise you lose.
    <a href="http://en.wikipedia.org/wiki/Secretary_problem">Read more about this game.</a>
  </p>
  <p class="num-items">
    Number of briefcases:
    <a data-ng-href="{{ prefixLink }}/game/3"   data-ng-class="{current: game.n == 3  }">3</a>   ·
    <a data-ng-href="{{ prefixLink }}/game/5"   data-ng-class="{current: game.n == 5  }">5</a>   ·
    <a data-ng-href="{{ prefixLink }}/game/10"  data-ng-class="{current: game.n == 10 }">10</a>  ·
    <a data-ng-href="{{ prefixLink }}/game/15"  data-ng-class="{current: game.n == 15 }">15</a>  ·
    <a data-ng-href="{{ prefixLink }}/game/20"  data-ng-class="{current: game.n == 20 }">20</a>  ·
    <a data-ng-href="{{ prefixLink }}/game/50"  data-ng-class="{current: game.n == 50 }">50</a>  ·
    <a data-ng-href="{{ prefixLink }}/game/100" data-ng-class="{current: game.n == 100}">100</a> ·
    <a data-ng-href="{{ prefixLink }}/game/250" data-ng-class="{current: game.n == 250}">250</a> ·
    <a data-ng-href="{{ prefixLink }}/game/500" data-ng-class="{current: game.n == 500}">500</a>
  </p>
  <p class="visible-xs">
    Find controls at the bottom.
  </p>
  <ul class="list">
    <li class="item" data-ng-repeat="item in game.items track by $index" data-ng-click="generateItemValue($index)"
        data-ng-class="{selected: game.itemSelected == $index,
                        max: isMax($index),
                        current: isCurrent($index),
                        rejected: isRejected($index),
                        'losing-bet': isLosingBet($index),
                        'non-actionable': isRejected($index)}">
      <span class="icon glyphicon glyphicon-briefcase"></span>
      <div data-ng-switch data-on="item">
        <div data-ng-switch-when="-1">
          {{game.unknownValue}}
        </div>
        <div data-ng-switch-default>
          ${{item | number:0}}
        </div>
      </div>
    </li>
  </ul>
  <div>
    <ul class="list-inline">
      <li>
        <span class="btn btn-primary button-select-item" data-ng-click="selectItem(game.lastItemShown)"
              data-ng-class="{disabled: !canSelectItem()}">
          Stop and bet on the current briefcase
        </span>
      </li>
      <li>
        <span class="btn btn-primary button-next-item" data-ng-click="showNext()"
              data-ng-class="{disabled: !canShowNext()}">
          Show next
        </span>
      </li>
      <li>
        <span class="btn btn-danger button-new-game" data-ng-click="initSecretaryProblem()"
              data-ng-class="{disabled: game.itemSelected == -1 && game.numItemsShown == 0}">
          New game
        </span>
      </li>
      <li>
        <span data-ng-switch data-on="game.won" class="result">
          <span data-ng-switch-when="true">You won :)</span>
          <span data-ng-switch-when="false">You lost :(</span>
        </span>
      </li>
    </ul>
  </div>
  <p data-ng-show="game.record.gamesPlayed > 0">
    Your record with {{game.n}} briefcases:
    {{game.record.gamesWon}}/{{game.record.gamesPlayed}}
    ({{100 * game.record.gamesWon / game.record.gamesPlayed | number:2}}%)
     -
    <a href="#" data-ng-click="resetRecord()" data-jc-prevent-default>Reset</a>
  </p>
</div>