pascal.lafourcade
/
swish
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

changement couleur et forme fonctionnel

Browse Source
master
frperalde 4 years ago
parent c142b3c992
commit 6779f1d95d
4 changed files with 99 additions and 32 deletions
Show Stats Download Patch File Download Diff File

7
SwichGIT/src/css/base.css
Unescape View File

@ -9,7 +9,12 @@
--colorcarre : #c97fb3;/*CARRE*/ --colorcarre : #c97fb3;/*CARRE*/
--colorone : #00a088;/*TRIANGLE*/ --colorone : #00a088;/*TRIANGLE*/
--colortwo : #5880c1;/*CROIX*/ --colortwo : #5880c1;/*CROIX*/
--colorthree : #C800FF;/*LOSANGE*/
--colorseven : #e9546f;/*ROND*/
--coloreight : #c97fb3;/*CARRE*/
--colornine : #00a088;/*TRIANGLE*/
--colorten : #5880c1;/*CROIX*/
--colorthree : #E6792F;/*LOSANGE*/
--colorfour : #E6DA27;/*PENTA*/ --colorfour : #E6DA27;/*PENTA*/
--colorfive : #2E6DB4;/*HEXA*/ --colorfive : #2E6DB4;/*HEXA*/
--colorsix : #E6792F;/*HOCTO*/ --colorsix : #E6792F;/*HOCTO*/

69
SwichGIT/src/index.html
Unescape View File

@ -114,9 +114,8 @@
<br> <br>
<div id="pickrcontner"> <div id="pickrcontner">
<div class="containform3"> <div class="containform3">
<a onclick="disableCache('rond')" id="cacherond" class="cache cn rondcache"></a>
<div class="containexte"> <div class="containexte">
<a onclick="ableCache('rond')" class="containinte cb round"></a> <a class="containinte cb round"></a>
<div class="color-picker"></div> <div class="color-picker"></div>
</div> </div>
</div> </div>
@ -201,14 +200,15 @@
<script> <script>
let pannel = document.getElementById("pannel"); let pannel = document.getElementById("pannel");
// Simple example, see optional options for more configuration. // Simple example, see optional options for more configuration.
var couleur1 = varColorToHex('--colorbase'); var couleur1 = varColorToHex('--colorseven');
var couleur2 = varColorToHex('--colorcarre'); var couleur2 = varColorToHex('--coloreight');
var couleur3 = varColorToHex('--colorone'); var couleur3 = varColorToHex('--colornine');
var couleur4 = varColorToHex('--colortwo'); var couleur4 = varColorToHex('--colorten');
var couleur5 = varColorToHex('--colorthree'); var couleur5 = varColorToHex('--colorthree');
var couleur6 = varColorToHex('--colorfour'); var couleur6 = varColorToHex('--colorfour');
var couleur7 = varColorToHex('--colorfive'); var couleur7 = varColorToHex('--colorfive');
var couleur8 = varColorToHex('--colorsix'); var couleur8 = varColorToHex('--colorsix');
const pickr = Pickr.create({ const pickr = Pickr.create({
el: '.color-picker', el: '.color-picker',
theme: 'classic', // or 'monolith', or 'nano' theme: 'classic', // or 'monolith', or 'nano'
@ -538,49 +538,98 @@
let color = args[0].toRGBA(); let color = args[0].toRGBA();
console.log(color); console.log(color);
let newcouleur = `rgba(${color[0]},${color[1]},${color[2]},${color[3]}` 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) => { pickr2.on('change', (...args) => {
let color = args[0].toRGBA(); let color = args[0].toRGBA();
console.log(color); console.log(color);
let newcouleur = `rgba(${color[0]},${color[1]},${color[2]},${color[3]}` 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) => { pickr3.on('change', (...args) => {
let color = args[0].toRGBA(); let color = args[0].toRGBA();
console.log(color); console.log(color);
let newcouleur = `rgba(${color[0]},${color[1]},${color[2]},${color[3]}` 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) => { pickr4.on('change', (...args) => {
let color = args[0].toRGBA(); let color = args[0].toRGBA();
console.log(color); console.log(color);
let newcouleur = `rgba(${color[0]},${color[1]},${color[2]},${color[3]}` 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) => { pickr5.on('change', (...args) => {
let color = args[0].toRGBA(); let color = args[0].toRGBA();
console.log(color); console.log(color);
let newcouleur = `rgba(${color[0]},${color[1]},${color[2]},${color[3]}` let newcouleur = `rgba(${color[0]},${color[1]},${color[2]},${color[3]}`
document.documentElement.style.setProperty('--colorthree', newcouleur); 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) => { pickr6.on('change', (...args) => {
let color = args[0].toRGBA(); let color = args[0].toRGBA();
console.log(color); console.log(color);
let newcouleur = `rgba(${color[0]},${color[1]},${color[2]},${color[3]}` let newcouleur = `rgba(${color[0]},${color[1]},${color[2]},${color[3]}`
document.documentElement.style.setProperty('--colorfour', newcouleur); 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) => { pickr7.on('change', (...args) => {
let color = args[0].toRGBA(); let color = args[0].toRGBA();
console.log(color); console.log(color);
let newcouleur = `rgba(${color[0]},${color[1]},${color[2]},${color[3]}` let newcouleur = `rgba(${color[0]},${color[1]},${color[2]},${color[3]}`
document.documentElement.style.setProperty('--colorfive', newcouleur); 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) => { pickr8.on('change', (...args) => {
let color = args[0].toRGBA(); let color = args[0].toRGBA();
console.log(color); console.log(color);
let newcouleur = `rgba(${color[0]},${color[1]},${color[2]},${color[3]}` let newcouleur = `rgba(${color[0]},${color[1]},${color[2]},${color[3]}`
document.documentElement.style.setProperty('--colorsix', newcouleur); 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);
}
}
}); });

36
SwichGIT/src/js/main.js
Unescape View File

@ -308,7 +308,7 @@ class Figure {
if (this.couleur == CouleurFigure.Couleur1){ if (this.couleur == CouleurFigure.Couleur1){
formeExte.style.backgroundColor = "var(--colorbase)" formeExte.style.backgroundColor = "var(--colorbase)"
} else if (this.couleur == CouleurFigure.Couleur2) { } else if (this.couleur == CouleurFigure.Couleur2) {
formeExte.style.backgroundColor = "var(--colorone)"; formeExte.style.backgroundColor = "var(--colorcarre)";
if(FormeSelect.length > 1) if(FormeSelect.length > 1)
{ {
//suppression formeBase //suppression formeBase
@ -326,7 +326,7 @@ class Figure {
} }
} }
} else if (this.couleur == CouleurFigure.Couleur3) { } else if (this.couleur == CouleurFigure.Couleur3) {
formeExte.style.backgroundColor = "var(--colortwo)"; formeExte.style.backgroundColor = "var(--colorone)";
if(FormeSelect.length > 2) if(FormeSelect.length > 2)
{ {
//suppression formeBase //suppression formeBase
@ -344,7 +344,7 @@ class Figure {
} }
} }
} else if (this.couleur == CouleurFigure.Couleur4) { } else if (this.couleur == CouleurFigure.Couleur4) {
formeExte.style.backgroundColor = "var(--colorthree)"; formeExte.style.backgroundColor = "var(--colortwo)";
if(FormeSelect.length > 3) if(FormeSelect.length > 3)
{ {
//suppression formeBase //suppression formeBase
@ -381,7 +381,7 @@ class Figure {
if (selectionDiemension == 0) { if (selectionDiemension == 0) {
this.couleur = CouleurFigure.Couleur1; this.couleur = CouleurFigure.Couleur1;
if (this.pos == 0 || this.pos == 2 || this.pos == 9 || this.pos == 11) { 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; this.couleur = CouleurFigure.Couleur2;
if(FormeSelect.length > 1) if(FormeSelect.length > 1)
{ {
@ -401,7 +401,7 @@ class Figure {
} }
} }
if (this.pos == 1 || this.pos == 10) { if (this.pos == 1 || this.pos == 10) {
formeExte.style.backgroundColor = "var(--colortwo)"; formeExte.style.backgroundColor = "var(--colorone)";
this.couleur = CouleurFigure.Couleur3; this.couleur = CouleurFigure.Couleur3;
if(FormeSelect.length > 2) if(FormeSelect.length > 2)
{ {
@ -421,7 +421,7 @@ class Figure {
} }
} }
if (this.pos == 4 || this.pos == 7) { if (this.pos == 4 || this.pos == 7) {
formeExte.style.backgroundColor = "var(--colorthree)"; formeExte.style.backgroundColor = "var(--colortwo)";
this.couleur = CouleurFigure.Couleur4; this.couleur = CouleurFigure.Couleur4;
if(FormeSelect.length > 3) if(FormeSelect.length > 3)
{ {
@ -457,7 +457,7 @@ class Figure {
} else if (selectionDiemension == 1) { } else if (selectionDiemension == 1) {
this.couleur = CouleurFigure.Couleur1; this.couleur = CouleurFigure.Couleur1;
if (this.pos == 0 || this.pos == 2 || this.pos == 6 || this.pos == 8) { 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; this.couleur = CouleurFigure.Couleur2;
if(FormeSelect.length > 1) if(FormeSelect.length > 1)
{ {
@ -477,7 +477,7 @@ class Figure {
} }
} }
if (this.pos == 1 || this.pos == 7) { if (this.pos == 1 || this.pos == 7) {
formeExte.style.backgroundColor = "var(--colortwo)"; formeExte.style.backgroundColor = "var(--colorone)";
this.couleur = CouleurFigure.Couleur3; this.couleur = CouleurFigure.Couleur3;
if(FormeSelect.length > 2) if(FormeSelect.length > 2)
{ {
@ -497,7 +497,7 @@ class Figure {
} }
} }
if (this.pos == 4) { if (this.pos == 4) {
formeExte.style.backgroundColor = "var(--colorthree)"; formeExte.style.backgroundColor = "var(--colortwo)";
this.couleur = CouleurFigure.Couleur4; this.couleur = CouleurFigure.Couleur4;
if(FormeSelect.length > 3) if(FormeSelect.length > 3)
{ {
@ -567,7 +567,7 @@ class Figure {
if (this.couleur == CouleurFigure.Couleur1) { if (this.couleur == CouleurFigure.Couleur1) {
formeInte.style.backgroundColor = "var(--colorbase)"; formeInte.style.backgroundColor = "var(--colorbase)";
} else if (this.couleur == CouleurFigure.Couleur2) { } else if (this.couleur == CouleurFigure.Couleur2) {
formeInte.style.backgroundColor = "var(--colorone)"; formeInte.style.backgroundColor = "var(--colorcarre)";
if(FormeSelect.length > 1) if(FormeSelect.length > 1)
{ {
//suppression formeBase //suppression formeBase
@ -586,7 +586,7 @@ class Figure {
} }
} else if (this.couleur == CouleurFigure.Couleur3) { } else if (this.couleur == CouleurFigure.Couleur3) {
formeInte.style.backgroundColor = "var(--colortwo)"; formeInte.style.backgroundColor = "var(--colorone)";
if(FormeSelect.length > 2) if(FormeSelect.length > 2)
{ {
//suppression formeBase //suppression formeBase
@ -604,7 +604,7 @@ class Figure {
} }
} }
} else if (this.couleur == CouleurFigure.Couleur4) { } else if (this.couleur == CouleurFigure.Couleur4) {
formeInte.style.backgroundColor = "var(--colorthree)"; formeInte.style.backgroundColor = "var(--colortwo)";
if(FormeSelect.length > 3) if(FormeSelect.length > 3)
{ {
//suppression formeBase //suppression formeBase
@ -641,7 +641,7 @@ class Figure {
if (selectionDiemension == 0) { if (selectionDiemension == 0) {
this.couleur = CouleurFigure.Couleur1; this.couleur = CouleurFigure.Couleur1;
if (this.pos == 0 || this.pos == 2 || this.pos == 9 || this.pos == 11) { 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; this.couleur = CouleurFigure.Couleur2;
if(FormeSelect.length > 1) if(FormeSelect.length > 1)
{ {
@ -661,7 +661,7 @@ class Figure {
} }
} }
if (this.pos == 1 || this.pos == 10) { if (this.pos == 1 || this.pos == 10) {
formeInte.style.backgroundColor = "var(--colortwo)"; formeInte.style.backgroundColor = "var(--colorone)";
this.couleur = CouleurFigure.Couleur3; this.couleur = CouleurFigure.Couleur3;
if(FormeSelect.length > 2) if(FormeSelect.length > 2)
{ {
@ -681,7 +681,7 @@ class Figure {
} }
} }
if (this.pos == 4 || this.pos == 7) { if (this.pos == 4 || this.pos == 7) {
formeInte.style.backgroundColor = "var(--colorthree)"; formeInte.style.backgroundColor = "var(--colortwo)";
this.couleur = CouleurFigure.Couleur4; this.couleur = CouleurFigure.Couleur4;
if(FormeSelect.length > 3) if(FormeSelect.length > 3)
{ {
@ -717,7 +717,7 @@ class Figure {
} else if (selectionDiemension == 1) { } else if (selectionDiemension == 1) {
this.couleur = CouleurFigure.Couleur1; this.couleur = CouleurFigure.Couleur1;
if (this.pos == 0 || this.pos == 2 || this.pos == 6 || this.pos == 8) { 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; this.couleur = CouleurFigure.Couleur2;
if(FormeSelect.length > 1) if(FormeSelect.length > 1)
{ {
@ -737,7 +737,7 @@ class Figure {
} }
} }
if (this.pos == 1 || this.pos == 7) { if (this.pos == 1 || this.pos == 7) {
formeInte.style.backgroundColor = "var(--colortwo)"; formeInte.style.backgroundColor = "var(--colorone)";
this.couleur = CouleurFigure.Couleur3; this.couleur = CouleurFigure.Couleur3;
if(FormeSelect.length > 2) if(FormeSelect.length > 2)
{ {
@ -757,7 +757,7 @@ class Figure {
} }
} }
if (this.pos == 4) { if (this.pos == 4) {
formeInte.style.backgroundColor = "var(--colorthree)"; formeInte.style.backgroundColor = "var(--colortwo)";
this.couleur = CouleurFigure.Couleur4; this.couleur = CouleurFigure.Couleur4;
if(FormeSelect.length > 3) if(FormeSelect.length > 3)
{ {

19
SwichGIT/src/js/menu.js
Unescape View File

@ -1,6 +1,7 @@
var FormeSelect = ["rond"]; var FormeSelect = ["rond"];
var ListeCouleur = ["colorbase","colorcarre","colorone","colortwo","colorthree"] var ListeCouleur = ["colorbase","colorcarre","colorone","colortwo"];
var ListeClassForme = ["rond","carre","triangle","croix","losange","penta","hexa","hocto"] 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 //3 modes : 0 = couleurs // 1 = formes // 2 = personnaliser les cartes
var mode = 0; var mode = 0;
@ -28,7 +29,19 @@ function disableCache(formName){
cacheName = "cache"+formName; cacheName = "cache"+formName;
document.getElementById(cacheName).style.display = "none"; document.getElementById(cacheName).style.display = "none";
FormeSelect.push(formName); 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);
}
}
} }
} }

Write Preview
Loading…
Cancel
Save