commit 03480060d08892d8a6a8c2b88d53ef3c73500e56
parent f99de82f68a29ccaa11117c76305ed70ef1c75e0
Author: Yoann <yoann.b87@voila.fr>
Date: Thu, 7 Apr 2011 10:13:32 +0200
Ajout de la vérification de la validité du mot central (Affichage) et
indication d'erreurs sur la sélection des relations.
Diffstat:
2 files changed, 56 insertions(+), 29 deletions(-)
diff --git a/code/serveur/php/createGamejs.php b/code/serveur/php/createGamejs.php
@@ -167,8 +167,19 @@ else
<script type="text/javascript" src="ressources/createGame.js" /></script>
<style type="text/css">
#wordLines input{
- border : 2px solid grey;
- }
+ border : 2px solid grey;
+ }
+ .wordLine .status {
+ visibility: hidden;
+ }
+ .wordLine.valid .status, #center.valid .status {
+ color: green;
+ visibility: visible;
+ }
+ .wordLine.invalid .status, #center.invalid .status, #center .status {
+ color: red;
+ visibility: visible;
+ }
</style>
</head>
<body>
@@ -176,8 +187,12 @@ else
<div class="content creategame">
<h2>Création de parties</h2>
<p>Cette page vous permet de créer des parties personalisées en indiquant les mots qui seront affiché pour un mot central.<br /><br />
+ <div id="errorDiv" class="message warning" style="display:none;"></div>
+
<div id="center">
- <label for="centralWord"> Le mot central : </label><input type="text" id="centralWord" name="centralWord" />
+ <label for="centralWord"> Le mot central : </label>
+ <input type="text" id="centralWord" name="centralWord" />
+ <span class="status">●</span>
</div>
<div id="relations">
<label for="relation1">Relation 1</label>
@@ -187,7 +202,15 @@ else
<select name="relation2" id="relation2">
</select>
</div>
- <div id="wordLines"></div>
+ <div id="wordLines">
+ <div style="display:none">
+ <div class="wordLine" id="templateWordLine">
+ <label for="word"></label>
+ <input id="word"/>
+ <span class="status">●</span>
+ </div>
+ </div>
+ </div>
<div id="button"></div>
</div>
<div id="templates" style="display:none">
diff --git a/code/serveur/php/ressources/createGame.js b/code/serveur/php/ressources/createGame.js
@@ -9,31 +9,38 @@ $($.getJSON("server.php",
var displayNWordLines = function (nb) {
for(var i=numWord; i<numWord+nb; i++){
- $("#wordLines").append('<div><label for="word'+i+'">'+i+' </label><input id="word'+i+'" /></div>');
+ $("#templateWordLine")
+ .clone()
+ .find("label").attr("for", "word"+i).text(i).end()
+ .find("input").attr("id", "word"+i).end()
+ .appendTo("#wordLines");
- function f(id) {
- $("#word"+id).focusout(function () {
- var input = "word"+id;
-
- checkWord(input)});
- };
-
- f(i);
+ (function (i) {
+ $("#word"+i).focusout(checkWord);
+ })(i);
}
numWord += nb;
}
var displayCentralWordAndRelations = function () {
- $("#centralWord").focusout(function () {
- var input = "centralWord";
- checkWord(input);
- });
+ $("#centralWord").focusout(checkWord);
+
$.each(relations,function(i,value){
- console.log(value);
$('<option/>').val(i).text(value).appendTo("#relations select")
});
+ $("#relation1, #relation2").change(function(){
+ if($("#relation1").val() == $("#relation2").val()) {
+ $("#errorDiv").text("Les relations doivent être différentes");
+ $("#errorDiv").css("display","block");
+ }
+ else {
+ $("#errorDiv").text("");
+ $("#errorDiv").css("display","none");
+ }
+ });
}
+
var displayButtons = function () {
$("#button").html('<input type="button" id="addLine" name="addLine" value="Ajouter" />');
$("#addLine").click(function(){displayNWordLines(1)});
@@ -42,23 +49,20 @@ $($.getJSON("server.php",
$("#validate").click(function(){});
}
- var checkWord = function (inputId) {
- var input = "#"+inputId;
- var word = $(input).val();
+ var checkWord = function () {
+ var input = $(this);
+ var word = input.val();
+
+ input.parent(".wordLine, #center").removeClass("valid invalid");
- if(word == "")
- $(input).css("background-color", "white");
- else {
+ if (word != "") {
$.ajax({type: "GET", url: "server.php?",
data: "action=4&word="+word+"&user="+user+"&passwd="+passwd,
success: function(msg){
- if(msg == "false")
- $(input).css("background-color", "orange");
- else
- $(input).css("background-color", "#55FF55");
+ input.parent(".wordLine, #center").addClass((msg == false) ? "invalid" : "valid");
}});
}
- }
+ };
displayCentralWordAndRelations();
displayNWordLines(10);
