Incremental Game in AngularJS

by kevmus

HTML

<body ng-app="incremental" ng-controller="IncCtrl">
<script type="text/ng-template" id="item_renderer.html">
        <div ng-repeat="item in children[item]" ng-include="'field_renderer.html'"></li>
</script>

    <hr>
    <h1>Cookies: {{cookies}}</h1>
  
  <div class="rTable">
        <div class="rTableCell" ng-repeat="parent in children['root']">
          <button ng-click="click(parent, 'root')">{{parent}} {{getItems(parent)}}</button>
          <button ng-click="buyClicker(parent)">{{clickerPriceStr(parent)}}</button>
                <div class="rTableCell" ng-repeat="item in children[parent]">
                  <button ng-click="click(item, parent)">{{item}} {{getItems(item)}}</button>
                  <button ng-click="buyClicker(item, getFirstChild(item)')" >Buy {{item}} miner 
                  </button>
                      </div>
                    </div>
                  </div>
</body>

CSS

.rTable {
  display: table;
  width: 100%;
}


.rTableHeading {
  display: table-header-group;
  background-color: #ddd;
}

.rTableCell,
.rTableHead {
  display: table-cell;
  padding: 3px 10px;
  border: 1px solid #dddddd;
}

.rTableHeading {
  display: table-header-group;
  background-color: #ddd;
  font-weight: bold;
}

.rTableFoot {
  display: table-footer-group;
  font-weight: bold;
  background-color: #ddd;
}

JavaScript

angular.module('incremental', [])
  .controller('IncCtrl', ['$scope', '$document', '$interval', function($scope, $document, $interval) {
    $scope.itemList = ['root', 'tin', 'copper', 'bronze', 'iron']
    $scope.children = {}
    $scope.children['root'] = ['tin', 'copper'];
    $scope.children['tin'] = ['bronze']
    $scope.children['bronze'] = ['iron']
    $scope.items = {};
    
    $scope.cookies = 87;
    $scope.init = false;
    $scope.clickers = {};
    console.log('uhm???');
    $scope.click = function(item) {
      console.log(item + " was clicked");
      $scope.items[item] = getItems(item) + 1;
    }
$scope.getFirstChild = function(child){
return (children[child] || ['none'])[0] || 'none';
}
  $scope.zts = function(z){
    z=z||''
  	if(z == '0'){
    	return '';
    }
    return z;
  }
	$scope.getItems = function(item) {
  	return ($scope.items[item] || 0);
  }
  $scope.clickerPriceStr=function(item) {
    var price = $scope.clickerPrice(item);
    if(price == 0) {
    	return '';
    } 
    return '(cost ' + price + ' ' + item+')'
  }
    $scope.clickerPrice = function(item) {
      return (10 * Math.pow(1.1, $scope.clickers[item] || 0)).toFixed();
    }
		$scope.clickerPrice2 = function(item, parent) {
    if(parent=='root') {
      return 0;
    }
    var p = (10 * (Math.pow(1.1, $scope.clickers[item] || 0)).toFixed());
     if ($scope.getFirstChild(item) != 'none' ) {
      return ' + '+ (Math.pow(1.1, $scope.clickers[parent] || 0).toFixed());
      }
      return p;
    }
    $scope.clickerPrice2Str = function(price) {
    if (price == 0) {
    	return '';
    }
    	return "+ " + price;;
    }
    $scope.buyClicker = function(item) {
      if ($scope.items[item] >= $scope.clickerPrice(item)) {
        $scope.items[item] -= $scope.clickerPrice(item);
        $scope.clickers[item] = ($scope.clickers[item] || 0) + 1;
      }
    } 

    function update() {
      console.log('updates')

      for (item in $scope.clickers) {
       ...