pascal.lafourcade
/
swish
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

d

Browse Source
master
cytoffin 4 years ago
parent cb54c034cd cd5511f8c9
commit 0005d743fc
32 changed files with 1538 additions and 144 deletions
Show Stats Download Patch File Download Diff File

0
SwichGIT/Doc/Etudes formes/index.html → SwichGIT/Doc/Etudes formes/V1/index.html
Unescape View File

0
SwichGIT/Doc/Etudes formes/script.js → SwichGIT/Doc/Etudes formes/V1/script.js
Unescape View File

0
SwichGIT/Doc/Etudes formes/style.css → SwichGIT/Doc/Etudes formes/V1/style.css
Unescape View File

216
SwichGIT/Doc/Etudes formes/V2/index.html
Unescape View File

@ -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>

99
SwichGIT/Doc/Etudes formes/V2/style.css
Unescape View File

@ -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%);
}

148
SwichGIT/Doc/EtudesGénération 3_4/EtudesGénération4_3.md
Unescape View File

@ -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...

BIN
SwichGIT/Doc/EtudesGénération 3_4/img/CarteUniRougeBleu.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

BIN
SwichGIT/Doc/EtudesGénération 3_4/img/DemonstrationAssemblageCarteBicolores.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
SwichGIT/Doc/EtudesGénération 3_4/img/DoublonBleuVert.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
SwichGIT/Doc/EtudesGénération 3_4/img/DoublonInterdit.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 66 KiB

BIN
SwichGIT/Doc/EtudesGénération 3_4/img/DoublonVertViolet.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB

BIN
SwichGIT/Doc/EtudesGénération 3_4/img/FamilleDuosBleuRouge.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

BIN
SwichGIT/Doc/EtudesGénération 3_4/img/FamilleDuosBleuVert-RougeViolet.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 41 KiB

BIN
SwichGIT/Doc/EtudesGénération 3_4/img/FamilleDuosBleuVert.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
SwichGIT/Doc/EtudesGénération 3_4/img/FamilleDuosBleuViolet.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
SwichGIT/Doc/EtudesGénération 3_4/img/FamilleDuosRougeVert.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
SwichGIT/Doc/EtudesGénération 3_4/img/FamilleDuosRougeViolet.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
SwichGIT/Doc/EtudesGénération 3_4/img/FamilleDuosVertViolet.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
SwichGIT/Doc/EtudesGénération 3_4/img/Parallélisme.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
SwichGIT/Doc/EtudesGénération 3_4/img/ParallélismePointBleu.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
SwichGIT/Doc/EtudesGénération 3_4/img/ParallélismePointRouge.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
SwichGIT/Doc/EtudesGénération 3_4/img/ParallélismePointVert.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.7 KiB

BIN
SwichGIT/Doc/EtudesGénération 3_4/img/ParallélismePointViolet.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.7 KiB

BIN
SwichGIT/Doc/EtudesGénération 3_4/img/PossibiliteesBleuRouge.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
SwichGIT/Doc/EtudesGénération 3_4/img/PossibiliteesVertViolet.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

182
SwichGIT/src/css/PageDaccueil.css
Unescape View File

@ -24,6 +24,157 @@
margin-right: 4vh; margin-right: 4vh;
} }
/*SETTINGS*/
#forme{
visibility: hidden;
}
#couleurs{
z-index: 1;
top: -20vw;
}
.pannel{
height: 100px;
width: 100px;
background-color: red;
}
#pickrcontner{
position: relative;
display: flex;
justify-content: space-around;
}
.Mode_Setting{
height: 20vw;
position: relative;
margin : 0 auto;
}
#BottomSetings{
position: absolute;
left: 0;
bottom: 0;
height: 5vw;
width: 100%;
border-radius: 0 0 0.3vw 0.3vw;
}
#SettingBefore{
height: 5vw;
width: 5vw;
background-color: var(--lightsedonca);
color: black;
font-size: 3vw;
visibility: collapse;
}
#SettingAfter{
bottom: 5vw;
position: relative;
height: 5vw;
width: 5vw;
background-color: var(--lightsedonca);
float: right;
}
#testSettings{
position: absolute;
color: black;
bottom: 0;
left: 18vw;
}
#ShapeSettings{
height: 100%;
width: 100%;
margin: auto 2vw;
display: flex;
flex-wrap: wrap;
}
.ShapeContener{
height: 9vw;
width: 9vw;
margin-left: 1vw;
position: relative;
display: table-cell;
vertical-align: middle;
}
.settingRond{
height: 80%;
width: 80%;
margin-left: 10%;
margin-top: 10%;
-webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
}
.settingCarre{
height: 80%;
width: 80%;
margin-left: 10%;
margin-top: 10%;
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);
}
.settingTriangle{
height: 80%;
width: 80%;
margin-left: 10%;
margin-top: 10%;
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.settingCroix{
height: 80%;
width: 80%;
margin-left: 10%;
margin-top: 10%;
-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%);
}
.settingLosange{
height: 80%;
width: 80%;
margin-left: 10%;
margin-top: 10%;
-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.settingPenta{
height: 80%;
width: 80%;
margin-left: 10%;
margin-top: 10%;
-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%);
}
.settingHexa{
height: 80%;
width: 80%;
margin-left: 10%;
margin-top: 10%;
-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%);
}
.settingHocto{
height: 80%;
width: 80%;
margin-left: 10%;
margin-top: 10%;
-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%);
}
.settingShape{
background-color: #333;
}
.Colorone{background-color: var(--colorbase);}
.Colortwo{background-color: var(--colorcarre);}
.Colorthree{background-color: var(--colorone);}
.Colorfour{background-color: var(--colortwo);}
.Colorfive{background-color: var(--colorthree);}
/*Bouton info*/ /*Bouton info*/
#infosec{ #infosec{
@ -337,3 +488,34 @@ label:active:after {
width: 100%; width: 100%;
height: 1.7vw; height: 1.7vw;
} }
/* === FORMES === */
.contentButton{
height: 3vw;
width: 15%;
margin : 0 auto;
position: relative;
bottom: 5vw;
}
.buttonvalidersettings{
height: 100%;
width: 100%;
border-style: none;
background-color: red;
color: white;
font-family: arial;
font-size: 2vw;
border-radius: 15px;
}
.buttonvalidersettings:active{
background-color: blue;
}

463
SwichGIT/src/css/Resp3.css
Unescape View File

@ -1,9 +1,20 @@
/*Ecran*/ /*Ecran*/
@media screen and (min-width: 960px) { @media screen and (min-width: 960px) {
/*PARTIE FORMES*/
.containform {
position: relative;
height: var(--x);
width: var(--x);
display: table-cell;
vertical-align: middle;
}
/*ROND*/
.anneau { .anneau {
position: relative; position: relative;
left: calc((var(--x) - var(--y)) / 2);
background-color: var(--colorbase); background-color: var(--colorbase);
border-radius: var(--y); border-radius: var(--y);
height: var(--y); height: var(--y);
@ -11,28 +22,64 @@
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
} }
.anneau2 {
position: relative;
background-color: white;
border-radius: var(--y);
height: var(--y);
width: var(--y);
left : calc((var(--x) - var(--y))/2);
display: table-cell;
vertical-align: middle;
}
.anneau3 {
position: relative;
background-color: var(--colorbase);
border-radius: var(--y);
height: var(--y);
width: var(--y);
margin-left: auto;
margin-right: auto;
}
.rondinterieur { .rondinterieur {
background-color: var(--lighttercia); background-color: white;
height: var(--z); height: var(--z);
width: var(--z); width: var(--z);
display: table; display: table;
margin: 0 auto; margin: 0 auto;
border-radius: var(--z); border-radius: var(--z);
} }
.rond {
.containform { display: table;
margin: 0 auto;
background-color: var(--colorbase);
height: var(--z);
width: var(--z);
border-radius: var(--z);
}
.rond2 {
display: table;
margin: 0 auto;
background-color: white;
height: var(--z);
width: var(--z);
border-radius: var(--z);
}
.rond3 {
position: relative; position: relative;
height: var(--x); top : calc((var(--y) - var(--z))/ 2);
width: var(--x); left : calc((var(--y) - var(--z))/2);
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
background-color: white;
height: var(--z);
width: var(--z);
border-radius: var(--z);
} }
.rond4 {
.rond {
display: table; display: table;
margin: 0 auto; margin: 0 auto;
background-color: var(--colorrond); background-color: var(--colorbase);
height: var(--z); height: var(--z);
width: var(--z); width: var(--z);
border-radius: var(--z); border-radius: var(--z);
@ -41,7 +88,7 @@
/* PARTIE CARRE */ /* PARTIE CARRE */
.carre { .carre {
position: relative; position: relative;
background-color: var(--colorcarre); background-color: blacke);
height: var(--y); height: var(--y);
width: var(--y); width: var(--y);
margin-left: auto; margin-left: auto;
@ -54,156 +101,348 @@
left : calc((var(--y) - var(--z))/2); left : calc((var(--y) - var(--z))/2);
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
background-color: var(--lightsedonca); background-color: white;
height: var(--z); height: var(--z);
width: var(--z); width: var(--z);
} }
.carre2 {
background-color: blacke);
height: var(--z);
width: var(--z);
display: table;
margin: 0 auto;
}
.carreinterieur2 {
background-color: white;
height: var(--z);
width: var(--z);
display: table;
margin-left: auto;
margin-right: auto;
}
.carreinterieur3 {
position: relative;
background-color: white;
height: var(--y);
width: var(--y);
left : calc((var(--x) - var(--y))/2);
display: table-cell;
vertical-align: middle;
}
.carrev2 {
position: relative;
background-color: blacke);
height: var(--y);
width: var(--y);
margin-left: auto;
margin-right: auto;
}
.carreinterieur4 {
position : relative;
top : calc((var(--y) - var(--z)) / 2);
left : calc((var(--y) - var(--z)) / 2);
background-color: white;
height: var(--z);
width: var(--z);
display: table-cell;
vertical-align: middle;
}
.carre3 {
background-color: blacke);
height: var(--z);
width: var(--z);
display: table;
margin: 0 auto;
}
/*A SUPPRIMER
===========================================
*/
.pcarre { .pcarre {
background-color: var(--colorcarre); background-color: blacke);
height: var(--z); height: var(--z);
width: var(--z); width: var(--z);
display: table; display: table;
margin: 0 auto; margin: 0 auto;
} }
/*========================================*/
/* PARTIE TRIANGLE */ /* PARTIE TRIANGLE */
.triangle { .triangle {
display: table; display: table;
margin: 0 auto; margin: 0 auto;
border-left: 2.5vw solid transparent; border-left: calc(var(--y) /2) solid transparent;
border-right: 2.5vw solid transparent; border-right: calc(var(--y) /2) solid transparent;
border-bottom: 5vw solid #DEA430; border-bottom: var(--y) solid var(--colortwo);
} }
.trianglerinterieur { .trianglerinterieur {
position: absolute; position: absolute;
margin-left: -1.5vw; bottom: calc((var(--x) - var(--z))/2.2);
margin-top: 1.25vw; left : calc((var(--x) - var(--z))/2);
border-left: 1.5vw solid transparent; border-left: calc(var(--z) /2) solid transparent;
border-right: 1.5vw solid transparent; border-right: calc(var(--z) /2) solid transparent;
border-bottom: 3vw solid var(--lightsedonca); border-bottom: var(--z) solid white;
}
.trianglerinterieur2 {
position: absolute;
bottom: calc((var(--x) - var(--z))/2);
left : calc((var(--x) - var(--z))/2);
border-left: calc(var(--z) /2) solid transparent;
border-right: calc(var(--z) /2) solid transparent;
border-bottom: var(--z) solid white;
} }
.ptriangle { .ptriangle {
position: absolute;
bottom: calc(((var(--x) - var(--y))/1.5) + ((var(--y) - var(--z))/3));
left : calc((var(--x) - var(--z))/2);
border-left: calc(var(--z) /2) solid transparent;
border-right: calc(var(--z) /2) solid transparent;
border-bottom: var(--z) solid var(--colortwo);
}
.triangle2 {
display: table; display: table;
margin: 0 auto; margin: 0 auto;
margin-top: 0.75vw; border-left: calc(var(--y) /2) solid transparent;
border-left: 1.5vw solid transparent; border-right: calc(var(--y) /2) solid transparent;
border-right: 1.5vw solid transparent; border-bottom: var(--y) solid white;
border-bottom: 3vw solid #DEA430;
}
/* TRAPEZE */
.trapeze {
bottom: 0px;
height: 0;
margin-top: 2.58vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-top: 3vw solid #6FDE30;
} }
.triangletrapeze { /* Croix */
padding-top: 0.1vw; .croix{
position: absolute; position: absolute;
border-left: 3vw solid transparent; left: calc((var(--x) - var(--y)) / 2);
border-right: 3vw solid transparent; bottom: calc( ((var(--x) - var(--y))/2) + ((var(--y)) / 4) );
border-bottom: 2.5vw solid #6FDE30;
} }
.croixinté{
.trapezeinte { z-index: 2;
position: absolute; position: absolute;
margin-top: 3vw; left: calc((var(--x) - var(--z))/2);
margin-left: 1.25vw; bottom: calc( ((var(--x) - var(--z))/2) + ((var(--z)) / 2.33) );
width: 2vw; }
border-left: 0.75vw solid transparent; .croixgauche{
border-right: 0.75vw solid transparent; position: relative;
border-top: 1.5vw solid var(--lightsedonca); background-color: var(--couleur);
z-index: 15; height: calc(var(--y)/4);
width: var(--y);
top : calc(var(--y) / 8);
transform: rotate(45deg);
}
.croixdroite{
position: relative;
background-color: var(--couleur);
height: calc(var(--y)/4);
width: var(--y);
bottom : calc(var(--y) / 8);
transform: rotate(-45deg);
}
.croixgauche2{
position: relative;
background-color: white;
height: calc(var(--y)/4);
width: var(--y);
top : calc(var(--y) / 8);
transform: rotate(45deg);
} }
.triangletrapezeinte { .croixdroite2{
position: absolute; position: relative;
margin-top: 1.45vw; background-color: white;
margin-left: 1.25vw; height: calc(var(--y)/4);
padding-top: 0.1vw; width: var(--y);
border-left: 1.75vw solid transparent; bottom : calc(var(--y) / 8);
border-right: 1.75vw solid transparent; transform: rotate(-45deg);
border-bottom: 1.5vw solid var(--lightsedonca);
z-index: 15;
} }
.trapezep { .croixgaucheinte{
position: relative;
background-color: white;
height: calc(var(--z)/16);
width: calc(var(--z));
top : calc(var(--z) / 32);
transform: rotate(45deg);
}
.croixdroiteinte{
position: relative;
background-color: white;
height: calc(var(--z)/16);
width: calc(var(--z));
bottom : calc(var(--z) / 32);
transform: rotate(-45deg);
}
.croixgaucheinte2{
position: relative;
background-color: var(--couleur);
height: calc(var(--z)/16);
width: calc(var(--z));
top : calc(var(--z) / 32);
transform: rotate(45deg);
}
.croixdroiteinte2{
position: relative;
background-color: var(--couleur);
height: calc(var(--z)/16);
width: calc(var(--z));
bottom : calc(var(--z) / 32);
transform: rotate(-45deg);
}
/*LOSANGE*/
.losange{
width: var(--y);
height: var(--y);
display: table; display: table;
margin: 0 auto; margin: 0 auto;
margin-top: 2vw; background: var(--couleur);
width: 2vw; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
border-left: 0.75vw solid transparent;
border-right: 0.75vw solid transparent;
border-top: 1.5vw solid #6FDE30;
z-index: 15;
} }
.losange2{
.triangletrapezep { width: var(--y);
height: var(--y);
display: table;
margin: 0 auto;
background: white;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.losangeinte{
position: absolute; position: absolute;
margin-top: 0.55vw; z-index: 2;
margin-left: 1.25vw; width: var(--z);
border-left: 1.75vw solid transparent; height: var(--z);
border-right: 1.75vw solid transparent; bottom : calc( ((var(--x) - var(--z))/2));
border-bottom: 1.5vw solid #6FDE30; left : calc((var(--x) - var(--z))/2);
z-index: 15; background: white;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
} }
.losangeinte2{
.losangephaut { width: var(--z);
height: var(--z);
display: table; display: table;
margin: 0 auto; margin: 0 auto;
margin-top: -3vw; background: var(--couleur);
border-left: 3vw solid transparent; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
border-right: 3vw solid transparent;
border-bottom: 3vw solid #B130DE;
} }
/*PENTA*/
.losangepbas { .trapeze{
width: var(--y);
height: var(--y);
background: var(--couleur);
position: relative;
left: calc((var(--x) - var(--y)) / 2);
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
.trapeze2{
width: var(--y);
height: var(--y);
background: white;
position: relative;
left: calc((var(--x) - var(--y)) / 2);
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
.trapezeinte{
width: var(--z);
height: var(--z);
background: white;
position: absolute; position: absolute;
border-left: 3vw solid transparent; z-index: 2;
border-right: 3vw solid transparent; bottom : calc( ((var(--x) - var(--z))/2));
border-top: 3vw solid #B130DE; left: calc((var(--x) - var(--z))/2);
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
} }
.trapezeinte2{
.losangephauti { width: var(--z);
height: var(--z);
background: var(--couleur);
position: absolute;
z-index: 2;
bottom : calc( ((var(--x) - var(--z))/2));
left: calc((var(--x) - var(--z))/2);
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
.octogon{
width: var(--y);
height: var(--y);
background: var(--couleur);
position: relative;
left: calc((var(--x) - var(--y)) / 2);
clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}
.octogon2{
width: var(--y);
height: var(--y);
background: white;
position: relative;
left: calc((var(--x) - var(--y)) / 2);
clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}
.octogoninte{
width: var(--z);
height: var(--z);
background: white;
position: absolute;
z-index: 2;
bottom : calc( ((var(--x) - var(--z))/2));
left: calc((var(--x) - var(--z))/2);
clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}
.octogoninte2{
width: var(--z);
height: var(--z);
background: var(--couleur);
position: absolute;
z-index: 2;
bottom : calc( ((var(--x) - var(--z))/2));
left: calc((var(--x) - var(--z))/2);
clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}
/*HEXAGONE*/
.hexa{
width: var(--y);
height: var(--y);
display: table; display: table;
margin: 0 auto; margin: 0 auto;
margin-top: -1.5vw; background: var(--couleur);
border-left: 1.5vw solid transparent; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
border-right: 1.5vw solid transparent;
border-bottom: 1.5vw solid var(--lightsedonca);
} }
.hexa2{
.losangepbasi { width: var(--y);
height: var(--y);
display: table;
margin: 0 auto;
background: white;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.hexainte{
position: absolute; position: absolute;
margin-left: 1.5vw; z-index: 2;
border-left: 1.5vw solid transparent; width: var(--z);
border-right: 1.5vw solid transparent; height: var(--z);
border-top: 1.5vw solid var(--lightsedonca); bottom : calc( ((var(--x) - var(--z))/2));
left : calc((var(--x) - var(--z))/2);
background: white;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
} }
.hexainte2{
.losangephautc {
display: table; display: table;
margin: 0 auto; margin: 0 auto;
margin-top: -1.5vw; width: var(--z);
border-left: 1.5vw solid transparent; height: var(--z);
border-right: 1.5vw solid transparent; background: var(--couleur);
border-bottom: 1.5vw solid #B130DE; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
} }
.losangepbasc {
position: absolute;
margin-left: 1.5vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-top: 1.5vw solid #B130DE;
}
/*===========================================*/
/*Externe*/
.buttonretour { .buttonretour {
position: relative; position: relative;

12
SwichGIT/src/css/base.css
Unescape View File

@ -3,22 +3,26 @@
--lightprima: #DEDEDE; --lightprima: #DEDEDE;
--lightsedonca: #B7B7B7; --lightsedonca: #B7B7B7;
--lighttercia: #E6E6E6; --lighttercia: #E6E6E6;
/*Couleur*/ /*Couleur bases*/
--colorbase : #e75259; --colorbase : #e75259;
--colorcarre : #30C0DE;
--colorone : #00CBFF; --colorone : #00CBFF;
--colortwo : #00FF6E; --colortwo : #00FF6E;
--colorthree : #C800FF; --colorthree : #C800FF;
--colorcarre : #30C0DE;
/*Les formes*/ /*Les formes*/
--x : 3vw; --x : 4vw;
--y : 2.5vw; /*taille anneau*/ --y : 2.5vw; /*taille anneau*/
--z :1.5vw; /*taille rond*/ --z : 1.5vw; /*taille rond*/
--d : calc(var(--x)/2); --d : calc(var(--x)/2);
--l : calc(var(--x)/2); --l : calc(var(--x)/2);
} }
.test{
color: black;
}
@font-face { @font-face {
font-family: "Montserrat"; font-family: "Montserrat";
src: url("/fonts/MonstMontserrat-Black.woff") format("woff"), src: url("/fonts/MonstMontserrat-Black.woff") format("woff"),

132
SwichGIT/src/css/pickr.min.css vendored
Unescape View File

@ -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%}

310
SwichGIT/src/index.html
Unescape View File

@ -9,8 +9,11 @@
<link rel="stylesheet" href="css/Resp3.css"> <link rel="stylesheet" href="css/Resp3.css">
<link rel="stylesheet" href="css/PageDaccueil.css"> <link rel="stylesheet" href="css/PageDaccueil.css">
<link rel="stylesheet" href="css/PartieGame.css"> <link rel="stylesheet" href="css/PartieGame.css">
<link rel="stylesheet" href="css/pickr.min.css">
<script type="text/javascript" src="js/main.js"></script> <script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js"></script>
</head> </head>
<body onload="ChoisirPseudo()"> <body onload="ChoisirPseudo()">
@ -37,7 +40,7 @@
<div class="inner"> <div class="inner">
<ul class="activity"> <ul class="activity">
<li id="listeinfobtn"> <li id="listeinfobtn">
<a id="info" href="#popup2">&#9881;</a> <a id="info" onclick="settingOpen()" href="#popup2">&#9881;</a>
</li> </li>
</ul> </ul>
</div> </div>
@ -70,24 +73,312 @@
<div id="popup2" class="overlay"> <div id="popup2" class="overlay">
<div class="popup2"> <div class="popup2">
<h2>Les Paramètres :</h2> <h2 id="SettingName">Les Paramètres</h2>
<a class="close" href="#">&times;</a> <a class="close" onclick="SettingClose()" href="#">&times;</a>
<div class="content"> <div class="content">
<div class="Mode_Forme"> <div id="forme" class="Mode_Setting">
<div class="titre"> <div id="ShapeSettings">
<h3>Mode Forme</h3> <a class="ShapeContener" onclick="SelectShape('Rond')">
<div id="setRond" class="settingRond settingShape"></div>
</a>
<a class="ShapeContener" onclick="SelectShape('Carre')">
<div id="setCarre" class="settingCarre settingShape"></div>
</a>
<a class="ShapeContener" onclick="SelectShape('Triangle')">
<div id="setTriangle" class="settingTriangle settingShape"></div>
</a>
<a class="ShapeContener" onclick="SelectShape('Croix')">
<div id="setCroix" class="settingCroix settingShape"></div>
</a>
<a class="ShapeContener" onclick="SelectShape('Losange')">
<div id="setLosange" class="settingLosange settingShape"></div>
</a>
<a class="ShapeContener" onclick="SelectShape('Penta')">
<div id="setPenta" class="settingPenta settingShape"></div>
</a>
<a class="ShapeContener" onclick="SelectShape('Hexa')">
<div id="setHexa" class="settingHexa settingShape"></div>
</a>
<a class="ShapeContener" onclick="SelectShape('Hocto')">
<div id="setHocto" class="settingHocto settingShape"></div>
</a>
</div> </div>
</div>
<div id="couleurs" class="Mode_Setting">
<br><br><br>
<div id="pickrcontner">
<div class="color-picker"></div>
<div class="color-picker2"></div>
<div class="color-picker3"></div>
<div class="color-picker4"></div>
<div class="color-picker5"></div>
</div>
</div> </div>
</div>
<div id="BottomSetings">
<div id="SettingBefore" onclick="settingPrec()">
</div>
<h2 id="testSettings">Les couleurs</h2>
<div id="SettingAfter" onclick="settingSuiv()">
</div>
<h3>Choix Couleur</h3>
</div> </div>
</div> </div>
</div> </div>
<!-- COLOR PICKER-->
<script>
let pannel = document.getElementById("pannel");
// Simple example, see optional options for more configuration.
var couleur1 = varColorToHex('--colorbase');
var couleur2 = varColorToHex('--colorcarre');
var couleur3 = varColorToHex('--colorone');
var couleur4 = varColorToHex('--colortwo');
var couleur5 = varColorToHex('--colorthree');
const pickr = Pickr.create({
el: '.color-picker',
theme: 'classic', // or 'monolith', or 'nano'
default: couleur1,
swatches: [
'#df0024',
'#f3c300',
'#00ab9f',
'#2e6db4',
'#1bff7e',
'#fe1b00',
'#7f00ff',
'#29F073',
'#E6792F',
'#E6DA27',
'#E8695A',
'#2E294E',
'#64A6BD',
'#659157'
],
components: {
// Main components
preview: true,
opacity: false,
hue: true,
// Input / output Options
interaction: {
hex: false,
rgba: false,
hsla: false,
hsva: false,
cmyk: false,
input: true,
clear: false,
save: true
}
}
});
const pickr2 = Pickr.create({
el: '.color-picker2',
theme: 'classic', // or 'monolith', or 'nano'
default: couleur2,
swatches: [
'#df0024',
'#f3c300',
'#00ab9f',
'#2e6db4',
'#1bff7e',
'#fe1b00',
'#7f00ff',
'#29F073',
'#E6792F',
'#E6DA27',
'#E8695A',
'#2E294E',
'#64A6BD',
'#659157'
],
components: {
// Main components
preview: true,
opacity: false,
hue: true,
// Input / output Options
interaction: {
hex: false,
rgba: false,
hsla: false,
hsva: false,
cmyk: false,
input: true,
clear: false,
save: true
}
}
});
const pickr3 = Pickr.create({
el: '.color-picker3',
theme: 'classic', // or 'monolith', or 'nano'
default: couleur3,
swatches: [
'#df0024',
'#f3c300',
'#00ab9f',
'#2e6db4',
'#1bff7e',
'#fe1b00',
'#7f00ff',
'#29F073',
'#E6792F',
'#E6DA27',
'#E8695A',
'#2E294E',
'#64A6BD',
'#659157'
],
components: {
// Main components
preview: true,
opacity: false,
hue: true,
// Input / output Options
interaction: {
hex: false,
rgba: false,
hsla: false,
hsva: false,
cmyk: false,
input: true,
clear: false,
save: true
}
}
});
const pickr4 = Pickr.create({
el: '.color-picker4',
theme: 'classic', // or 'monolith', or 'nano'
default: couleur4,
swatches: [
'#df0024',
'#f3c300',
'#00ab9f',
'#2e6db4',
'#1bff7e',
'#fe1b00',
'#7f00ff',
'#29F073',
'#E6792F',
'#E6DA27',
'#E8695A',
'#2E294E',
'#64A6BD',
'#659157'
],
components: {
// Main components
preview: true,
opacity: false,
hue: true,
// Input / output Options
interaction: {
hex: false,
rgba: false,
hsla: false,
hsva: false,
cmyk: false,
input: true,
clear: false,
save: true
}
}
});
const pickr5 = Pickr.create({
el: '.color-picker5',
theme: 'classic', // or 'monolith', or 'nano'
default: couleur5,
swatches: [
'#df0024',
'#f3c300',
'#00ab9f',
'#2e6db4',
'#1bff7e',
'#fe1b00',
'#7f00ff',
'#29F073',
'#E6792F',
'#E6DA27',
'#E8695A',
'#2E294E',
'#64A6BD',
'#659157'
],
components: {
// Main components
preview: true,
opacity: false,
hue: true,
// Input / output Options
interaction: {
hex: false,
rgba: false,
hsla: false,
hsva: false,
cmyk: false,
input: true,
clear: false,
save: true
}
}
});
//changement de couleur
pickr.on('change', (...args) => {
let color = args[0].toRGBA();
console.log(color);
let newcouleur = `rgba(${color[0]},${color[1]},${color[2]},${color[3]}`
document.documentElement.style.setProperty('--colorbase', newcouleur);
});
pickr2.on('change', (...args) => {
let color = args[0].toRGBA();
console.log(color);
let newcouleur = `rgba(${color[0]},${color[1]},${color[2]},${color[3]}`
document.documentElement.style.setProperty('--colorcarre', newcouleur);
});
pickr3.on('change', (...args) => {
let color = args[0].toRGBA();
console.log(color);
let newcouleur = `rgba(${color[0]},${color[1]},${color[2]},${color[3]}`
document.documentElement.style.setProperty('--colorone', newcouleur);
});
pickr4.on('change', (...args) => {
let color = args[0].toRGBA();
console.log(color);
let newcouleur = `rgba(${color[0]},${color[1]},${color[2]},${color[3]}`
document.documentElement.style.setProperty('--colortwo', newcouleur);
});
pickr5.on('change', (...args) => {
let color = args[0].toRGBA();
console.log(color);
let newcouleur = `rgba(${color[0]},${color[1]},${color[2]},${color[3]}`
document.documentElement.style.setProperty('--colorthree', newcouleur);
});
</script>
<!-- <!--
<div id="containpseudo"> <div id="containpseudo">
<div id="pseudoenter"> <div id="pseudoenter">
@ -124,6 +415,7 @@
<div class="rond"></div> <div class="rond"></div>
</div> </div>
<!-- Forme : carré--> <!-- Forme : carré-->
<div class="containform"> <div class="containform">
<div class="carre"> <div class="carre">

38
SwichGIT/src/js/main.js
Unescape View File

@ -8,7 +8,7 @@ var darkprima = "#474747";
var darkseconda = "#393939"; var darkseconda = "#393939";
var darktercia = "#606060"; var darktercia = "#606060";
var carteselect = []; var carteselect = [];
var deckPartie = []; //Ensemble des cartes affichées à l'écran var deckPartie = []; //Ensemble des cartes affichées a l'ecran
var TasDuJEU = []; // Ensemble de toutes les cartes présente dans le jeu var TasDuJEU = []; // Ensemble de toutes les cartes présente dans le jeu
@ -41,11 +41,11 @@ class Carte {
var divcase = document.createElement('div'); var divcase = document.createElement('div');
divcase.className = "item-form"; divcase.className = "item-form";
var ajouté = true; var ajoute = true;
for (var j = 0; j < this.SesFigures.length; j++) { for (var j = 0; j < this.SesFigures.length; j++) {
if (i == this.SesFigures[j].X + (this.SesFigures[j].Y * 3)) { if (i == this.SesFigures[j].X + (this.SesFigures[j].Y * 3)) {
try { try {
ajouté = false; ajoute = false;
var uneFigure = new Figure(this.SesFigures[j].type, this.SesFigures[j].forme, this.SesFigures[j].X, this.SesFigures[j].Y); var uneFigure = new Figure(this.SesFigures[j].type, this.SesFigures[j].forme, this.SesFigures[j].X, this.SesFigures[j].Y);
divconteneur.appendChild(this.SesFigures[j].CodeHTML); divconteneur.appendChild(this.SesFigures[j].CodeHTML);
} catch (e) { } catch (e) {
@ -53,7 +53,7 @@ class Carte {
} }
} }
} }
if (ajouté) { if (ajoute) {
divconteneur.appendChild(divcase); divconteneur.appendChild(divcase);
} }
} }
@ -332,18 +332,18 @@ function redistribuer() {
deckPartie = []; deckPartie = [];
for (var i = 0; i < 16; i++) { for (var i = 0; i < 16; i++) {
var index = getRandom(0, TasDuJEU.length - 1) var index = getRandom(0, TasDuJEU.length - 1)
var déjàPrésente = false;//Permet de savoir si la carte est déjà dans la liste var dejaPresente = false;//Permet de savoir si la carte est déjà dans la liste
for (var j = 0; j < deckPartie.length; j++) { for (var j = 0; j < deckPartie.length; j++) {
if (TasDuJEU[index].identifiant == deckPartie[j].identifiant) { if (TasDuJEU[index].identifiant == deckPartie[j].identifiant) {
déjàPrésente = true; dejaPresente = true;
} }
} }
while (déjàPrésente == true) { while (dejaPresente == true) {
index = getRandom(0, TasDuJEU.length - 1) index = getRandom(0, TasDuJEU.length - 1)
déjàPrésente = false;//Permet de savoir si la carte est déjà dans la liste dejaPresente = false;//Permet de savoir si la carte est déjà dans la liste
for (var j = 0; j < deckPartie.length; j++) { for (var j = 0; j < deckPartie.length; j++) {
if (TasDuJEU[index].identifiant == deckPartie[j].identifiant) { if (TasDuJEU[index].identifiant == deckPartie[j].identifiant) {
déjàPrésente = true; dejaPresente = true;
} }
} }
} }
@ -431,18 +431,18 @@ function creePartieClassique() {
} }
for (var i = 0; i < 16; i++) { for (var i = 0; i < 16; i++) {
var index = getRandom(0, TasDuJEU.length - 1) var index = getRandom(0, TasDuJEU.length - 1)
var déjàPrésente = false;//Permet de savoir si la carte est déjà dans la liste var dejaPresente = false;//Permet de savoir si la carte est déjà dans la liste
for (var j = 0; j < deckPartie.length; j++) { for (var j = 0; j < deckPartie.length; j++) {
if (TasDuJEU[index].identifiant == deckPartie[j].identifiant) { if (TasDuJEU[index].identifiant == deckPartie[j].identifiant) {
déjàPrésente = true; dejaPresente = true;
} }
} }
while (déjàPrésente == true) { while (dejaPresente == true) {
index = getRandom(0, TasDuJEU.length - 1) index = getRandom(0, TasDuJEU.length - 1)
déjàPrésente = false;//Permet de savoir si la carte est déjà dans la liste dejaPresente = false;//Permet de savoir si la carte est déjà dans la liste
for (var j = 0; j < deckPartie.length; j++) { for (var j = 0; j < deckPartie.length; j++) {
if (TasDuJEU[index].identifiant == deckPartie[j].identifiant) { if (TasDuJEU[index].identifiant == deckPartie[j].identifiant) {
déjàPrésente = true; dejaPresente = true;
} }
} }
} }
@ -493,18 +493,18 @@ function changerlesCartesDeTasDeJeu() {
TasDuJEU.splice(unIndex, 1); TasDuJEU.splice(unIndex, 1);
if (TasDuJEU.length > 16) { if (TasDuJEU.length > 16) {
var index2 = getRandom(0, TasDuJEU.length - 1) var index2 = getRandom(0, TasDuJEU.length - 1)
var déjàPrésente = false;//Permet de savoir si la carte est déjà dans la liste var dejaPresente = false;//Permet de savoir si la carte est déjà dans la liste
for (var j = 0; j < deckPartie.length; j++) { for (var j = 0; j < deckPartie.length; j++) {
if (TasDuJEU[index2].identifiant == deckPartie[j].identifiant) { if (TasDuJEU[index2].identifiant == deckPartie[j].identifiant) {
déjàPrésente = true; dejaPresente = true;
} }
} }
while (déjàPrésente == true) { while (dejaPresente == true) {
index2 = getRandom(0, TasDuJEU.length - 1) index2 = getRandom(0, TasDuJEU.length - 1)
déjàPrésente = false;//Permet de savoir si la carte est déjà dans la liste dejaPresente = false;//Permet de savoir si la carte est déjà dans la liste
for (var j = 0; j < deckPartie.length; j++) { for (var j = 0; j < deckPartie.length; j++) {
if (TasDuJEU[index2].identifiant == deckPartie[j].identifiant) { if (TasDuJEU[index2].identifiant == deckPartie[j].identifiant) {
déjàPrésente = true; dejaPresente = true;
} }
} }
} }

82
SwichGIT/src/js/menu.js
Unescape View File

@ -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 = "";
}
Write Preview
Loading…
Cancel
Save