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.
This commit is contained in:
Yoann
parent
aa0ffc7e1a
commit
6b57ca1ff9
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user