commit cfe1023c11f8918e0fdcb46717d98c1719ba61e0
parent a2cb9dd345300d5fdd73ffffe9c54001606434c5
Author: Georges Dupéron <jahvascriptmaniac+github@free.fr>
Date: Sun, 10 Apr 2011 00:29:36 +0200
Correction de quelques bugs dans l'algo de dichotomie, nettoyage, while (true) { lisibilité++; lisibilité--; }
Diffstat:
5 files changed, 94 insertions(+), 74 deletions(-)
diff --git a/code/html5/img/rel/default.png b/code/html5/img/rel/default.png
Binary files differ.
diff --git a/code/html5/index.html b/code/html5/index.html
@@ -9,7 +9,6 @@ body {
}
#screen {
- background-color: white;
background-color : #FFFFE0;
}
@@ -27,17 +26,18 @@ body {
background-color: #F0F8D0;
}
-.relation {
+.relationBox {
background-color: #F0F8D0;
border: thin solid #44AA44;
- -moz-border-radius: 10px;
- -webkit-border-radius: 10px;
- background-repeat: no-repeat;
}
.relations .hot {
background-color: yellow;
}
+
+.clearboth {
+ clear: both;
+}
</style>
<script src="jquery-1.5.1.min.js"></script>
<script src="jquery-ui-1.8.11.custom.min.js"></script>
@@ -52,9 +52,9 @@ body {
<div id="mn-caption" class="mn"></div>
<div class="relations"></div>
<div id="templates" style="display: none;">
- <div class="relation">
- <img class="icon" alt="" src=""></img>
- <div class="text"></div>
+ <div class="relationBox">
+ <div class="relation"><img class="icon" alt="" src="img/rel/default.png" /><span class="text"></span></div>
+ <div class="clearboth"></div>
</div>
</div>
</div>
diff --git a/code/html5/my-extensions.js b/code/html5/my-extensions.js
@@ -1,36 +1,47 @@
-$.fn.fitFont = function(w, h, minFont, maxFont) {
- minFont = minFont || 0;
- maxFont = maxFont || Infinity;
- var oldpos = this.css("position");
- this.css("position", "absolute");
- // TODO : reset temporairement le max-width.
- var size = parseInt(this.css("font-size"), 10);
-
- var i = 0;
- while ((this.width() < w || this.height() < h) && ++i < 10) {
- size *= 2;
- this.css("font-size", size);
- }
+Number.prototype.clip = function(min, max) {
+ return Math.min(Math.max(this, min), max);
+};
+
+function dichotomy(start, isBigger) {
+ var i = 0, min = 0, max, half;
- var max = size;
- var min = 0;
- i=0;
- while (min < max && ++i < 10) {
- size = (max + min) / 2;
- this.css("font-size", size);
- if (this.width() < w && this.height() < h) {
- min = size;
- } else {
- max = size;
- }
+ for (max = start || 1; ++i < 10 && !isBigger(max); max *= 2);
+ for (half = start; Math.abs(min-max) > 0.1; half = (min + max) / 2) {
+ if (!isBigger(half)) min = half;
+ else max = half;
}
+ while (half > 1 && isBigger(half)) { --half; }
+ return half;
+}
- if (this.width() > w || this.height() > h) --size;
- if (size < minFont) size = minFont;
- if (size > maxFont) size = maxFont;
- this.css("font-size", size);
+$.fn.maxWidth = function() {
+ max = 0;
+ this.each(function(i,e){ max = Math.max(max, $(e).width()); });
+ return max;
+}
+$.fn.maxHeight = function() {
+ max = 0;
+ this.each(function(i,e){ max = Math.max(max, $(e).height()); });
+ return max;
+}
+
+$.fn.fitFont = function(w, h, minFont, maxFont) {
+ var oldpos = this.css("position");
+ this.css({
+ position: "absolute",
+ maxWidth: w
+ });
+ var wrappers = this.wrapInner("<span/>").children();
+
+ var that = this;
+ this.css("font-size", dichotomy(parseInt(this.css("font-size"), 10), function(x) {
+ that.css("fontSize", x);
+ return (wrappers.maxHeight() > h || wrappers.maxWidth() > w);
+ }).clip(minFont || 0, maxFont || Infinity));
+ // Restore stuff
this.css("position", oldpos);
+ wrappers.children().unwrap();
return this;
}
@@ -67,11 +78,11 @@ $.fn.wh = function(w, h) {
}
$.fn.relativePos = function(xAnchor, yAnchor, to, justCss) {
+ if (to) this.css("position", "absolute");
var deltaX = this.outerWidth() * xAnchor;
var deltaY = this.outerHeight() * yAnchor;
if (to) {
- this.css("position", "absolute");
var css = {
left: to.left - deltaX,
top: to.top - deltaY
diff --git a/code/html5/pticlic.js b/code/html5/pticlic.js
@@ -1,17 +1,22 @@
function jss() {
- var w=480, h=800;
+ var w, h;
+ //w = 480; h=800;
+ w = $(window).width();
+ h = $(window).height();
+
var mch = h/8, mnh = h*0.075;
$("body, html")
.css({
padding: 0,
margin: 0,
+ overflow: "hidden",
textAlign: "left"
});
$("#screen")
.wh(w, h)
- .north($("body").north()); // TODO : par rapport à la fenêtre entière.0
+ .north($("body").north()); // TODO : par rapport à la fenêtre entière.
$("#mc-caption-block")
.wh(w, mch)
@@ -28,27 +33,26 @@ function jss() {
$("#mn-caption")
.css({zIndex: 10})
.fitIn("#mn-caption-block");
+
+ $(".relationBox:visible")
+ .css({
+ margin: 10,
+ padding: 10,
+ MozBorderRadius: 10,
+ WebkitBorderRadius: 10
+ });
- $(".relation > *")
+ $(".relationBox:visible .icon")
+ .wh(72,72)
.css({
- display: "inline-block",
- position: "absolute",
- textAlign: "right"
+ float: "left",
+ marginRight: $(".relationBox").css("padding-left")
});
+
+ $(".relations")
+ .width(w);
- $(".relation .icon")
- .wh(72,72);
-
- $(".relation")
- .wh(w,76);
-
- $(".relation").each(function (i,e) {
- e = $(e);
- e.find(".icon")
- .west(e.west());
- e.find(".text")
- .east(e.east());
- });
+ $(".relation:visible").fitFont($(".relationBox:visible").width(), 72, 10);
$(".relations")
.south($("#screen").south());
@@ -61,18 +65,23 @@ $(function () {
var currentWordNb = 0;
var answers = [];
- var refresh = function() {
+ var updateText = function() {
+ $(".mn").text(game.cloud[currentWordNb].name);
+ $(".mc").text(game.center.name);
+ jss();
+ }
+
+ var nextWord = function(click, button) {
+ answers[currentWordNb++] = $(button).data("rid");
if (currentWordNb < game.cloud.length) {
- $(".mn").text(game.cloud[currentWordNb].name);
- $(".mc").text(game.center.name);
+ animateNext(click, button);
} else {
$(".relations").empty();
alert("Partie terminée !");
}
- jss();
}
- function animateNext(e, button) {
+ function animateNext(click, button) {
var duration = 700;
var mn = $("#mn-caption");
@@ -80,15 +89,16 @@ $(function () {
$(button).addClass("hot").removeClass("hot", duration);
(mn)
+ .stop() // Attention : stop() et clearQueue() ont aussi un effet
+ .clearQueue() // sur la 2e utilisation de mn (ci-dessous).
.clone()
.removeClass("mn") // Pour que le texte animé ne soit pas modifié.
.appendTo("body") // Append to body so we can animate the offset (instead of top/left).
.offset(mn.offset())
- .clearQueue()
- .animate({left:e.pageX, top:e.pageY, fontSize: 0}, duration)
+ .animate({left:click.left, top:click.top, fontSize: 0}, duration)
.queue(function() { $(this).remove(); });
- refresh();
+ updateText();
var fs = mn.css("fontSize");
var mncbCenter = $("#mn-caption-block").center();
@@ -97,24 +107,23 @@ $(function () {
.animate({fontSize: fs}, {duration:duration, step:function(){mn.center(mncbCenter);}});
}
- $.each(game.cat, function(i, cat) {
- $('#templates .relation')
+ $.each(game.relations, function(i, relation) {
+ $('#templates .relationBox')
.clone()
+ .data("rid", relation.id)
.find(".text")
- .html(cat.name.replace(/%(m[cn])/g, '<span class="$1"/>'))
+ .html(relation.name.replace(/%(m[cn])/g, '<span class="$1"/>'))
.end()
.find(".icon")
- .attr("src", "img/rel/"+cat.id+".png")
+ .attr("src", "img/rel/"+relation.id+".png")
.end()
.click(function(e) {
- answers[currentWordNb++] = cat.id;
- animateNext(e, this);
+ nextWord({left:e.pageX, top:e.pageY}, this);
})
.appendTo(".relations");
});
$(window).resize(jss);
- refresh();
- refresh(); // TODO : fix the bug with the margin on ".relation > div"
+ updateText();
});
});
diff --git a/code/html5/tmp.json b/code/html5/tmp.json
@@ -1 +1 @@
-[{"gid":22,"pgid":512,"cat":[{"id":10,"name":"%mc fait partie de %mn"},{"id":9,"name":"%mn est une partie de %mc"},{"id":0,"name":"%mc est en rapport avec %mn"},{"id":-1,"name":"%mn n'est pas lié à %mc"}],"center":{"id":28282,"name":"transbahuter"},"cloudsize":10,"cloud":[{"id":84632,"name":"camion"},{"id":61939,"name":"transbahutage"},{"id":104263,"name":"trimbaler"},{"id":44654,"name":"transporter"},{"id":38285,"name":"d\u00e9m\u00e9nageur"},{"id":43404,"name":"porter"},{"id":63192,"name":"transports"},{"id":130473,"name":"enthousiasmer"},{"id":90461,"name":"se trimbaler"},{"id":134609,"name":"baguenauder"}]}]
-\ No newline at end of file
+[{"gid":22,"pgid":512,"relations":[{"id":10,"name":"%mc fait partie de %mn"},{"id":9,"name":"%mn est une partie de %mc"},{"id":0,"name":"%mc est en rapport avec %mn"},{"id":-1,"name":"%mn n'est pas lié à %mc"}],"center":{"id":28282,"name":"transbahuter"},"cloudsize":10,"cloud":[{"id":84632,"name":"camion"},{"id":61939,"name":"transbahutage"},{"id":104263,"name":"trimbaler"},{"id":44654,"name":"transporter"},{"id":38285,"name":"d\u00e9m\u00e9nageur"},{"id":43404,"name":"porter"},{"id":63192,"name":"transports"},{"id":130473,"name":"enthousiasmer"},{"id":90461,"name":"se trimbaler"},{"id":134609,"name":"baguenauder"}]}]
+\ No newline at end of file
