www

commit e3b7233e5dcf830309fad746b7b9ef63a9487be9
parent 447573e5936d507747df8caa97092297865ff82c
Author: Bertrand BRUN <bertrand0brun@gmail.com>
Date:   Thu, 28 Apr 2011 12:56:07 +0200

Ajustement de la taille des icones

Diffstat:
M
code/serveur/php/jeu.html
 | 
28
++++++++--------------------
M
code/serveur/php/ressources/my-extensions.js
 | 
6
++++++
M
code/serveur/php/ressources/pticlic.js
 | 
47
++++++++++++++++++++++++++++++++++-------------

3 files changed, 48 insertions(+), 33 deletions(-)
diff --git a/code/serveur/php/jeu.html b/code/serveur/php/jeu.html
@@ -61,35 +61,23 @@ body {
 		</div>
 		<div class="screen" id="frontpage">
 			<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>
 			<div class="frontpage-button game">
-				<img class="icon" alt="" src="ressources/img/mode_normal.png" />
-				<br />
-				<span class="text">Jouer</span>
+				<div><img class="icon" alt="" src="ressources/img/mode_normal.png" /></div>
+				<div class="text">Jouer</div>
 			</div>
 			<div class="frontpage-button prefs">
-				<img class="icon" alt="" src="ressources/img/config.png" />
-				<br />
-				<span class="text">Configuration</span>
+				<div><img class="icon" alt="" src="ressources/img/config.png" /></div>
+				<div class="text">Configuration</div>
 			</div>
 			<div class="frontpage-button connection">
-				<img class="icon" alt="" src="ressources/img/config.png" />
-				<br />
-				<span class="text">Connexion</span>
+				<div><img class="icon" alt="" src="ressources/img/config.png" /></div>
+				<div class="text">Connexion</div>
 			</div>
 			<div class="frontpage-button about">
-				<img class="icon" alt="" src="ressources/img/rel/default.png" />
-				<br />
-				<span class="text">A Propos</span>
+				<div><img class="icon" alt="" src="ressources/img/rel/default.png" /></div>
+				<div class="text">A Propos</div>
 			</div>
 		</div>
 		<div class="screen" id="score">
diff --git a/code/serveur/php/ressources/my-extensions.js b/code/serveur/php/ressources/my-extensions.js
@@ -25,6 +25,12 @@ $.fn.maxHeight = function() {
 	return max;
 }
 
+$.fn.sumHeight = function() {
+	sum = 0;
+	this.each(function(i,e){ sum += $(e).height(); });
+	return sum;
+}
+
 $.fn.fitFont = function(w, h, minFont, maxFont) {
 	var oldpos = this.css("position");
 	this.css({
diff --git a/code/serveur/php/ressources/pticlic.js b/code/serveur/php/ressources/pticlic.js
@@ -37,7 +37,10 @@ function hashchange() {
 function jss() {
 	var w = $(window).width();
 	var h = $(window).height();
-	var iconSize = 72;
+	var iconSize;
+	if (h > 600) iconSize = 72;
+	else if(h > 500) iconSize = 48;
+	else iconSize = 36;
 	
 	$(".screen")
 		.wh(w, h)
@@ -88,25 +91,43 @@ frontpage = {};
 frontpage.jss = function(w, h, iconSize) {
 	var fp = $("#frontpage.screen");
 	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")
-		.wh(w*0.5, h*0.2)
+		.wh(w*0.5, titleHeight)
 		.north($("#frontpage.screen").north());
 	$fp("#title")
 		.fitIn("#title-block", 0.2);
 	
 	$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")
-		.width(w*0.4);
-
-	$fp(".frontpage-button.game")
-		.northEast({left:w*0.45,top:h*0.3});
-	$fp(".frontpage-button.about")
-		.northWest({left:w*0.55,top:h*0.3});
-	$fp(".frontpage-button.connection")
-		.southEast({left:w*0.45,top:h*0.8});
-	$fp(".frontpage-button.prefs")
-		.southWest({left:w*0.55,top:h*0.8});	
+		.css('text-align', 'center')
+		.width(buttonWidth);
+	
+	$fp(".frontpage-button > div").css('display', 'block');
+	
+	$fp(".frontpage-button").each(function(i,e){
+		e=$(e);
+		var currentRow = Math.floor(i/2);
+		var currentColumn = i % 2;
+		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 () {