commit f98e5debb16fdbd04742806c484aaa2d1e4e3d4e
parent 7dd66ab6db280af8c2a692c64d783334c3f412f2
Author: Georges Dupéron <jahvascriptmaniac+github@free.fr>
Date: Sat, 21 May 2011 13:56:55 +0200
Éviter de lancer trop souvent le JSS() + affichage du score.
Diffstat:
4 files changed, 99 insertions(+), 31 deletions(-)
diff --git a/code/serveur/php/jeu.php b/code/serveur/php/jeu.php
@@ -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;">
diff --git a/code/serveur/php/ressources/backend.inc b/code/serveur/php/ressources/backend.inc
@@ -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;
diff --git a/code/serveur/php/ressources/my-extensions.js b/code/serveur/php/ressources/my-extensions.js
@@ -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);
diff --git a/code/serveur/php/ressources/pticlic.js b/code/serveur/php/ressources/pticlic.js
@@ -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 = {};
