commit b02831efef25706a9c947f1688428833336c2ae4
parent 9f47cc095bd758ab95a37e22b5b75885a439e572
Author: Georges Dupéron <jahvascriptmaniac+github@free.fr>
Date: Thu, 21 Apr 2011 11:07:51 +0200
Style frontpage.
Diffstat:
5 files changed, 116 insertions(+), 16 deletions(-)
diff --git a/code/html5/frontpage.html b/code/html5/frontpage.html
@@ -3,23 +3,41 @@
<head>
<title>Pticlic pre-alpha 0.2</title>
<meta charset="utf-8" />
+ <style>
+body {
+ background-color: black;
+}
+
+#screen {
+ background-color : #FFFFE0;
+}
+ </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"></div>
- <div class="button">
- <img class="gameIcon" alt="" src="img/mode_normal.png" />
- <span class="gameText">Jouer</span>
- </div>
- <div class="button">
- <img class="prefsIcon" alt="" src="img/config.png" />
- <span class="prefsText">Configuration</span>
- </div>
- <div id="connection"></div>
- <div class="button">
- <img class="aboutIcon" alt="" src="img/rel/default.png" />
- <span class="aboutText">A Propos</span>
- </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>
+ <img class="game icon" alt="" src="img/mode_normal.png" />
+ <span class="game text">Jouer</span>
+ <img class="prefs icon" alt="" src="img/config.png" />
+ <span class="prefs text">Configuration</span>
+ <img class="connection icon" alt="" src="img/config.png" />
+ <span class="connection text">Connexion</span>
+ <img class="about icon" alt="" src="img/rel/default.png" />
+ <span class="about text">A Propos</span>
</div>
</body>
</html>
diff --git a/code/html5/frontpage.js b/code/html5/frontpage.js
@@ -0,0 +1,79 @@
+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());
+
+ $("#game-icon-block")
+ .wh(w*0.25, h*0.2)
+ .northWest($("#title-block").southWest());
+ $("#game-text-block")
+ .wh(w*0.25, h*0.2)
+ .north($('#game-icon-block').south());
+ $("#connection-icon-block")
+ .wh(w*0.25, h*0.2)
+ .north($('#game-text-block').south());
+ $("#connection-text-block")
+ .wh(w*0.25, h*0.2)
+ .north($('#connection-icon-block').south());
+
+ $("#about-icon-block")
+ .wh(w*0.25, h*0.2)
+ .northEast($("#title-block").southEast());
+ $("#about-text-block")
+ .wh(w*0.25, h*0.2)
+ .north($('#about-icon-block').south());
+ $("#prefs-icon-block")
+ .wh(w*0.25, h*0.2)
+ .north($('#about-text-block').south());
+ $("#prefs-text-block")
+ .wh(w*0.25, h*0.2)
+ .north($('#prefs-icon-block').south());
+
+ $("#title")
+ .fitIn("#title-block", 0.1);
+ $(".icon")
+ .wh(72,72);
+ $(".game.icon")
+ .center($("#game-icon-block").center());
+ $(".about.icon")
+ .center($("#about-icon-block").center());
+ $(".prefs.icon")
+ .center($("#prefs-icon-block").center());
+ $(".connection.icon")
+ .center($("#connection-icon-block").center());
+
+ $(".text")
+ .fitIn("#game-text-block", 0.2);
+ $(".game.text")
+ .center($("#game-text-block").center());
+ $(".about.text")
+ .center($("#about-text-block").center());
+ $(".connection.text")
+ .center($("#connection-text-block").center());
+ $(".prefs.text")
+ .center($("#prefs-text-block").center());
+}
+
+$(function() {
+ $(window).resize(jss);
+ jss();
+});
+\ No newline at end of file
diff --git a/code/html5/index.html b/code/html5/index.html
@@ -41,8 +41,8 @@ body {
</style>
<script src="jquery-1.5.1.min.js"></script>
<script src="jquery-ui-1.8.11.custom.min.js"></script>
- <script src="pticlic.js"></script>
<script src="my-extensions.js"></script>
+ <script src="pticlic.js"></script>
</head>
<body>
<div id="screen">
diff --git a/code/html5/my-extensions.js b/code/html5/my-extensions.js
@@ -58,6 +58,8 @@ $.fn.fitIn = function(e, t, r, b, l) {
b *= h;
l *= w;
this.fitFont(w - r - l, h - t - b, 20).center(e.center());
+ console.log(this);
+ return this;
}
function queueize(method) {
diff --git a/code/html5/pticlic.js b/code/html5/pticlic.js
@@ -59,7 +59,7 @@ function jss() {
}
$(function () {
- var url = "http://www.pticlic.fr/unstable/code/serveur/php/server.php?action=0&nb=1&user=foo&passwd=bar&mode=normal";
+ var url = "http://www.pticlic.fr/unstable/code/serveur/php/server.php?action=0&nb=1&user=foo&passwd=bar&mode=normal&callback=?";
$.getJSON(url, function(data) {
var game = data[0];
var currentWordNb = 0;
