From f98e5debb16fdbd04742806c484aaa2d1e4e3d4e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Georges=20Dup=C3=A9ron?= <jahvascriptmaniac+github@free.fr>
Date: Sat, 21 May 2011 13:56:55 +0200
Subject: [PATCH] =?UTF-8?q?=C3=89viter=20de=20lancer=20trop=20souvent=20le?=
 =?UTF-8?q?=20JSS()=20+=20affichage=20du=20score.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 code/serveur/php/jeu.php                     | 29 ++++++------
 code/serveur/php/ressources/backend.inc      |  8 ++--
 code/serveur/php/ressources/my-extensions.js | 46 ++++++++++++++-----
 code/serveur/php/ressources/pticlic.js       | 47 ++++++++++++++++++--
 4 files changed, 99 insertions(+), 31 deletions(-)

diff --git a/code/serveur/php/jeu.php b/code/serveur/php/jeu.php
index ee4f791..cf38525 100644
--- 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
index 7ca0038..4e58dbd 100644
--- 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
index dbdfacc..5484687 100644
--- 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
index ea6f51d..7588560 100644
--- 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 = {};