suzanne.soy/2011-m1s2-ter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ajustement de la taille des icones

Browse Source
This commit is contained in:
Bertrand BRUN 2011-04-28 12:56:07 +02:00
parent 447573e593
commit e3b7233e5d
3 changed files with 48 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
code/serveur/php/jeu.html
View File

@ -61,35 +61,23 @@ body {
</div> </div>
<div class="screen" id="frontpage"> <div class="screen" id="frontpage">
<div id="title-block"></div> <div id="title-block"></div>
<div id="game-icon-block"></div>
<div id="prefs-icon-block"></div>
<div id="connection-icon-block"></div>
<div id="about-icon-block"></div>
<div id="game-text-block"></div>
<div id="prefs-text-block"></div>
<div id="connection-text-block"></div>
<div id="about-text-block"></div>
<span id="title">PtiClic</span> <span id="title">PtiClic</span>
<div class="frontpage-button game"> <div class="frontpage-button game">
<img class="icon" alt="" src="ressources/img/mode_normal.png" /> <div><img class="icon" alt="" src="ressources/img/mode_normal.png" /></div>
<br /> <div class="text">Jouer</div>
<span class="text">Jouer</span>
</div> </div>
<div class="frontpage-button prefs"> <div class="frontpage-button prefs">
<img class="icon" alt="" src="ressources/img/config.png" /> <div><img class="icon" alt="" src="ressources/img/config.png" /></div>
<br /> <div class="text">Configuration</div>
<span class="text">Configuration</span>
</div> </div>
<div class="frontpage-button connection"> <div class="frontpage-button connection">
<img class="icon" alt="" src="ressources/img/config.png" /> <div><img class="icon" alt="" src="ressources/img/config.png" /></div>
<br /> <div class="text">Connexion</div>
<span class="text">Connexion</span>
</div> </div>
<div class="frontpage-button about"> <div class="frontpage-button about">
<img class="icon" alt="" src="ressources/img/rel/default.png" /> <div><img class="icon" alt="" src="ressources/img/rel/default.png" /></div>
<br /> <div class="text">A Propos</div>
<span class="text">A Propos</span>
</div> </div>
</div> </div>
<div class="screen" id="score"> <div class="screen" id="score">

6
code/serveur/php/ressources/my-extensions.js
View File

@ -25,6 +25,12 @@ $.fn.maxHeight = function() {
return max; return max;
} }
$.fn.sumHeight = function() {
sum = 0;
this.each(function(i,e){ sum += $(e).height(); });
return sum;
}
$.fn.fitFont = function(w, h, minFont, maxFont) { $.fn.fitFont = function(w, h, minFont, maxFont) {
var oldpos = this.css("position"); var oldpos = this.css("position");
this.css({ this.css({

47
code/serveur/php/ressources/pticlic.js
View File

@ -37,7 +37,10 @@ function hashchange() {
function jss() { function jss() {
var w = $(window).width(); var w = $(window).width();
var h = $(window).height(); var h = $(window).height();
var iconSize = 72; var iconSize;
if (h > 600) iconSize = 72;
else if(h > 500) iconSize = 48;
else iconSize = 36;
$(".screen") $(".screen")
.wh(w, h) .wh(w, h)
@ -88,25 +91,43 @@ frontpage = {};
frontpage.jss = function(w, h, iconSize) { frontpage.jss = function(w, h, iconSize) {
var fp = $("#frontpage.screen"); var fp = $("#frontpage.screen");
var $fp = function() { return fp.find.apply(fp,arguments); }; var $fp = function() { return fp.find.apply(fp,arguments); };
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 buttonHeight = labelHeight + iconSize;
var buttonWidth = Math.max(w*0.25,iconSize);
var freeSpace = h - titleHeight;
$fp("#title-block") $fp("#title-block")
.wh(w*0.5, h*0.2) .wh(w*0.5, titleHeight)
.north($("#frontpage.screen").north()); .north($("#frontpage.screen").north());
$fp("#title") $fp("#title")
.fitIn("#title-block", 0.2); .fitIn("#title-block", 0.2);
$fp(".text") $fp(".text")
.fitFont(w*0.25,(h-(iconSize*4))*0.8*0.5,10); .fitFont(buttonWidth, labelHeight, 10);
$fp(".icon")
.wh(iconSize);
$fp(".frontpage-button") $fp(".frontpage-button")
.width(w*0.4); .css('text-align', 'center')
.width(buttonWidth);
$fp(".frontpage-button.game")
.northEast({left:w*0.45,top:h*0.3}); $fp(".frontpage-button > div").css('display', 'block');
$fp(".frontpage-button.about")
.northWest({left:w*0.55,top:h*0.3}); $fp(".frontpage-button").each(function(i,e){
$fp(".frontpage-button.connection") e=$(e);
.southEast({left:w*0.45,top:h*0.8}); var currentRow = Math.floor(i/2);
$fp(".frontpage-button.prefs") var currentColumn = i % 2;
.southWest({left:w*0.55,top:h*0.8}); var interIconSpace = (freeSpace - nbRows * buttonHeight) / (nbRows + 1);
var iconOffset = titleHeight + ((currentRow+1) * interIconSpace) + (currentRow * buttonHeight);
if (currentColumn == 0) {
e.northEast({left:ww*0.45,top:iconOffset});
} else {
e.northWest({left:ww*0.55,top:iconOffset});
}
});
}; };
frontpage.enter = function () { frontpage.enter = function () {