From 6779f1d95df29158f6be093789cd8e31ceaec299 Mon Sep 17 00:00:00 2001
From: frperalde <francois.peralde@gmail.com>
Date: Mon, 8 Mar 2021 11:29:31 +0100
Subject: [PATCH] changement couleur et forme fonctionnel

---
 SwichGIT/src/css/base.css |  7 +++-
 SwichGIT/src/index.html   | 69 +++++++++++++++++++++++++++++++++------
 SwichGIT/src/js/main.js   | 36 ++++++++++----------
 SwichGIT/src/js/menu.js   | 19 +++++++++--
 4 files changed, 99 insertions(+), 32 deletions(-)

diff --git a/SwichGIT/src/css/base.css b/SwichGIT/src/css/base.css
index a4ff6d2..b9c88f5 100644
--- a/SwichGIT/src/css/base.css
+++ b/SwichGIT/src/css/base.css
@@ -9,7 +9,12 @@
 	--colorcarre : #c97fb3;/*CARRE*/
 	--colorone : #00a088;/*TRIANGLE*/
 	--colortwo : #5880c1;/*CROIX*/
-	--colorthree : #C800FF;/*LOSANGE*/
+
+	--colorseven : #e9546f;/*ROND*/
+	--coloreight : #c97fb3;/*CARRE*/
+	--colornine : #00a088;/*TRIANGLE*/
+	--colorten : #5880c1;/*CROIX*/
+	--colorthree : #E6792F;/*LOSANGE*/
 	--colorfour : #E6DA27;/*PENTA*/
 	--colorfive : #2E6DB4;/*HEXA*/
 	--colorsix : #E6792F;/*HOCTO*/
diff --git a/SwichGIT/src/index.html b/SwichGIT/src/index.html
index 7e843f1..952ab0c 100644
--- a/SwichGIT/src/index.html
+++ b/SwichGIT/src/index.html
@@ -114,9 +114,8 @@
                         <br>
                         <div id="pickrcontner">
                             <div class="containform3">
-                                <a onclick="disableCache('rond')" id="cacherond" class="cache cn rondcache"></a>
                                 <div class="containexte">
-                                    <a onclick="ableCache('rond')" class="containinte cb round"></a>
+                                    <a class="containinte cb round"></a>
                                     <div class="color-picker"></div>
                                 </div>
                             </div>
@@ -201,14 +200,15 @@
         <script>
             let pannel = document.getElementById("pannel");
             // Simple example, see optional options for more configuration.
-            var couleur1 = varColorToHex('--colorbase');
-            var couleur2 = varColorToHex('--colorcarre');
-            var couleur3 = varColorToHex('--colorone');
-            var couleur4 = varColorToHex('--colortwo');
+            var couleur1 = varColorToHex('--colorseven');
+            var couleur2 = varColorToHex('--coloreight');
+            var couleur3 = varColorToHex('--colornine');
+            var couleur4 = varColorToHex('--colorten');
             var couleur5 = varColorToHex('--colorthree');
             var couleur6 = varColorToHex('--colorfour');
             var couleur7 = varColorToHex('--colorfive');
             var couleur8 = varColorToHex('--colorsix');
+
             const pickr = Pickr.create({
                 el: '.color-picker',
                 theme: 'classic', // or 'monolith', or 'nano'
@@ -538,49 +538,98 @@
                 let color = args[0].toRGBA();
                 console.log(color);
                 let newcouleur = `rgba(${color[0]},${color[1]},${color[2]},${color[3]}`
-                document.documentElement.style.setProperty('--colorbase', newcouleur);
+                document.documentElement.style.setProperty('--colorseven', newcouleur);
             });
             pickr2.on('change', (...args) => {
                 let color = args[0].toRGBA();
                 console.log(color);
                 let newcouleur = `rgba(${color[0]},${color[1]},${color[2]},${color[3]}`
-                document.documentElement.style.setProperty('--colorcarre', newcouleur);
+                document.documentElement.style.setProperty('--coloreight', newcouleur);
+                for(const form in FormeSelect){
+                    if(FormeSelect[form] == "carre"){   
+                        var positionForm = FormeSelect.indexOf(FormeSelect[form]);
+                        var couleurChange = '--'+ListeCouleur[positionForm];
+                        document.documentElement.style.setProperty(couleurChange, newcouleur);
+                    }
+                }
             });
             pickr3.on('change', (...args) => {
                 let color = args[0].toRGBA();
                 console.log(color);
                 let newcouleur = `rgba(${color[0]},${color[1]},${color[2]},${color[3]}`
-                document.documentElement.style.setProperty('--colorone', newcouleur);
+                document.documentElement.style.setProperty('--colornine', newcouleur);
+                for(const form in FormeSelect){
+                    if(FormeSelect[form] == "triangle"){   
+                        var positionForm = FormeSelect.indexOf(FormeSelect[form]);
+                        var couleurChange = '--'+ListeCouleur[positionForm];
+                        document.documentElement.style.setProperty(couleurChange, newcouleur);
+                    }
+                }
             });
             pickr4.on('change', (...args) => {
                 let color = args[0].toRGBA();
                 console.log(color);
                 let newcouleur = `rgba(${color[0]},${color[1]},${color[2]},${color[3]}`
-                document.documentElement.style.setProperty('--colortwo', newcouleur);
+                document.documentElement.style.setProperty('--colorten', newcouleur);
+                for(const form in FormeSelect){
+                    if(FormeSelect[form] == "croix"){   
+                        var positionForm = FormeSelect.indexOf(FormeSelect[form]);
+                        var couleurChange = '--'+ListeCouleur[positionForm];
+                        document.documentElement.style.setProperty(couleurChange, newcouleur);
+                    }
+                }
             });
             pickr5.on('change', (...args) => {
                 let color = args[0].toRGBA();
                 console.log(color);
                 let newcouleur = `rgba(${color[0]},${color[1]},${color[2]},${color[3]}`
                 document.documentElement.style.setProperty('--colorthree', newcouleur);
+                for(const form in FormeSelect){
+                    if(FormeSelect[form] == "losange"){   
+                        var positionForm = FormeSelect.indexOf(FormeSelect[form]);
+                        var couleurChange = '--'+ListeCouleur[positionForm];
+                        document.documentElement.style.setProperty(couleurChange, newcouleur);
+                    }
+                }
             });
             pickr6.on('change', (...args) => {
                 let color = args[0].toRGBA();
                 console.log(color);
                 let newcouleur = `rgba(${color[0]},${color[1]},${color[2]},${color[3]}`
                 document.documentElement.style.setProperty('--colorfour', newcouleur);
+                for(const form in FormeSelect){
+                    if(FormeSelect[form] == "penta"){   
+                        var positionForm = FormeSelect.indexOf(FormeSelect[form]);
+                        var couleurChange = '--'+ListeCouleur[positionForm];
+                        document.documentElement.style.setProperty(couleurChange, newcouleur);
+                    }
+                }
             });
             pickr7.on('change', (...args) => {
                 let color = args[0].toRGBA();
                 console.log(color);
                 let newcouleur = `rgba(${color[0]},${color[1]},${color[2]},${color[3]}`
                 document.documentElement.style.setProperty('--colorfive', newcouleur);
+                for(const form in FormeSelect){
+                    if(FormeSelect[form] == "hexa"){   
+                        var positionForm = FormeSelect.indexOf(FormeSelect[form]);
+                        var couleurChange = '--'+ListeCouleur[positionForm];
+                        document.documentElement.style.setProperty(couleurChange, newcouleur);
+                    }
+                }
             });
             pickr8.on('change', (...args) => {
                 let color = args[0].toRGBA();
                 console.log(color);
                 let newcouleur = `rgba(${color[0]},${color[1]},${color[2]},${color[3]}`
                 document.documentElement.style.setProperty('--colorsix', newcouleur);
+                for(const form in FormeSelect){
+                    if(FormeSelect[form] == "hocto"){   
+                        var positionForm = FormeSelect.indexOf(FormeSelect[form]);
+                        var couleurChange = '--'+ListeCouleur[positionForm];
+                        document.documentElement.style.setProperty(couleurChange, newcouleur);
+                    }
+                }
             });
 
 
diff --git a/SwichGIT/src/js/main.js b/SwichGIT/src/js/main.js
index c4a70f3..bbbb211 100644
--- a/SwichGIT/src/js/main.js
+++ b/SwichGIT/src/js/main.js
@@ -308,7 +308,7 @@ class Figure {
 							if (this.couleur == CouleurFigure.Couleur1){
 								formeExte.style.backgroundColor = "var(--colorbase)"
 							} else if (this.couleur == CouleurFigure.Couleur2) {
-								formeExte.style.backgroundColor = "var(--colorone)";
+								formeExte.style.backgroundColor = "var(--colorcarre)";
 								if(FormeSelect.length > 1)
 								{
 									//suppression formeBase
@@ -326,7 +326,7 @@ class Figure {
 									}
 								}
 							} else if (this.couleur == CouleurFigure.Couleur3) {
-								formeExte.style.backgroundColor = "var(--colortwo)";
+								formeExte.style.backgroundColor = "var(--colorone)";
 								if(FormeSelect.length > 2)
 								{
 									//suppression formeBase
@@ -344,7 +344,7 @@ class Figure {
 									}
 								}
 							} else if (this.couleur == CouleurFigure.Couleur4) {
-								formeExte.style.backgroundColor = "var(--colorthree)";
+								formeExte.style.backgroundColor = "var(--colortwo)";
 								if(FormeSelect.length > 3)
 								{
 									//suppression formeBase
@@ -381,7 +381,7 @@ class Figure {
 							if (selectionDiemension == 0) {
 								this.couleur = CouleurFigure.Couleur1;
 								if (this.pos == 0 || this.pos == 2 || this.pos == 9 || this.pos == 11) {
-									formeExte.style.backgroundColor = "var(--colorone)";
+									formeExte.style.backgroundColor = "var(--colorcarre)";
 									this.couleur = CouleurFigure.Couleur2;
 									if(FormeSelect.length > 1)
 									{
@@ -401,7 +401,7 @@ class Figure {
 									}
 								}
 								if (this.pos == 1 || this.pos == 10) {
-									formeExte.style.backgroundColor = "var(--colortwo)";
+									formeExte.style.backgroundColor = "var(--colorone)";
 									this.couleur = CouleurFigure.Couleur3;
 									if(FormeSelect.length > 2)
 									{
@@ -421,7 +421,7 @@ class Figure {
 									}
 								}
 								if (this.pos == 4 || this.pos == 7) {
-									formeExte.style.backgroundColor = "var(--colorthree)";
+									formeExte.style.backgroundColor = "var(--colortwo)";
 									this.couleur = CouleurFigure.Couleur4;
 									if(FormeSelect.length > 3)
 									{
@@ -457,7 +457,7 @@ class Figure {
 							} else if (selectionDiemension == 1) {
 								this.couleur = CouleurFigure.Couleur1;
 								if (this.pos == 0 || this.pos == 2 || this.pos == 6 || this.pos == 8) {
-									formeExte.style.backgroundColor = "var(--colorone)";
+									formeExte.style.backgroundColor = "var(--colorcarre)";
 									this.couleur = CouleurFigure.Couleur2;
 									if(FormeSelect.length > 1)
 									{
@@ -477,7 +477,7 @@ class Figure {
 									}
 								}
 								if (this.pos == 1 || this.pos == 7) {
-									formeExte.style.backgroundColor = "var(--colortwo)";
+									formeExte.style.backgroundColor = "var(--colorone)";
 									this.couleur = CouleurFigure.Couleur3;
 									if(FormeSelect.length > 2)
 									{
@@ -497,7 +497,7 @@ class Figure {
 									}
 								}
 								if (this.pos == 4) {
-									formeExte.style.backgroundColor = "var(--colorthree)";
+									formeExte.style.backgroundColor = "var(--colortwo)";
 									this.couleur = CouleurFigure.Couleur4;
 									if(FormeSelect.length > 3)
 									{
@@ -567,7 +567,7 @@ class Figure {
 							if (this.couleur == CouleurFigure.Couleur1) {
 								formeInte.style.backgroundColor = "var(--colorbase)";
 							} else if (this.couleur == CouleurFigure.Couleur2) {
-								formeInte.style.backgroundColor = "var(--colorone)";
+								formeInte.style.backgroundColor = "var(--colorcarre)";
 								if(FormeSelect.length > 1)
 								{
 									//suppression formeBase
@@ -586,7 +586,7 @@ class Figure {
 								}
 
 							} else if (this.couleur == CouleurFigure.Couleur3) {
-								formeInte.style.backgroundColor = "var(--colortwo)";
+								formeInte.style.backgroundColor = "var(--colorone)";
 								if(FormeSelect.length > 2)
 								{
 									//suppression formeBase
@@ -604,7 +604,7 @@ class Figure {
 									}
 								}
 							} else if (this.couleur == CouleurFigure.Couleur4) {
-								formeInte.style.backgroundColor = "var(--colorthree)";
+								formeInte.style.backgroundColor = "var(--colortwo)";
 								if(FormeSelect.length > 3)
 								{
 									//suppression formeBase
@@ -641,7 +641,7 @@ class Figure {
 							if (selectionDiemension == 0) {
 								this.couleur = CouleurFigure.Couleur1;
 								if (this.pos == 0 || this.pos == 2 || this.pos == 9 || this.pos == 11) {
-									formeInte.style.backgroundColor = "var(--colorone)";
+									formeInte.style.backgroundColor = "var(--colorcarre)";
 									this.couleur = CouleurFigure.Couleur2;
 									if(FormeSelect.length > 1)
 									{
@@ -661,7 +661,7 @@ class Figure {
 									}
 								}
 								if (this.pos == 1 || this.pos == 10) {
-									formeInte.style.backgroundColor = "var(--colortwo)";
+									formeInte.style.backgroundColor = "var(--colorone)";
 									this.couleur = CouleurFigure.Couleur3;
 									if(FormeSelect.length > 2)
 									{
@@ -681,7 +681,7 @@ class Figure {
 									}
 								}
 								if (this.pos == 4 || this.pos == 7) {
-									formeInte.style.backgroundColor = "var(--colorthree)";
+									formeInte.style.backgroundColor = "var(--colortwo)";
 									this.couleur = CouleurFigure.Couleur4;
 									if(FormeSelect.length > 3)
 									{
@@ -717,7 +717,7 @@ class Figure {
 							} else if (selectionDiemension == 1) {
 								this.couleur = CouleurFigure.Couleur1;
 								if (this.pos == 0 || this.pos == 2 || this.pos == 6 || this.pos == 8) {
-									formeInte.style.backgroundColor = "var(--colorone)";
+									formeInte.style.backgroundColor = "var(--colorcarre)";
 									this.couleur = CouleurFigure.Couleur2;
 									if(FormeSelect.length > 1)
 									{
@@ -737,7 +737,7 @@ class Figure {
 									}
 								}
 								if (this.pos == 1 || this.pos == 7) {
-									formeInte.style.backgroundColor = "var(--colortwo)";
+									formeInte.style.backgroundColor = "var(--colorone)";
 									this.couleur = CouleurFigure.Couleur3;
 									if(FormeSelect.length > 2)
 									{
@@ -757,7 +757,7 @@ class Figure {
 									}
 								}
 								if (this.pos == 4) {
-									formeInte.style.backgroundColor = "var(--colorthree)";
+									formeInte.style.backgroundColor = "var(--colortwo)";
 									this.couleur = CouleurFigure.Couleur4;
 									if(FormeSelect.length > 3)
 									{
diff --git a/SwichGIT/src/js/menu.js b/SwichGIT/src/js/menu.js
index 5c7c507..d4f0eb4 100644
--- a/SwichGIT/src/js/menu.js
+++ b/SwichGIT/src/js/menu.js
@@ -1,6 +1,7 @@
 var FormeSelect = ["rond"];
-var ListeCouleur = ["colorbase","colorcarre","colorone","colortwo","colorthree"]
-var ListeClassForme = ["rond","carre","triangle","croix","losange","penta","hexa","hocto"]
+var ListeCouleur = ["colorbase","colorcarre","colorone","colortwo"];
+var ListeCouleurModif = ["colorseven","coloreight","colornine","colorten","colorthree","colorfour","colorfive","colorsix"];
+var ListeClassForme = ["rond","carre","triangle","croix","losange","penta","hexa","hocto"];
 
 //3 modes : 0 = couleurs // 1 = formes // 2 = personnaliser les cartes
 var mode = 0;
@@ -28,7 +29,19 @@ function disableCache(formName){
 		cacheName = "cache"+formName;
 		document.getElementById(cacheName).style.display = "none";
 		FormeSelect.push(formName);
-		console.log(FormeSelect.length);
+		for(const form in ListeClassForme){
+			//si la couleur est dans la liste selectionnée 
+			if(formName == ListeClassForme[form]){	
+				//recuperer la position de la couleur dans laquel on va le mettre		
+				var positionColor = FormeSelect.length - 1; 
+				var recupCouleur = getComputedStyle(document.body).getPropertyValue('--'+ListeCouleurModif[form]);
+				var dansQuelCouleur = '--'+ListeCouleur[positionColor];
+
+				document.documentElement.style.setProperty(dansQuelCouleur, recupCouleur);
+
+				console.log("Couleur "+ recupCouleur +" mettre dans : " + dansQuelCouleur);
+			}
+		}
 	}
 }