2. Creating the Web Application only with Client side Code - lynnaloo/fireball GitHub Wiki
Edit fireball.html
and replace with this code (substituting your dragon name for "Fireball"):
<head>
<title>Fireball</title>
</head>
<body>
<div>
<h1>Feed the Dragon</h1>
{{> feed}}
{{> reset}}
</div>
</body>
<template name="reset">
<button>Reset Game</button>
</template>
<template name="feed">
<p>Fireball has {{counter}} pieces of dragon food left.</p>
<p>{{mood}}</p>
<button>Feed Fireball</button>
</template>
Edit fireball.js
and replace with the following code:
if (Meteor.isClient) {
Session.setDefault("counter", 10);
var timer = null;
/**
Sets the counter and start the game timer.
*/
var start = function () {
Session.set("counter", 10);
var timer = Meteor.setInterval(function () {
// every 10 seconds (10 * 1000), subtract 1 from the counter
var currentCounter = Session.get("counter");
if (currentCounter > 0) {
Session.set("counter", currentCounter - 1);
} else {
Meteor.clearInterval(timer);
alert("Game over!");
}
}, 10 * 1000);
}
// execute the start function
start();
Template.feed.helpers({
counter: function () {
return Session.get("counter");
},
mood: function () {
var food = Session.get("counter");
if (food === 0) {
return "Your dragon has run away!";
}
var mood = "The dragon is ";
if (food <= 3) {
return mood + "angry.";
} else if (food <= 5) {
return mood + "hungry.";
} else if (food === 20) {
return mood + "full.";
} else {
return mood + "content.";
}
}
});
Template.feed.events({
'click button': function () {
// increment the counter when button is clicked
var currentCounter = Session.get("counter");
if (currentCounter > 0 && currentCounter < 20) {
Session.set("counter", currentCounter + 1);
}
}
});
Template.reset.events({
'click button': function () {
Meteor.clearInterval(timer);
start();
}
});
}