commit 6b57ca1ff9dfcb2c469805b461eb18d9dbc27bf2
parent aa0ffc7e1a8408a3925be93e27bd7960d3d38d9b
Author: Yoann <yoann.b87@voila.fr>
Date: Sun, 17 Apr 2011 17:10:19 +0200
Page de création de partie :
- Présentation du formulaire.
- vérification des relations affectées au mots.
- construction de la chaine JSON à passer au serveur.
Diffstat:
2 files changed, 137 insertions(+), 33 deletions(-)
diff --git a/code/serveur/php/createGamejs.php b/code/serveur/php/createGamejs.php
@@ -169,17 +169,79 @@ else
#wordLines input{
border : 2px solid grey;
}
- .wordLine .status {
+ .status {
visibility: hidden;
}
- .wordLine.valid .status, #center.valid .status {
+ .valid .status, #center.valid .status {
color: green;
visibility: visible;
}
- .wordLine.invalid .status, #center.invalid .status, #center .status {
+ .invalid .status, #center.invalid .status, #center .status {
color: red;
visibility: visible;
}
+
+ .wordLinesTable {
+ min-height : 20px;
+ min-width : 20px;
+ border-collapse : collapse;
+ border-spacing : 0px;
+ margin-left : 30px;
+ }
+
+ .wordLinesTable td {
+ padding : 6px;
+ padding-left : 10px;
+ }
+
+ .wordLinesTable .lightLine {
+ background-color : #DADADA;
+ }
+
+
+ #center {
+ margin-left : 100px;
+ margin-top : 20px;
+ margin-bottom : 30px;
+ }
+
+ #center label {
+ border-bottom : 1px solid grey;
+ border-left : 1px solid grey;
+ -moz-border-radius : 100%;
+ padding-left : 10px;
+ }
+
+
+ #relations {
+ margin-bottom : 20px;
+ margin-top : 10px;
+ }
+
+ #relations label {
+ margin-left : 40px;
+ border-bottom : 1px solid grey;
+ border-left : 1px solid grey;
+ -moz-border-radius : 100%;
+ padding-left : 10px;
+ padding-right : 10px;
+ }
+
+ #button {
+ margin-top : 30px;
+ margin-left : 50px;
+ margin-bottom : 40px;
+ }
+
+ #button input {
+ margin-left : 10px;
+ margin-right : 40px;
+ padding : 4px;
+ padding-left : 8px;
+ padding-right : 8px;
+ font-weight : bold;
+ }
+
</style>
</head>
<body>
@@ -202,18 +264,39 @@ else
<select name="relation2" id="relation2">
</select>
</div>
- <div id="wordLines">
+ <div id="wordLines">
<div id="templates" style="display:none">
- <div class="wordLine" class="wordLine">
- <label for="word-"></label>
- <input type="text" id="word-"/>
- <span class="status">●</span>
- <input type="checkbox" id="r1-"/><label class="r1" for="r1-">Blabla</label>
- <input type="checkbox" id="r2-"/><label class="r2" for="r2-">Blabla</label>
- <input type="checkbox" id="r3-"/><label class="r3" for="r3-">Blabla</label>
- <input type="checkbox" id="r4-"/><label class="r4" for="r4-">Blabla</label>
- </div>
+ <table>
+ <thead> </thead>
+ <tbody>
+ <tr class="wordLine">
+ <td>
+ <label for="word-"></label>
+ </td>
+ <td>
+ <input type="text" id="word-"/>
+ <span class="status">●</span>
+ </td>
+ <td>
+ <input type="checkbox" id="r1-"/><label class="r1" for="r1-">Blabla</label>
+ </td>
+ <td>
+ <input type="checkbox" id="r2-"/><label class="r2" for="r2-">Blabla</label>
+ </td>
+ <td>
+ <input type="checkbox" id="r3-"/><label class="r3" for="r3-">Blabla</label>
+ </td>
+ <td>
+ <input type="checkbox" id="r4-"/><label class="r4" for="r4-">Blabla</label>
+ </td>
+ </tr>
+ </tbody>
+ </table>
</div>
+
+ <table class="wordLinesTable">
+ <tr><td></td></tr>
+ </table>
</div>
<div id="button"></div>
</div>
diff --git a/code/serveur/php/ressources/createGame.js b/code/serveur/php/ressources/createGame.js
@@ -15,7 +15,7 @@ $(function() {
var user = "foo";
var passwd = "bar";
var relations = data;
- var nbWordMin = 10;
+ var nbWordMin = 3;
var wordsOK = new Array();
var centerOK = false;
@@ -26,9 +26,10 @@ $(function() {
$("#templates .wordLine")
.clone()
.changeId(i)
+ .addClass(i%2==0 ? "lightLine" : "")
// .find("label").attr("for", "word"+i).text(i).end()
// .find("input").attr("id", "word"+i).end()
- .appendTo("#wordLines");
+ .appendTo(".wordLinesTable tbody");
(function (i) {
$("#word-"+i).focusout(checkWord);
@@ -79,7 +80,7 @@ $(function() {
var input = $(this);
var word = input.val();
- input.parent(".wordLine, #center").removeClass("valid invalid");
+ input.parent("td, #center").removeClass("valid invalid");
if (word != "") {
$.ajax({
@@ -87,7 +88,7 @@ $(function() {
url: "server.php?",
data: "action=4&word="+word+"&user="+user+"&passwd="+passwd,
success: function(msg){
- input.parent(".wordLine, #center").addClass((msg == false) ? "invalid" : "valid");
+ input.parent("td, #center").addClass((msg == false) ? "invalid" : "valid");
wordsOK[input.attr("id")] = !(msg == false);
}});
}
@@ -95,19 +96,21 @@ $(function() {
var formOK = function() {
displayError("");
-
- console.log(wordsOK);
- if ($("#relation1").val() == $("#relation2").val())
- displayError("Les deux relation doivent être différents");
- else if ($("#centralWord").val() == "")
- displayError("Le mot central doit être renseigné.");
- else if (badWord())
- displayError("Il existe des mots incorrects");
- else if (nbWordOK() < nbWordMin)
- displayError("Le nuage doit contenir au moins "+nbWordMin+" mots valides.");
- else if (!relationsOK())
- displayError("Tout les mots ne sont pas liés à une relation");
+ if ($("#relation1").val() == $("#relation2").val())
+ displayError("Les deux relation doivent être différents");
+ else if ($("#centralWord").val() == "")
+ displayError("Le mot central doit être renseigné.");
+ else if (badWord())
+ displayError("Il existe des mots incorrects");
+ else if (nbWordOK() < nbWordMin)
+ displayError("Le nuage doit contenir au moins "+nbWordMin+" mots valides.");
+ else if (!relationsOK())
+ displayError("Tout les mots ne sont pas liés à une relation");
+ else
+ sendGame();
+
+ return false;
};
var nbWordOK = function() {
@@ -129,16 +132,34 @@ $(function() {
}
var relationsOK = function() {
- for(i = 0; i < numWord; i++)
+ for(i = 1; i < numWord; i++) {
if(wordsOK["word-"+i]) {
- console.log("mot ok");
- if(!$("r1-"+i).is(":checked") && !$("r2-"+i).is(":checked") && !$("r3-"+i).is(":checked") && !$("r4-"+i).is(":checked"))
+ if(!$("#r1-"+i).is(":checked") && !$("#r2-"+i).is(":checked") && !$("#r3-"+i).is(":checked") && !$("#r4-"+i).is(":checked"))
return false;
}
+ }
return true;
}
+
+ var sendGame = function() {
+ var exit;
+ var cloud = "";
+ exit = {center:$("#centralWord").val(),
+ relations:[$("#relation1").val(),$("#relation2").val(),0,-1],
+ cloud:[]};
+
+ for(i=1;i<numWord;i++) {
+ if(i != 1)
+ cloud += ",";
+
+ exit.cloud.push({name:$("#word-"+i).val(),relations:[$("#r1-"+i).is(":checked"),$("#r2-"+i).is(":checked"),$("#r3-"+i).is(":checked"),$("#r4-"+i).is(":checked")]});
+ }
+
+
+ console.log(exit);
+ }
var displayError = function(message) {
if (message != "")
@@ -148,7 +169,7 @@ $(function() {
};
displayCentralWordAndRelations();
- displayNWordLines(10);
+ displayNWordLines(nbWordMin);
displayButtons();
});
});
