In this code I use the localStorage
since they are available on all platforms and web.
Using local storage you will get better cross platform compatibility:
- WebStorage (localStorage & sessionStorage)
- IndexedDB
- SQL-Storage
Localstorage is array, but every element can only have string in it (using JSON we can store anything, that is not recursive). It is about 5MB for web. I guess it is limitless for mobile app. SessionStorage is deleted when user close browser and I am not sure how it will do on mobile.
Just a small date validator...
Date.prototype.isValid = function(first_argument) {
if ( Object.prototype.toString.call(this) !== "[object Date]" )
return false;
return !isNaN(this.getTime());
}
The main var declaration among retrieving variables from localStorage
var timeout = null;
var maxlife = 5;
if (undefined === localStorage.life) {
localStorage.life = maxlife;
}
if (undefined === localStorage.date||localStorage.date=="") {
localStorage.date = "";
var date = null;
}else{
var date = new Date(Number(localStorage.date));
if(!date.isValid()){
date = null;
}
}
var timeoutTime = 5 * 60000;
var life = Number(localStorage.life);
Lose life, set date if none exist yet. Set a timeout too and subtract life (& write it into localstorage).
function loseLife() {
if (null === date) {
date = new Date();
localStorage.date = date.getTime();
timeout = setTimeout(function(){addLife()}, timeoutTime);
}
life--;
localStorage.life = life;
lives.innerHTML = life;
console.log(life);
}
Add life, set date new date or reset the date completely. Set a timeout, if needed, and add a life (& write it into localstorage).
function addLife() {
life++;
localStorage.life = life;
if (life < maxlife) {
date = new Date();
localStorage.date = date.getTime();
timeout = setTimeout(function(){addLife()}, timeoutTime);
} else {
date = null;
localStorage.date = "";
}
lives.innerHTML = life;
}
Here you may need to change the hooks for blur (window not visible) and focus (window visible once again). Blur just clear timeout so it don't mess with us.
window.addEventListener('blur', function () {
clearTimeout(timeout);
});
This function check how many time it can subtract our time needed to get life from difference of now and the date we lost a life.
function tillNow(){
if (life < maxlife&&date!=null) {
var d = new Date();
var diff = d - date;
while (diff - timeoutTime > 0) {
diff = diff - timeoutTime;
if (life < maxlife) {
life++;
console.log("add");
}else{
date = null;
localStorage.date = "";
break;
}
}
localStorage.life = life;
if (life < maxlife) {
date = new Date((new Date()).getTime()-diff);
localStorage.date = date.getTime();
timeout = setTimeout(function(){addLife()}, timeoutTime-diff);
}
}
lives.innerHTML = life;
}
Focus just call tillNow()
window.addEventListener('focus', function () {
tillNow();
});
Onload do the same as focus, but fills the div with a value initially...
window.onload=function(){
var lives = document.getElementById("lives");
lives.innerHTML = life;
tillNow();
}
Demo sorry couldn't do jsFiddle of codepen since they don't like local storage. (the demo use 15sec as timer to get new life ;) I am impatient )