From 49243256667b076f9362c1eed6ab9f102b8666b2 Mon Sep 17 00:00:00 2001 From: frperalde Date: Sat, 6 Mar 2021 11:43:39 +0100 Subject: [PATCH] formeseeeee --- SwichGIT/src/css/base.css | 4 ++ SwichGIT/src/css/desktops.css | 13 ++++- SwichGIT/src/css/formes.css | 18 +++--- SwichGIT/src/js/main.js | 107 ++++++++++++++++++++++------------ SwichGIT/src/js/menu.js | 30 +++++----- 5 files changed, 110 insertions(+), 62 deletions(-) diff --git a/SwichGIT/src/css/base.css b/SwichGIT/src/css/base.css index 7cb4e34..a4ff6d2 100644 --- a/SwichGIT/src/css/base.css +++ b/SwichGIT/src/css/base.css @@ -25,6 +25,10 @@ --x : 10vw; --y : 7vw; --z : 3.75vw; + /*Formes ete*/ + --l: 3vw; + --m: 2.5vw; + --n: 1.5vw; } .test{ diff --git a/SwichGIT/src/css/desktops.css b/SwichGIT/src/css/desktops.css index 50d6e46..5ae9c5d 100644 --- a/SwichGIT/src/css/desktops.css +++ b/SwichGIT/src/css/desktops.css @@ -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); } diff --git a/SwichGIT/src/css/formes.css b/SwichGIT/src/css/formes.css index c810914..f41d53a 100644 --- a/SwichGIT/src/css/formes.css +++ b/SwichGIT/src/css/formes.css @@ -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; } \ No newline at end of file diff --git a/SwichGIT/src/js/main.js b/SwichGIT/src/js/main.js index 6ded03a..0384579 100644 --- a/SwichGIT/src/js/main.js +++ b/SwichGIT/src/js/main.js @@ -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; diff --git a/SwichGIT/src/js/menu.js b/SwichGIT/src/js/menu.js index b77c13c..f14e1b6 100644 --- a/SwichGIT/src/js/menu.js +++ b/SwichGIT/src/js/menu.js @@ -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);