SCA-screen

app.js

(function() {
    function makeImg(url) {
        var result = new Image();
        result.src = url;
        return result;
    }

    var images = [
        makeImg("http://i.imgur.com/nm0PtVD.jpg"),
        makeImg("http://i.imgur.com/uxaHo7Z.jpg"),
        makeImg("http://i.imgur.com/tbcJDnT.jpg"),
        makeImg("http://i.imgur.com/oYxPKjC.jpg"),
        makeImg("http://i.imgur.com/ctU2cGC.jpg"),
        makeImg("http://i.imgur.com/oAfK43d.jpg"),
        makeImg("http://i.imgur.com/NUoOZob.jpg"),
        makeImg("http://i.imgur.com/7OPt8FS.jpg"),
        makeImg("http://i.imgur.com/gEDRK7U.jpg"),
        makeImg("http://i.imgur.com/RrN4K4f.jpg"),
        makeImg("http://i.imgur.com/Vm22tbG.jpg"),
        makeImg("http://i.imgur.com/utshIOI.jpg"),
        makeImg("http://i.imgur.com/pXBd70Y.jpg"),
        makeImg("http://i.imgur.com/uQm0cR9.jpg"),
        makeImg("http://i.imgur.com/FMrtdr1.jpg"),
        makeImg("http://i.imgur.com/HzqYDRG.jpg"),
        makeImg("http://i.imgur.com/0cGHf0W.jpg"),
        makeImg("http://i.imgur.com/4LvXbLs.jpg"),
        makeImg("http://i.imgur.com/RzBbDcr.jpg"),
        makeImg("http://i.imgur.com/w3L549Q.jpg"),
        makeImg("http://i.imgur.com/dyc40Tk.jpg"),
        makeImg("http://i.imgur.com/EtG3SCq.jpg"),
        makeImg("http://i.imgur.com/DxF1905.jpg"),
        makeImg("http://i.imgur.com/JxksF31.jpg")
    ];

    var errImg = makeImg("http://i.imgur.com/umH0CUX.png");
    var treasureImg = makeImg("http://i.imgur.com/vOyocFL.png");

    var app = angular.module("sca-screen", []);

    var ContainerCtrl = function($log, $scope, $http, $element) {
        $scope.numPirates = 3;

        this.showResult = false;
        this.numCoins = 0;

        var ctrl = this;

        this.getTreasure = function() {
            $log.debug("getting treasure for " + $scope.numPirates + " pirates.");
            $scope.done = false;
            $scope.error = false;
            ctrl.showResult = false;
            $scope.$broadcast("map-control.start");
            $http.get("http://pirate.azurewebsites.net/api/Pirate/" + $scope.numPirates)
                .success(function(data, status, headers, config) {
                    $log.debug("got " + data + " coins.");
                    $scope.done = true;
                    ctrl.numCoins = data;
                })
                .error(function(data, status, headers, config) {
                    $log.debug("error: " + status);
                    $scope.done = $scope.error = true;
                });
        };

        this.validate = function() {
            if (!$scope.numPirates || $scope.numPirates < 2) {
                $element.addClass("has-error");
                return false;
            } else {
                $element.removeClass("has-error");
                return true;
            }
        };

        $scope.$on("map-control.done", function(event, args) {
            $log.debug("show results!");
            ctrl.showResult = true;
            $scope.$apply("ctrl.showResult");
        });
    };
    ContainerCtrl.$inject = ["$log", "$scope", "$http", "$element"];
    app.controller("ContainerCtrl", ContainerCtrl);

    app.directive("mapIndicator", ["$log", function($log, $scope) {
        return {
            restrict: "E",
            templateUrl: "map-indicator.html",
            controller: ["$scope", "$element", function($scope, $element) {
                $log.debug("starting map-indicator controller");

                this.mapIndex = 0;
                this.currentImg = images[this.mapIndex];
                this.timerHandle = null;
                this.initialInterval = 200;
                this.hurryInterval = 50;

                var ctrl = this;

                this.startIndicator = function() {
                    var callback = function() {
                        ctrl.mapIndex = (ctrl.mapIndex + 1) % images.length;
                        ctrl.currentImg = images[ctrl.mapIndex];

                        $scope.$apply("map.currentImg");
                        return ctrl.mapIndex == images.length - 1;
                    }

                    var internalCallback = function(interval) {
                        return function() {
                            if ($scope.done) {
                                $log.debug("stop animation...")
                                if ($scope.error) {
                                    $log.debug("error!");
                                    clearTimeout(ctrl.timerHandle);
                                    ctrl.showError();
                                    return;
                                } else {
                                    $log.debug("no error, make it faster.");
                                    interval = ctrl.hurryInterval;
                                }
                            }

                            ctrl.timerHandle = setTimeout(internalCallback, interval);
                            if (callback() && $scope.done) {
                                clearTimeout(ctrl.timerHandle);
                                ctrl.showTreasure();
                            }
                        }
                    }(ctrl.initialInterval);

                    ctrl.timerHandle = setTimeout(internalCallback, ctrl.initalInterval);
                };

                this.resetIndicator = function() {
                    clearTimeout(ctrl.timerHandle);
                    $log.debug("stopping indicator");
                    ctrl.mapIndex = 0;
                    $scope.currentImg = images[ctrl.mapIndex];
                };

                this.showTreasure = function() {
                    var $img = $("img", $element);
                    $img.fadeOut(function() {
                        $img.attr("src", treasureImg.src);
                        $img.fadeIn();
                    });
                    $scope.$emit("map-control.done");
                }

                this.showError = function() {
                    var $img = $("img", $element);
                    $img.fadeOut(function() {
                        $img.attr("src", errImg.src);
                        $img.fadeIn();
                    });
                    $scope.$emit("map-control.error");
                };

                $scope.$on("map-control.start", function(event, args) {
                    if (ctrl.timerHandle) {
                        ctrl.resetIndicator();
                    }

                    ctrl.startIndicator();
                });
            }],
            controllerAs: "map",
            link: function(scope, element, attrs, ctrl) {
                $log.debug("link function");
            }
        };
    }]);
})();

index.html

<!DOCTYPE html>
<html ng-app="sca-screen">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js" defer></script>
  <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" defer></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js" defer></script>
  <script type="text/javascript" src="app.js" defer></script>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/>
  <!-- <link rel="stylesheet" type="text/css" href="https://rawgit.com/aggieben/1362a75f6334e1e2e20a/raw/styles.css" -->
  <link rel="stylesheet" type="text/css" href="styles.css"/>
  <body>
    <div class="container" ng-controller="ContainerCtrl as ctrl">
      <div class="page-header">
        <h1 title="Shave his belly with a rusty razor!">What do you do with a drunken sailor???</h1>
      </div>
      <p class="lead" >
        <label for="num-pirates">&#x2116; Pirates</label>
        <input name="num-pirates" type="number" min="2" class="form-control" step="1.0" ng-model="numPirates" required  />
        <button class="btn btn-default" ng-click="ctrl.validate() && ctrl.getTreasure()">Get the Treasure!</button>
      </p>
      <div class="row messages">
          <p ng-show="ctrl.showResult">
              In order to always have 1 coin left over when dividing the booty, the pirates had to get at least <strong>{{ctrl.numCoins}} coins!</strong>
          </p>
      </div>
      <div class="row">
          <map-indicator></map-indicator>
      </div>
    </div>
    <footer class="footer">
      <div class="container">
        <p class="text-muted">
          Thrown together in a rush by <a href="https://github.com/aggieben">aggieben</a> (a.k.a. <a href="https://linkedin.com/in/bcollins">Ben Collins</a>).
        </p>
      </div>
    </footer>
  </body>
</html>

map-indicator.html

<img ng-src="{{map.currentImg.src}}"/>

styles.css

html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #f5f5f5;
}

.lead {
    width: 80%;
    margin: 0 auto;
}

.lead input {
    width: 150px;
    display: inline-block;
}

.row {
    width: 100%;
    margin: 40px auto 0 auto;
}

.row.messages {
    height: 50px;
}