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

Intégration de la frontpage et du jeu.

Browse Source
This commit is contained in:
Georges Dupéron 2011-04-22 21:16:36 +02:00
parent 9ebb78e122
commit fde078b9e8
5 changed files with 145 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
code/html5/frontpage.html
View File

@ -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>

47
code/html5/frontpage.js
View File

@ -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 !");});
});

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

@ -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>
</div>
</body>
<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>
</body>
</html>

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

@ -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;
}

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

@ -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();
$("#mc-caption-block")
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;
$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());
}
$(function () {
// ==== 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();
});
}
// ==== 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 == '') ? '': '…'));
});
});
}