formeseeeee

master
frperalde 4 years ago
parent 0cd9565307
commit 4924325666

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

@ -7,7 +7,15 @@
height: var(--x);
width: var(--x);
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 {
@ -226,6 +234,9 @@
margin-top: 0.25vw;
height: 3vw;
border-radius: 10px;
display: table-cell;
position: relative;
vertical-align: middle;
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%);
}
.rond{
.rondv2{
-webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
}
@ -126,19 +126,19 @@
}
.containinteCarte{
top:calc((var(--x) - var(--z)) / 2);
left:calc((var(--x) - var(--z)) / 2);
height: var(--z);
width: var(--z);
top:calc((var(--l) - var(--n)) / 2);
left:calc((var(--l) - var(--n)) / 2);
height: var(--n);
width: var(--n);
z-index: 2;
position: absolute;
}
.containexteCarte{
top:calc((var(--x) - var(--y)) / 2);
left:calc((var(--x) - var(--y)) / 2);
height: var(--y);
width: var(--y);
top:calc((var(--l) - var(--m)) / 2);
left:calc((var(--l) - var(--m)) / 2);
height: var(--m);
width: var(--m);
z-index: 1;
position: absolute;
}

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

@ -1,4 +1,4 @@
var FormeSelect = [];
var FormeSelect = ["rond"];
var ListeCouleur = ["colorbase","colorcarre","colorone","colortwo","colorthree"]
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;
document.getElementById(cacheName).style.display = "none";
FormeSelect.push(form);
const pos = FormeSelect.indexOf(formName);
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){
@ -27,15 +38,6 @@ function changeContour(value){
//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){
var getvar = color;
getvar = getvar.substring(6,getvar.length-1);

Loading…
Cancel
Save