Éviter de lancer trop souvent le JSS() + affichage du score.
This commit is contained in:
Georges Dupéron
parent
7dd66ab6db
commit
f98e5debb1
|
|
@ -27,8 +27,7 @@
|
|||
border: medium solid #4a4; background-color:#f0f8d0; border-radius:0.4em;
|
||||
}
|
||||
.relationBox { border-width: 3px; border-style: solid; border-radius:1em; padding: 0.5em; width: 95%; margin: 0 auto; }
|
||||
.formElement { width:30%; height: 10%; position:absolute; }
|
||||
.fitFont, .subFitFont { overflow:auto; }
|
||||
.formElement { width:46%; height: 10%; position:absolute; }
|
||||
#score { text-align:center; }
|
||||
.marginBox { width: 90%; height: 90%; top: 5%; left:5%; position:absolute; }
|
||||
#message { left:25%; top:5%; width:50%; height:10%; position:absolute; border-radius:0.5em; text-align:center; opacity:0.9; }
|
||||
|
|
@ -107,11 +106,11 @@
|
|||
</a>
|
||||
</div>
|
||||
<div id="score" class="screen">
|
||||
<div class="marginBox fitFont">
|
||||
<h1>Score total : <span class="scoreTotal"></span></h1>
|
||||
<div class="scores"></div>
|
||||
<p style="text-align: center;">
|
||||
<a class="button" href="#">J'ai vu !</a>
|
||||
<div class="marginBox">
|
||||
<h1 class="fitFont" style="width:100%; height:8%; top: 8%; position:absolute; margin:0; text-align:center;">Score total : <span class="scoreTotal"></span></h1>
|
||||
<div class="scores fitFont" style="width:100%; height:60%; top:24%; position:absolute;"></div>
|
||||
<p class="fitFont" style="text-align: center; width:100%; height:12%; top:86%; margin:0; position:absolute;">
|
||||
<a class="button" href="#" style="margin:0;">J'ai vu !</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -151,14 +150,14 @@
|
|||
</div>
|
||||
<div id="connection" class="screen">
|
||||
<form action="#" method="GET" style="width:100%; height:100%;" class="fitFontGroup">
|
||||
<div class="formElement subFitFont" style="right: 55%; top: 25%; text-align:right;"><label id="user-label" for="user">Login : </label></div>
|
||||
<div class="formElement subFitFont" style="left: 55%; top: 25%; text-align:left;"><input type="text" name="user" id="user" class="setFont" /></div>
|
||||
<div class="formElement subFitFont" style="right: 55%; top: 50%; text-align:right;"><label id="passwd-label" for="passwd">Mot de passe : </label></div>
|
||||
<div class="formElement subFitFont" style="left: 55%; top: 50%; text-align:left;"><input type="password" name="passwd" id="passwd" class="setFont" /></div>
|
||||
<div class="formElement subFitFont" style="right: 55%; top: 75%; text-align:right;">
|
||||
<div class="formElement subFitFont" style="right: 52%; top: 25%; text-align:right;"><label id="user-label" for="user">Login : </label></div>
|
||||
<div class="formElement subFitFont" style="left: 52%; top: 25%; text-align:left;"><input type="text" name="user" id="user" class="setFont" /></div>
|
||||
<div class="formElement subFitFont" style="right: 52%; top: 50%; text-align:right;"><label id="passwd-label" for="passwd">Mot de passe : </label></div>
|
||||
<div class="formElement subFitFont" style="left: 52%; top: 50%; text-align:left;"><input type="password" name="passwd" id="passwd" class="setFont" /></div>
|
||||
<div class="formElement subFitFont" style="right: 52%; top: 75%; text-align:right;">
|
||||
<input type="button" value="Retour" class="setFont goFrontpage" />
|
||||
</div>
|
||||
<div class="formElement subFitFont" style="left: 55%; top: 75%; text-align:left;">
|
||||
<div class="formElement subFitFont" style="left: 52%; top: 75%; text-align:left;">
|
||||
<input type="submit" name="connect" id="connect" value="Se connecter" class="setFont" />
|
||||
</div>
|
||||
</form>
|
||||
|
|
@ -170,8 +169,8 @@
|
|||
<input type="radio" id="theme-green" name="theme" value="green" /><label for="theme-green">Colline verdoyante</label><br/>
|
||||
<input type="radio" id="theme-black" name="theme" value="black" /><label for="theme-black">Bas-fond de cachot</label>
|
||||
</fieldset>
|
||||
<div class="formElement subFitFont" style="top:75%; right:55%"><input class="center setFont" type="reset" name="prefs-cancel" id="prefs-cancel" value="Annuler" /></div>
|
||||
<div class="formElement subFitFont" style="top:75%; left:55%"><input class="center setFont" type="submit" name="prefs-apply" id="prefs-apply" value="Appliquer" /></div>
|
||||
<div class="formElement subFitFont" style="top:75%; right:52%"><input class="center setFont" type="reset" name="prefs-cancel" id="prefs-cancel" value="Annuler" /></div>
|
||||
<div class="formElement subFitFont" style="top:75%; left:52%"><input class="center setFont" type="submit" name="prefs-apply" id="prefs-apply" value="Appliquer" /></div>
|
||||
</form>
|
||||
</div>
|
||||
<div id="templates" style="display: none;">
|
||||
|
|
|
|||
|
|
@ -645,11 +645,13 @@ function getGameRelations() {
|
|||
|
||||
function setGameGetScore($user, $pgid, $answers) {
|
||||
$scores = setGame($user, $pgid, getGidFromPgid($user, $pgid), $answers);
|
||||
$scores['words'] = array();
|
||||
$g = game2array($user, $pgid);
|
||||
foreach ($g['cloud'] as $v) {
|
||||
$scores['words'][] = $v['name'];
|
||||
$s = array();
|
||||
foreach ($g['cloud'] as $k => $v) {
|
||||
$s[] = array('name' => $v['name'], 'score' => $scores['scores'][$k]);
|
||||
}
|
||||
$scores['scores'] = $s;
|
||||
$scores['author'] = $g['author'];
|
||||
// On renvoie une nouvelle partie pour garder le client toujours bien alimenté.
|
||||
$scores['newGame'] = game2array($user);
|
||||
$scores['minScore'] = -5;
|
||||
|
|
|
|||
|
|
@ -49,12 +49,14 @@ $.fn.hasScroll = function() {
|
|||
$.fn.fitFont = function() {
|
||||
try {
|
||||
var that = this;
|
||||
this.css({overflow: 'auto'});
|
||||
var setFont = this.find('.setFont').andSelf();
|
||||
this.find('.center').css({top:0, left:0}); // Petit hack pour que ça ne déborde pas à cause de l'offset mis par .center().
|
||||
var size = dichotomy(parseInt(this.css("font-size"), 10), function(x) {
|
||||
setFont.css("fontSize", x);
|
||||
return that.$ormap(function(i,e) { return e.hasScroll(); });
|
||||
});
|
||||
this.css({overflow: 'hidden'});
|
||||
this.css("font-size", Math.max(0, size));
|
||||
return this;
|
||||
} catch(e) {alert("Error $.fn.fitFont");alert(e);throw(e);}
|
||||
|
|
@ -80,7 +82,7 @@ function queueize(method) {
|
|||
try {
|
||||
return function() {
|
||||
var $this = this;
|
||||
var args = arguments;
|
||||
var args = Array.prototype.slice.call(arguments); // cast Arguments → Array
|
||||
return this.queue(function(next) {
|
||||
$this[method].apply($this,args);
|
||||
next();
|
||||
|
|
@ -167,6 +169,30 @@ $.fn.goodBad = function(min, max, startcolor, endcolor) {
|
|||
return this;
|
||||
};
|
||||
|
||||
$.debounce = function debounce(fn, interval) {
|
||||
var wait = false;
|
||||
var delayedFn = false;
|
||||
interval = interval || 200;
|
||||
return function() {
|
||||
var that = this;
|
||||
var args = Array.prototype.slice.call(arguments); // cast Arguments → Array
|
||||
delayedFn = function() { delayedFn = false; fn.apply(that, args); }
|
||||
if (!wait) {
|
||||
wait = true;
|
||||
delayedFn();
|
||||
var loop = function() {
|
||||
if (delayedFn) {
|
||||
delayedFn();
|
||||
window.setTimeout(loop, interval);
|
||||
} else {
|
||||
wait = false;
|
||||
}
|
||||
}
|
||||
window.setTimeout(loop, interval);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
/** Zoom from small center of startElem to big center of endElem, or do the reverse animation (from big end to small start). */
|
||||
$.fn.zoom = function(startElem, endElem, reverse) {
|
||||
var that = this;
|
||||
|
|
@ -180,18 +206,18 @@ $.fn.zoom = function(startElem, endElem, reverse) {
|
|||
var endbox = $('<div style="text-align:center;"/>').appendTo('body').wh(endElem.wh());
|
||||
that.appendTo(endbox);
|
||||
that.css({position:'', top:'', left:''});
|
||||
that = endbox;
|
||||
that.fitFont();
|
||||
var BFontSize = that.css('fontSize');
|
||||
var APos = that.css('fontSize', 0).center(startElem.center()).offset();
|
||||
var BPos = that.css('fontSize', BFontSize).center(endElem.center()).offset();
|
||||
var A = function() { that.css('fontSize', 0).offset(APos); };
|
||||
var B = function() { that.css('fontSize', BFontSize).offset(BPos); };
|
||||
endbox.fitFont();
|
||||
var BFontSize = endbox.css('fontSize');
|
||||
var APos = endbox.css('fontSize', 0).center(startElem.center()).offset();
|
||||
var BPos = endbox.css('fontSize', BFontSize).center(endElem.center()).offset();
|
||||
var A = function() { endbox.css('fontSize', 0).offset(APos); };
|
||||
var B = function() { endbox.css('fontSize', BFontSize).offset(BPos); };
|
||||
(reverse ? B : A)();
|
||||
window.setTimeout(function() {
|
||||
that.addClass('transition'); // enable animations
|
||||
endbox.addClass('transition'); // enable animations
|
||||
(reverse ? A : B)();
|
||||
if (reverse) that.delay(700).qRemove()
|
||||
endbox.delay(700).qRemoveClass('transition');
|
||||
if (reverse) endbox.qRemove();
|
||||
next();
|
||||
}, 0);
|
||||
}, 0);
|
||||
|
|
|
|||
|
|
@ -23,17 +23,24 @@ function init(fn) {
|
|||
|
||||
// ==== Code métier général
|
||||
$(function() {
|
||||
var lastWinSize = $(window).wh();
|
||||
$(window).dequeue('init');
|
||||
$(window).resize(jss);
|
||||
$(window).resize($.debounce(function resizeJSS() {
|
||||
if (lastWinSize.width != $(window).width() || lastWinSize.height != $(window).height()) {
|
||||
lastWinSize = $(window).wh();
|
||||
hashchange();
|
||||
}
|
||||
}));
|
||||
$(window).hashchange(hashchange);
|
||||
hashchange();
|
||||
jss();
|
||||
runstate.loaded = true;
|
||||
});
|
||||
|
||||
// ==== Nouveau jss
|
||||
function jss() {
|
||||
try {
|
||||
if (jss.running) return;
|
||||
jss.running = true;
|
||||
if ($("#splash img").is(':visible')) {
|
||||
var ratio = Math.min($('#splash').width() / 320, $('#splash').height() / 480);
|
||||
$('#splash.screen img')
|
||||
|
|
@ -64,6 +71,10 @@ function jss() {
|
|||
$('.fitFont:visible').$each(function(i,e) { e.fitFont(); });
|
||||
$('.fitFontGroup:visible').each(function(i,e) { $(e).find('.subFitFont').fitFont(); });
|
||||
$('.center:visible').$each(function(i,e) { e.center(e.parent().center()); });
|
||||
if ($('#game.screen').is(':visible')) {
|
||||
$('#game.screen').trigger('update');
|
||||
}
|
||||
jss.running = false;
|
||||
} catch(e) {alert("Error jss");alert(e);}
|
||||
}
|
||||
|
||||
|
|
@ -86,9 +97,12 @@ init(function() {
|
|||
|
||||
$('.screen').live('enter', function() {
|
||||
$(this).show();
|
||||
jss();
|
||||
$(this).trigger('update');
|
||||
});
|
||||
|
||||
$('.screen').live('update', function() {
|
||||
jss();
|
||||
});
|
||||
|
||||
$('.screen').live('leave', function() {
|
||||
$(this).hide();
|
||||
|
|
@ -226,7 +240,10 @@ init(function() {
|
|||
$("#game .mc").text(game.center.name);
|
||||
});
|
||||
|
||||
var updating = false;
|
||||
game.bind('update', function() {
|
||||
if (updating) return false;
|
||||
updating = true;
|
||||
if (!runstate.game || state.pgid != runstate.game.pgid) {
|
||||
$('#game').trigger('goto');
|
||||
return;
|
||||
|
|
@ -258,6 +275,9 @@ init(function() {
|
|||
window.setTimeout(function() {
|
||||
$('.relationBox.hot').addClass('transition-bg').removeClass('hot').delay(700).qRemoveClass('transition-bg');
|
||||
}, 0);
|
||||
|
||||
updating = false;
|
||||
return false;
|
||||
});
|
||||
|
||||
game.bind('leave', function() {
|
||||
|
|
@ -300,6 +320,27 @@ init(function() {
|
|||
});
|
||||
return false;
|
||||
});
|
||||
score.bind('enter', function() {
|
||||
var s = runstate.score;
|
||||
$("#score .scores").empty();
|
||||
$("#score .scoreTotal")
|
||||
.text(s.scoreTotal)
|
||||
.goodBad(s.minScore*s.scores.length, s.maxScore*s.scores.length, {r:255,g:0,b:0}, {r:0,g:192,b:0});
|
||||
$.each(s.scores, function(i,e) {
|
||||
try {
|
||||
$("#templates .scoreLine")
|
||||
.clone()
|
||||
.find(".word")
|
||||
.text(e.name)
|
||||
.end()
|
||||
.find(".score")
|
||||
.text(e.score)
|
||||
.goodBad(s.minScore, s.maxScore, {r:255,g:0,b:0}, {r:0,g:192,b:0})
|
||||
.end()
|
||||
.appendTo("#score .scores");
|
||||
} catch(e) {alert("Error anonymous 1 in score.ui");alert(e);}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
game = {};
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user