master
cytoffin
4 years ago
commit
0005d743fc
@ -0,0 +1,216 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title></title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<!--ROND-->
|
||||
<div class="containform">
|
||||
<div class="containinte">
|
||||
<div class=" formeinté cb rond"></div>
|
||||
</div>
|
||||
<div class="containexte">
|
||||
<div class="formeexté cn rond"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="containform">
|
||||
<div class="containinte">
|
||||
<div class=" formeinté cn rond"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="containform2">
|
||||
<div class="containinte">
|
||||
<div class=" formeinté cb rond"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="containform">
|
||||
<div class="containinte">
|
||||
<div class=" formeinté cn rond"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--CARRE-->
|
||||
<div class="containform">
|
||||
<div class="containinte">
|
||||
<div class=" formeinté cb carre"></div>
|
||||
</div>
|
||||
<div class="containexte">
|
||||
<div class="formeexté cn carre"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="containform">
|
||||
<div class="containinte">
|
||||
<div class=" formeinté cn carre"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="containform2">
|
||||
<div class="containinte">
|
||||
<div class=" formeinté cb carre"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="containform">
|
||||
<div class="containinte">
|
||||
<div class=" formeinté cn carre"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<!--TRIANGLE-->
|
||||
<div class="containform">
|
||||
<div class="containinte">
|
||||
<div class="castriangle cb formeinté triangle"></div>
|
||||
</div>
|
||||
<div class="containexte">
|
||||
<div class="formeexté cn triangle"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="containform">
|
||||
<div class="containinte">
|
||||
<div class="castriangle cn formeinté triangle"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="containform2">
|
||||
<div class="containinte">
|
||||
<div class="castriangle cb formeinté triangle"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="containform">
|
||||
<div class="containinte">
|
||||
<div class="castriangle cn formeinté triangle"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--LOSANGE-->
|
||||
<div class="containform">
|
||||
<div class="containinte">
|
||||
<div class=" formeinté cb losange"></div>
|
||||
</div>
|
||||
<div class="containexte">
|
||||
<div class="formeexté cn losange"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="containform">
|
||||
<div class="containinte">
|
||||
<div class=" formeinté cn losange"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="containform2">
|
||||
<div class="containinte">
|
||||
<div class=" formeinté cb losange"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="containform">
|
||||
<div class="containinte">
|
||||
<div class=" formeinté cn losange"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<!--CROIX-->
|
||||
<div class="containform">
|
||||
<div class="containinte">
|
||||
<div class=" formeinté cb croix"></div>
|
||||
</div>
|
||||
<div class="containexte">
|
||||
<div class="formeexté cn croix"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="containform">
|
||||
<div class="containinte">
|
||||
<div class=" formeinté cn croix"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="containform2">
|
||||
<div class="containinte">
|
||||
<div class=" formeinté cb croix"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="containform">
|
||||
<div class="containinte">
|
||||
<div class=" formeinté cn croix"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--PENTA-->
|
||||
<div class="containform">
|
||||
<div class="containinte">
|
||||
<div class=" formeinté cb penta"></div>
|
||||
</div>
|
||||
<div class="containexte">
|
||||
<div class="formeexté cn penta"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="containform">
|
||||
<div class="containinte">
|
||||
<div class=" formeinté cn penta"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="containform2">
|
||||
<div class="containinte">
|
||||
<div class=" formeinté cb penta"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="containform">
|
||||
<div class="containinte">
|
||||
<div class=" formeinté cn penta"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<!--HEXA-->
|
||||
<div class="containform">
|
||||
<div class="containinte">
|
||||
<div class=" formeinté cb hexa"></div>
|
||||
</div>
|
||||
<div class="containexte">
|
||||
<div class="formeexté cn hexa"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="containform">
|
||||
<div class="containinte">
|
||||
<div class=" formeinté cn hexa"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="containform2">
|
||||
<div class="containinte">
|
||||
<div class=" formeinté cb hexa"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="containform">
|
||||
<div class="containinte">
|
||||
<div class=" formeinté cn hexa"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--HOCTO-->
|
||||
<div class="containform">
|
||||
<div class="containinte">
|
||||
<div class=" formeinté cb hocto"></div>
|
||||
</div>
|
||||
<div class="containexte">
|
||||
<div class="formeexté cn hocto"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="containform">
|
||||
<div class="containinte">
|
||||
<div class=" formeinté cn hocto"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="containform2">
|
||||
<div class="containinte">
|
||||
<div class=" formeinté cb hocto"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="containform">
|
||||
<div class="containinte">
|
||||
<div class=" formeinté cn hocto"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,99 @@
|
||||
:root{
|
||||
--x : 10vw;
|
||||
--y : 8vw;
|
||||
--z : 4vw;
|
||||
}
|
||||
|
||||
.containform {
|
||||
position: relative;
|
||||
height: var(--x);
|
||||
width: var(--x);
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.containform2{
|
||||
position: relative;
|
||||
height: var(--x);
|
||||
width: var(--x);
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
background-color: black;
|
||||
}
|
||||
/*ROND*/
|
||||
.containexte{
|
||||
margin: 0 auto;
|
||||
height: var(--y);
|
||||
width: var(--y);
|
||||
}
|
||||
|
||||
.containinte{
|
||||
/*PROBLEME SIZE*/
|
||||
top: calc((var(--x) - var(--z)) / 2);
|
||||
left: calc((var(--x) - var(--z)) / 2);
|
||||
height: var(--z);
|
||||
width: var(--z);
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.rond{
|
||||
-webkit-clip-path: circle(50% at 50% 50%);
|
||||
clip-path: circle(50% at 50% 50%);
|
||||
}
|
||||
|
||||
.cb{
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.cn{
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.formeinté{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.formeexté{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.carre{
|
||||
-webkit-clip-path: inset(0 0 0 0);
|
||||
clip-path: inset(0 0 0 0);
|
||||
}
|
||||
|
||||
.triangle{
|
||||
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
|
||||
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
|
||||
}
|
||||
|
||||
.castriangle{
|
||||
margin-top: calc( (var(--y) - var(--z)) / 5);
|
||||
}
|
||||
|
||||
.losange{
|
||||
-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
|
||||
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
|
||||
}
|
||||
|
||||
.croix{
|
||||
-webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
|
||||
clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
|
||||
}
|
||||
|
||||
.penta{
|
||||
-webkit-clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
|
||||
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
|
||||
}
|
||||
|
||||
.hexa{
|
||||
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
|
||||
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
|
||||
}
|
||||
|
||||
.hocto{
|
||||
-webkit-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%);
|
||||
}
|
||||
|
||||
@ -0,0 +1,148 @@
|
||||
#COMMENT GENERER DES CARTES SWISH 3*4#
|
||||
|
||||
##Sommaire##
|
||||
- Introduction
|
||||
- Les Cartes Possibles
|
||||
- Les Types de Cartes
|
||||
- Génération des doublons
|
||||
- Conclusion
|
||||
|
||||
##Introduction ##
|
||||
|
||||
On peut croire qu'il existe un très grand nombre de possibilités de cartes à cause du nombre d'emplacements de Figures possible. 3*4 soit 12 au total.
|
||||
|
||||
Cependant, le jeu physique de swish utilise des cartes transparentes autirisant la rotation de celles-ci. Dès lors, plusieurs **variantes** d'une même carte sont possibles en retournant la carte de départ comme ici :
|
||||
|
||||
<img src="img/Parallélisme.png" alt="Markdown Monster icon"/>
|
||||
|
||||
Le but de cette étude est donc de savoir qu'elles sont les cartes possibles en prenant en compte toutes les variantes et comment générer le jeu physique Swish.
|
||||
|
||||
## Les Cartes Possibles ##
|
||||
|
||||
Pour éviter d'énumérer toutes les cartes au risque d'avoir des doublons. Nous devons comprendre le comportement des rotations en s'aidant d'un repère.
|
||||
|
||||
Dans notre cas, on sait que chaque carte possède 2 Figures :
|
||||
|
||||
- Une petite : un point
|
||||
- Une Grande : un cercle
|
||||
|
||||
Pour cette étude nous allons choisir le point de chaque carte comme repère.
|
||||
|
||||
Un point sur une carte peut avoir plusieurs positions. Il faut donc déterminer quelles sont les positions jumelées, c'est-à-dire, les positions qu'un point peut avoir en faisant des rotations.
|
||||
|
||||
Nous allons nous aider du code couleur présent sur les cartes.
|
||||
|
||||
### Point Bleu et Rouge ###
|
||||
Ces points possèdent 4 positions jumelées chacun. Comme ici :
|
||||
<img src="img/ParallélismePointBleu.png" alt="Markdown Monster icon"/>
|
||||
<img src="img/ParallélismePointRouge.png" alt="Markdown Monster icon"/>
|
||||
|
||||
### Point Vert et Violet###
|
||||
Ces points possèdent 2 positions jumelées chacun. La différence entre ces points et les autres réside dans le fait qu'il existe une symétrie axiale causée par le nombre impair de colonne sur les cartes.
|
||||
|
||||
<img src="img/ParallélismePointVert.png" alt="Markdown Monster icon"/>
|
||||
<img src="img/ParallélismePointViolet.png" alt="Markdown Monster icon"/>
|
||||
----
|
||||
|
||||
Maintenant que nous savons les positions de point possible. Pour chaque couleur de point, (Rouge,Bleu,Vert,Violet), nous allons garder qu'une seule position d'un point (haut-droit) puis énumerer toutes les positions qu'un cercle peut prendre sur une carte afin de créer un ensemble de carte Swish.
|
||||
|
||||
### Point Bleu et Rouge ###
|
||||
Sur une carte il existe 12 positions différentes causées par le quadrillage 3*4 d'une carte. Si l'une des positions est déjà prise par un point (Bleu ou Rouge) le cercle peut alors avoir 11 positions possibles comme ici :
|
||||
|
||||
<img src="img/PossibiliteesBleuRouge.png" alt="Markdown Monster icon"/>
|
||||
|
||||
Pour ces points il existe donc 11 possibilitées de carte chacun soit 22 cartes.
|
||||
|
||||
### Point Vert et Violet ###
|
||||
Pour ces points il existe une symétrie axiale déjà énumérée au-dessus à cause du nombre impair de colonne sur une carte. Lorsqu'un point se situe sur la colonne centrale, une symétrie se crée entre les deux autres colonnes. Ainsi les cercles ne possèdent pas 11 positions possibles mais plus que 7 comme ici:
|
||||
|
||||
<img src="img/PossibiliteesVertViolet.png" alt="Markdown Monster icon"/>
|
||||
|
||||
Pour ces points il existe donc 7 possibilitées de carte chacun soit 14 cartes.
|
||||
|
||||
**Au total nous trouvons 36 cartes possibles en prenant en compte les rotations**
|
||||
|
||||
----
|
||||
|
||||
##Les Types De Carte##
|
||||
|
||||
Après avoir énuméré toutes les cartes possibles. Nous pouvons analyser les cartes crées et repérer des propriétés.
|
||||
|
||||
En effet nous pouvons déjà séparer toutes les cartes en deux familles :
|
||||
### Cartes unies###
|
||||
|
||||
Cette famille contient uniquement les cartes possèdant un point et un cercle de même couleur.
|
||||
|
||||
<img src="img/CarteUniRougeBleu.png" alt="Markdown Monster icon"/>
|
||||
|
||||
La propriété principale d'une carte unie est que sa **complémentaire** (carte avec laquelle elle forme un assemblage de 2 cartes) est elle-même. Cette propriété va nous aider pour la génération des cartes plus tard.
|
||||
|
||||
### Cartes bicolores###
|
||||
|
||||
Cette famille contient toutes les autres cartes possibles exceptées les cartes unies. C'est-à-dire les cartes composées d'un point et d'un cercle de couleurs différentes.
|
||||
|
||||
À la différence des cartes unies, la complémentaire d'une carte bicolore n'est pas elle-même. Mais une carte différente composée d'un cercle et d'un point de couleur et position opposée afin de former un assemblage correct. Comme-ici :
|
||||
|
||||
<img src="img/DemonstrationAssemblageCarteBicolores.png" alt="Markdown Monster icon"/>
|
||||
|
||||
Nous savons qu'il existe 36 possibilités de cartes. 8 d'entre elles sont des cartes unies. Il reste donc 28 cartes bicolores que l'on peut rassembler en 14 paires de cartes complémentaires.
|
||||
|
||||
Ces 14 paires peuvent être elles aussi regrouper en fonction de leurs duos de couleurs formés par leurs figures.
|
||||
|
||||
Par exemple voici les familles des duos (Vert-Bleu) et (Violet-Rouge) composées de 2 paires de cartes complémentaires chacune:
|
||||
|
||||
<img src="img/FamilleDuosBleuVert-RougeViolet.png" alt="Markdown Monster icon"/>
|
||||
|
||||
**Remarque: Le fait de regrouper les cartes bicolores en famille de plus en plus précise va nous aider à comprendre le principe de génération des cartes.**
|
||||
|
||||
##Génération des doublons##
|
||||
|
||||
Un jeu de cartes Swish contient 60 cartes. Sachant qu'il n'existe que 36 possibilités de cartes. Nous savons donc que le jeu possède des doublons.
|
||||
|
||||
Cependant, si nous doublons toutes les cartes 36*2, nous obtenons un tas de 72 cartes. Il y a donc 12 cartes en trop. 12 cartes qui n'ont pas de doublons dans le paquet mais lesquels ?
|
||||
|
||||
En réalité, les 12 cartes manquantes sont en lien avec les paires complémentaires des familles de duos de couleurs vues au-dessus.
|
||||
|
||||
En effet, il existe un total de 6 familles de duos de couleurs :
|
||||
|
||||
###Bleu-Rouge###
|
||||
<img src="img/FamilleDuosBleuRouge.png" alt="Markdown Monster icon"/>
|
||||
###Bleu-Vert###
|
||||
<img src="img/FamilleDuosBleuVert.png" alt="Markdown Monster icon"/>
|
||||
###Bleu-Violet###
|
||||
<img src="img/FamilleDuosBleuViolet.png" alt="Markdown Monster icon"/>
|
||||
###Rouge-Vert###
|
||||
<img src="img/FamilleDuosRougeVert.png" alt="Markdown Monster icon"/>
|
||||
###Rouge-Violet###
|
||||
<img src="img/FamilleDuosRougeViolet.png" alt="Markdown Monster icon"/>
|
||||
###Violet-Vert###
|
||||
<img src="img/FamilleDuosVertViolet.png" alt="Markdown Monster icon"/>
|
||||
|
||||
À cause de la symétrie axiale causée par le nombre impair de colonne sur les cartes, les familles de duos possèdent un nombre de cartes et donc de paires différents.
|
||||
|
||||
Pour générer les 60 cartes, nous devons doubler toutes les cartes unies de façon à pouvoir former les paires complémentaires. Sachant qu'il y a 8 cartes unies nous obtenons 16 cartes pour le moment.
|
||||
|
||||
Pour les cartes bicolores il faut s'intéresser aux familles de duos de couleurs. Pour chaque famille il existe un nombre de paires de cartes complémentaires. La logique est très simple, nous allons doubler toutes les paires sauf une.
|
||||
|
||||
**Par exemple** pour la famille (Bleu-Vert) nous avons 2 paires de cartes complémentaires :
|
||||
|
||||
<img src="img/FamilleDuosBleuVert.png" alt="Markdown Monster icon"/>
|
||||
|
||||
**Mais une seule est doublée pour obtenir ces cartes dans le jeu physique**
|
||||
|
||||
<img src="img/DoublonBleuVert.png" alt="Markdown Monster icon"/>
|
||||
|
||||
**REMARQUE** : **Ce processus est utilisé pour toutes les familles de duos sauf les familles (Vert-Violet) et (Bleu-Rouge) qui sont des familles particulières.**
|
||||
|
||||
En effet pour la famille (Vert-Violet)
|
||||
**Nous allons doubler toutes les paires.**
|
||||
Tandis que pour la famille (Bleu-Rouge).
|
||||
**Deux paires ne vont pas être doublées.** Nous avons finalement nos 60 cartes dans le paquet en évitant de doubler un total de 12 cartes.
|
||||
|
||||
##CONCLUSION##
|
||||
|
||||
En suivant le processus nous avons réussi à enlever 12 cartes du jeu et ainsi obtenir le tas de 60 cartes que le jeu physique utilise.
|
||||
|
||||
**Mais pourquoi enlever 12 cartes ?**
|
||||
|
||||
Cela peut s'expliquer car les règles du jeu précisent que durant une partie, 16 cartes sont présentées aux joueurs. Dans des cas extrêmement rares, les 16 cartes ne peuvent être assemblées. Enlever ces 12 cartes, c'est tout simplement réduire les possibilités pour qu'un événement pareil se déroule dans une partie même si les possibilitées ne sont tout de même pas nul...
|
||||
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 40 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 66 KiB |
|
After Width: | Height: | Size: 37 KiB |
|
After Width: | Height: | Size: 38 KiB |
|
After Width: | Height: | Size: 41 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 8.7 KiB |
|
After Width: | Height: | Size: 8.7 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 17 KiB |
@ -0,0 +1,132 @@
|
||||
|
||||
/*! Pickr 1.0.1 MIT | https://github.com/Simonwep/pickr */.pickr{position:relative;overflow:visible;transform:translateY(0)}
|
||||
.pickr *{box-sizing:border-box}
|
||||
.pickr .pcr-button{position:relative;height:7vw;width:7vw;padding:.5em;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;border-radius:.15em;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" stroke="%2342445A" stroke-width="5px" stroke-linecap="round"><path d="M45,45L5,5"></path><path d="M45,5L5,45"></path></svg>') no-repeat 50%;background-size:0;transition:all .3s}
|
||||
.pickr .pcr-button:before{background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:.5em;z-index:-1;z-index:auto}
|
||||
.pickr .pcr-button:after,.pickr .pcr-button:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;border-radius:15em}
|
||||
.pickr .pcr-button:after{transition:background .3s;background:currentColor}
|
||||
.pickr .pcr-button.clear{background-size:70%}
|
||||
.pickr .pcr-button.clear:before{opacity:0}
|
||||
.pickr .pcr-button.clear:focus{box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor}
|
||||
.pickr .pcr-button.disabled{cursor:not-allowed}
|
||||
.pcr-app button,.pcr-app input,.pickr button,.pickr input{outline:none;border:none;-webkit-appearance:none}
|
||||
.pcr-app button:focus,.pcr-app input:focus,.pickr button:focus,.pickr input:focus{box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor}
|
||||
.pcr-app[data-theme=classic]{position:absolute;display:flex;flex-direction:column;z-index:10000;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;box-shadow:0 .15em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.03);width:28.5em;max-width:95vw;padding:.8em;border-radius:.1em;background:#fff;opacity:0;visibility:hidden;transition:opacity .3s;left:0;top:0}
|
||||
.pcr-app[data-theme=classic].visible{visibility:visible;opacity:1}
|
||||
.pcr-app[data-theme=classic] .pcr-swatches{display:flex;flex-wrap:wrap;margin-top:.75em}
|
||||
.pcr-app[data-theme=classic] .pcr-swatches.pcr-last{margin:0}
|
||||
@supports (display:grid){.pcr-app[data-theme=classic] .pcr-swatches{display:grid;align-items:center;justify-content:space-around;grid-template-columns:repeat(auto-fit,1.75em)}
|
||||
}
|
||||
|
||||
/*! Pickr2 1.0.1 MIT | https://github.com/Simonwep/pickr2 */.pickr2{position:relative;overflow:visible;transform:translateY(0)}
|
||||
.pickr2 *{box-sizing:border-box}
|
||||
.pickr2 .pcr-button{position:relative;height:7vw;width:7vw;padding:.5em;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;border-radius:.15em;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" stroke="%2342445A" stroke-width="5px" stroke-linecap="round"><path d="M45,45L5,5"></path><path d="M45,5L5,45"></path></svg>') no-repeat 50%;background-size:0;transition:all .3s}
|
||||
.pickr2 .pcr-button:before{background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:.5em;z-index:-1;z-index:auto}
|
||||
.pickr2 .pcr-button:after,.pickr2 .pcr-button:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;border-radius:15em}
|
||||
.pickr2 .pcr-button:after{transition:background .3s;background:currentColor}
|
||||
.pickr2 .pcr-button.clear{background-size:70%}
|
||||
.pickr2 .pcr-button.clear:before{opacity:0}
|
||||
.pickr2 .pcr-button.clear:focus{box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor}
|
||||
.pickr2 .pcr-button.disabled{cursor:not-allowed}
|
||||
.pcr-app button,.pcr-app input,.pickr2 button,.pickr2 input{outline:none;border:none;-webkit-appearance:none}
|
||||
.pcr-app button:focus,.pcr-app input:focus,.pickr2 button:focus,.pickr2 input:focus{box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor}
|
||||
.pcr-app[data-theme=classic]{position:absolute;display:flex;flex-direction:column;z-index:10000;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;box-shadow:0 .15em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.03);width:28.5em;max-width:95vw;padding:.8em;border-radius:.1em;background:#fff;opacity:0;visibility:hidden;transition:opacity .3s;left:0;top:0}
|
||||
.pcr-app[data-theme=classic].visible{visibility:visible;opacity:1}
|
||||
.pcr-app[data-theme=classic] .pcr-swatches{display:flex;flex-wrap:wrap;margin-top:.75em}
|
||||
.pcr-app[data-theme=classic] .pcr-swatches.pcr-last{margin:0}
|
||||
@supports (display:grid){.pcr-app[data-theme=classic] .pcr-swatches{display:grid;align-items:center;justify-content:space-around;grid-template-columns:repeat(auto-fit,1.75em)}
|
||||
}
|
||||
|
||||
/*! Pickr3 1.0.1 MIT | https://github.com/Simonwep/pickr3 */.pickr3{position:relative;overflow:visible;transform:translateY(0)}
|
||||
.pickr3 *{box-sizing:border-box}
|
||||
.pickr3 .pcr-button{position:relative;height:7vw;width:7vw;padding:.5em;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;border-radius:.15em;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" stroke="%2342445A" stroke-width="5px" stroke-linecap="round"><path d="M45,45L5,5"></path><path d="M45,5L5,45"></path></svg>') no-repeat 50%;background-size:0;transition:all .3s}
|
||||
.pickr3 .pcr-button:before{background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:.5em;z-index:-1;z-index:auto}
|
||||
.pickr3 .pcr-button:after,.pickr3 .pcr-button:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;border-radius:15em}
|
||||
.pickr3 .pcr-button:after{transition:background .3s;background:currentColor}
|
||||
.pickr3 .pcr-button.clear{background-size:70%}
|
||||
.pickr3 .pcr-button.clear:before{opacity:0}
|
||||
.pickr3 .pcr-button.clear:focus{box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor}
|
||||
.pickr3 .pcr-button.disabled{cursor:not-allowed}
|
||||
.pcr-app button,.pcr-app input,.pickr3 button,.pickr3 input{outline:none;border:none;-webkit-appearance:none}
|
||||
.pcr-app button:focus,.pcr-app input:focus,.pickr3 button:focus,.pickr3 input:focus{box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor}
|
||||
.pcr-app[data-theme=classic]{position:absolute;display:flex;flex-direction:column;z-index:10000;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;box-shadow:0 .15em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.03);width:28.5em;max-width:95vw;padding:.8em;border-radius:.1em;background:#fff;opacity:0;visibility:hidden;transition:opacity .3s;left:0;top:0}
|
||||
.pcr-app[data-theme=classic].visible{visibility:visible;opacity:1}
|
||||
.pcr-app[data-theme=classic] .pcr-swatches{display:flex;flex-wrap:wrap;margin-top:.75em}
|
||||
.pcr-app[data-theme=classic] .pcr-swatches.pcr-last{margin:0}
|
||||
@supports (display:grid){.pcr-app[data-theme=classic] .pcr-swatches{display:grid;align-items:center;justify-content:space-around;grid-template-columns:repeat(auto-fit,1.75em)}
|
||||
}
|
||||
|
||||
|
||||
/*! Pickr4 1.0.1 MIT | https://github.com/Simonwep/pickr4 */.pickr4{position:relative;overflow:visible;transform:translateY(0)}
|
||||
.pickr4 *{box-sizing:border-box}
|
||||
.pickr4 .pcr-button{position:relative;height:7vw;width:7vw;padding:.5em;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;border-radius:.15em;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" stroke="%2342445A" stroke-width="5px" stroke-linecap="round"><path d="M45,45L5,5"></path><path d="M45,5L5,45"></path></svg>') no-repeat 50%;background-size:0;transition:all .3s}
|
||||
.pickr4 .pcr-button:before{background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:.5em;z-index:-1;z-index:auto}
|
||||
.pickr4 .pcr-button:after,.pickr4 .pcr-button:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;border-radius:15em}
|
||||
.pickr4 .pcr-button:after{transition:background .3s;background:currentColor}
|
||||
.pickr4 .pcr-button.clear{background-size:70%}
|
||||
.pickr4 .pcr-button.clear:before{opacity:0}
|
||||
.pickr4 .pcr-button.clear:focus{box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor}
|
||||
.pickr4 .pcr-button.disabled{cursor:not-allowed}
|
||||
.pcr-app button,.pcr-app input,.pickr4 button,.pickr4 input{outline:none;border:none;-webkit-appearance:none}
|
||||
.pcr-app button:focus,.pcr-app input:focus,.pickr4 button:focus,.pickr4 input:focus{box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor}
|
||||
.pcr-app[data-theme=classic]{position:absolute;display:flex;flex-direction:column;z-index:10000;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;box-shadow:0 .15em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.03);width:28.5em;max-width:95vw;padding:.8em;border-radius:.1em;background:#fff;opacity:0;visibility:hidden;transition:opacity .3s;left:0;top:0}
|
||||
.pcr-app[data-theme=classic].visible{visibility:visible;opacity:1}
|
||||
.pcr-app[data-theme=classic] .pcr-swatches{display:flex;flex-wrap:wrap;margin-top:.75em}
|
||||
.pcr-app[data-theme=classic] .pcr-swatches.pcr-last{margin:0}
|
||||
@supports (display:grid){.pcr-app[data-theme=classic] .pcr-swatches{display:grid;align-items:center;justify-content:space-around;grid-template-columns:repeat(auto-fit,1.75em)}
|
||||
}
|
||||
|
||||
|
||||
/*! Pickr5 1.0.1 MIT | https://github.com/Simonwep/pickr5 */.pickr5{position:relative;overflow:visible;transform:translateY(0)}
|
||||
.pickr5 *{box-sizing:border-box}
|
||||
.pickr5 .pcr-button{position:relative;height:2em;width:2em;padding:.5em;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;border-radius:.15em;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" stroke="%2342445A" stroke-width="5px" stroke-linecap="round"><path d="M45,45L5,5"></path><path d="M45,5L5,45"></path></svg>') no-repeat 50%;background-size:0;transition:all .3s}
|
||||
.pickr5 .pcr-button:before{background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:.5em;z-index:-1;z-index:auto}
|
||||
.pickr5 .pcr-button:after,.pickr5 .pcr-button:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;border-radius:15em}
|
||||
.pickr5 .pcr-button:after{transition:background .3s;background:currentColor}
|
||||
.pickr5 .pcr-button.clear{background-size:70%}
|
||||
.pickr5 .pcr-button.clear:before{opacity:0}
|
||||
.pickr5 .pcr-button.clear:focus{box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor}
|
||||
.pickr5 .pcr-button.disabled{cursor:not-allowed}
|
||||
.pcr-app button,.pcr-app input,.pickr5 button,.pickr5 input{outline:none;border:none;-webkit-appearance:none}
|
||||
.pcr-app button:focus,.pcr-app input:focus,.pickr5 button:focus,.pickr5 input:focus{box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor}
|
||||
.pcr-app[data-theme=classic]{position:absolute;display:flex;flex-direction:column;z-index:10000;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;box-shadow:0 .15em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.03);width:28.5em;max-width:95vw;padding:.8em;border-radius:.1em;background:#fff;opacity:0;visibility:hidden;transition:opacity .3s;left:0;top:0}
|
||||
.pcr-app[data-theme=classic].visible{visibility:visible;opacity:1}
|
||||
.pcr-app[data-theme=classic] .pcr-swatches{display:flex;flex-wrap:wrap;margin-top:.75em}
|
||||
.pcr-app[data-theme=classic] .pcr-swatches.pcr-last{margin:0}
|
||||
@supports (display:grid){.pcr-app[data-theme=classic] .pcr-swatches{display:grid;align-items:center;justify-content:space-around;grid-template-columns:repeat(auto-fit,1.75em)}
|
||||
}
|
||||
|
||||
.pcr-app[data-theme=classic] .pcr-swatches>button{position:relative;width:1.75em;height:1.75em;border-radius:.15em;cursor:pointer;margin:2.5px;flex-shrink:0;justify-self:center;transition:all .15s;overflow:hidden;background:transparent;z-index:1}
|
||||
.pcr-app[data-theme=classic] .pcr-swatches>button:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:6px;border-radius:.15em;z-index:-1}
|
||||
.pcr-app[data-theme=classic] .pcr-swatches>button:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:currentColor;border:1px solid rgba(0,0,0,.05);border-radius:.15em;box-sizing:border-box}
|
||||
.pcr-app[data-theme=classic] .pcr-swatches>button:hover{filter:brightness(1.05)}
|
||||
.pcr-app[data-theme=classic] .pcr-interaction{display:flex;flex-wrap:wrap;align-items:center;margin:0 -.2em}
|
||||
.pcr-app[data-theme=classic] .pcr-interaction>*{margin:0 .2em}
|
||||
.pcr-app[data-theme=classic] .pcr-interaction input{letter-spacing:.07em;font-size:.75em;text-align:center;cursor:pointer;color:#75797e;background:#f1f3f4;border-radius:.15em;transition:all .15s;padding:.45em .5em;margin-top:.75em}
|
||||
.pcr-app[data-theme=classic] .pcr-interaction input:hover{filter:brightness(.975)}
|
||||
.pcr-app[data-theme=classic] .pcr-interaction input:focus{box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px rgba(66,133,244,.75)}
|
||||
.pcr-app[data-theme=classic] .pcr-interaction .pcr-result{color:#75797e;text-align:left;flex:1 1 8em;min-width:8em;transition:all .2s;border-radius:.15em;background:#f1f3f4;cursor:text}
|
||||
.pcr-app[data-theme=classic] .pcr-interaction .pcr-result::selection{background:#4285f4;color:#fff}
|
||||
.pcr-app[data-theme=classic] .pcr-interaction .pcr-type.active{color:#fff;background:#4285f4}
|
||||
.pcr-app[data-theme=classic] .pcr-interaction .pcr-clear,.pcr-app[data-theme=classic] .pcr-interaction .pcr-save{width:auto;color:#fff}
|
||||
.pcr-app[data-theme=classic] .pcr-interaction .pcr-clear:hover,.pcr-app[data-theme=classic] .pcr-interaction .pcr-save:hover{filter:brightness(.925)}
|
||||
.pcr-app[data-theme=classic] .pcr-interaction .pcr-save{background:#4285f4}
|
||||
.pcr-app[data-theme=classic] .pcr-interaction .pcr-clear{background:#f44250}
|
||||
.pcr-app[data-theme=classic] .pcr-interaction .pcr-clear:focus{box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px rgba(244,66,80,.75)}
|
||||
.pcr-app[data-theme=classic] .pcr-selection{display:flex;justify-content:space-between;flex-grow:1}
|
||||
.pcr-app[data-theme=classic] .pcr-selection .pcr-picker{position:absolute;height:18px;width:18px;border:2px solid #fff;border-radius:100%;user-select:none}
|
||||
.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview{position:relative;z-index:1;width:2em;display:flex;flex-direction:column;justify-content:space-between;margin-right:.75em}
|
||||
.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:.5em;border-radius:.15em;z-index:-1}
|
||||
.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview .pcr-last-color{cursor:pointer;transition:background-color .3s,box-shadow .3s;border-radius:.15em .15em 0 0;z-index:2}
|
||||
.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview .pcr-current-color{border-radius:0 0 .15em .15em}
|
||||
.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview .pcr-current-color,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview .pcr-last-color{background:currentColor;width:100%;height:50%}
|
||||
.pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette{position:relative;user-select:none;display:flex;flex-direction:column;cursor:grab;cursor:-moz-grab;cursor:-webkit-grab}
|
||||
.pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser:active,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity:active,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette:active{cursor:grabbing;cursor:-moz-grabbing;cursor:-webkit-grabbing}
|
||||
.pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette{width:100%;height:8em;z-index:1}
|
||||
.pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette .pcr-palette{flex-grow:1;border-radius:.15em}
|
||||
.pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette .pcr-palette:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:.5em;border-radius:.15em;z-index:-1}
|
||||
.pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity{margin-left:.75em}
|
||||
.pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser .pcr-picker,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity .pcr-picker{left:50%;transform:translateX(-50%)}
|
||||
.pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser .pcr-slider,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity .pcr-slider{width:8px;flex-grow:1;border-radius:50em}
|
||||
.pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser .pcr-slider{background:linear-gradient(180deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}
|
||||
.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity .pcr-slider{background:linear-gradient(180deg,transparent,#000),url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:100%,50%}
|
||||
@ -0,0 +1,82 @@
|
||||
var FormeSelect = [];
|
||||
var ListeCouleur = ["colorbase","colorcarre","colorone","colortwo","colorthree"]
|
||||
//3 modes : 0 = couleurs // 1 = formes // 2 = personnaliser les cartes
|
||||
var mode = 0;
|
||||
|
||||
|
||||
function SelectShape(shape){
|
||||
//récupérer la forme
|
||||
var forme = "set"+shape;
|
||||
var selection = document.getElementById(forme);
|
||||
//Que si déjà selectionné
|
||||
var couleurBase = selection.style.backgroundColor;
|
||||
//désélection
|
||||
if(couleurBase[0] == "v" && couleurBase[1] == "a" && couleurBase[2] == "r"){
|
||||
//supprimé de la liste des selectionné
|
||||
var pos = FormeSelect.indexOf(shape);
|
||||
FormeSelect.splice(pos, 1);
|
||||
//récupérer la couleur
|
||||
var recupColor = getVarColor(couleurBase);
|
||||
ListeCouleur.push(recupColor);
|
||||
//mettre à jour la couleur
|
||||
selection.style.backgroundColor = "#333";
|
||||
//document.getElementById("SettingName").innerHTML = recupColor;
|
||||
|
||||
|
||||
}else{ //selection
|
||||
if(FormeSelect.length > 4){
|
||||
alert("NON NON NOOOOOON");
|
||||
} else{
|
||||
FormeSelect.push(shape);
|
||||
//définir la couleur
|
||||
var couleur = "var(--" + ListeCouleur[0] + ")";
|
||||
selection.style.backgroundColor = couleur;
|
||||
//Supprimer la couleur de la liste
|
||||
ListeCouleur.splice(0, 1);
|
||||
//document.getElementById("SettingName").innerHTML = ListeCouleur.length;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getVarColor(color){
|
||||
var getvar = color;
|
||||
getvar = getvar.substring(6,getvar.length-1);
|
||||
|
||||
return getvar;
|
||||
}
|
||||
|
||||
function varColorToHex(color){
|
||||
hex = getComputedStyle(document.documentElement).getPropertyValue(color);
|
||||
hex = hex.substring(1,hex.length);
|
||||
return hex;
|
||||
}
|
||||
|
||||
function settingSuiv(){
|
||||
if(mode == 0){ //passage au mode forme
|
||||
document.getElementById('testSettings').innerHTML = "Les formes";
|
||||
document.getElementById('couleurs').style.display = "none";
|
||||
document.getElementById('forme').style.visibility = "visible";
|
||||
document.getElementById('SettingAfter').style.visibility = "collapse";
|
||||
document.getElementById('SettingBefore').style.visibility = "visible";
|
||||
mode = mode + 1;
|
||||
}
|
||||
}
|
||||
|
||||
function settingPrec(){
|
||||
if(mode == 1){
|
||||
document.getElementById('testSettings').innerHTML = "Les couleurs";
|
||||
document.getElementById('couleurs').style.display = "";
|
||||
document.getElementById('forme').style.visibility = "collapse";
|
||||
document.getElementById('SettingAfter').style.visibility = "visible";
|
||||
document.getElementById('SettingBefore').style.visibility = "collapse";
|
||||
mode = mode - 1;
|
||||
}
|
||||
}
|
||||
|
||||
function SettingClose(){
|
||||
document.getElementById('popup2').style.display = "none";
|
||||
}
|
||||
|
||||
function settingOpen(){
|
||||
document.getElementById('popup2').style.display = "";
|
||||
}
|
||||
Loading…
Reference in new issue