From 2617d8192b87d7e1085cd100aa1379b746532d80 Mon Sep 17 00:00:00 2001 From: Yannis Date: Fri, 20 Nov 2020 12:26:56 +0100 Subject: [PATCH] Ajout fonction comparaison Total de carte 2/3 + class Figure --- SwichGIT/src/index.html | 2 +- SwichGIT/src/js/main.js | 485 ++++++++++++++++++++++++++++++++-------- 2 files changed, 393 insertions(+), 94 deletions(-) diff --git a/SwichGIT/src/index.html b/SwichGIT/src/index.html index 49c34e3..50392de 100644 --- a/SwichGIT/src/index.html +++ b/SwichGIT/src/index.html @@ -161,7 +161,7 @@
- +

VALIDER

diff --git a/SwichGIT/src/js/main.js b/SwichGIT/src/js/main.js index e8bc5aa..9e8e879 100644 --- a/SwichGIT/src/js/main.js +++ b/SwichGIT/src/js/main.js @@ -12,119 +12,250 @@ var deckPartie = []; //Ensemble des cartes affichées à l'écran class Carte { - constructor(id) { + constructor(id/*,row,column,nbForme*/) { //à décommenter quand il y aura des prametres de partie //Attribut de Classe this.identifiant = id; - this.Matrice = creaMatrice(); + this.row = 4 /*row*/; + this.column = 3 /*column*/; + this.Matrice = creaMatrice(this.row, this.column); //lien clicable this.link = document.createElement('a'); this.link.id = this.identifiant; + + //div carte + var divconteneur = document.createElement('div'); + divconteneur.className = "flex-item"; + divconteneur.id = "card" + this.identifiant; + + for (var i = 0; i < 12; i++) { + + var divcase = document.createElement('div'); + divcase.className = "item-form"; + + // Point ou anneau trouvé => création + if (this.Matrice[i % 3][Math.floor(i / 3)] == 1) { + + //TEST : CRéation d'une figure Pleine => Rond + var uneFigure = new Figure(TypeFigure.Pleine, FormeFigure.Rond, i % 3, Math.floor(i / 3)); + this.FigPleine = uneFigure; + + divconteneur.appendChild(uneFigure.getHTML); + + + } else if (this.Matrice[i % 3][Math.floor(i / 3)] == 2) { // Point ou anneau trouvé => création + + //TEST : CRéation d'une figure Pleine => Anneau + + var uneFigure = new Figure(TypeFigure.Creuse, FormeFigure.Rond, i % 3, Math.floor(i / 3)); + + + this.FigCreuse = uneFigure; + + divconteneur.appendChild(uneFigure.getHTML); + + } else divconteneur.appendChild(divcase); + + } + + this.link.appendChild(divconteneur); //fonction de selection this.link.onclick = function selectioncarte() { var macarte = this.id; var lacarte = "card" + macarte; + + var laCarte = deckPartie[this.id - 1]; //Carte liée avec le code HTML + if (document.getElementById(lacarte).style.boxShadow != "") { - var pos = carteselect.indexOf(this.getIdentifiant); + var pos = carteselect.indexOf(laCarte); carteselect.splice(pos, 1); document.getElementById(lacarte).style.boxShadow = ""; } else { if (carteselect.length < 5) { - carteselect.push(this.getIdentifiant); + carteselect.push(laCarte); document.getElementById(lacarte).style.boxShadow = "0 0 1vw red, 0 0 1vw red"; } else window.alert("Bonjour !"); } }; - //div carte - var divconteneur = document.createElement('div'); - divconteneur.className = "flex-item"; - divconteneur.id = "card" + this.identifiant; + } - for (var i = 0; i < 12; i++) { - var divcase = document.createElement('div'); - divcase.className = "item-form"; - // Point ou anneau trouvé => création - if (this.Matrice[i % 3][Math.floor(i / 3)] == 1) { + get carteVerticale() { - var divContainForm = document.createElement('div'); - divContainForm.className = "containform"; + // Copie de la Carte d'origine + var carteVerticale = this; - var unRond = document.createElement('div'); - unRond.className = "rond"; - //unRond.style.backgroundColor = "#000DFF"; + carteVerticale.FigCreuse.X = carteVerticale.column - carteVerticale.FigCreuse.X - 1; + // Coordonnees Y ne changent pas => Verticale + carteVerticale.FigPleine.X = carteVerticale.column - carteVerticale.FigPleine.X - 1; + // Coordonnees Y ne changent pas => Verticale - if (i == 0 || i == 2 || i == 9 || i == 11) { - unRond.style.backgroundColor = "#00CBFF"; - } - if (i == 1 || i == 10) { - unRond.style.backgroundColor = "#00FF6E"; - } - if (i == 4 || i == 7) { - unRond.style.backgroundColor = "#C800FF"; - } - divContainForm.appendChild(unRond); - divcase.appendChild(divContainForm); + carteVerticale.Matrice = creaMatriceVierge(carteVerticale.row, carteVerticale.column); + //Une figure pleine est signalée par un 1 dans la matrice de la carte. + carteVerticale.Matrice[carteVerticale.FigPleine.X][carteVerticale.FigPleine.Y] = 1; + //Une figure creuse est signalée par un 2 dans la matrice de la carte. + carteVerticale.Matrice[carteVerticale.FigCreuse.X][carteVerticale.FigCreuse.Y] = 2; - } - - // Point ou anneau trouvé => création - if (this.Matrice[i % 3][Math.floor(i / 3)] == 2) { - var divContainForm = document.createElement('div'); - divContainForm.className = "containform"; + return carteVerticale; + } - var unCercle = document.createElement('div'); - unCercle.className = "anneau"; + get carteHorizontale() { - if (i == 0 || i == 2 || i == 9 || i == 11) { - unCercle.style.backgroundColor = "#00CBFF"; - } - if (i == 1 || i == 10) { - unCercle.style.backgroundColor = "#00FF6E"; - } - if (i == 4 || i == 7) { - unCercle.style.backgroundColor = "#C800FF"; - } + //Copie de la carte d'origine + var carteHorizontale = this; - var unRond = document.createElement('div'); - unRond.className = "rondinterieur inté"; + carteHorizontale.FigCreuse.Y = carteHorizontale.row - carteHorizontale.FigCreuse.Y - 1; - unCercle.appendChild(unRond); - divContainForm.appendChild(unCercle); - divcase.appendChild(divContainForm); + //Coordonnees X ne changent pas => Horizontale + carteHorizontale.FigPleine.Y = carteHorizontale.row - carteHorizontale.FigPleine.Y - 1; + //Coordonnees X ne changent pas => Horizontale - } - //ajout de l'élément dans la carte - divconteneur.appendChild(divcase); - } + carteHorizontale.Matrice = creaMatriceVierge(carteHorizontale.row, carteHorizontale.column); + //Une figure pleine est signalée par un 1 dans la matrice de la carte. + carteHorizontale.Matrice[carteHorizontale.FigPleine.X][carteHorizontale.FigPleine.Y] = 1; + //Une figure creuse est signalée par un 2 dans la matrice de la carte. + carteHorizontale.Matrice[carteHorizontale.FigCreuse.X][carteHorizontale.FigCreuse.Y] = 2; - this.link.appendChild(divconteneur); + return carteHorizontale; } - get HTML() { + get getHTML() { return this.link; } get getIdentifiant() { return this.identifiant; } + + get getMatrice() { + return this.Matrice; + } + + get getFigurePleine() { + return this.FigPleine; + } + + get getFigureCreuse() { + return this.FigCreuse; + } +} + +class Figure { + + constructor(type, forme, Cox, Coy) { + this.X = Cox; + this.Y = Coy; + this.type = type; + this.forme = forme; + var pos = this.X + this.Y * 3; + var divcase = document.createElement('div'); + divcase.className = "item-form"; + switch (this.forme) { + case FormeFigure.Rond: + switch (this.type) { + + case TypeFigure.Creuse: + + var divContainForm = document.createElement('div'); + divContainForm.className = "containform"; + + var unCercle = document.createElement('div'); + unCercle.className = "anneau"; + + if (pos == 0 || pos == 2 || pos == 9 || pos == 11) { + unCercle.style.backgroundColor = "#00CBFF"; + } + if (pos == 1 || pos == 10) { + unCercle.style.backgroundColor = "#00FF6E"; + } + if (pos == 4 || pos == 7) { + unCercle.style.backgroundColor = "#C800FF"; + } + + var unRond = document.createElement('div'); + unRond.className = "rondinterieur inté"; + + unCercle.appendChild(unRond); + divContainForm.appendChild(unCercle); + divcase.appendChild(divContainForm); + this.CodeHTML = divcase; + break; + + case TypeFigure.Pleine: + + var divContainForm = document.createElement('div'); + divContainForm.className = "containform"; + + var unRond = document.createElement('div'); + unRond.className = "rond"; + //unRond.style.backgroundColor = "#000DFF"; + if (pos == 0 || pos == 2 || pos == 9 || pos == 11) { + unRond.style.backgroundColor = "#00CBFF"; + } + if (pos == 1 || pos == 10) { + unRond.style.backgroundColor = "#00FF6E"; + } + if (pos == 4 || pos == 7) { + unRond.style.backgroundColor = "#C800FF"; + } + divContainForm.appendChild(unRond); + divcase.appendChild(divContainForm); + this.CodeHTML = divcase; + break; + + } + } + } + get getHTML() { + return this.CodeHTML; + } + get getX() { + return this.X; + } + get getY() { + return this.Y; + } + get getType() { + return this.type; + } + get getForme() { + return this.forme; + } + + } +const FormeFigure = { + Rond: 'rond', + Carre: 'carre', + Triangle: 'triangle', + Pentagone: 'pentagone', + Losange: 'Losange' +}; + +const TypeFigure = { + Pleine: 'pleine', + Creuse: 'creuse' +}; + + function journuit() { //mode jour if (mode % 2 == 0) { //changer logo swish document.getElementById("imglogo").src = "imgs/swishjour.png"; document.getElementById("imglogo2").src = "imgs/swishjour.png"; - + /* + MESSAGE POUR CEUX QUI FONT LES TESTS ! Recommentez les lignes après ! Merci + */ //document.getElementById("fondinput").style.backgroundColor = lightsedonca; document.getElementById("contourbuttonvalider").style.backgroundColor = lightsedonca; - document.getElementById("textjouer").style.color = lightsedonca; + //document.getElementById("textjouer").style.color = lightsedonca; //document.getElementById("textplus").style.color = lightprima; //changer montagnesfond document.getElementById("mount1").src = "imgs/mount1.png"; @@ -137,22 +268,16 @@ function journuit() { document.documentElement.style.setProperty('--lightprima', lightprima); document.documentElement.style.setProperty('--lightsedonca', lightsedonca); document.documentElement.style.setProperty('--lighttercia', lighttercia); - document.getElementById("info").style.color = lightsedonca; - //document.getElementById("listeinfobtn").style.boxShadow = lightsedonca; } //mode nuit else { - //point info - document.getElementById("info").style.color = darkseconda; - //document.getElementById("listeinfobtn").style.boxShadow = 0,0,0,4,px,darkseconda; - //changer logo swish document.getElementById("imglogo").src = "imgs/swishnuit.png"; document.getElementById("imglogo2").src = "imgs/swishnuit.png"; - //bouttonjouer + //document.getElementById("fondinput").style.backgroundColor = darkseconda; document.getElementById("contourbuttonvalider").style.backgroundColor = darkseconda; - document.getElementById("textjouer").style.color = darkseconda; + //document.getElementById("textjouer").style.color = darkseconda; //document.getElementById("textplus").style.color = darkprima; //changer montagnesfond document.getElementById("mount1").src = "imgs/darkmount1.png"; @@ -169,6 +294,9 @@ function journuit() { mode = mode + 1; } +//=================================================================================== +//FONCTION GESTION DE GAME + function lancerpartie() { document.getElementById("pageAccueil").style.visibility = "hidden"; creePartie(); @@ -180,7 +308,19 @@ function retour() { document.getElementById("pageGame").style.visibility = "hidden"; } +function rechargerGAME() { + while (document.getElementById("containcards").firstElementChild != null) { + document.getElementById("containcards").firstElementChild.remove(); + } + for (var i = 0; i < deckPartie.length; i++) { + document.getElementById("containcards").appendChild(deckPartie[i].getHTML); + } +} + + + function creePartie() { + deckPartie = []; carteselect = []; while (document.getElementById("containcards").firstElementChild != null) { document.getElementById("containcards").firstElementChild.remove(); @@ -191,51 +331,55 @@ function creePartie() { deckPartie.push(uneCarte); - document.getElementById("containcards").appendChild(uneCarte.HTML); + document.getElementById("containcards").appendChild(uneCarte.getHTML); } } -function CarteToMatrice(idcarte) { - var laDivEnfantCarte = document.getElementById(idcarte).firstElementChild; - var cols = 3; - var rows = 4; - var myMatrice = new Array(); - for (var i = 0; i < cols; i++) { - myMatrice[i] = new Array(); - for (var j = 0; j < rows; j++) { - myMatrice[i][j] = 0; - } +function changerlesCartes() { + while (carteselect.length != 0) { + remplacerLaCarte(carteselect[0]); + carteselect.shift(); } - for (var i = 0; i < laDivEnfantCarte.childNodes.length; i++) { + rechargerGAME(); +} +function remplacerLaCarte(uneCarte) { + pos = deckPartie.indexOf(uneCarte); + var newCarte = new Carte(pos + 1); + deckPartie[pos] = newCarte; +} - if (laDivEnfantCarte.childNodes[i].childNodes.length != 0) { - if (laDivEnfantCarte.childNodes[i].childNodes[0].firstChild.className == "anneau") { - myMatrice[i % 3][Math.floor(i / 3)] = 2; - } - if (laDivEnfantCarte.childNodes[i].childNodes[0].firstChild.className == "rond") { - myMatrice[i % 3][Math.floor(i / 3)] = 1; - } - } +//==================================================================================== +//GESTION DE MATRICE +function somMatrice(matrice1, matrice2) { + var somMatrice = creaMatriceVierge(matrice1.length, matrice1[0].length); + for (var i = 0; i < matrice1.length; i++) { + for (var j = 0; j < matrice1[i].length; j++) { + somMatrice[i][j] = matrice1[i][j] + matrice2[i][j]; + } } - return myMatrice; + return somMatrice; } function getRandom(min, max) { return Math.round(Math.random() * (max - min) + min) } -function creaMatrice() { - var cols = 3; - var rows = 4; +function creaMatriceVierge(row, column) { var myMatrice = new Array(); - for (var i = 0; i < cols; i++) { + for (var i = 0; i < column; i++) { myMatrice[i] = new Array(); - for (var j = 0; j < rows; j++) { + for (var j = 0; j < row; j++) { myMatrice[i][j] = 0; } } + return myMatrice; +} + +function creaMatrice(row, column) { + + var myMatrice = creaMatriceVierge(row, column); var Cox1, Coy1, Cox2, Coy2; @@ -256,6 +400,160 @@ function creaMatrice() { return myMatrice; } +//================================================================================= +//FONCTION DE TEST => permet de tester des fonctionnalité via le bouton VALIDER + +function test() { + + if (carteselect.length == 0) { + window.alert("Selection Vide"); + return; + } else if (carteselect.length < 2) { + window.alert("Selection Trop Petite"); + return; + } else if (carteselect.length > 2) { + window.alert("Selection Trop Grande"); + return; + } else { + var tab = comparaisonTotal(carteselect[0], carteselect[1], 0); + window.alert(tab[0]) + window.alert(tab[1].getMatrice) + changerlesCartes(); + } +} + +//============================================================================================================================== + +//FONCTION POUR LISTE + + + +//================================================================================================================================ +//FONCTION COMPARAISON DE CARTE + +function comparaisonDeCarte(CarteMere, CarteFille) { + var Code = 0; + if (CarteMere == null) { + return 2; + } + var matCarteMere = CarteMere.getMatrice; + //CAS 1 : Il existe déja un ensemble( point <=> cercle ) sur CarteMere là où CarteFille possède un point ou un cercle + if ((matCarteMere[CarteFille.FigCreuse.X][CarteFille.FigCreuse.Y] == 3) || (matCarteMere[CarteFille.FigPleine.X][CarteFille.FigPleine.Y] == 3)) { + //Impossible d'empiler + return 0; + } + //CAS 2 : L'emplassement est parfait ! Les Coordonnées sont bonnes + if (matCarteMere[CarteFille.FigCreuse.X][CarteFille.FigCreuse.Y] == 1) { + if (matCarteMere[CarteFille.FigPleine.X][CarteFille.FigPleine.Y] == 2) { + //Coordonnées parfaites + return 2; + } + + } + //CAS 3 : une seule liaison est possible + if ((matCarteMere[CarteFille.FigCreuse.X][CarteFille.FigCreuse.Y] == 1) || (matCarteMere[CarteFille.FigPleine.X][CarteFille.FigPleine.Y] == 2)) { + return 1; + } + //Dernier cas : on ne peut rien faire avec ces cartes + return Code; + +} + + +function comparaisonTotal(CarteMere, CarteFille, index) { + /*matCarteMere[CarteFille.FigCreuse.X][CarteFille.FigCreuse.Y] == 1 + matCarteMere[CarteFille.FigPleine.X][CarteFille.FigPleine.Y]*/ + var Code1 = 0; + var Code2 = 0; + var tabRetour = []; + if (CarteMere == null) { + tabRetour.push(1); + tabRetour.push(CarteFille); + return tabRetour; + } + // NOTE : Cette fonction sait combien de fois elle a été appelée grâce à la variable index. + //En effet pour une carte donnée il existe 4 variantes d'elle-même. + //La fonction va donc appeler au fur et à mesure toutes ses variantes et + //les tester. + + //On obtient ces opérations suivantes + if (index == 1) { + CarteFille = CarteFille.carteVerticale; + } + if (index == 2) { + CarteFille = CarteFille.carteHorizontale; + } + if (index == 3) { + CarteFille = CarteFille.carteVerticale; + } + if (index == 4) { + tabRetour.push(-1); + tabRetour.push(CarteMere); + return tabRetour; + } + + Code1 = comparaisonDeCarte(CarteMere, CarteFille); + + if (Code1 == 2) { + CarteMere.Matrice = somMatrice(CarteMere.Matrice, CarteFille.Matrice); + tabRetour.push(Code1); + tabRetour.push(CarteMere); + return tabRetour; + } + if (Code1 == 1) { + // NOTE : il est important de vérifier ce cas présent. En effet si une seule liaison est possible, certaines cartes offrent plusieurs possibilités d'assemblage impliquant deux variantes. Comment savoir laquelle est la bonne pour le tas final ? + //La fonction va le faire remarquer. + + Code2 = comparaisonDeCarte(CarteMere, CarteFille.carteHorizontale); + if (Code2 == 2) { + CarteMere.Matrice = somMatrice(CarteMere.Matrice, CarteFille.carteHorizontale.Matrice); + tabRetour.push(Code2); + tabRetour.push(CarteMere); + return tabRetour; + } + + if (Code2 == 1) { + // Les variantes horizontalement symétriques possèdent toutes les deux une liaison avec + //CarteMere on ne peut pas savoir laquelle est la bonne pour faire le tas final. + tabRetour.push(4); + tabRetour.push(CarteFille); + return tabRetour; + } + + // On teste maintenant avec la variante verticalement symétrique + + Code2 = comparaisonDeCarte(CarteMere, CarteFille.carteHorizontale.carteVerticale); + if (Code2 == 2) { + CarteMere.Matrice = somMatrice(CarteMere.Matrice, CarteFille.carteVerticale.Matrice); + tabRetour.push(Code2); + tabRetour.push(CarteMere); + return tabRetour; + } + + if (Code2 == 1) { + // Les variantes horizontalement symétriques possèdent toutes les deux une liaison avec + //CarteMere on ne peut pas savoir laquelle est la bonne pour faire le tas final. + tabRetour.push(3); + tabRetour.push(CarteFille); + return tabRetour; + } + CarteFille.carteVerticale; + CarteMere.Matrice = somMatrice(CarteMere.Matrice, CarteFille.Matrice); + tabRetour.push(Code1); + tabRetour.push(CarteMere); + return tabRetour; + } + + tabRetour = comparaisonTotal(CarteMere, CarteFille, index + 1); + return tabRetour; + +} + + + +//================================================================================== + + function ChoisirPseudo() { let nom = localStorage.getItem('nom'); @@ -266,6 +564,7 @@ function ChoisirPseudo() { }; function EnvoyerNouveauNom() { + let pseudo = document.getElementById('inputpseudo').value; localStorage.setItem('nom', pseudo); document.location.reload(true);