JSFiddle - React, Tailwind, and code Playground
Click farmer
by Zonedark
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<div ng-controller="MyCtrl">
You currently have
<div>
<div>
{{Money}} $ (+{{Income}})
</div>
<button ng-click="Money = Money + ClickIncome">
$
</button>
<button ng-click="IncreaseClick()">
Click++ => {{ClickPrice}} $
</button>
<button ng-click="IncreaseIncome()">
Income++ => {{IncomePrice}} $
</button>
</div>
<div class="row">
<div class="Tile">
<div class="TileTitle">
Test
</div>
<div class="TileDesc">
Description
</div>
</div>
</div>
</div>
CSS
.Tile{
border: solid 1px black;
height:100px;
width:100px;
margin-left:20px;
margin-top:20px;
}
.Tile:hover{
background-color:lightgreen;
}
.TileTitle{
text-align:center;
font-weight: bold;
}
.TileDesc{
text-align:center;
}
JavaScript
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', ['$scope', '$interval', function($scope, $interval) {
$scope.name = "Angular";
$scope.Money = 0;
$scope.Income = 0;
$scope.ClickIncome = 1;
$scope.IncomePrice = 50;
$scope.ClickPrice = 50;
//Increase income value
$scope.IncreaseIncome = function() {
if ($scope.Money >= $scope.IncomePrice) {
$scope.Money = $scope.Money - $scope.IncomePrice;
$scope.IncomePrice = $scope.IncomePrice + (Math.floor($scope.IncomePrice / 10));
$scope.Income = $scope.Income + 1;
}
}
//Increase click value
$scope.IncreaseClick = function() {
if ($scope.Money >= $scope.ClickPrice) {
$scope.Money = $scope.Money - $scope.ClickPrice;
$scope.ClickPrice = $scope.ClickPrice + (Math.floor($scope.ClickPrice / 2));
$scope.ClickIncome = $scope.ClickIncome + 1;
}
}
stop = $interval(function() {
$scope.Money = $scope.Money + $scope.Income;
}, 1000);
}]);