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..03ba9dc 100644 --- a/SwichGIT/src/css/formes.css +++ b/SwichGIT/src/css/formes.css @@ -79,6 +79,14 @@ margin-top: calc( (var(--y) - var(--z)) / 10); } +.castrianglec{ + margin-top: calc( (var(--m) - var(--n)) / 5); +} + +.caspentac{ + margin-top: calc( (var(--m) - var(--n)) / 10); +} + .losange{ -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); @@ -110,6 +118,11 @@ clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); } +.rondv2{ + -webkit-clip-path: circle(50% at 50% 50%); + clip-path: circle(50% at 50% 50%); +} + .rond{ -webkit-clip-path: circle(50% at 50% 50%); clip-path: circle(50% at 50% 50%); @@ -118,7 +131,6 @@ .formeinte{ height: 100%; width: 100%; - margin: 0 auto; } .formeexte{ height: 100%; @@ -126,19 +138,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..7148d9c 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,521 @@ 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)"; + + formeExte.style.backgroundColor = "var(--colorbase)"; + 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)"; + if(FormeSelect.length > 1) + { + //suppression formeBase + formeExte.classList.remove('rondv2'); + formeInte.classList.remove('rondv2'); + //ajout forme + formeExte.classList.add(FormeSelect[1]); + formeInte.classList.add(FormeSelect[1]); + //verification triangle ou penda + if(FormeSelect[1] == "triangle"){ + formeInte.classList.add("castrianglec"); + } + if(FormeSelect[1] == "penta"){ + formeInte.classList.add("caspentac"); + } + } } else if (this.couleur == CouleurFigure.Couleur3) { - unCercle.style.backgroundColor = "var(--colortwo)"; + formeExte.style.backgroundColor = "var(--colortwo)"; + if(FormeSelect.length > 2) + { + //suppression formeBase + formeExte.classList.remove('rondv2'); + formeInte.classList.remove('rondv2'); + //ajout forme + formeExte.classList.add(FormeSelect[2]); + formeInte.classList.add(FormeSelect[2]); + //verification triangle ou penda + if(FormeSelect[2] == "triangle"){ + formeInte.classList.add("castrianglec"); + } + if(FormeSelect[2] == "penta"){ + formeInte.classList.add("caspentac"); + } + } } else if (this.couleur == CouleurFigure.Couleur4) { - unCercle.style.backgroundColor = "var(--colorthree)"; + formeExte.style.backgroundColor = "var(--colorthree)"; + if(FormeSelect.length > 3) + { + //suppression formeBase + formeExte.classList.remove('rondv2'); + formeInte.classList.remove('rondv2'); + //ajout forme + formeExte.classList.add(FormeSelect[3]); + formeInte.classList.add(FormeSelect[3]); + //verification triangle ou penda + if(FormeSelect[3] == "triangle"){ + formeInte.classList.add("castrianglec"); + } + if(FormeSelect[3] == "penta"){ + formeInte.classList.add("caspentac"); + } + } else if (FormeSelect.length > 1){ + //suppression formeBase + formeExte.classList.remove('rondv2'); + formeInte.classList.remove('rondv2'); + //ajout forme + formeExte.classList.add(FormeSelect[1]); + formeInte.classList.add(FormeSelect[1]); + //verification triangle ou penda + if(FormeSelect[1] == "triangle"){ + formeInte.classList.add("castrianglec"); + } + if(FormeSelect[1] == "penta"){ + formeInte.classList.add("caspentac"); + } + } } } else { + this.couleur = CouleurFigure.Couleur1; 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(FormeSelect.length > 1) + { + //suppression formeBase + formeExte.classList.remove('rondv2'); + formeInte.classList.remove('rondv2'); + //ajout forme + formeExte.classList.add(FormeSelect[1]); + formeInte.classList.add(FormeSelect[1]); + //verification triangle ou penda + if(FormeSelect[1] == "triangle"){ + formeInte.classList.add("castrianglec"); + } + if(FormeSelect[1] == "penta"){ + formeInte.classList.add("caspentac"); + } + } } if (this.pos == 1 || this.pos == 10) { - unCercle.style.backgroundColor = "var(--colortwo)"; + formeExte.style.backgroundColor = "var(--colortwo)"; this.couleur = CouleurFigure.Couleur3; + if(FormeSelect.length > 2) + { + //suppression formeBase + formeExte.classList.remove('rondv2'); + formeInte.classList.remove('rondv2'); + //ajout forme + formeExte.classList.add(FormeSelect[2]); + formeInte.classList.add(FormeSelect[2]); + //verification triangle ou penda + if(FormeSelect[2] == "triangle"){ + formeInte.classList.add("castrianglec"); + } + if(FormeSelect[2] == "penta"){ + formeInte.classList.add("caspentac"); + } + } } if (this.pos == 4 || this.pos == 7) { - unCercle.style.backgroundColor = "var(--colorthree)"; + formeExte.style.backgroundColor = "var(--colorthree)"; this.couleur = CouleurFigure.Couleur4; + if(FormeSelect.length > 3) + { + //suppression formeBase + formeExte.classList.remove('rondv2'); + formeInte.classList.remove('rondv2'); + //ajout forme + formeExte.classList.add(FormeSelect[3]); + formeInte.classList.add(FormeSelect[3]); + //verification triangle ou penda + if(FormeSelect[3] == "triangle"){ + formeInte.classList.add("castrianglec"); + } + if(FormeSelect[3] == "penta"){ + formeInte.classList.add("caspentac"); + } + } else if (FormeSelect.length > 1){ + //suppression formeBase + formeExte.classList.remove('rondv2'); + formeInte.classList.remove('rondv2'); + //ajout forme + formeExte.classList.add(FormeSelect[1]); + formeInte.classList.add(FormeSelect[1]); + //verification triangle ou penda + if(FormeSelect[1] == "triangle"){ + formeInte.classList.add("castrianglec"); + } + if(FormeSelect[1] == "penta"){ + formeInte.classList.add("caspentac"); + } + } } } else if (selectionDiemension == 1) { + this.couleur = CouleurFigure.Couleur1; 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(FormeSelect.length > 1) + { + //suppression formeBase + formeExte.classList.remove('rondv2'); + formeInte.classList.remove('rondv2'); + //ajout forme + formeExte.classList.add(FormeSelect[1]); + formeInte.classList.add(FormeSelect[1]); + //verification triangle ou penda + if(FormeSelect[1] == "triangle"){ + formeInte.classList.add("castrianglec"); + } + if(FormeSelect[1] == "penta"){ + formeInte.classList.add("caspentac"); + } + } } if (this.pos == 1 || this.pos == 7) { - unCercle.style.backgroundColor = "var(--colortwo)"; + formeExte.style.backgroundColor = "var(--colortwo)"; this.couleur = CouleurFigure.Couleur3; + if(FormeSelect.length > 2) + { + //suppression formeBase + formeExte.classList.remove('rondv2'); + formeInte.classList.remove('rondv2'); + //ajout forme + formeExte.classList.add(FormeSelect[2]); + formeInte.classList.add(FormeSelect[2]); + //verification triangle ou penda + if(FormeSelect[2] == "triangle"){ + formeInte.classList.add("castrianglec"); + } + if(FormeSelect[2] == "penta"){ + formeInte.classList.add("caspentac"); + } + } } if (this.pos == 4) { - unCercle.style.backgroundColor = "var(--colorthree)"; + formeExte.style.backgroundColor = "var(--colorthree)"; this.couleur = CouleurFigure.Couleur4; + if(FormeSelect.length > 3) + { + //suppression formeBase + formeExte.classList.remove('rondv2'); + formeInte.classList.remove('rondv2'); + //ajout forme + formeExte.classList.add(FormeSelect[3]); + formeInte.classList.add(FormeSelect[3]); + //verification triangle ou penda + if(FormeSelect[3] == "triangle"){ + formeInte.classList.add("castrianglec"); + } + if(FormeSelect[3] == "penta"){ + formeInte.classList.add("caspentac"); + } + } else if (FormeSelect.length > 1){ + //suppression formeBase + formeExte.classList.remove('rondv2'); + formeInte.classList.remove('rondv2'); + //ajout forme + formeExte.classList.add(FormeSelect[1]); + formeInte.classList.add(FormeSelect[1]); + //verification triangle ou penda + if(FormeSelect[1] == "triangle"){ + formeInte.classList.add("castrianglec"); + } + if(FormeSelect[1] == "penta"){ + formeInte.classList.add("caspentac"); + } + } } } } + 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 vidcontainer = document.createElement('div'); + vidcontainer.className = "containform3carte"; + vidcontainer.className = "proute"; + + formeExte.className = "formeexte"; + formeExte.classList.add('rondv2'); - var unRond = document.createElement('div'); - unRond.className = "rond"; - unRond.style.backgroundColor = "var(--colorbase)"; + formeInte.className = "formeinte"; + formeInte.classList.add('rondv2'); + formeInte.style.backgroundColor = "var(--colorbase)"; + if (this.couleur != null) { - if (this.couleur == CouleurFigure.Couleur2) { - unRond.style.backgroundColor = "var(--colorone)"; + if (this.couleur == CouleurFigure.Couleur1) { + formeInte.style.backgroundColor = "var(--colorbase)"; + } else if (this.couleur == CouleurFigure.Couleur2) { + formeInte.style.backgroundColor = "var(--colorone)"; + if(FormeSelect.length > 1) + { + //suppression formeBase + formeExte.classList.remove('rondv2'); + formeInte.classList.remove('rondv2'); + //ajout forme + formeExte.classList.add(FormeSelect[1]); + formeInte.classList.add(FormeSelect[1]); + //verification triangle ou penda + if(FormeSelect[1] == "triangle"){ + formeInte.classList.add("castrianglec"); + } + if(FormeSelect[1] == "penta"){ + formeInte.classList.add("caspentac"); + } + } + } else if (this.couleur == CouleurFigure.Couleur3) { - unRond.style.backgroundColor = "var(--colortwo)"; + formeInte.style.backgroundColor = "var(--colortwo)"; + if(FormeSelect.length > 2) + { + //suppression formeBase + formeExte.classList.remove('rondv2'); + formeInte.classList.remove('rondv2'); + //ajout forme + formeExte.classList.add(FormeSelect[2]); + formeInte.classList.add(FormeSelect[2]); + //verification triangle ou penda + if(FormeSelect[2] == "triangle"){ + formeInte.classList.add("castrianglec"); + } + if(FormeSelect[2] == "penta"){ + formeInte.classList.add("caspentac"); + } + } } else if (this.couleur == CouleurFigure.Couleur4) { - unRond.style.backgroundColor = "var(--colorthree)"; + formeInte.style.backgroundColor = "var(--colorthree)"; + if(FormeSelect.length > 3) + { + //suppression formeBase + formeExte.classList.remove('rondv2'); + formeInte.classList.remove('rondv2'); + //ajout forme + formeExte.classList.add(FormeSelect[3]); + formeInte.classList.add(FormeSelect[3]); + //verification triangle ou penda + if(FormeSelect[3] == "triangle"){ + formeInte.classList.add("castrianglec"); + } + if(FormeSelect[3] == "penta"){ + formeInte.classList.add("caspentac"); + } + } else if (FormeSelect.length > 1){ + //suppression formeBase + formeExte.classList.remove('rondv2'); + formeInte.classList.remove('rondv2'); + //ajout forme + formeExte.classList.add(FormeSelect[1]); + formeInte.classList.add(FormeSelect[1]); + //verification triangle ou penda + if(FormeSelect[1] == "triangle"){ + formeInte.classList.add("castrianglec"); + } + if(FormeSelect[1] == "penta"){ + formeInte.classList.add("caspentac"); + } + } } } else { + this.couleur = CouleurFigure.Couleur1; 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(FormeSelect.length > 1) + { + //suppression formeBase + formeExte.classList.remove('rondv2'); + formeInte.classList.remove('rondv2'); + //ajout forme + formeExte.classList.add(FormeSelect[1]); + formeInte.classList.add(FormeSelect[1]); + //verification triangle ou penda + if(FormeSelect[1] == "triangle"){ + formeInte.classList.add("castrianglec"); + } + if(FormeSelect[1] == "penta"){ + formeInte.classList.add("caspentac"); + } + } } if (this.pos == 1 || this.pos == 10) { - unRond.style.backgroundColor = "var(--colortwo)"; + formeInte.style.backgroundColor = "var(--colortwo)"; this.couleur = CouleurFigure.Couleur3; + if(FormeSelect.length > 2) + { + //suppression formeBase + formeExte.classList.remove('rondv2'); + formeInte.classList.remove('rondv2'); + //ajout forme + formeExte.classList.add(FormeSelect[2]); + formeInte.classList.add(FormeSelect[2]); + //verification triangle ou penda + if(FormeSelect[2] == "triangle"){ + formeInte.classList.add("castrianglec"); + } + if(FormeSelect[2] == "penta"){ + formeInte.classList.add("caspentac"); + } + } } if (this.pos == 4 || this.pos == 7) { - unRond.style.backgroundColor = "var(--colorthree)"; + formeInte.style.backgroundColor = "var(--colorthree)"; this.couleur = CouleurFigure.Couleur4; + if(FormeSelect.length > 3) + { + //suppression formeBase + formeExte.classList.remove('rondv2'); + formeInte.classList.remove('rondv2'); + //ajout forme + formeExte.classList.add(FormeSelect[3]); + formeInte.classList.add(FormeSelect[3]); + //verification triangle ou penda + if(FormeSelect[3] == "triangle"){ + formeInte.classList.add("castrianglec"); + } + if(FormeSelect[3] == "penta"){ + formeInte.classList.add("caspentac"); + } + } else if (FormeSelect.length > 1){ + //suppression formeBase + formeExte.classList.remove('rondv2'); + formeInte.classList.remove('rondv2'); + //ajout forme + formeExte.classList.add(FormeSelect[1]); + formeInte.classList.add(FormeSelect[1]); + //verification triangle ou penda + if(FormeSelect[1] == "triangle"){ + formeInte.classList.add("castrianglec"); + } + if(FormeSelect[1] == "penta"){ + formeInte.classList.add("caspentac"); + } + } } } else if (selectionDiemension == 1) { + this.couleur = CouleurFigure.Couleur1; 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(FormeSelect.length > 1) + { + //suppression formeBase + formeExte.classList.remove('rondv2'); + formeInte.classList.remove('rondv2'); + //ajout forme + formeExte.classList.add(FormeSelect[1]); + formeInte.classList.add(FormeSelect[1]); + //verification triangle ou penda + if(FormeSelect[1] == "triangle"){ + formeInte.classList.add("castrianglec"); + } + if(FormeSelect[1] == "penta"){ + formeInte.classList.add("caspentac"); + } + } } if (this.pos == 1 || this.pos == 7) { - unRond.style.backgroundColor = "var(--colortwo)"; + formeInte.style.backgroundColor = "var(--colortwo)"; this.couleur = CouleurFigure.Couleur3; + if(FormeSelect.length > 2) + { + //suppression formeBase + formeExte.classList.remove('rondv2'); + formeInte.classList.remove('rondv2'); + //ajout forme + formeExte.classList.add(FormeSelect[2]); + formeInte.classList.add(FormeSelect[2]); + //verification triangle ou penda + if(FormeSelect[2] == "triangle"){ + formeInte.classList.add("castrianglec"); + } + if(FormeSelect[2] == "penta"){ + formeInte.classList.add("caspentac"); + } + } } if (this.pos == 4) { - unRond.style.backgroundColor = "var(--colorthree)"; + formeInte.style.backgroundColor = "var(--colorthree)"; this.couleur = CouleurFigure.Couleur4; + if(FormeSelect.length > 3) + { + //suppression formeBase + formeExte.classList.remove('rondv2'); + formeInte.classList.remove('rondv2'); + //ajout forme + formeExte.classList.add(FormeSelect[3]); + formeInte.classList.add(FormeSelect[3]); + //verification triangle ou penda + if(FormeSelect[3] == "triangle"){ + formeInte.classList.add("castrianglec"); + } + if(FormeSelect[3] == "penta"){ + formeInte.classList.add("caspentac"); + } + } else if (FormeSelect.length > 1){ + //suppression formeBase + formeExte.classList.remove('rondv2'); + formeInte.classList.remove('rondv2'); + //ajout forme + formeExte.classList.add(FormeSelect[1]); + formeInte.classList.add(FormeSelect[1]); + //verification triangle ou penda + if(FormeSelect[1] == "triangle"){ + formeInte.classList.add("castrianglec"); + } + if(FormeSelect[1] == "penta"){ + formeInte.classList.add("caspentac"); + } + } } } } - 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; @@ -2189,7 +2600,7 @@ function doublonInterdit(uneCarte) { } function bacASable() { - majSizeCard(2); + majSizeCard(3); var lesCartes = []; var LesFigure = []; diff --git a/SwichGIT/src/js/menu.js b/SwichGIT/src/js/menu.js index b77c13c..5c7c507 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,29 +13,34 @@ 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.length); + } } function changeContour(value){ var newvalue = value * 0.055 + 1; document.documentElement.style.setProperty('--z', newvalue+'vw'); + var valcard = value * 0.013 + 1; + document.documentElement.style.setProperty('--n', valcard+'vw'); + //document.documentElement.style.setProperty('--n', newvalue+'vw'); //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);