diff --git a/SwichGIT/Doc/Etudes formes/index.html b/SwichGIT/Doc/Etudes formes/V1/index.html similarity index 100% rename from SwichGIT/Doc/Etudes formes/index.html rename to SwichGIT/Doc/Etudes formes/V1/index.html diff --git a/SwichGIT/Doc/Etudes formes/script.js b/SwichGIT/Doc/Etudes formes/V1/script.js similarity index 100% rename from SwichGIT/Doc/Etudes formes/script.js rename to SwichGIT/Doc/Etudes formes/V1/script.js diff --git a/SwichGIT/Doc/Etudes formes/style.css b/SwichGIT/Doc/Etudes formes/V1/style.css similarity index 100% rename from SwichGIT/Doc/Etudes formes/style.css rename to SwichGIT/Doc/Etudes formes/V1/style.css diff --git a/SwichGIT/Doc/Etudes formes/V2/index.html b/SwichGIT/Doc/Etudes formes/V2/index.html new file mode 100644 index 0000000..2c47017 --- /dev/null +++ b/SwichGIT/Doc/Etudes formes/V2/index.html @@ -0,0 +1,216 @@ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + + + + + \ No newline at end of file diff --git a/SwichGIT/Doc/Etudes formes/V2/style.css b/SwichGIT/Doc/Etudes formes/V2/style.css new file mode 100644 index 0000000..f3d2cd6 --- /dev/null +++ b/SwichGIT/Doc/Etudes formes/V2/style.css @@ -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%); +} + diff --git a/SwichGIT/Doc/EtudesGénération 3_4/EtudesGénération4_3.md b/SwichGIT/Doc/EtudesGénération 3_4/EtudesGénération4_3.md new file mode 100644 index 0000000..3de9e7b --- /dev/null +++ b/SwichGIT/Doc/EtudesGénération 3_4/EtudesGénération4_3.md @@ -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 : + +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 : + Markdown Monster icon +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. + +Markdown Monster icon +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 : + +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: + +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. + +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 : + +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: + +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### +Markdown Monster icon +###Bleu-Vert### +Markdown Monster icon +###Bleu-Violet### +Markdown Monster icon +###Rouge-Vert### +Markdown Monster icon +###Rouge-Violet### +Markdown Monster icon +###Violet-Vert### +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 : + +Markdown Monster icon + +**Mais une seule est doublée pour obtenir ces cartes dans le jeu physique** + +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... diff --git a/SwichGIT/Doc/EtudesGénération 3_4/img/CarteUniRougeBleu.png b/SwichGIT/Doc/EtudesGénération 3_4/img/CarteUniRougeBleu.png new file mode 100644 index 0000000..89ced2d Binary files /dev/null and b/SwichGIT/Doc/EtudesGénération 3_4/img/CarteUniRougeBleu.png differ diff --git a/SwichGIT/Doc/EtudesGénération 3_4/img/DemonstrationAssemblageCarteBicolores.png b/SwichGIT/Doc/EtudesGénération 3_4/img/DemonstrationAssemblageCarteBicolores.png new file mode 100644 index 0000000..02744e8 Binary files /dev/null and b/SwichGIT/Doc/EtudesGénération 3_4/img/DemonstrationAssemblageCarteBicolores.png differ diff --git a/SwichGIT/Doc/EtudesGénération 3_4/img/DoublonBleuVert.png b/SwichGIT/Doc/EtudesGénération 3_4/img/DoublonBleuVert.png new file mode 100644 index 0000000..2cdfdcd Binary files /dev/null and b/SwichGIT/Doc/EtudesGénération 3_4/img/DoublonBleuVert.png differ diff --git a/SwichGIT/Doc/EtudesGénération 3_4/img/DoublonInterdit.png b/SwichGIT/Doc/EtudesGénération 3_4/img/DoublonInterdit.png new file mode 100644 index 0000000..4234b89 Binary files /dev/null and b/SwichGIT/Doc/EtudesGénération 3_4/img/DoublonInterdit.png differ diff --git a/SwichGIT/Doc/EtudesGénération 3_4/img/DoublonVertViolet.png b/SwichGIT/Doc/EtudesGénération 3_4/img/DoublonVertViolet.png new file mode 100644 index 0000000..99ac521 Binary files /dev/null and b/SwichGIT/Doc/EtudesGénération 3_4/img/DoublonVertViolet.png differ diff --git a/SwichGIT/Doc/EtudesGénération 3_4/img/FamilleDuosBleuRouge.png b/SwichGIT/Doc/EtudesGénération 3_4/img/FamilleDuosBleuRouge.png new file mode 100644 index 0000000..cc40128 Binary files /dev/null and b/SwichGIT/Doc/EtudesGénération 3_4/img/FamilleDuosBleuRouge.png differ diff --git a/SwichGIT/Doc/EtudesGénération 3_4/img/FamilleDuosBleuVert-RougeViolet.png b/SwichGIT/Doc/EtudesGénération 3_4/img/FamilleDuosBleuVert-RougeViolet.png new file mode 100644 index 0000000..3e2de4c Binary files /dev/null and b/SwichGIT/Doc/EtudesGénération 3_4/img/FamilleDuosBleuVert-RougeViolet.png differ diff --git a/SwichGIT/Doc/EtudesGénération 3_4/img/FamilleDuosBleuVert.png b/SwichGIT/Doc/EtudesGénération 3_4/img/FamilleDuosBleuVert.png new file mode 100644 index 0000000..e7992d1 Binary files /dev/null and b/SwichGIT/Doc/EtudesGénération 3_4/img/FamilleDuosBleuVert.png differ diff --git a/SwichGIT/Doc/EtudesGénération 3_4/img/FamilleDuosBleuViolet.png b/SwichGIT/Doc/EtudesGénération 3_4/img/FamilleDuosBleuViolet.png new file mode 100644 index 0000000..40c3cb0 Binary files /dev/null and b/SwichGIT/Doc/EtudesGénération 3_4/img/FamilleDuosBleuViolet.png differ diff --git a/SwichGIT/Doc/EtudesGénération 3_4/img/FamilleDuosRougeVert.png b/SwichGIT/Doc/EtudesGénération 3_4/img/FamilleDuosRougeVert.png new file mode 100644 index 0000000..c5caa2e Binary files /dev/null and b/SwichGIT/Doc/EtudesGénération 3_4/img/FamilleDuosRougeVert.png differ diff --git a/SwichGIT/Doc/EtudesGénération 3_4/img/FamilleDuosRougeViolet.png b/SwichGIT/Doc/EtudesGénération 3_4/img/FamilleDuosRougeViolet.png new file mode 100644 index 0000000..ced942b Binary files /dev/null and b/SwichGIT/Doc/EtudesGénération 3_4/img/FamilleDuosRougeViolet.png differ diff --git a/SwichGIT/Doc/EtudesGénération 3_4/img/FamilleDuosVertViolet.png b/SwichGIT/Doc/EtudesGénération 3_4/img/FamilleDuosVertViolet.png new file mode 100644 index 0000000..08c1177 Binary files /dev/null and b/SwichGIT/Doc/EtudesGénération 3_4/img/FamilleDuosVertViolet.png differ diff --git a/SwichGIT/Doc/EtudesGénération 3_4/img/Parallélisme.png b/SwichGIT/Doc/EtudesGénération 3_4/img/Parallélisme.png new file mode 100644 index 0000000..9c7cc6f Binary files /dev/null and b/SwichGIT/Doc/EtudesGénération 3_4/img/Parallélisme.png differ diff --git a/SwichGIT/Doc/EtudesGénération 3_4/img/ParallélismePointBleu.png b/SwichGIT/Doc/EtudesGénération 3_4/img/ParallélismePointBleu.png new file mode 100644 index 0000000..b776c37 Binary files /dev/null and b/SwichGIT/Doc/EtudesGénération 3_4/img/ParallélismePointBleu.png differ diff --git a/SwichGIT/Doc/EtudesGénération 3_4/img/ParallélismePointRouge.png b/SwichGIT/Doc/EtudesGénération 3_4/img/ParallélismePointRouge.png new file mode 100644 index 0000000..82d1b16 Binary files /dev/null and b/SwichGIT/Doc/EtudesGénération 3_4/img/ParallélismePointRouge.png differ diff --git a/SwichGIT/Doc/EtudesGénération 3_4/img/ParallélismePointVert.png b/SwichGIT/Doc/EtudesGénération 3_4/img/ParallélismePointVert.png new file mode 100644 index 0000000..11b79f6 Binary files /dev/null and b/SwichGIT/Doc/EtudesGénération 3_4/img/ParallélismePointVert.png differ diff --git a/SwichGIT/Doc/EtudesGénération 3_4/img/ParallélismePointViolet.png b/SwichGIT/Doc/EtudesGénération 3_4/img/ParallélismePointViolet.png new file mode 100644 index 0000000..514ce82 Binary files /dev/null and b/SwichGIT/Doc/EtudesGénération 3_4/img/ParallélismePointViolet.png differ diff --git a/SwichGIT/Doc/EtudesGénération 3_4/img/PossibiliteesBleuRouge.png b/SwichGIT/Doc/EtudesGénération 3_4/img/PossibiliteesBleuRouge.png new file mode 100644 index 0000000..a824da5 Binary files /dev/null and b/SwichGIT/Doc/EtudesGénération 3_4/img/PossibiliteesBleuRouge.png differ diff --git a/SwichGIT/Doc/EtudesGénération 3_4/img/PossibiliteesVertViolet.png b/SwichGIT/Doc/EtudesGénération 3_4/img/PossibiliteesVertViolet.png new file mode 100644 index 0000000..38e15d7 Binary files /dev/null and b/SwichGIT/Doc/EtudesGénération 3_4/img/PossibiliteesVertViolet.png differ diff --git a/SwichGIT/src/css/PageDaccueil.css b/SwichGIT/src/css/PageDaccueil.css index d3d001c..ceeebe6 100644 --- a/SwichGIT/src/css/PageDaccueil.css +++ b/SwichGIT/src/css/PageDaccueil.css @@ -24,6 +24,157 @@ 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*/ #infosec{ @@ -337,3 +488,34 @@ label:active:after { width: 100%; 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; +} + + + + + + diff --git a/SwichGIT/src/css/Resp3.css b/SwichGIT/src/css/Resp3.css index 27ed7fa..47f2071 100644 --- a/SwichGIT/src/css/Resp3.css +++ b/SwichGIT/src/css/Resp3.css @@ -1,9 +1,20 @@ /*Ecran*/ @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 { position: relative; - left: calc((var(--x) - var(--y)) / 2); background-color: var(--colorbase); border-radius: var(--y); height: var(--y); @@ -11,28 +22,64 @@ display: table-cell; 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 { - background-color: var(--lighttercia); + background-color: white; height: var(--z); width: var(--z); display: table; margin: 0 auto; border-radius: var(--z); } - - .containform { + .rond { + 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; - height: var(--x); - width: var(--x); + top : calc((var(--y) - var(--z))/ 2); + left : calc((var(--y) - var(--z))/2); display: table-cell; vertical-align: middle; + background-color: white; + height: var(--z); + width: var(--z); + border-radius: var(--z); } - - .rond { + .rond4 { display: table; margin: 0 auto; - background-color: var(--colorrond); + background-color: var(--colorbase); height: var(--z); width: var(--z); border-radius: var(--z); @@ -41,7 +88,7 @@ /* PARTIE CARRE */ .carre { position: relative; - background-color: var(--colorcarre); + background-color: blacke); height: var(--y); width: var(--y); margin-left: auto; @@ -54,156 +101,348 @@ left : calc((var(--y) - var(--z))/2); display: table-cell; vertical-align: middle; - background-color: var(--lightsedonca); + background-color: white; height: 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 { - background-color: var(--colorcarre); + background-color: blacke); height: var(--z); width: var(--z); display: table; margin: 0 auto; } + /*========================================*/ /* PARTIE TRIANGLE */ .triangle { display: table; margin: 0 auto; - border-left: 2.5vw solid transparent; - border-right: 2.5vw solid transparent; - border-bottom: 5vw solid #DEA430; + border-left: calc(var(--y) /2) solid transparent; + border-right: calc(var(--y) /2) solid transparent; + border-bottom: var(--y) solid var(--colortwo); } - .trianglerinterieur { position: absolute; - margin-left: -1.5vw; - margin-top: 1.25vw; - border-left: 1.5vw solid transparent; - border-right: 1.5vw solid transparent; - border-bottom: 3vw solid var(--lightsedonca); + bottom: calc((var(--x) - var(--z))/2.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; + } + .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 { + 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; margin: 0 auto; - margin-top: 0.75vw; - border-left: 1.5vw solid transparent; - border-right: 1.5vw solid transparent; - 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; + border-left: calc(var(--y) /2) solid transparent; + border-right: calc(var(--y) /2) solid transparent; + border-bottom: var(--y) solid white; } - .triangletrapeze { - padding-top: 0.1vw; + /* Croix */ + .croix{ position: absolute; - border-left: 3vw solid transparent; - border-right: 3vw solid transparent; - border-bottom: 2.5vw solid #6FDE30; + left: calc((var(--x) - var(--y)) / 2); + bottom: calc( ((var(--x) - var(--y))/2) + ((var(--y)) / 4) ); } - - .trapezeinte { + .croixinté{ + z-index: 2; position: absolute; - margin-top: 3vw; - margin-left: 1.25vw; - width: 2vw; - border-left: 0.75vw solid transparent; - border-right: 0.75vw solid transparent; - border-top: 1.5vw solid var(--lightsedonca); - z-index: 15; + left: calc((var(--x) - var(--z))/2); + bottom: calc( ((var(--x) - var(--z))/2) + ((var(--z)) / 2.33) ); + } + .croixgauche{ + position: relative; + background-color: var(--couleur); + 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 { - position: absolute; - margin-top: 1.45vw; - margin-left: 1.25vw; - padding-top: 0.1vw; - border-left: 1.75vw solid transparent; - border-right: 1.75vw solid transparent; - border-bottom: 1.5vw solid var(--lightsedonca); - z-index: 15; + .croixdroite2{ + position: relative; + background-color: white; + height: calc(var(--y)/4); + width: var(--y); + bottom : calc(var(--y) / 8); + transform: rotate(-45deg); } - .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; margin: 0 auto; - margin-top: 2vw; - width: 2vw; - border-left: 0.75vw solid transparent; - border-right: 0.75vw solid transparent; - border-top: 1.5vw solid #6FDE30; - z-index: 15; + background: var(--couleur); + clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); } - - .triangletrapezep { + .losange2{ + 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; - margin-top: 0.55vw; - margin-left: 1.25vw; - border-left: 1.75vw solid transparent; - border-right: 1.75vw solid transparent; - border-bottom: 1.5vw solid #6FDE30; - z-index: 15; + z-index: 2; + width: var(--z); + height: var(--z); + bottom : calc( ((var(--x) - var(--z))/2)); + left : calc((var(--x) - var(--z))/2); + background: white; + clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); } - - .losangephaut { + .losangeinte2{ + width: var(--z); + height: var(--z); display: table; margin: 0 auto; - margin-top: -3vw; - border-left: 3vw solid transparent; - border-right: 3vw solid transparent; - border-bottom: 3vw solid #B130DE; + background: var(--couleur); + clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); } - - .losangepbas { + /*PENTA*/ + .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; - border-left: 3vw solid transparent; - border-right: 3vw solid transparent; - border-top: 3vw solid #B130DE; + 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%); } - - .losangephauti { + .trapezeinte2{ + 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; margin: 0 auto; - margin-top: -1.5vw; - border-left: 1.5vw solid transparent; - border-right: 1.5vw solid transparent; - border-bottom: 1.5vw solid var(--lightsedonca); + background: var(--couleur); + clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); } - - .losangepbasi { + .hexa2{ + 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; - margin-left: 1.5vw; - border-left: 1.5vw solid transparent; - border-right: 1.5vw solid transparent; - border-top: 1.5vw solid var(--lightsedonca); + z-index: 2; + width: var(--z); + height: var(--z); + 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%); } - - .losangephautc { + .hexainte2{ display: table; margin: 0 auto; - margin-top: -1.5vw; - border-left: 1.5vw solid transparent; - border-right: 1.5vw solid transparent; - border-bottom: 1.5vw solid #B130DE; + width: var(--z); + height: var(--z); + background: var(--couleur); + 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 { position: relative; diff --git a/SwichGIT/src/css/base.css b/SwichGIT/src/css/base.css index d59d42b..03422a9 100644 --- a/SwichGIT/src/css/base.css +++ b/SwichGIT/src/css/base.css @@ -3,22 +3,26 @@ --lightprima: #DEDEDE; --lightsedonca: #B7B7B7; --lighttercia: #E6E6E6; - /*Couleur*/ + /*Couleur bases*/ --colorbase : #e75259; + --colorcarre : #30C0DE; --colorone : #00CBFF; --colortwo : #00FF6E; --colorthree : #C800FF; - --colorcarre : #30C0DE; /*Les formes*/ - --x : 3vw; + --x : 4vw; --y : 2.5vw; /*taille anneau*/ - --z :1.5vw; /*taille rond*/ + --z : 1.5vw; /*taille rond*/ --d : calc(var(--x)/2); --l : calc(var(--x)/2); } +.test{ + color: black; +} + @font-face { font-family: "Montserrat"; src: url("/fonts/MonstMontserrat-Black.woff") format("woff"), diff --git a/SwichGIT/src/css/pickr.min.css b/SwichGIT/src/css/pickr.min.css new file mode 100644 index 0000000..2e6aac6 --- /dev/null +++ b/SwichGIT/src/css/pickr.min.css @@ -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, ') no-repeat 50%;background-size:0;transition:all .3s} +.pickr .pcr-button:before{background:url('data:image/svg+xml;utf8, ');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, ') no-repeat 50%;background-size:0;transition:all .3s} +.pickr2 .pcr-button:before{background:url('data:image/svg+xml;utf8, ');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, ') no-repeat 50%;background-size:0;transition:all .3s} +.pickr3 .pcr-button:before{background:url('data:image/svg+xml;utf8, ');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, ') no-repeat 50%;background-size:0;transition:all .3s} +.pickr4 .pcr-button:before{background:url('data:image/svg+xml;utf8, ');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, ') no-repeat 50%;background-size:0;transition:all .3s} +.pickr5 .pcr-button:before{background:url('data:image/svg+xml;utf8, ');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, ');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, ');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, ');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, ');background-size:100%,50%} diff --git a/SwichGIT/src/index.html b/SwichGIT/src/index.html index 383c353..9e22aff 100644 --- a/SwichGIT/src/index.html +++ b/SwichGIT/src/index.html @@ -9,8 +9,11 @@ + + + @@ -37,7 +40,7 @@
@@ -70,24 +73,312 @@
-

Les Paramètres :

- × -
-
-
-

Mode Forme

+

Les Paramètres

+ × +
+ +
+


+
+
+
+
+
+
+
+
+
+
+ +
+

Les couleurs

+
+ +
-

Choix Couleur

+ + + + + + +
diff --git a/SwichGIT/src/js/main.js b/SwichGIT/src/js/main.js index 94fb5a7..a8c6b19 100644 --- a/SwichGIT/src/js/main.js +++ b/SwichGIT/src/js/main.js @@ -8,7 +8,7 @@ var darkprima = "#474747"; var darkseconda = "#393939"; var darktercia = "#606060"; 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 @@ -41,11 +41,11 @@ class Carte { var divcase = document.createElement('div'); divcase.className = "item-form"; - var ajouté = true; + var ajoute = true; for (var j = 0; j < this.SesFigures.length; j++) { if (i == this.SesFigures[j].X + (this.SesFigures[j].Y * 3)) { 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); divconteneur.appendChild(this.SesFigures[j].CodeHTML); } catch (e) { @@ -53,7 +53,7 @@ class Carte { } } } - if (ajouté) { + if (ajoute) { divconteneur.appendChild(divcase); } } @@ -332,18 +332,18 @@ function redistribuer() { deckPartie = []; for (var i = 0; i < 16; i++) { 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++) { 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) - 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++) { 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++) { 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++) { 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) - 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++) { if (TasDuJEU[index].identifiant == deckPartie[j].identifiant) { - déjàPrésente = true; + dejaPresente = true; } } } @@ -493,18 +493,18 @@ function changerlesCartesDeTasDeJeu() { TasDuJEU.splice(unIndex, 1); if (TasDuJEU.length > 16) { 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++) { 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) - 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++) { if (TasDuJEU[index2].identifiant == deckPartie[j].identifiant) { - déjàPrésente = true; + dejaPresente = true; } } } diff --git a/SwichGIT/src/js/menu.js b/SwichGIT/src/js/menu.js new file mode 100644 index 0000000..ced97d3 --- /dev/null +++ b/SwichGIT/src/js/menu.js @@ -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 = ""; +} \ No newline at end of file