Check out the JS Fiddle: https://jsfiddle.net/q6rqk90s/ (Works on server and local computer, but not on JsFiddle.com)
AngularJS CODE
angular.module('RealParkClicker', [])
.controller('ParkController', ParkController)
.directive('messageBox', messageBox);
function ParkController($scope){
$scope.title = 'Real Park Clicker - Manage your park from anywhere!';
$scope.promo = 'Start clicking to buy thrilling rides!';
$scope.parkOwner = "Enter name";
$scope.parkName = "Enter park name";
$scope.parkOpen = true;
$scope.ownedRides = 0;
$scope.totalGuests = 0;
$scope.allTheGuests = 0;
// Rides
$scope.rides = [
{
name: "Merry Go Round",
price: 10,
gpm: 1,
img: 'img/merrygoaround.jpg',
owned: 0
},
{
name: "Swinging Ship",
price: 20,
gpm: 5,
img: 'img/swingingship.jpg',
owned: 0
},
{
name: "Free Fall Tower",
price: 40,
gpm: 10,
img: 'img/freefall.jpg',
owned: 0
},
{
name: "Log Flume",
price: 50,
gpm: 15,
img: 'img/logflume.jpg',
owned: 0
}
];
$scope.changeOwner = changeOwner;
$scope.changeParkName = changeParkName;
$scope.addGuest = addGuest;
$scope.buyRide = buyRide;
$scope.sellRide = sellRide;
$scope.$watch('totalGuests', function(newValue, oldValue){
$scope.totalGuests = newValue;
});
function changeOwner(){
$scope.parkOwner = $scope.newOwner;
$scope.newOwner = '';
}
function changeParkName(){
$scope.parkName = $scope.newParkName;
$scope.newParkName = '';
}
function addGuest(){
$scope.totalGuests++;
$scope.allTheGuests++;
}
function buyRide(index){
if($scope.totalGuests === $scope.rides[index].price || $scope.totalGuests > $scope.rides[index].price ) {
$scope.rides[index].owned +=1;
$scope.totalGuests -= $scope.rides[index].price;
$scope.ownedRides +=1;
var rideGPM = $scope.rides[index].gpm;
setInterval(function(){ generateGuests(rideGPM); }, 3000);
}
}
function sellRide(index){
if($scope.rides[index].owned > 0) {
$scope.rides[index].owned -=1;
$scope.totalGuests += $scope.rides[index].price;
$scope.ownedRides -=1;
}
}
// Generate Guests Function
function generateGuests(number){
var rideGPM = number;
$scope.totalGuests += rideGPM;
}
}
ParkController.$inject = ['$scope'];
function messageBox(){
return {
restrict: 'E',
template: '<div><input ng-model="newMessage"/><button ng-click="sendMessage()">Send</button></div>',
controller: 'ChatController'
};
}
Index.HTML Code
<!doctype html>
<html>
<head>
<link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
<link href='https://fonts.googleapis.com/css?family=Roboto:500,300,700,400' rel='stylesheet' type='text/css'>
<link href="css/main.css" rel="stylesheet" />
<title>Real Park Clicker</title>
<script src="js/angular.min.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="RealParkClicker">
<div ng-controller="ParkController">
<div class="header">
<div class="container">
<h1>Real Park Clicker</h1>
<h2>Park Name: {{parkName}}</h2><br/>
<input ng-model="newParkName"/>
<button ng-click="changeParkName()">Set Park Name</button>
<h3>Park owner: {{parkOwner}}</h3>
<input ng-model="newOwner"/>
<button ng-click="changeOwner()">Set owner</button>
</div>
</div>
<div class="main" ng-controller="ParkController">
<div class="container">
<h2>{{promo}} <button ng-click ="addGuest()">Add 1 Guest</button> {{totalGuests}}</h2>
<div ng-repeat="ride in rides track by $index" class="col-md-6">
<div class="thumbnail">
<img ng-src="{{ride.img}}">
<p class="title">{{ride.name}}</p>
<p class="price">{{ride.price}} Guests</p>
<p class="gpm">This ride generates {{ride.gpm}} guests per second.</p>
<p class="owned"> You own {{ride.owned}} of this ride</p>
<div class="store">
<p class="buy" ng-click="buyRide($index)">Buy</p>
<p class="sell" ng-click="sellRide($index)">Sell</p>
</div>
</div>
</div>
</div>
<center>
<h3>Park Stats</h3>
<ul>
<li>Total owned Rides: {{ownedRides}}</li>
<li>User Generated Guests In Total: {{allTheGuests}}</li>
</ul>
</center>
<div class="footer">
<div class="container">
<h2>Available for iPhone and Android.</h2>
<img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/app-store.png" width="120px" />
<img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/google-play.png" width="110px" />
</div>
</div>
</div>
</body>
</html>
Building a clicker game where users can manage a theme park. Guests increase by clicking "Add 1 Guest", and users can purchase amusement rides using the total number of guests. Each ride generates guests per second. The challenge is updating the guest count automatically without needing user interaction. Tried implementing various methods such as $watch and ng-onchange with no success. Appreciate any guidance!