Bonjour,
Ayant plusieurs engagement je ne peut malheureusement finir le tutoriel que j'ai promis ces jours ci mais voila une démarche détaillé de l'idée du plugin.
GÉNÉRER LA GRILLE:
Je suppose que t'as déjà travaillé dessus, mais j'ai quelques recommandations :
- ajouter une classe "input-sudk" aux imputs de la grille.
- ajouter des attributs HTML5 pour marquer les lignes, les colonnes et les sous grilles.
Par exemple, tout les éléments de la ligne "X" aurons un attribut (data-ligne="LX") et une classe "LX", les inputs de la colonne "Y" aurons un attribut (data-colone="CY") et une classe "CY"
pour les sous grilles c'est les 9 cellules qui ne doivent pas avoir le même chiffre (principe du sudoku) chaque input de le sous grille Z aurons un attribut (data-st="STZ") et une classe "STZ" bon voila le code PHP qui génère une grille avec ce principe mais il faut implémenté aussi cette logique dans ton fichier 'gen_grille.php':
include 'gen_grille.php'; // On prend en compte les données du fichier gen_grille.php
echo '<table width="200" border="1" style="border-style:solid;">';// On ouvre le tableau (la grille)
for ($i=0;$i<sizeof($Grille[0]);$i++){ // tant que tu n'a pas atteint la fin de Grille[0], soit 9 lignes, crée un <TR>
echo '<tr>';
$k = 0;
for ($j=0;$j<sizeof($Grille[0]);$j++){// Pour chaque TR ouvert, tant que tu n'a pas atteint la fin de Grille[0], soit 9 lignes, crée un <TD>
// Ce qui va créer 9 colonnes pour chacune des 9 lignes (et donc faire une grille de 9/9)
$choix2 = array_pop($choix);// Pour chaque cellule que tu ouvres prend la dernière valeur de $choix (qui se trouve dans gen_grille.php) et stock-la dans $choix2
if ($i==2 || $i==5){ // si tu es à la 3 OU à la 6 ligne ([2] OU [5])
echo '<td style="border-bottom : 4px solid blue;" >';// mets une bordure bleu de 4px en bas de la cellule
}
elseif ($j==2 || $j==5){// sinon si tu es à la colonne 3 OU la colone 6
echo '<td style="border-right : 4px solid blue;">';// mets une bordure bleu de 4px sur le coté droit
}
elseif ($i==2 && $j==5) {
echo '<td style="border-right : 4px solid blue; border-bottom : 4px solid blue;">';
}
else{
echo '<td>';
}
if (empty($choix)) {// Si $choix est vide, alors affiche que c'est vide)
echo 'vide';
}
else{ // Sinon, si $choix a encore une valeur, fait ça :
if($choix2==1){ // si la valeur choisie et stockée dans $choix2 = "1"
echo $Grille[$j][$i] ;// alors affiche moi la valeur de Grille[n°colonne où tu es][n°ligne où tu es]
}
else{
echo '<input type="text" data-ligne="L'.$i.'" data-colone="C'.$j.'" data-st="ST'.$k.'" name="'.$j.'-'.$i.'" id="'.$j.'-'.$i.'" maxlength="1" size="1" class="input-sudk L'.$i.' C'.$j.' ST'.$k.' ">';
// sinon, tu affiches un champs input pour que l'utilisateur le remplisse
}
echo '</td>';
}
if(($j-1) == sizeof($Grille[0]))){
$k=0;
}else{
if(fmod($i,3) == 0){
$k++;
}
}
}
echo "</tr>";
}
echo "</table>";
une foi les modifications implémentés voila le code JQuery qui vas avec:
[javascript]
$(document).ready(function() {
$( ".input-sudk" ).change(function() {
// Check input( $( this ).val() ) for validity here
var valeur = $( this ).val();
var ligne = $(this).data('ligne');
var col = $(this).data('colone');
var st = $(this).data('st');
//vérification sur la ligne
//val par défaut, on suppose que le nombre entré n'existe ni dans la ligne ni dans la colonne ni dans le sous tableau
var inline = False;
var incolomn = False;
var insubgrid = False;
$("."+ligne).each(function(){
//si le imput selectionné != du actuel on vérifie par l'attribut colonne car on ne trouve jamais une cellule ayant la même ligne et colonne!!
if($(this).data('colone') != col){
if($( this ).val() == valeur){ inline = TRUE; }
}
});
//ON FAIT DE MÊME POUR LES COLONNES ET LES SOUS TABLEAUX
//ici on vérifie les nouveaux valeurs de inline, incolomn et insubgrid et on fait ce qui doit être fait.
if(inline){...}
if(incolomn){...}
if(insubgrid){...}
});
});
[/javascript]
voila c'est l'idée que j'ai eu sur le sujet,
Bon Codage
Bonjour,
Ayant plusieurs engagement je ne peut malheureusement finir le tutoriel que j'ai promis ces jours ci mais voila une démarche détaillé de l'idée du plugin.
[b]GÉNÉRER LA GRILLE:[/b]
Je suppose que t'as déjà travaillé dessus, mais j'ai quelques recommandations :
- ajouter une classe "input-sudk" aux imputs de la grille.
- ajouter des attributs HTML5 pour marquer les lignes, les colonnes et les sous grilles.
Par exemple, tout les éléments de la ligne "X" aurons un attribut (data-ligne="LX") et une classe "LX", les inputs de la colonne "Y" aurons un attribut (data-colone="CY") et une classe "CY"
pour les sous grilles c'est les 9 cellules qui ne doivent pas avoir le même chiffre (principe du sudoku) chaque input de le sous grille Z aurons un attribut (data-st="STZ") et une classe "STZ" bon voila le code PHP qui génère une grille avec ce principe mais il faut implémenté aussi cette logique dans ton fichier 'gen_grille.php':
[php]
include 'gen_grille.php'; // On prend en compte les données du fichier gen_grille.php
echo '<table width="200" border="1" style="border-style:solid;">';// On ouvre le tableau (la grille)
for ($i=0;$i<sizeof($Grille[0]);$i++){ // tant que tu n'a pas atteint la fin de Grille[0], soit 9 lignes, crée un <TR>
echo '<tr>';
$k = 0;
for ($j=0;$j<sizeof($Grille[0]);$j++){// Pour chaque TR ouvert, tant que tu n'a pas atteint la fin de Grille[0], soit 9 lignes, crée un <TD>
// Ce qui va créer 9 colonnes pour chacune des 9 lignes (et donc faire une grille de 9/9)
$choix2 = array_pop($choix);// Pour chaque cellule que tu ouvres prend la dernière valeur de $choix (qui se trouve dans gen_grille.php) et stock-la dans $choix2
if ($i==2 || $i==5){ // si tu es à la 3 OU à la 6 ligne ([2] OU [5])
echo '<td style="border-bottom : 4px solid blue;" >';// mets une bordure bleu de 4px en bas de la cellule
}
elseif ($j==2 || $j==5){// sinon si tu es à la colonne 3 OU la colone 6
echo '<td style="border-right : 4px solid blue;">';// mets une bordure bleu de 4px sur le coté droit
}
elseif ($i==2 && $j==5) {
echo '<td style="border-right : 4px solid blue; border-bottom : 4px solid blue;">';
}
else{
echo '<td>';
}
if (empty($choix)) {// Si $choix est vide, alors affiche que c'est vide)
echo 'vide';
}
else{ // Sinon, si $choix a encore une valeur, fait ça :
if($choix2==1){ // si la valeur choisie et stockée dans $choix2 = "1"
echo $Grille[$j][$i] ;// alors affiche moi la valeur de Grille[n°colonne où tu es][n°ligne où tu es]
}
else{
echo '<input type="text" data-ligne="L'.$i.'" data-colone="C'.$j.'" data-st="ST'.$k.'" name="'.$j.'-'.$i.'" id="'.$j.'-'.$i.'" maxlength="1" size="1" class="input-sudk L'.$i.' C'.$j.' ST'.$k.' ">';
// sinon, tu affiches un champs input pour que l'utilisateur le remplisse
}
echo '</td>';
}
if(($j-1) == sizeof($Grille[0]))){
$k=0;
}else{
if(fmod($i,3) == 0){
$k++;
}
}
}
echo "</tr>";
}
echo "</table>";
[/php]
une foi les modifications implémentés voila le code JQuery qui vas avec:
[javascript]
$(document).ready(function() {
$( ".input-sudk" ).change(function() {
// Check input( $( this ).val() ) for validity here
var valeur = $( this ).val();
var ligne = $(this).data('ligne');
var col = $(this).data('colone');
var st = $(this).data('st');
//vérification sur la ligne
//val par défaut, on suppose que le nombre entré n'existe ni dans la ligne ni dans la colonne ni dans le sous tableau
var inline = False;
var incolomn = False;
var insubgrid = False;
$("."+ligne).each(function(){
//si le imput selectionné != du actuel on vérifie par l'attribut colonne car on ne trouve jamais une cellule ayant la même ligne et colonne!!
if($(this).data('colone') != col){
if($( this ).val() == valeur){ inline = TRUE; }
}
});
//ON FAIT DE MÊME POUR LES COLONNES ET LES SOUS TABLEAUX
//ici on vérifie les nouveaux valeurs de inline, incolomn et insubgrid et on fait ce qui doit être fait.
if(inline){...}
if(incolomn){...}
if(insubgrid){...}
});
});
[/javascript]
voila c'est l'idée que j'ai eu sur le sujet,
Bon Codage
