commit fde078b9e8b12372bc09e10b49fa9ff8ff0a60a9
parent 9ebb78e1224d7fecd4505e800bdf71a4c2a046c9
Author: Georges Dupéron <jahvascriptmaniac+github@free.fr>
Date: Fri, 22 Apr 2011 21:16:36 +0200
Intégration de la frontpage et du jeu.
Diffstat:
5 files changed, 146 insertions(+), 164 deletions(-)
diff --git a/code/html5/frontpage.html b/code/html5/frontpage.html
@@ -1,59 +0,0 @@
-<!DOCTYPE html>
-<html>
- <head>
- <title>Pticlic pre-alpha 0.2</title>
- <meta charset="utf-8" />
- <style>
-body {
- background-color: black;
-}
-
-#screen {
- background-color : #FFFFE0;
-}
-
-.button {
- text-align: center;
-}
- </style>
- <script src="jquery-1.5.1.min.js"></script>
- <script src="jquery-ui-1.8.11.custom.min.js"></script>
- <script src="my-extensions.js"></script>
- <script src="frontpage.js"></script>
- </head>
- <body>
- <div id="screen">
- <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="button game">
- <img class="icon" alt="" src="img/mode_normal.png" />
- <br />
- <span class="text">Jouer</span>
- </div>
- <div class="button prefs">
- <img class="icon" alt="" src="img/config.png" />
- <br />
- <span class="text">Configuration</span>
- </div>
- <div class="button connection">
- <img class="icon" alt="" src="img/config.png" />
- <br />
- <span class="text">Connexion</span>
- </div>
- <div class="button about">
- <img class="icon" alt="" src="img/rel/default.png" />
- <br />
- <span class="text">A Propos</span>
- </div>
- </div>
- </body>
-</html>
diff --git a/code/html5/frontpage.js b/code/html5/frontpage.js
@@ -1,47 +0,0 @@
-function jss() {
- // TODO : réduire le nombre de fitIn ou fitFont, ou bien les précalculer.
- var w, h;
- 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.
-
- $("#title-block")
- .wh(w*0.5, h*0.2)
- .north($("#screen").north());
- $("#title")
- .fitIn("#title-block", 0.2);
-
- $(".text")
- .fitFont(w*0.25,(h-(72*4))*0.8*0.5,10);
- $(".button")
- .width(w*0.4);
-
- $(".button.game")
- .northEast({left:w*0.45,top:h*0.3});
- $(".button.about")
- .northWest({left:w*0.55,top:h*0.3});
- $(".button.connection")
- .southEast({left:w*0.45,top:h*0.9});
- $(".button.prefs")
- .southWest({left:w*0.55,top:h*0.9});
-
-}
-
-$(function() {
- $(window).resize(jss);
- jss();
- $(".button.game").click(function(){alert("Pour jouer, il faut payer !");});
-});
-\ No newline at end of file
diff --git a/code/serveur/php/jeu.html b/code/serveur/php/jeu.html
@@ -1,15 +1,16 @@
<!DOCTYPE html>
<html>
-<head>
- <title>PtiClic pre-alpha 0.2</title>
- <meta charset="utf-8" />
- <style>
+ <head>
+ <title>PtiClic pre-alpha 0.2</title>
+ <meta charset="utf-8" />
+ <style>
body {
background-color: black;
}
-#screen {
+.screen {
background-color : #FFFFE0;
+ display: none;
}
#mc-caption {
@@ -38,25 +39,62 @@ body {
.clearboth {
clear: both;
}
- </style>
- <script src="ressources/jquery-1.5.1.min.js"></script>
- <script src="ressources/jquery-ui-1.8.11.custom.min.js"></script>
- <script src="ressources/my-extensions.js"></script>
- <script src="ressources/pticlic.js"></script>
-</head>
-<body>
-<div id="screen">
- <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 id="templates" style="display: none;">
- <div class="relationBox">
- <div class="relation"><img class="icon" alt="" src="ressources/img/rel/default.png" /><span class="text"></span></div>
- <div class="clearboth"></div>
+
+.frontpage-button {
+ text-align: center;
+}
+ </style>
+ <script src="ressources/jquery-1.5.1.min.js"></script>
+ <script src="ressources/jquery-ui-1.8.11.custom.min.js"></script>
+ <script src="ressources/my-extensions.js"></script>
+ <script src="ressources/pticlic.js"></script>
+ </head>
+ <body>
+ <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 id="templates" style="display: none;">
+ <div class="relationBox">
+ <div class="relation"><img class="icon" alt="" src="ressources/img/rel/default.png" /><span class="text"></span></div>
+ <div class="clearboth"></div>
+ </div>
+ </div>
+ </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>
+ <div class="frontpage-button prefs">
+ <img class="icon" alt="" src="ressources/img/config.png" />
+ <br />
+ <span class="text">Configuration</span>
+ </div>
+ <div class="frontpage-button connection">
+ <img class="icon" alt="" src="ressources/img/config.png" />
+ <br />
+ <span class="text">Connexion</span>
+ </div>
+ <div class="frontpage-button about">
+ <img class="icon" alt="" src="ressources/img/rel/default.png" />
+ <br />
+ <span class="text">A Propos</span>
+ </div>
</div>
- </div>
-</div>
-</body>
+ </body>
</html>
diff --git a/code/serveur/php/ressources/my-extensions.js b/code/serveur/php/ressources/my-extensions.js
@@ -36,12 +36,13 @@ $.fn.fitFont = function(w, h, minFont, maxFont) {
var that = this;
this.css("font-size", dichotomy(parseInt(this.css("font-size"), 10), function(x) {
that.css("fontSize", x);
+ fubar = wrappers;
return (wrappers.maxHeight() > h || wrappers.maxWidth() > w);
}).clip(minFont || 0, maxFont || Infinity));
// Restore stuff
this.css("position", oldpos);
- wrappers.children().unwrap();
+ //wrappers.children().unwrap();
return this;
}
diff --git a/code/serveur/php/ressources/pticlic.js b/code/serveur/php/ressources/pticlic.js
@@ -1,15 +1,14 @@
-var state = "game"
-function jss() {
- jss[state]();
-};
+var state = "frontpage"
-jss.game = function() {
- // TODO : réduire le nombre de fitIn ou fitFont, ou bien les précalculer.
- var w, h;
- w = $(window).width();
- h = $(window).height();
+// ==== JavaScript Style général
+function jss() {
+ var w = $(window).width();
+ var h = $(window).height();
+ var iconSize = 72;
- var mch = h/8, mnh = h*0.075;
+ $(".screen")
+ .wh(w, h)
+ .northWest({top:0,left:0});
$("body, html")
.css({
@@ -19,27 +18,60 @@ jss.game = function() {
textAlign: "left"
});
- $("#screen")
- .wh(w, h)
- .north($("body").north()); // TODO : par rapport à la fenêtre entière.
+ $(".screen").hide();
+ $("#"+state).show();
+
+ jss[state](w, h, iconSize);
+};
+
+// ==== JavaScript Style pour la frontpage
+jss.frontpage = function(w, h, iconSize) {
+ var fp = $("#frontpage.screen");
+ var $fp = function() { return fp.find.apply(fp,arguments); };
+ $fp("#title-block")
+ .wh(w*0.5, h*0.2)
+ .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);
+ $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.9});
+ $fp(".frontpage-button.prefs")
+ .southWest({left:w*0.55,top:h*0.9});
+}
+
+// ==== JavaScript Style pour le jeu
+jss.game = function(w, h, iconSize) {
+ var g = $("#game.screen");
+ var $g = function() { return g.find.apply(g,arguments); };
+ var mch = h/8, mnh = h*0.075;
- $("#mc-caption-block")
+ $g("#mc-caption-block")
.wh(w, mch)
- .north($("#screen").north());
+ .north(g.north());
- $("#mc-caption")
+ $g("#mc-caption")
.fitIn("#mc-caption-block", 0.1);
- $("#mn-caption-block")
+ $g("#mn-caption-block")
.css({borderWidth: h/100})
.wh(w, mnh)
- .north($("#mc-caption-block").south());
+ .north($g("#mc-caption-block").south());
- $("#mn-caption")
+ $g("#mn-caption")
.css({zIndex: 10})
.fitIn("#mn-caption-block");
- $(".relationBox:visible")
+ $g(".relationBox:visible")
.css({
margin: 10,
padding: 10,
@@ -47,23 +79,40 @@ jss.game = function() {
WebkitBorderRadius: 10
});
- $(".relationBox:visible .icon")
- .wh(72,72)
+ $g(".relationBox:visible .icon")
+ .wh(iconSize,iconSize)
.css({
float: "left",
- marginRight: $(".relationBox").css("padding-left")
+ marginRight: $g(".relationBox").css("padding-left")
});
- $(".relations")
+ $g(".relations")
.width(w);
- $(".relation:visible").fitFont($(".relationBox:visible").width(), 72, 10);
+ $g(".relation:visible").fitFont($g(".relationBox:visible").width(), iconSize, 10);
- $(".relations")
- .south($("#screen").south());
+ $g(".relations")
+ .south(g.south());
+}
+
+// ==== Code métier général
+$(function() {
+ $(window).resize(jss);
+ jss();
+ frontpage();
+});
+
+// ==== Code métier pour la frontpage
+function frontpage() {
+ state="frontpage";
+ $(".frontpage-button.game").click(function(){
+ game();
+ });
}
-$(function () {
+// ==== Code métier pour le jeu
+function game() {
+ state="game";
$.getJSON("getGame.php?callback=?", {
user:"foo",
passwd:"bar",
@@ -83,12 +132,13 @@ $(function () {
animateNext(click, button);
} else {
$(".relations").empty();
+ $('#mn-caption').stop().clearQueue();
alert("Partie terminée !");
}
}
function animateNext(click, button) {
- var duration = 700;
+ var duration = 7000;
var mn = $("#mn-caption");
@@ -129,9 +179,8 @@ $(function () {
.appendTo(".relations");
});
- $(window).resize(jss);
updateText();
}).error(function(x){
alert("Erreur fatale. Merci de nous envoyer ce message : "+x.status+" - "+x.statusText+"\n"+x.responseText.substring(0,20)+((x.responseText == '') ? '': '…'));
});
-});
+}
+\ No newline at end of file
