Gros nettoyage : suppression de quasiment tout le JSS.
This commit is contained in:
Georges Dupéron
parent
8e3cfb4334
commit
70eec38a55
|
|
@ -12,56 +12,109 @@
|
|||
<script src="ressources/my-extensions.js"></script>
|
||||
<script src="ressources/pticlic.js"></script>
|
||||
<script src="server.php?callback=prefs.loadPrefs&action=7"></script>
|
||||
<style>
|
||||
body, html { margin: 0; padding: 0; height: 100%; overflow: hidden; }
|
||||
.screen { width:100%; height:100%; position:absolute; }
|
||||
.highlight { display:none; width:100%; height:100%; border-width:medium; border-style:solid; border-radius:2em; position:absolute; }
|
||||
a:hover .highlight { display:block; }
|
||||
#frontpage .icon-container { width:100%; bottom: 40%; height:50%; position:absolute; }
|
||||
#frontpage .icon-container img { display:block; margin: 0 auto; }
|
||||
#frontpage .icon-label { width:100%; height:30%; bottom:5%; position:absolute; }
|
||||
#frontpage a { color: black; text-decoration: none; display:inline-block; width: 30%; height: 32%; top: 32%; position:absolute; }
|
||||
a.button {
|
||||
color: black; text-decoration: none;
|
||||
padding: 0.4em; margin: 0.4em; display: inline-block;
|
||||
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; }
|
||||
.relationBox table { border-collapse: collapse; }
|
||||
.relationBox img { display:block; }
|
||||
.relationBox td { padding:0; }
|
||||
.formElement { width:30%; height: 10%; position:absolute; }
|
||||
.fitFont, .subFitFont { overflow:auto; }
|
||||
#score { text-align:center; }
|
||||
.marginBox { width: 90%; height: 90%; top: 5%; left:5%; position:absolute; }
|
||||
#message { left:5%; top:5%; width:90%; height:10%; position:absolute; border-radius:1em; text-align:center; opacity:0.9; }
|
||||
|
||||
html, body, #splash, #nojs { background-color:black; color: white; }
|
||||
/* couleurs green */
|
||||
.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 { color: #4a4; }
|
||||
.borderbar { background-color: #4a4; }
|
||||
.relationBox { background-color:#f0f8d0; border-color: #4a4; }
|
||||
.highlight { background-color:#f0f8d0; border-color:#4a4; }
|
||||
.hot { background-color:yellow; }
|
||||
|
||||
/* couleurs 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 { color: #ccc; }
|
||||
.black .borderbar { background-color: #ccc; }
|
||||
.black .relationBox { background-color:#222; border-color: #ccc; }
|
||||
.black .highlight { background-color:#222; border-color:#ccc; }
|
||||
.black .hot { background-color:#aaa; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="nojs">Chargement…</div>
|
||||
<div class="screen" id="splash">
|
||||
<img src="ressources/img/splash.png" />
|
||||
<div id="splash" class="screen" style="display:block">
|
||||
<img src="ressources/img/splash.png" class="center" style="width:320px; height: 480px;"/>
|
||||
</div>
|
||||
<div class="screen" id="game">
|
||||
<div id="mc-caption-block"></div>
|
||||
<div id="mn-caption-block"></div>
|
||||
<div id="mc-caption" class="mc"></div>
|
||||
<div id="mn-caption" class="mn"></div>
|
||||
<div class="relations"></div>
|
||||
</div>
|
||||
<div class="screen" id="frontpage">
|
||||
<div id="title-block"></div>
|
||||
|
||||
<span id="title">PtiClic</span>
|
||||
<div class="frontpage-button game">
|
||||
<div><img class="icon" alt="" src="ressources/img/72/default.png" /></div>
|
||||
<div class="text">Jouer</div>
|
||||
<div id="game" class="screen">
|
||||
<div style="width: 100%; height:40%; position:absolute;">
|
||||
<div style="width: 90%; height:37.5%; top:7.5%; left:5%; position:absolute;" class="fitFont">
|
||||
<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 id="mn-caption" class="mn center">Mot du nuage</div>
|
||||
</div>
|
||||
<div class="borderbar" style="height:5%; width:100%; top:95%; position:absolute;"></div>
|
||||
</div>
|
||||
<div class="frontpage-button prefs">
|
||||
<div><img class="icon" alt="" src="ressources/img/72/default.png" /></div>
|
||||
<div class="text">Configuration</div>
|
||||
</div>
|
||||
<div class="frontpage-button connection">
|
||||
<div><img class="icon" alt="" src="ressources/img/72/default.png" /></div>
|
||||
<div class="text">Connexion</div>
|
||||
</div>
|
||||
<div class="frontpage-button info">
|
||||
<div><img class="icon" alt="" src="ressources/img/72/default.png" /></div>
|
||||
<div class="text">A Propos</div>
|
||||
<div class="relations fitFontGroup" style="height:60%; width:100%; top:40%; position:absolute;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="screen" id="score">
|
||||
<h1>Score total : <span class="scoreTotal"></span></h1>
|
||||
<div class="scores"></div>
|
||||
<input type="button" value="J'ai vu !" id="jaivu"/>
|
||||
<div id="frontpage" class="screen fitFontGroup">
|
||||
<div style="width:50%; height:24%; top:4%; left:25%; position:absolute;" class="fitFont">
|
||||
<span class="center">PtiClic</span>
|
||||
</div>
|
||||
<a href="#game" style="right:55%; top:33%;">
|
||||
<div class="highlight"></div>
|
||||
<div class="icon-container"><img class="iconFitParent" alt="" src="ressources/img/72/default.png" /></div>
|
||||
<div class="icon-label subFitFont"><span class="text center">Jouer</span></div>
|
||||
</a>
|
||||
<a href="#prefs" style="left:55%; top:33%;">
|
||||
<div class="highlight"></div>
|
||||
<div class="icon-container"><img class="iconFitParent" alt="" src="ressources/img/72/default.png" /></div>
|
||||
<div class="icon-label subFitFont"><span class="text center">Configuration</span></div>
|
||||
</a>
|
||||
<a href="#connect" style="right:55%; top:66%;">
|
||||
<div class="highlight"></div>
|
||||
<div class="icon-container"><img class="iconFitParent" alt="" src="ressources/img/72/default.png" /></div>
|
||||
<div class="icon-label subFitFont"><span class="text center">Connexion</span></div>
|
||||
</a>
|
||||
<a hred="#info" style="left:55%; top:66%;">
|
||||
<div class="highlight"></div>
|
||||
<div class="icon-container"><img class="iconFitParent" alt="" src="ressources/img/72/default.png" /></div>
|
||||
<div class="icon-label subFitFont"><span class="text center">À propos</span></div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="screen" id="connection">
|
||||
<form id="connect-form" action="#" method="GET">
|
||||
<label id="user-label" for="user">Login : </label>
|
||||
<input type="text" name="user" id="user" />
|
||||
<label id="passwd-label" for="passwd">Mot de passe : </label>
|
||||
<input type="password" name="passwd" id="passwd" />
|
||||
<input type="submit" name="connect" id="connect" value="Se connecter" />
|
||||
</form>
|
||||
<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>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="screen" id="info">
|
||||
<div class="container">
|
||||
<div id="info" class="screen">
|
||||
<div class="marginBox fitFont">
|
||||
<p>
|
||||
PtiClic a été conçu et développé par Mathieu Lafourcade
|
||||
(LIRMM - Université Montpellier 2) et Virginie Zampa
|
||||
|
|
@ -89,33 +142,50 @@
|
|||
de vos commentaires, vous pouvez nous contacter par
|
||||
courriel à l'adresse suivante : <a href="mailto:pticlic.android.beta@gmail.com">pticlic.android.beta@gmail.com</a>
|
||||
</p>
|
||||
<p id="info-back-p">
|
||||
<input id="info-back" type="button" value="Retour" />
|
||||
<p style="text-align: center;">
|
||||
<a class="button" href="#">Retour</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="screen" id="prefs">
|
||||
<form id="prefs-form" action="#" method="GET">
|
||||
<fieldset id="theme">
|
||||
<div id="connection" class="screen">
|
||||
<form id="connect-form" action="#" method="GET" style="width:100%; height:100%;" class="fitFontGroup">
|
||||
<div class="formElement subFitFont" style="right: 55%; top: 25%;"><label id="user-label" for="user">Login : </label></div>
|
||||
<div class="formElement subFitFont" style="left: 55%; top: 25%;"><input type="text" name="user" id="user" class="setFont" /></div>
|
||||
<div class="formElement subFitFont" style="right: 55%; top: 50%;"><label id="passwd-label" for="passwd">Mot de passe : </label></div>
|
||||
<div class="formElement subFitFont" style="left: 55%; top: 50%;"><input type="password" name="passwd" id="passwd" class="setFont" /></div>
|
||||
<div class="formElement subFitFont" style="left: 25%; width:50%; top: 75%;">
|
||||
<input type="submit" name="connect" id="connect" value="Se connecter" class="center setFont" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div id="prefs" class="screen">
|
||||
<form id="prefs-form" action="#" method="GET" class="fitFontGroup">
|
||||
<fieldset id="theme" class="subFitFont" style="width:50%; height:25%; left:25%; top:25%; position:absolute;">
|
||||
<legend>Thème</legend>
|
||||
<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>
|
||||
<input type="submit" name="prefs-apply" id="prefs-apply" value="Appliquer" />
|
||||
<input type="reset" name="prefs-cancel" id="prefs-cancel" value="Annuler" />
|
||||
<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>
|
||||
</form>
|
||||
</div>
|
||||
<div id="templates" style="display: none;">
|
||||
<div class="relationBox">
|
||||
<div class="relation"><img class="icon" alt="" src="ressources/img/72/default.png" /><span class="text"></span></div>
|
||||
<div class="clearboth"></div>
|
||||
<table style="width:100%; position:relative;">
|
||||
<tr>
|
||||
<td>
|
||||
<img class="icon" alt="" src="ressources/img/72/default.png" style="width:72px; height:72px;" />
|
||||
</td>
|
||||
<td>
|
||||
<div class="text subFitFont"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="scoreLine">
|
||||
<span class="word"></span> (<span class="score"></span>)
|
||||
</div>
|
||||
</div>
|
||||
<div id="message" style="display: none;">
|
||||
</div>
|
||||
<div id="message" class="fitFont"><span class="text center">PtiClic…</span></div>
|
||||
</body>
|
||||
</html>
|
||||
<html>
|
||||
</html>
|
||||
|
|
@ -8,7 +8,7 @@ Number.prototype.mapInterval = function(a,b,x,y) {
|
|||
return x + ((this-a) / (b-a) * (y-x));
|
||||
}
|
||||
|
||||
function dichotomy(start, isBigger, foo) {
|
||||
function dichotomy(start, isBigger) {
|
||||
try {
|
||||
var i = 0, min = 0, max, half;
|
||||
|
||||
|
|
@ -22,77 +22,51 @@ function dichotomy(start, isBigger, foo) {
|
|||
} catch(e) {alert("Error dichotomy");alert(e);}
|
||||
}
|
||||
|
||||
$.fn.maxWidth = function() {
|
||||
$.fn.fold = function(acc, fn) {
|
||||
try {
|
||||
max = 0;
|
||||
this.each(function(i,e){ max = Math.max(max, $(e).width()); });
|
||||
return max;
|
||||
} catch(e) {alert("Error $.fn.maxWidth");alert(e);}
|
||||
}
|
||||
$.fn.maxHeight = function() {
|
||||
try {
|
||||
max = 0;
|
||||
this.each(function(i,e){ max = Math.max(max, $(e).height()); });
|
||||
return max;
|
||||
} catch(e) {alert("Error $.fn.maxHeight");alert(e);}
|
||||
this.each(function(i,e) { acc = fn(acc, i, e); });
|
||||
return acc;
|
||||
} catch(e) {alert("Error $.fn.fold");alert(e);}
|
||||
};
|
||||
|
||||
$.fn.maxWidth = function() { return this.fold(0, function(acc,i,e){ return Math.max(acc, $(e).width()); }); };
|
||||
$.fn.maxHeight = function() { return this.fold(0, function(acc,i,e){ return Math.max(acc, $(e).height()); }); };
|
||||
$.fn.sumHeight = function() { return this.fold(0, function(acc,i,e){ return acc + $(e).height(); }); };
|
||||
$.fn.sumOuterHeight = function() { return this.fold(0, function(acc,i,e){ return acc + $(e).outerHeight(); }); };
|
||||
|
||||
$.fn.hasScroll = function() {
|
||||
var e = this.get(0);
|
||||
return (e.clientHeight != e.scrollHeight) || (e.clientWidth != e.scrollWidth);
|
||||
}
|
||||
|
||||
$.fn.sumHeight = function() {
|
||||
$.fn.fitFont = function() {
|
||||
try {
|
||||
sum = 0;
|
||||
this.each(function(i,e){ sum += $(e).height(); });
|
||||
return sum;
|
||||
} catch(e) {alert("Error sumHeight");alert(e);}
|
||||
}
|
||||
|
||||
$.fn.fitFont = function(w, h, minFont, maxFont, noContainer, oneline) {
|
||||
try {
|
||||
var oldpos = this.css("position");
|
||||
this.css({position: "absolute"});
|
||||
|
||||
if (oneline)
|
||||
this.css("white-space", "nowrap");
|
||||
else
|
||||
this.css({maxWidth: w});
|
||||
|
||||
if (noContainer) {
|
||||
var wrappers = this;
|
||||
} else {
|
||||
var wrappers = this.wrapInner("<span/>").children();
|
||||
}
|
||||
|
||||
var that = this;
|
||||
this.css("font-size", dichotomy(parseInt(this.css("font-size"), 10), function(x) {
|
||||
try {
|
||||
that.css("fontSize", x);
|
||||
return (wrappers.maxHeight() > h || wrappers.maxWidth() > w);
|
||||
} catch(e) {alert("Error anonymous in $.fn.fitFont");alert(e);}
|
||||
},this).clip(minFont || 0, maxFont || Infinity));
|
||||
|
||||
// Restore stuff
|
||||
this.css("position", oldpos);
|
||||
if (!noContainer) wrappers.children().unwrap();
|
||||
var setFont = this.find('.setFont').andSelf();
|
||||
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("font-size", Math.max(0, size));
|
||||
return this;
|
||||
} catch(e) {alert("Error $.fn.fitFont");alert(e);}
|
||||
}
|
||||
};
|
||||
|
||||
$.fn.fitIn = function(e, t, r, b, l) {
|
||||
try {
|
||||
e = $(e);
|
||||
if (isNaN(+t)) t = 0;
|
||||
if (isNaN(+r)) r = t;
|
||||
if (isNaN(+b)) b = t;
|
||||
if (isNaN(+l)) l = r;
|
||||
var w = e.width();
|
||||
var h = e.height();
|
||||
t *= h;
|
||||
r *= w;
|
||||
b *= h;
|
||||
l *= w;
|
||||
this.fitFont(w - r - l, h - t - b, 20).center(e.center());
|
||||
return this;
|
||||
} catch(e) {alert("Error $.fn.fitIn");alert(e);}
|
||||
}
|
||||
$.fn.swapCSS = function(k,v) {
|
||||
var old = this.css(k);
|
||||
this.css(k, v);
|
||||
return old;
|
||||
};
|
||||
|
||||
$.fn.$each = function(fn) {
|
||||
this.each(function(i,e) { return fn(i, $(e)); });
|
||||
};
|
||||
|
||||
$.fn.$ormap = function(fn) {
|
||||
var ret = false;
|
||||
this.each(function(i,e) { if (fn(i, $(e))) { ret = true; return false; } });
|
||||
return ret;
|
||||
};
|
||||
|
||||
function queueize(method) {
|
||||
try {
|
||||
|
|
@ -115,9 +89,9 @@ $.fn.qCss = queueize("css");
|
|||
|
||||
$.fn.wh = function(w, h) {
|
||||
try {
|
||||
return this.width(w).height(h);
|
||||
return this.width(w).height(isNaN(+h) ? w : h);
|
||||
} catch(e) {alert("Error $.fn.wh");alert(e);}
|
||||
}
|
||||
};
|
||||
|
||||
$.fn.relativePos = function(xAnchor, yAnchor, to, justCss) {
|
||||
try {
|
||||
|
|
@ -179,4 +153,18 @@ $.fn.goodBad = function(min, max, startcolor, endcolor) {
|
|||
+(val.mapInterval(min,max,startcolor.g,endcolor.g).clip(0, 255, true))+","
|
||||
+(val.mapInterval(min,max,startcolor.b,endcolor.b).clip(0, 255, true))+")");
|
||||
return this;
|
||||
};
|
||||
};
|
||||
|
||||
var PtiClic = $({});
|
||||
PtiClic.queueJSON = function(url, data, ok, error) {
|
||||
};
|
||||
|
||||
/* Enchaînement des écrans
|
||||
Aller sur un écran donné.
|
||||
Recevoir des données avant d'entrer dans un écran.
|
||||
Envoyer des données avant de quiter un écran.
|
||||
Vérouiller l'écran courant pendant qu'on attend un transfert ou bien des écrans d'«attente».
|
||||
Lorsqu'un transfert a échoué car non logué, on va sur l'écran de connexion et on retente le transfert ensuite.
|
||||
Stocker uniquement les données importantes dans l'url (état, numéro de partie, réponses).
|
||||
Pouvoir basculer sur un écran et exécuter quelque chose une fois qu'il est chargé (exécuter le commit pour l'url).
|
||||
*/
|
||||
|
|
@ -56,143 +56,6 @@ function hashchange() {
|
|||
} catch(e) {alert("Error hashchange");alert(e);}
|
||||
}
|
||||
|
||||
// ==== JavaScript Style général
|
||||
function jss() {
|
||||
try {
|
||||
var w = $(window).width();
|
||||
var h = $(window).height();
|
||||
var iconSize;
|
||||
if (h > 600) iconSize = 72;
|
||||
else if(h > 500) iconSize = 48;
|
||||
else iconSize = 36;
|
||||
|
||||
$('#nojs').hide();
|
||||
|
||||
$('#message:visible')
|
||||
.css({
|
||||
position: 'absolute',
|
||||
borderWidth: 'thin',
|
||||
borderStyle: 'solid',
|
||||
MozBorderRadius: 10,
|
||||
WebkitBorderRadius: 10,
|
||||
textAlign: 'center'
|
||||
})
|
||||
.fitFont(w/2, h*0.1)
|
||||
.css('max-width', w*0.6)
|
||||
.width(w*0.6)
|
||||
.center({left: w/2, top:h*0.1});
|
||||
|
||||
$("#"+state.screen+".screen")
|
||||
.wh(w, h)
|
||||
.northWest({top:0,left:0});
|
||||
|
||||
$("body, html")
|
||||
.css({
|
||||
padding: 0,
|
||||
margin: 0,
|
||||
overflow: "hidden",
|
||||
textAlign: "left"
|
||||
});
|
||||
|
||||
$(".clearboth").css('clear', 'both');
|
||||
|
||||
$(".screen").hide();
|
||||
$("#"+state.screen+".screen").show();
|
||||
|
||||
if (window[state.screen] && window[state.screen].jss) window[state.screen].jss(w, h, iconSize);
|
||||
|
||||
$("img.icon").each(function(i,e) {
|
||||
try {
|
||||
e=$(e);
|
||||
if (typeof(e.data('image')) != 'undefined')
|
||||
e.attr("src", "ressources/img/"+iconSize+"/"+e.data('image')+".png");
|
||||
} catch(e) {alert("Error anonymous in jss");alert(e);}
|
||||
});
|
||||
|
||||
jssTheme(runstate.prefs.theme);
|
||||
} catch(e) {alert("Error jss");alert(e);}
|
||||
}
|
||||
|
||||
function jssTheme(theme) {
|
||||
if (theme == "black") {
|
||||
var bg1 = "black";
|
||||
var fg1 = "white";
|
||||
var bg2 = "#222222";
|
||||
var fg2 = "#cccccc";
|
||||
var fg3 = "white";
|
||||
var hot = "#aaaaaa";
|
||||
} else {
|
||||
var bg1 = "#ffffe0";
|
||||
var fg1 = "black";
|
||||
var bg2 = "#f0f8d0";
|
||||
var fg2 = "#4a4";
|
||||
var fg3 = "#8b4";
|
||||
var hot = "yellow";
|
||||
}
|
||||
var splashbg = "black";
|
||||
var splashfg = "white";
|
||||
var screenbg = bg1;
|
||||
var screenfg = fg1;
|
||||
var messagebg = bg2;
|
||||
var messagefg = fg1;
|
||||
var messagebd = fg2;
|
||||
var centralfg = fg3;
|
||||
var cloudbg = bg2;
|
||||
var cloudfg = fg2;
|
||||
var cloudbd = fg2;
|
||||
var relationbg = bg2;
|
||||
var relationbd = fg2;
|
||||
var fphoverbg = bg2;
|
||||
var fphoverbd = fg2;
|
||||
var hotbg = hot;
|
||||
|
||||
$('.screen').css({
|
||||
color: screenfg,
|
||||
backgroundColor: screenbg
|
||||
});
|
||||
|
||||
$('html, body, #splash.screen').css({
|
||||
backgroundColor: splashbg,
|
||||
color: splashfg
|
||||
});
|
||||
|
||||
$("#message").css({
|
||||
backgroundColor: messagebg,
|
||||
color: messagefg,
|
||||
borderColor: messagebd
|
||||
});
|
||||
|
||||
$(".frontpage-button").hover(function() {
|
||||
$(this).css({
|
||||
backgroundColor: fphoverbg,
|
||||
outline: "medium solid "+fphoverbd
|
||||
});
|
||||
}, function() {
|
||||
$(this).css({
|
||||
outline: '',
|
||||
backgroundColor: "transparent"
|
||||
});
|
||||
});
|
||||
|
||||
$('#mc-caption').css({color: centralfg});
|
||||
|
||||
$('#mn-caption').css({color: cloudfg});
|
||||
|
||||
$('#mn-caption-block').css({
|
||||
borderColor: cloudbd,
|
||||
backgroundColor: cloudbg
|
||||
});
|
||||
|
||||
$('.relationBox').css({
|
||||
borderColor: relationbd,
|
||||
backgroundColor: relationbg
|
||||
});
|
||||
|
||||
$('.relations .hot').css({backgroundColor: hotbg});
|
||||
|
||||
$("a, a:visited").css({color: "#8888ff"});
|
||||
}
|
||||
|
||||
// ==== Interface Android
|
||||
function UI () {
|
||||
try {
|
||||
|
|
@ -229,8 +92,7 @@ function UIInfo(title, msg) {
|
|||
.qShow()
|
||||
.queue(function(next){
|
||||
try {
|
||||
$('#message')
|
||||
.text(msg);
|
||||
$('#message .text').text(msg);
|
||||
jss();
|
||||
next();
|
||||
} catch(e) {alert("Error anonymous in UIInfo");alert(e);}
|
||||
|
|
@ -241,12 +103,48 @@ function UIInfo(title, msg) {
|
|||
} catch(e) {alert("Error UI().info");alert(e);}
|
||||
}
|
||||
|
||||
// ==== Nouveau jss
|
||||
function jss() {
|
||||
try {
|
||||
if ($("#splash img").is(':visible')) {
|
||||
var ratio = Math.min($('#splash').width() / 320, $('#splash').height() / 480);
|
||||
$('#splash.screen img')
|
||||
.wh(320 * ratio, 480 * ratio);
|
||||
}
|
||||
if ($('#game.screen').is(':visible')) {
|
||||
var iconSize = 72;
|
||||
var rel = $('#game.screen .relations');
|
||||
var rb = rel.find('.relationBox');
|
||||
$('.relationBox').css({
|
||||
borderWidth: ({72:3,48:2,36:1})[iconSize],
|
||||
padding: 10/72*iconSize,
|
||||
borderRadius: 20/72*iconSize,
|
||||
marginTop: (rel.height() - rb.sumOuterHeight()) / (rb.size() + 1)
|
||||
});
|
||||
$('.relationBox .icon').css({paddingRight: 10/72*iconSize});
|
||||
}
|
||||
$('.iconFitParent').wh(0,0).each(function(i,e) {
|
||||
e=$(e);
|
||||
var p = e.parent();
|
||||
var size = Math.min(p.width(), p.height());
|
||||
if (size >= 72) { e.wh(72); }
|
||||
else if (size >= 48) e.wh(48);
|
||||
else if (size >= 36) e.wh(36);
|
||||
else e.wh(0);
|
||||
});
|
||||
$('.fitFont:visible').$each(function(i,e) { e.fitFont(); });
|
||||
$('.fitFontGroup:visible').each(function(i,e) { $(e).find('.subFitFont').fitFont(); });
|
||||
$('.center').$each(function(i,e) { e.center(e.parent().center()); });
|
||||
} catch(e) {alert("Error jss");alert(e);}
|
||||
}
|
||||
|
||||
// ==== Code métier général
|
||||
$(function() {
|
||||
try {
|
||||
$(window).resize(jss);
|
||||
$(window).hashchange(hashchange);
|
||||
hashchange();
|
||||
$(window).hashchange(function(){alert("hashchange !");});
|
||||
//hashchange();
|
||||
jss();
|
||||
runstate.loaded = true;
|
||||
} catch(e) {alert("Error main function");alert(e);}
|
||||
});
|
||||
|
|
@ -311,17 +209,6 @@ ajaj.error = function(msg) {
|
|||
|
||||
splash = {};
|
||||
|
||||
splash.jss = function(w,h,iconSize) {
|
||||
try {
|
||||
var splashW = 320;
|
||||
var splashH = 480;
|
||||
var ratio = Math.min(w / splashW, h / splashH);
|
||||
$('#splash.screen img')
|
||||
.wh(splashW * ratio, splashH * ratio)
|
||||
.center($('#splash.screen').center());
|
||||
} catch(e) {alert("Error splash.jss");alert(e);}
|
||||
}
|
||||
|
||||
splash.enter = function() {
|
||||
try {
|
||||
// Si l'application est déjà chargée, on zappe directement jusqu'à la frontpage.
|
||||
|
|
@ -345,67 +232,6 @@ splash.click.goFrontpage = function() {
|
|||
// ==== Code métier pour la frontpage
|
||||
frontpage = {};
|
||||
|
||||
frontpage.jss = function(w, h, iconSize) {
|
||||
try {
|
||||
var fp = $("#frontpage.screen");
|
||||
var $fp = function() {
|
||||
try {
|
||||
return fp.find.apply(fp,arguments);
|
||||
} catch(e) {alert("Error anonymous 1 in frontpage.jss");alert(e);}
|
||||
};
|
||||
var nbIcons = $fp(".icon").size();
|
||||
var nbRows = Math.ceil(nbIcons / 2)
|
||||
var ww = w - 2 * iconSize;
|
||||
var hh = h - nbRows * iconSize;
|
||||
var titleHeight = hh*0.4;
|
||||
var labelHeight = hh*0.4 / nbRows;
|
||||
var buttonPadding = hh*0.05/nbRows;
|
||||
var buttonHeight = labelHeight + iconSize + buttonPadding;
|
||||
var buttonWidth = Math.max(w*0.25,iconSize);
|
||||
var freeSpace = h - titleHeight;
|
||||
$fp("#title-block")
|
||||
.wh(w*0.5, titleHeight)
|
||||
.north($("#frontpage.screen").north());
|
||||
$fp("#title")
|
||||
.fitIn("#title-block", 0.2);
|
||||
|
||||
$fp(".text")
|
||||
.fitFont(buttonWidth, labelHeight, 10);
|
||||
|
||||
$fp(".icon")
|
||||
.wh(iconSize);
|
||||
|
||||
$fp(".game .icon").data('image', 'mode_normal');
|
||||
$fp(".prefs .icon").data('image', 'config');
|
||||
$fp(".connection .icon").data('image', 'config');
|
||||
$fp(".info .icon").data('image', 'aide');
|
||||
|
||||
$fp(".frontpage-button")
|
||||
.css({
|
||||
textAlign: 'center',
|
||||
paddingTop: buttonPadding
|
||||
})
|
||||
.width(buttonWidth);
|
||||
|
||||
$fp(".frontpage-button > div").css('display', 'block');
|
||||
|
||||
var interIconSpace = (freeSpace - nbRows * buttonHeight) / (nbRows + 1);
|
||||
$fp(".frontpage-button").each(function(i,e){
|
||||
try {
|
||||
e=$(e);
|
||||
var currentRow = Math.floor(i/2);
|
||||
var currentColumn = i % 2;
|
||||
var iconOffset = titleHeight + ((currentRow+1) * interIconSpace) + (currentRow * buttonHeight);
|
||||
if (currentColumn == 0) {
|
||||
e.northEast({left:w/2-ww*0.05,top:iconOffset});
|
||||
} else {
|
||||
e.northWest({left:w/2+ww*0.05,top:iconOffset});
|
||||
}
|
||||
} catch(e) {alert("Error anonymous 2 in frontpage.jss");alert(e);}
|
||||
});
|
||||
} catch(e) {alert("Error frontpage.jss");alert(e);}
|
||||
};
|
||||
|
||||
frontpage.enter = function () {
|
||||
try {
|
||||
if (location.hash != '') state.commit();
|
||||
|
|
@ -449,62 +275,6 @@ frontpage.click.goPrefs = function() {
|
|||
// ==== Code métier pour le jeu
|
||||
game = {};
|
||||
|
||||
game.jss = function(w, h, iconSize) {
|
||||
try {
|
||||
var g = $("#game.screen");
|
||||
var $g = function() {
|
||||
try {
|
||||
return g.find.apply(g,arguments);
|
||||
} catch(e) {alert("Error anonymous in game.jss");alert(e);}
|
||||
};
|
||||
var mch = h/8, mnh = h*0.075;
|
||||
|
||||
$g("#mc-caption-block")
|
||||
.wh(w, mch)
|
||||
.north(g.north());
|
||||
|
||||
$g("#mc-caption")
|
||||
.fitIn("#mc-caption-block", 0.1);
|
||||
|
||||
$g("#mn-caption-block")
|
||||
.css({
|
||||
borderWidth: h/100,
|
||||
borderStyle: 'solid none'
|
||||
})
|
||||
.wh(w, mnh)
|
||||
.north($g("#mc-caption-block").south());
|
||||
|
||||
$g("#mn-caption")
|
||||
.css({zIndex: 10})
|
||||
.fitIn("#mn-caption-block");
|
||||
|
||||
$g(".relationBox:visible")
|
||||
.css({
|
||||
margin: 10,
|
||||
padding: 10,
|
||||
MozBorderRadius: 10,
|
||||
WebkitBorderRadius: 10,
|
||||
borderWidth: 'thin',
|
||||
borderStyle: 'solid',
|
||||
});
|
||||
|
||||
$g(".relationBox:visible .icon")
|
||||
.wh(iconSize,iconSize)
|
||||
.css({
|
||||
float: "left",
|
||||
marginRight: $g(".relationBox").css("padding-left")
|
||||
});
|
||||
|
||||
$g(".relations")
|
||||
.width(w);
|
||||
|
||||
$g(".relation:visible").fitFont($g(".relationBox:visible").width(), iconSize, 10);
|
||||
|
||||
$g(".relations")
|
||||
.south(g.south());
|
||||
} catch(e) {alert("Error game.jss");alert(e);}
|
||||
};
|
||||
|
||||
game.enter = function () {
|
||||
try {
|
||||
if (!state.game) {
|
||||
|
|
@ -630,13 +400,6 @@ game.nextWord = function(click, button) {
|
|||
// ==== Code métier pour les scores
|
||||
score = {};
|
||||
|
||||
score.jss = function(w, h, iconSize) {
|
||||
try {
|
||||
$("#score.screen")
|
||||
.css('text-align', 'center');
|
||||
} catch(e) {alert("Error score.jss");alert(e);}
|
||||
};
|
||||
|
||||
score.enter = function () {
|
||||
try {
|
||||
if (!state.hasScore) {
|
||||
|
|
@ -720,16 +483,6 @@ score.click.jaivu = function() {
|
|||
// ==== Code métier pour la page d'info
|
||||
info = {};
|
||||
|
||||
info.jss = function(w,h,iconSize) {
|
||||
try {
|
||||
$("#info-back-p").css('text-align', 'center');
|
||||
$("#info.screen .container input").css('font-size', 'inherit');
|
||||
$("#info.screen .container")
|
||||
.fitFont(w*0.9, h*0.9, null, null, true)
|
||||
.center($("#info.screen"));
|
||||
} catch(e) {alert("Error info.jss");alert(e);}
|
||||
}
|
||||
|
||||
info.enter = function() {
|
||||
try {
|
||||
$("#info-back").clickOnce(info.click.goBack);
|
||||
|
|
@ -748,25 +501,6 @@ info.click.goBack = function(){
|
|||
// ==== Code métier pour la connexion
|
||||
connection = {};
|
||||
|
||||
connection.jss = function(w, h, iconSize) {
|
||||
try {
|
||||
var c = $("#connection.screen");
|
||||
var $c = function() {
|
||||
try {
|
||||
return c.find.apply(c,arguments);
|
||||
} catch(e) {alert("Error anonymous 1 in connection.jss");alert(e);}
|
||||
};
|
||||
|
||||
$c("input, label")
|
||||
.fitFont(w*0.45, h*0.06, null, null, true, true);
|
||||
$c("#user-label").east({left:w*0.475,top:h*0.25});
|
||||
$c("#user").west({left:w*0.525,top:h*0.25});
|
||||
$c("#passwd-label").east({left:w*0.475,top:h*0.5});
|
||||
$c("#passwd").west({left:w*0.525,top:h*0.5});
|
||||
$c("#connect").center({left:w/2,top:h*0.75});
|
||||
} catch(e) {alert("Error connection.jss");alert(e);}
|
||||
};
|
||||
|
||||
connection.enter = function() {
|
||||
try {
|
||||
$("#connect-form").unbind("submit", connection.connect).submit(connection.connect);
|
||||
|
|
@ -807,25 +541,6 @@ connection.connectFetched = function(data) {
|
|||
// ==== Code métier pour la page de configuration
|
||||
prefs = {};
|
||||
|
||||
prefs.jss = function(w,h,iconSize) {
|
||||
try {
|
||||
var p = $("#prefs.screen");
|
||||
var $p = function() {
|
||||
try {
|
||||
return p.find.apply(p,arguments);
|
||||
} catch(e) {alert("Error anonymous 1 in prefs.jss");alert(e);}
|
||||
};
|
||||
|
||||
$p("input, label")
|
||||
.fitFont(w*0.45, h*0.06, null, null, true, true);
|
||||
$p("legend")
|
||||
.fitFont(w*0.3, h*0.05, null, null, true, true);
|
||||
$p("#theme").center({left:w*0.5,top:h*0.25});
|
||||
$p("#prefs-cancel").east({left:w*0.475,top:h*0.5});
|
||||
$p("#prefs-apply").west({left:w*0.525,top:h*0.5});
|
||||
} catch(e) {alert("Error prefs.jss");alert(e);}
|
||||
}
|
||||
|
||||
prefs.enter = function() {
|
||||
try {
|
||||
$("#prefs-form").unbind('submit', prefs.apply).submit(prefs.apply);
|
||||
|
|
@ -868,7 +583,6 @@ prefs.cancel = function(){
|
|||
|
||||
prefs.loadPrefs = function(data) {
|
||||
try {
|
||||
console.log('loadPrefs');
|
||||
if (data && data.theme) {
|
||||
runstate.prefs = data;
|
||||
} else {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user