114 lines
2.6 KiB
JavaScript
114 lines
2.6 KiB
JavaScript
function jss() {
|
|
var w=480, h=800;
|
|
var mch = h/8, mnh = h*0.075;
|
|
|
|
$("body")
|
|
.css({
|
|
padding: 0,
|
|
margin: 0,
|
|
textAlign: "left"
|
|
});
|
|
|
|
$("#screen")
|
|
.width(w)
|
|
.height(h)
|
|
.position({my:"center center", at:"center center", of:"body", collision:"none"});
|
|
|
|
$("#mc-caption-block")
|
|
.css({
|
|
position: "absolute"
|
|
})
|
|
.width(w)
|
|
.height(mch)
|
|
.position({my:"center top", at:"center top", of:"#screen", collision:"none"});
|
|
|
|
$("#mc-caption")
|
|
.css({
|
|
maxWidth: w*0.9,
|
|
textAlign: "center",
|
|
position: "absolute"
|
|
})
|
|
.fitFont(w*0.9, mch*0.9, 20)
|
|
.position({my:"center center", at:"center center", of:"#mc-caption-block", collision:"none"});
|
|
|
|
$("#mn-caption-block")
|
|
.css({
|
|
borderWidth: h/100,
|
|
position: "absolute"
|
|
})
|
|
.width(w)
|
|
.height(mnh)
|
|
.position({my:"center top", at:"center bottom", of:"#mc-caption-block", collision:"none"});
|
|
|
|
$("#mn-caption")
|
|
.css({
|
|
maxWidth: w*0.9,
|
|
textAlign: "center",
|
|
position: "absolute"
|
|
})
|
|
.fitFont(w*0.9, mnh*0.9, 20)
|
|
.position({my:"center center", at:"center center", of:"#mn-caption-block", collision:"none"});
|
|
|
|
$(".relations > div")
|
|
.css({
|
|
margin: 10,
|
|
height: 72,
|
|
padding: 10,
|
|
});
|
|
|
|
// TODO : fitFont pour ".relations div"
|
|
$(".relations > div:nth-child(odd)")
|
|
.css({
|
|
backgroundPosition: "2% center", // TODO : virer le pourcentage, et séparer l'icône dans un nouvel élément.
|
|
textAlign: "right",
|
|
paddingLeft: 76
|
|
});
|
|
|
|
$(".relations > div:nth-child(even)")
|
|
.css({
|
|
backgroundPosition: "98% center", // TODO : virer le pourcentage, et séparer l'icône dans un nouvel élément.
|
|
textAlign: "left",
|
|
paddingRight: 76
|
|
});
|
|
|
|
$(".relations")
|
|
.position({my:"center bottom", at:"center bottom", of:"#screen", offset:"0 -10", collision:"none"});
|
|
}
|
|
|
|
|
|
$(function () {
|
|
var url = "tmp.json";
|
|
$.getJSON(url, function(data) {
|
|
var game = data[0];
|
|
var currentWordNb = 0;
|
|
var answers = [];
|
|
|
|
var refresh = function() {
|
|
if (currentWordNb < game.cloud.length) {
|
|
$(".mn").text(game.cloud[currentWordNb].name);
|
|
$(".mc").text(game.center.name);
|
|
} else {
|
|
$(".relations").empty();
|
|
alert("Partie terminée !");
|
|
}
|
|
jss();
|
|
}
|
|
|
|
$.each(game.cat, function(i, cat) {
|
|
$('<div/>')
|
|
.html(cat.name.replace(/%(m[cn])/g, '<span class="$1"/>'))
|
|
.addClass("rid"+cat.id)
|
|
.click(function() {
|
|
answers[currentWordNb++] = cat.id;
|
|
$(this).addClass("hot")//.delay(500).removeClass("hot"); // TODO: just blink.
|
|
refresh();
|
|
})
|
|
.appendTo(".relations");
|
|
});
|
|
|
|
$(window).resize(jss);
|
|
refresh();
|
|
refresh(); // TODO : fix the bug with the margin on ".relation > div"
|
|
});
|
|
});
|