commit 4a4550b53e458854de46f674ce70155c63027a93
parent 53dac705376495e1796e8d1178376b2b4f708221
Author: Georges Dupéron <jahvascriptmaniac+github@free.fr>
Date: Fri, 20 May 2011 21:26:04 +0200
Animation du mot du nuage. C'est bô.
Diffstat:
3 files changed, 66 insertions(+), 43 deletions(-)
diff --git a/code/serveur/php/jeu.php b/code/serveur/php/jeu.php
@@ -41,7 +41,7 @@
body, .screen { background-color:#ffffe0; color: black; }
#message { background-color:#f0f8d0; color:black; border:medium solid #4a4; }
#mc-caption { color:#8b4; }
- #mn-caption-box { background-color:#f0f8d0; }
+ #mn-caption-bg { background-color:#f0f8d0; }
.mn-caption { color: #4a4; }
.borderbar { background-color: #4a4; }
.relationBox { background-color:#f0f8d0; border-color: #4a4; }
@@ -52,7 +52,7 @@
body.black, .black .screen { background-color:black; color: white; }
.black #message { background-color:#222; color:white; border:medium solid #ccc; }
.black #mc-caption { color:white; }
- .black #mn-caption-box { background-color:#222; }
+ .black #mn-caption-bg { background-color:#222; }
.black .mn-caption { color: #ccc; }
.black .borderbar { background-color: #ccc; }
.black .relationBox { background-color:#222; border-color: #ccc; }
@@ -70,9 +70,8 @@
<div id="mc-caption" class="mc center">Mot central</div>
</div>
<div class="borderbar" style="height:5%; width:100%; top:52.5%; position:absolute;"></div>
- <div id="mn-caption-box" style="top:57.5%; height:37.5%; width:100%; position:absolute;"></div>
- <div style="width: 90%; height:25%; top:63.75%; left: 5%; position:absolute;" class="fitFont">
- <div class="mn mn-caption center setFont">Mot du nuage</div>
+ <div id="mn-caption-bg" style="top:57.5%; height:37.5%; width:100%; position:absolute;"></div>
+ <div id="mn-caption-box" style="width: 90%; height:25%; top:63.75%; left: 5%; position:absolute;" class="fitFont">
</div>
<div class="borderbar" style="height:5%; width:100%; top:95%; position:absolute;"></div>
</div>
diff --git a/code/serveur/php/ressources/my-extensions.js b/code/serveur/php/ressources/my-extensions.js
@@ -92,6 +92,8 @@ $.fn.qText = queueize("text");
$.fn.wh = function(w, h) {
try {
+ if (isNaN(+w) && w && typeof w.width != 'undefined') { h = w.height; w = w.width; }
+ if (typeof w == 'undefined') return {width: this.width(), height:this.height()};
return this.width(w).height(isNaN(+h) ? w : h);
} catch(e) {alert("Error $.fn.wh");alert(e);}
};
@@ -158,10 +160,37 @@ $.fn.goodBad = function(min, max, startcolor, endcolor) {
return this;
};
-var PtiClic = $({});
-PtiClic.queueJSON = function(url, data, ok, error) {
+/** 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;
+ startElem = $(startElem);
+ endElem = $(endElem);
+ return this.queue(function(next) {
+ if (that.size() == 0) return next();
+ that.removeClass('transition'); // disable animations
+ window.setTimeout(function() {
+ // Calcul de la taille de police pour end().
+ 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); };
+ (reverse ? B : A)();
+ window.setTimeout(function() {
+ that.addClass('transition'); // enable animations
+ (reverse ? A : B)();
+ if (reverse) that.delay(700).qRemove()
+ next();
+ }, 0);
+ }, 0);
+ });
};
-
+
function decodeHash(hash) {
/* hash.match(/^#([a-z]+(\/[0-9]+(\/-?[0-9]+(,-?[0-9]+)*)?)?)?$/) */
hash = hash.substring(1).split('/');
diff --git a/code/serveur/php/ressources/pticlic.js b/code/serveur/php/ressources/pticlic.js
@@ -87,6 +87,7 @@ init(function() {
$('.screen').live('enter', function() {
$(this).show();
jss();
+ $(this).trigger('update');
});
$('.screen').live('leave', function() {
@@ -123,6 +124,7 @@ init(function() {
// ==== Écran d'accueil
init(function() {
$('.goFrontpage').click(function() { location.hash = "#frontpage"; });
+ $.screen('frontpage').bind('enter', function() { window.document.title = "PtiClic pre-alpha 0.2"; });
});
// ==== Écran connexion
@@ -212,54 +214,47 @@ init(function() {
.find(".icon").data("image",relation.id).end()
.click(function(e) {
location.hash = encodeHash(appendAnswer(state, relation.id));
- window.document.title = "PtiClic "+state.answers.length+' / '+game.cloud.length;
$(this).addClass("hot");
})
.appendTo("#game .relations");
});
- $("#game .mn").text(game.cloud[state.answers.length].name);
$("#game .mc").text(game.center.name);
});
- game.bind('update', function(e) {
+ game.bind('update', function() {
if (state.pgid != runstate.game.pgid) {
$('#game').trigger('goto');
return;
}
- var direction = state.answers.length - oldstate.answers.length;
- var mn = $("#game .mn-caption");
- var clone = $();
- if (direction != 0) {
- clone = (mn)
- .stop().clearQueue()
- .clone().removeClass('center')
- .appendTo("body") // Append to body so we can animate the offset (instead of top/left)
- .offset(mn.offset());
- }
- mn.text(runstate.game.cloud[state.answers.length].name);
+ window.document.title = "PtiClic "+(state.answers.length + 1)+' / '+runstate.game.cloud.length;
+ $('.mn').text(runstate.game.cloud[state.answers.length].name);
jss();
- if (direction != 0) {
- // window.setTimeout pour éviter que le offset (ci-dessus) ne soit animé, et pour que le temps de rendu de la page ne soit pas inclus dans le temps d'animation.
- window.setTimeout(function() {
- (clone)
- .addClass("transition")
- .css(runstate.relationBox[state.answers[state.answers.length - 1]].center())
- .css({fontSize: 0})
- .delay(700)
- .qRemove();
- $('.relationBox.hot').addClass('transition-bg').removeClass('hot').delay(700).qRemoveClass('transition-bg');
- }, 0);
+
+ var isForward = (state.answers.length - oldstate.answers.length) >= 0;
+ var rb = runstate.relationBox[(isForward ? state : oldstate).answers[(isForward ? state : oldstate).answers.length - 1]];
+
+ if (!runstate.currentMNCaption || oldstate.screen != 'game')
+ runstate.currentMNCaption = $('<span class="mn-caption"/>');
+ var a = runstate.currentMNCaption.text(runstate.game.cloud[oldstate.answers.length].name);
+ var b = $('<span class="mn-caption"/>').text(runstate.game.cloud[state.answers.length].name);
+ if (oldstate.screen != 'game' || state.answers.length == oldstate.answers.length) {
+ isForward = true;
+ a.remove();
+ a = $();
}
-/* var fs = mn.css("fontSize");
- var mncbCenter = $("#game #mn-caption-box").center();
-
- (mn)
- .css("fontSize", 0)
- .animate({fontSize: fs}, {duration:700, step:function(){
- try {
- mn.center(mncbCenter);
- } catch(e) {alert("Error anonymous 2 in game.animateNext");alert(e);}
- }}); */
+ if (!isForward) { var c = b; b = a; a = c; }
+ runstate.currentMNCaption = isForward ? b : a;
+
+ a.zoom(rb, '#mn-caption-box', isForward); // De ou vers la relationBox
+ b.zoom('#mn-caption-box', '#mn-caption-box', !isForward); // De ou vers le #mn-caption
+
+ window.setTimeout(function() {
+ $('.relationBox.hot').addClass('transition-bg').removeClass('hot').delay(700).qRemoveClass('transition-bg');
+ }, 0);
+ });
+
+ game.bind('leave', function() {
+ runstate.currentMNCaption.remove();
});
});
