JSFiddle - React, Tailwind, and code Playground
HTML
<div ng-app>
<div ng-controller="IncrementalCtrl">
<h1>Widgets: <span id="widget-count">{{numWidgets | number: 0}}</span></h1>
<button id="produce-widget" ng-click="produceWidget()">Produce Widget</button>
<h2>Store:</h2>
<button id="novice-widgeteer"
ng-click="hireNoviceWidgeteer()"
ng-disabled="noviceWidgeteerCost > numWidgets">Hire Novice Widgeteer - {{noviceWidgeteerCost}}</button>
<button id="master-widgeteer"
ng-click="hireMasterWidgeteer()"
ng-disabled="masterWidgeteerCost > numWidgets">Hire Master Widgeteer - {{masterWidgeteerCost}}</button>
<h2>Coding exercises:</h2>
<ul>
<li>Change the starting costs and see how it affects the game</li>
<li>Add two more levels of widgeteers</li>
<li>Add stats near the top showing widgets per second and the number of widgeteers of each type</li>
<li>Add an upgrades section</li>
<li>Add save/load buttons that use localStorage.setItem() and localStorage.getItem()</li>
<li>Check the Bootstrap 3 checkbox in the upper left and change the <button> elements to use <div class="btn btn-primary"> instead</li>
</ul>
</div>
</div>
JavaScript
function IncrementalCtrl($scope, $interval) {
// Basic variable declaration - keep track of how many of each
// item we currently own, and how much the new ones should cost.
$scope.numWidgets = 0;
$scope.numNoviceWidgeteers = 0;
$scope.numMasterWidgeteers = 0;
$scope.noviceWidgeteerCost = 10;
$scope.masterWidgeteerCost = 25;
// Increase numWidgets every time produce-widget is clicked
$scope.produceWidget = function() {
$scope.numWidgets++;
}
// Same for novice-widgeteer
$scope.hireNoviceWidgeteer = function() {
$scope.numNoviceWidgeteers++;
// Deduct cost
$scope.numWidgets -= $scope.noviceWidgeteerCost;
// Increase cost for the next one, using Math.ceil() to round up
$scope.noviceWidgeteerCost = Math.ceil($scope.noviceWidgeteerCost * 1.1);
}
// Ditto for master-widgeteer... you get the idea
$scope.hireMasterWidgeteer = function() {
$scope.numMasterWidgeteers++;
$scope.numWidgets -= $scope.masterWidgeteerCost;
$scope.masterWidgeteerCost = Math.ceil($scope.masterWidgeteerCost * 1.1);
}
// Run UI update code every 10ms
$interval(function() {
// Novices add 1 per second (1/100 every 10ms)
$scope.numWidgets += ($scope.numNoviceWidgeteers * 1 / 100);
// Masters add 5 per second (5/100 every 10ms)
$scope.numWidgets += ($scope.numMasterWidgeteers * 5 / 100);
}, 10);
}