Création de la Classe Figure + Amélioration de la Gestion/Génération + Ajout de la première fonction de Comparaison de Carte 1/3

SwichGIT/src/index.html

@@ -152,7 +152,7 @@
 			<div id="pageGame">
 				<div class="menuhaut">
 					<div id="Redistribution">
-						<a onclick="creePartie()" id="relancerbtn">
+						<a onclick="test()" id="relancerbtn">
 							<div id="contourbuttonvalider">
 								<div class="bouttonvalider">
 									<h1 id="textjouer">RELANCER</h1>

SwichGIT/src/js/main.js

@@ -12,16 +12,20 @@ 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;
 		//fonction de selection
-		this.link.onclick = function selectioncarte() {
+		/*this.link.onclick = function selectioncarte() {
+			window.alert(this.getFigureCreuse)
+			window.alert(this.getFigureCreuse)
 			var macarte = this.id;
 			var lacarte = "card" + macarte;
 			if (document.getElementById(lacarte).style.boxShadow != "") {
@@ -37,7 +41,8 @@ class Carte {
 				else
 					window.alert("Bonjour !");
 			}
-		};
+		};*/
+
 		//div carte
 		var divconteneur = document.createElement('div');
 		divconteneur.className = "flex-item";
@@ -51,70 +56,175 @@ class Carte {
 			// Point ou anneau trouvé => création
 			if (this.Matrice[i % 3][Math.floor(i / 3)] == 1) {
 
-				var divContainForm = document.createElement('div');
+				//TEST : CRéation d'une figure Pleine => Rond
-				divContainForm.className = "containform";
+				var uneFigure = new Figure(TypeFigure.Pleine, FormeFigure.Rond, i % 3, Math.floor(i / 3));
+				this.FigPleine = uneFigure;
 
-				var unRond = document.createElement('div');
+				divconteneur.appendChild(uneFigure.getHTML);
-				unRond.className = "rond";
-				//unRond.style.backgroundColor = "#000DFF";
 
-				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);
 
-			}
+			} else if (this.Matrice[i % 3][Math.floor(i / 3)] == 2) { // Point ou anneau trouvé => création
 
-			// Point ou anneau trouvé => création
+				//TEST : CRéation d'une figure Pleine => Anneau
-			if (this.Matrice[i % 3][Math.floor(i / 3)] == 2) {
 
-				var divContainForm = document.createElement('div');
+				var uneFigure = new Figure(TypeFigure.Creuse, FormeFigure.Rond, i % 3, Math.floor(i / 3));
-				divContainForm.className = "containform";
 
-				var unCercle = document.createElement('div');
-				unCercle.className = "anneau";
 
-				if (i == 0 || i == 2 || i == 9 || i == 11) {
+				this.FigCreuse = uneFigure;
-					unCercle.style.backgroundColor = "#00CBFF";
-				}
-				if (i == 1 || i == 10) {
-					unCercle.style.backgroundColor = "#00FF6E";
-				}
-				if (i == 4 || i == 7) {
-					unCercle.style.backgroundColor = "#C800FF";
-				}
 
-				var unRond = document.createElement('div');
+				divconteneur.appendChild(uneFigure.getHTML);
-				unRond.className = "rondinterieur inté";
 
-				unCercle.appendChild(unRond);
+			} else divconteneur.appendChild(divcase);
-				divContainForm.appendChild(unCercle);
-				divcase.appendChild(divContainForm);
 
-			}
-			//ajout de l'élément dans la carte
-			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(laCarte);
+				carteselect.splice(pos, 1);
+				document.getElementById(lacarte).style.boxShadow = "";
+			}
+			else {
+				if (carteselect.length < 5) {
+					carteselect.push(laCarte);
+					document.getElementById(lacarte).style.boxShadow = "0 0 1vw red, 0 0 1vw red";
+				}
+				else
+					window.alert("Bonjour !");
+			}
+		};
 	}
 
-	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) {
@@ -185,7 +295,7 @@ function creePartie() {
 
 		deckPartie.push(uneCarte);
 
-		document.getElementById("containcards").appendChild(uneCarte.HTML);
+		document.getElementById("containcards").appendChild(uneCarte.getHTML);
 	}
 }
 
@@ -220,13 +330,11 @@ function getRandom(min, max) {
 	return Math.round(Math.random() * (max - min) + min)
 }
 
-function creaMatrice() {
+function creaMatrice(row, column) {
-	var cols = 3;
-	var rows = 4;
 	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;
 		}
 	}
@@ -251,6 +359,52 @@ function creaMatrice() {
 
 }
 
+//FONCTION DE TEST => permet de tester des fonctionnalité via un bouton
+function test() {
+
+	if (carteselect.length < 2) {
+		window.alert("Selection trop petite");
+		return;
+	} else {
+		var Code = comparaisonDeCarte(carteselect[0], carteselect[1]);
+		window.alert(Code);
+	}
+
+
+}
+
+
+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 ChoisirPseudo() {
 	let nom = localStorage.getItem('nom');
 	if (nom == null) {