formeseeeee

master
frperalde 4 years ago
parent 0cd9565307
commit 4924325666

@ -25,6 +25,10 @@
--x : 10vw; --x : 10vw;
--y : 7vw; --y : 7vw;
--z : 3.75vw; --z : 3.75vw;
/*Formes ete*/
--l: 3vw;
--m: 2.5vw;
--n: 1.5vw;
} }
.test{ .test{

@ -7,7 +7,15 @@
height: var(--x); height: var(--x);
width: var(--x); width: var(--x);
display: table-cell; display: table-cell;
vertical-align: middle; /*vertical-align: middle;*/
}
.containform3carte {
position: relative;
height: var(--l);
width: var(--l);
display: table-cell;
/*vertical-align: middle;*/
} }
.containinte { .containinte {
@ -226,6 +234,9 @@
margin-top: 0.25vw; margin-top: 0.25vw;
height: 3vw; height: 3vw;
border-radius: 10px; border-radius: 10px;
display: table-cell;
position: relative;
vertical-align: middle;
background-color: var(--lighttercia); background-color: var(--lighttercia);
} }

@ -110,7 +110,7 @@
clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
} }
.rond{ .rondv2{
-webkit-clip-path: circle(50% at 50% 50%); -webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%); clip-path: circle(50% at 50% 50%);
} }
@ -126,19 +126,19 @@
} }
.containinteCarte{ .containinteCarte{
top:calc((var(--x) - var(--z)) / 2); top:calc((var(--l) - var(--n)) / 2);
left:calc((var(--x) - var(--z)) / 2); left:calc((var(--l) - var(--n)) / 2);
height: var(--z); height: var(--n);
width: var(--z); width: var(--n);
z-index: 2; z-index: 2;
position: absolute; position: absolute;
} }
.containexteCarte{ .containexteCarte{
top:calc((var(--x) - var(--y)) / 2); top:calc((var(--l) - var(--m)) / 2);
left:calc((var(--x) - var(--y)) / 2); left:calc((var(--l) - var(--m)) / 2);
height: var(--y); height: var(--m);
width: var(--y); width: var(--m);
z-index: 1; z-index: 1;
position: absolute; position: absolute;
} }

@ -269,6 +269,7 @@ class Figure {
} }
var divcase = document.createElement('div'); var divcase = document.createElement('div');
divcase.className = "item-form"; divcase.className = "item-form";
//AJOUT FRANCOIS
//Pour chaque type on regarde les formes //Pour chaque type on regarde les formes
switch (this.forme) { switch (this.forme) {
case FormeFigure.Rond: case FormeFigure.Rond:
@ -276,111 +277,141 @@ class Figure {
case TypeFigure.Moyen: case TypeFigure.Moyen:
var divContainForm = document.createElement('div'); var containInte = document.createElement('div');
divContainForm.className = "containform"; var formeInte = document.createElement('div');
divContainForm.classList.add("ajustementGrandeForme"); var containExte = document.createElement('div');
var formeExte = document.createElement('div');
var vidcontainer = document.createElement('div');
vidcontainer.className = "containform3carte";
formeExte.className = "formeexte";
formeExte.classList.add('rondv2');
formeInte.className = "formeinte";
formeInte.classList.add('rondv2');
formeInte.style.backgroundColor = "var(--lighttercia)";
var unCercle = document.createElement('div');
unCercle.className = "anneau";
unCercle.style.backgroundColor = "var(--colorbase)";
if (this.couleur != null) { if (this.couleur != null) {
if (this.couleur == CouleurFigure.Couleur2) { if (this.couleur == CouleurFigure.Couleur1){
unCercle.style.backgroundColor = "var(--colorone)"; formeExte.style.backgroundColor = "var(--colorbase)"
} else if (this.couleur == CouleurFigure.Couleur2) {
formeExte.style.backgroundColor = "var(--colorone)";
} else if (this.couleur == CouleurFigure.Couleur3) { } else if (this.couleur == CouleurFigure.Couleur3) {
unCercle.style.backgroundColor = "var(--colortwo)"; formeExte.style.backgroundColor = "var(--colortwo)";
} else if (this.couleur == CouleurFigure.Couleur4) { } else if (this.couleur == CouleurFigure.Couleur4) {
unCercle.style.backgroundColor = "var(--colorthree)"; formeExte.style.backgroundColor = "var(--colorthree)";
} }
} else { } else {
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) {
unCercle.style.backgroundColor = "var(--colorone)"; formeExte.style.backgroundColor = "var(--colorone)";
this.couleur = CouleurFigure.Couleur2; this.couleur = CouleurFigure.Couleur2;
} }
if (this.pos == 1 || this.pos == 10) { if (this.pos == 1 || this.pos == 10) {
unCercle.style.backgroundColor = "var(--colortwo)"; formeExte.style.backgroundColor = "var(--colortwo)";
this.couleur = CouleurFigure.Couleur3; this.couleur = CouleurFigure.Couleur3;
} }
if (this.pos == 4 || this.pos == 7) { if (this.pos == 4 || this.pos == 7) {
unCercle.style.backgroundColor = "var(--colorthree)"; formeExte.style.backgroundColor = "var(--colorthree)";
this.couleur = CouleurFigure.Couleur4; this.couleur = CouleurFigure.Couleur4;
} }
} else if (selectionDiemension == 1) { } else if (selectionDiemension == 1) {
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) {
unCercle.style.backgroundColor = "var(--colorone)"; formeExte.style.backgroundColor = "var(--colorone)";
this.couleur = CouleurFigure.Couleur2; this.couleur = CouleurFigure.Couleur2;
} }
if (this.pos == 1 || this.pos == 7) { if (this.pos == 1 || this.pos == 7) {
unCercle.style.backgroundColor = "var(--colortwo)"; formeExte.style.backgroundColor = "var(--colortwo)";
this.couleur = CouleurFigure.Couleur3; this.couleur = CouleurFigure.Couleur3;
} }
if (this.pos == 4) { if (this.pos == 4) {
unCercle.style.backgroundColor = "var(--colorthree)"; formeExte.style.backgroundColor = "var(--colorthree)";
this.couleur = CouleurFigure.Couleur4; this.couleur = CouleurFigure.Couleur4;
} }
} }
} }
containInte.appendChild(formeInte);
containInte.className = "containinteCarte";
containExte.appendChild(formeExte);
containExte.className = "containexteCarte";
var unRond = document.createElement('div'); vidcontainer.appendChild(containInte);
unRond.className = "rondinterieur inte"; vidcontainer.appendChild(containExte);
unCercle.appendChild(unRond); divcase.appendChild(vidcontainer);
divContainForm.appendChild(unCercle);
divcase.appendChild(divContainForm);
this.CodeHTML = divcase; this.CodeHTML = divcase;
break; break;
case TypeFigure.Petit: case TypeFigure.Petit:
var divContainForm = document.createElement('div'); var containInte = document.createElement('div');
divContainForm.className = "containform"; var formeInte = document.createElement('div');
divContainForm.classList.add("ajustementPetiteForme"); var containExte = document.createElement('div');
var formeExte = document.createElement('div');
var vidcontainer = document.createElement('div');
vidcontainer.className = "containform3carte";
formeExte.className = "formeexte";
formeExte.classList.add('rondv2');
formeExte.style.backgroundColor = "var(--lighttercia)";
var unRond = document.createElement('div'); formeInte.className = "formeinte";
unRond.className = "rond"; formeInte.classList.add('rondv2');
unRond.style.backgroundColor = "var(--colorbase)";
if (this.couleur != null) { if (this.couleur != null) {
if (this.couleur == CouleurFigure.Couleur2) { if (this.couleur == CouleurFigure.Couleur2) {
unRond.style.backgroundColor = "var(--colorone)"; formeInte.style.backgroundColor = "var(--colorbase)";
} else if (this.couleur == CouleurFigure.Couleur2) {
formeInte.style.backgroundColor = "var(--colorone)";
} else if (this.couleur == CouleurFigure.Couleur3) { } else if (this.couleur == CouleurFigure.Couleur3) {
unRond.style.backgroundColor = "var(--colortwo)"; formeInte.style.backgroundColor = "var(--colortwo)";
} else if (this.couleur == CouleurFigure.Couleur4) { } else if (this.couleur == CouleurFigure.Couleur4) {
unRond.style.backgroundColor = "var(--colorthree)"; formeInte.style.backgroundColor = "var(--colorthree)";
} }
} else { } else {
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) {
unRond.style.backgroundColor = "var(--colorone)"; formeInte.style.backgroundColor = "var(--colorone)";
this.couleur = CouleurFigure.Couleur2; this.couleur = CouleurFigure.Couleur2;
} }
if (this.pos == 1 || this.pos == 10) { if (this.pos == 1 || this.pos == 10) {
unRond.style.backgroundColor = "var(--colortwo)"; formeInte.style.backgroundColor = "var(--colortwo)";
this.couleur = CouleurFigure.Couleur3; this.couleur = CouleurFigure.Couleur3;
} }
if (this.pos == 4 || this.pos == 7) { if (this.pos == 4 || this.pos == 7) {
unRond.style.backgroundColor = "var(--colorthree)"; formeInte.style.backgroundColor = "var(--colorthree)";
this.couleur = CouleurFigure.Couleur4; this.couleur = CouleurFigure.Couleur4;
} }
} else if (selectionDiemension == 1) { } else if (selectionDiemension == 1) {
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) {
unRond.style.backgroundColor = "var(--colorone)"; formeInte.style.backgroundColor = "var(--colorone)";
this.couleur = CouleurFigure.Couleur2; this.couleur = CouleurFigure.Couleur2;
} }
if (this.pos == 1 || this.pos == 7) { if (this.pos == 1 || this.pos == 7) {
unRond.style.backgroundColor = "var(--colortwo)"; formeInte.style.backgroundColor = "var(--colortwo)";
this.couleur = CouleurFigure.Couleur3; this.couleur = CouleurFigure.Couleur3;
} }
if (this.pos == 4) { if (this.pos == 4) {
unRond.style.backgroundColor = "var(--colorthree)"; formeInte.style.backgroundColor = "var(--colorthree)";
this.couleur = CouleurFigure.Couleur4; this.couleur = CouleurFigure.Couleur4;
} }
} }
} }
divContainForm.appendChild(unRond); containInte.appendChild(formeInte);
divcase.appendChild(divContainForm); containInte.className = "containinteCarte";
containExte.appendChild(formeExte);
containExte.className = "containexteCarte";
vidcontainer.appendChild(containInte);
vidcontainer.appendChild(containExte);
divcase.appendChild(vidcontainer);
this.CodeHTML = divcase; this.CodeHTML = divcase;
break; break;

@ -1,4 +1,4 @@
var FormeSelect = []; var FormeSelect = ["rond"];
var ListeCouleur = ["colorbase","colorcarre","colorone","colortwo","colorthree"] var ListeCouleur = ["colorbase","colorcarre","colorone","colortwo","colorthree"]
var ListeClassForme = ["rond","carre","triangle","croix","losange","penta","hexa","hocto"] var ListeClassForme = ["rond","carre","triangle","croix","losange","penta","hexa","hocto"]
@ -13,12 +13,23 @@ function settingOpen(){
} }
} }
function disableCache(formName){ function ableCache(formName){
cacheName = "cache"+formName; cacheName = "cache"+formName;
document.getElementById(cacheName).style.display = "none"; const pos = FormeSelect.indexOf(formName);
FormeSelect.push(form); if (pos > -1) {
FormeSelect.splice(pos, 1);
}
document.getElementById(cacheName).style.display = "block";
}
//document.getElementById("SettingName").innerHTML = FormeSelect.length; function disableCache(formName){
if (FormeSelect.length < 4)
{
cacheName = "cache"+formName;
document.getElementById(cacheName).style.display = "none";
FormeSelect.push(formName);
console.log(FormeSelect);
}
} }
function changeContour(value){ function changeContour(value){
@ -27,15 +38,6 @@ function changeContour(value){
//document.getElementById("SettingName").innerHTML = newvalue; //document.getElementById("SettingName").innerHTML = newvalue;
} }
function ableCache(formName){
cacheName = "cache"+formName;
const pos = FormeSelect.indexOf(formName);
if (pos > -1) {
FormeSelect.splice(pos, 1);
}
document.getElementById(cacheName).style.display = "block";
}
function getVarColor(color){ function getVarColor(color){
var getvar = color; var getvar = color;
getvar = getvar.substring(6,getvar.length-1); getvar = getvar.substring(6,getvar.length-1);

Loading…
Cancel
Save