From 80588b1545f446aed2d2eefff1469ea65c851e6e Mon Sep 17 00:00:00 2001 From: frperalde Date: Mon, 14 Dec 2020 07:42:07 +0100 Subject: [PATCH 1/5] formes v2 --- .../Doc/Etudes formes/{ => V1}/index.html | 0 SwichGIT/Doc/Etudes formes/{ => V1}/script.js | 0 SwichGIT/Doc/Etudes formes/{ => V1}/style.css | 0 SwichGIT/Doc/Etudes formes/V2/index.html | 216 ++++++++++++++++++ SwichGIT/Doc/Etudes formes/V2/style.css | 99 ++++++++ 5 files changed, 315 insertions(+) rename SwichGIT/Doc/Etudes formes/{ => V1}/index.html (100%) rename SwichGIT/Doc/Etudes formes/{ => V1}/script.js (100%) rename SwichGIT/Doc/Etudes formes/{ => V1}/style.css (100%) create mode 100644 SwichGIT/Doc/Etudes formes/V2/index.html create mode 100644 SwichGIT/Doc/Etudes formes/V2/style.css 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%); +} + From a12b855cbc8588273ee0ec581b14749a27ab489d Mon Sep 17 00:00:00 2001 From: frperalde Date: Mon, 14 Dec 2020 07:46:42 +0100 Subject: [PATCH 2/5] avancement --- SwichGIT/src/css/PageDaccueil.css | 182 ++++++++++++ SwichGIT/src/css/Resp3.css | 463 ++++++++++++++++++++++-------- SwichGIT/src/css/base.css | 16 +- SwichGIT/src/css/pickr.min.css | 132 +++++++++ SwichGIT/src/index.html | 312 +++++++++++++++++++- SwichGIT/src/js/menu.js | 82 ++++++ 6 files changed, 1060 insertions(+), 127 deletions(-) create mode 100644 SwichGIT/src/css/pickr.min.css create mode 100644 SwichGIT/src/js/menu.js 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 831bbc0..03422a9 100644 --- a/SwichGIT/src/css/base.css +++ b/SwichGIT/src/css/base.css @@ -3,23 +3,31 @@ --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"), + url("/fonts/MonstMontserrat-Black.woff2") format("woff2"); +} a { cursor: pointer; 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..cd933e5 100644 --- a/SwichGIT/src/index.html +++ b/SwichGIT/src/index.html @@ -4,13 +4,14 @@ SwishGame - - + + + @@ -37,7 +38,7 @@
@@ -70,24 +71,312 @@
-

Les Paramètres :

- × -
-
-
-

Mode Forme

+

Les Paramètres

+ × +
+ +
+


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

Les couleurs

+
+ +
-

Choix Couleur

+ + + + + + +
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 From cd5511f8c92011be7626791c9b59645d77763bb7 Mon Sep 17 00:00:00 2001 From: frperalde Date: Mon, 14 Dec 2020 07:54:47 +0100 Subject: [PATCH 3/5] pour yannis --- SwichGIT/src/index.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/SwichGIT/src/index.html b/SwichGIT/src/index.html index cd933e5..9e22aff 100644 --- a/SwichGIT/src/index.html +++ b/SwichGIT/src/index.html @@ -4,6 +4,8 @@ SwishGame + + From cb54c034cd10f3b588258aacd7c5454981c26a79 Mon Sep 17 00:00:00 2001 From: cytoffin Date: Mon, 14 Dec 2020 08:08:59 +0100 Subject: [PATCH 4/5] d --- SwichGIT/MorpionMulti/.idea/.gitignore | 8 ++ SwichGIT/MorpionMulti/.idea/.idea/.idea.iml | 8 ++ .../.idea/codeStyles/codeStyleConfig.xml | 5 + .../MorpionMulti/.idea/.idea/deployment.xml | 14 +++ SwichGIT/MorpionMulti/.idea/.idea/modules.xml | 8 ++ .../MorpionMulti/.idea/.idea/workspace.xml | 45 +++++++ SwichGIT/MorpionMulti/.idea/.name | 1 + SwichGIT/MorpionMulti/.idea/TP2.iml | 8 ++ .../.idea/codeStyles/codeStyleConfig.xml | 5 + SwichGIT/MorpionMulti/.idea/deployment.xml | 21 ++++ SwichGIT/MorpionMulti/.idea/modules.xml | 8 ++ SwichGIT/MorpionMulti/.idea/php.xml | 6 + SwichGIT/MorpionMulti/DB.php | 116 ++++++++++-------- SwichGIT/MorpionMulti/MyDB.php | 13 +- SwichGIT/MorpionMulti/accueil.php | 48 ++++++++ SwichGIT/MorpionMulti/bddt.php | 4 + SwichGIT/MorpionMulti/js.js | 0 SwichGIT/MorpionMulti/mysqlitedb.db | Bin 8192 -> 8192 bytes 18 files changed, 267 insertions(+), 51 deletions(-) create mode 100644 SwichGIT/MorpionMulti/.idea/.gitignore create mode 100644 SwichGIT/MorpionMulti/.idea/.idea/.idea.iml create mode 100644 SwichGIT/MorpionMulti/.idea/.idea/codeStyles/codeStyleConfig.xml create mode 100644 SwichGIT/MorpionMulti/.idea/.idea/deployment.xml create mode 100644 SwichGIT/MorpionMulti/.idea/.idea/modules.xml create mode 100644 SwichGIT/MorpionMulti/.idea/.idea/workspace.xml create mode 100644 SwichGIT/MorpionMulti/.idea/.name create mode 100644 SwichGIT/MorpionMulti/.idea/TP2.iml create mode 100644 SwichGIT/MorpionMulti/.idea/codeStyles/codeStyleConfig.xml create mode 100644 SwichGIT/MorpionMulti/.idea/deployment.xml create mode 100644 SwichGIT/MorpionMulti/.idea/modules.xml create mode 100644 SwichGIT/MorpionMulti/.idea/php.xml create mode 100644 SwichGIT/MorpionMulti/accueil.php create mode 100644 SwichGIT/MorpionMulti/bddt.php create mode 100644 SwichGIT/MorpionMulti/js.js diff --git a/SwichGIT/MorpionMulti/.idea/.gitignore b/SwichGIT/MorpionMulti/.idea/.gitignore new file mode 100644 index 0000000..36c467d --- /dev/null +++ b/SwichGIT/MorpionMulti/.idea/.gitignore @@ -0,0 +1,8 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Datasource local storage ignored files +/../../../../../../:\wamp64\www\Test\TP2\.idea/dataSources/ +/dataSources.local.xml +# Editor-based HTTP Client requests +/httpRequests/ diff --git a/SwichGIT/MorpionMulti/.idea/.idea/.idea.iml b/SwichGIT/MorpionMulti/.idea/.idea/.idea.iml new file mode 100644 index 0000000..c956989 --- /dev/null +++ b/SwichGIT/MorpionMulti/.idea/.idea/.idea.iml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/SwichGIT/MorpionMulti/.idea/.idea/codeStyles/codeStyleConfig.xml b/SwichGIT/MorpionMulti/.idea/.idea/codeStyles/codeStyleConfig.xml new file mode 100644 index 0000000..a55e7a1 --- /dev/null +++ b/SwichGIT/MorpionMulti/.idea/.idea/codeStyles/codeStyleConfig.xml @@ -0,0 +1,5 @@ + + + + \ No newline at end of file diff --git a/SwichGIT/MorpionMulti/.idea/.idea/deployment.xml b/SwichGIT/MorpionMulti/.idea/.idea/deployment.xml new file mode 100644 index 0000000..5512eb5 --- /dev/null +++ b/SwichGIT/MorpionMulti/.idea/.idea/deployment.xml @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/SwichGIT/MorpionMulti/.idea/.idea/modules.xml b/SwichGIT/MorpionMulti/.idea/.idea/modules.xml new file mode 100644 index 0000000..08f54a6 --- /dev/null +++ b/SwichGIT/MorpionMulti/.idea/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/SwichGIT/MorpionMulti/.idea/.idea/workspace.xml b/SwichGIT/MorpionMulti/.idea/.idea/workspace.xml new file mode 100644 index 0000000..5161708 --- /dev/null +++ b/SwichGIT/MorpionMulti/.idea/.idea/workspace.xml @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + 1605542003265 + + + + + + + + + + + + \ No newline at end of file diff --git a/SwichGIT/MorpionMulti/.idea/.name b/SwichGIT/MorpionMulti/.idea/.name new file mode 100644 index 0000000..40daab1 --- /dev/null +++ b/SwichGIT/MorpionMulti/.idea/.name @@ -0,0 +1 @@ +bddt.php \ No newline at end of file diff --git a/SwichGIT/MorpionMulti/.idea/TP2.iml b/SwichGIT/MorpionMulti/.idea/TP2.iml new file mode 100644 index 0000000..c956989 --- /dev/null +++ b/SwichGIT/MorpionMulti/.idea/TP2.iml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/SwichGIT/MorpionMulti/.idea/codeStyles/codeStyleConfig.xml b/SwichGIT/MorpionMulti/.idea/codeStyles/codeStyleConfig.xml new file mode 100644 index 0000000..a55e7a1 --- /dev/null +++ b/SwichGIT/MorpionMulti/.idea/codeStyles/codeStyleConfig.xml @@ -0,0 +1,5 @@ + + + + \ No newline at end of file diff --git a/SwichGIT/MorpionMulti/.idea/deployment.xml b/SwichGIT/MorpionMulti/.idea/deployment.xml new file mode 100644 index 0000000..f921b39 --- /dev/null +++ b/SwichGIT/MorpionMulti/.idea/deployment.xml @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/SwichGIT/MorpionMulti/.idea/modules.xml b/SwichGIT/MorpionMulti/.idea/modules.xml new file mode 100644 index 0000000..c693d56 --- /dev/null +++ b/SwichGIT/MorpionMulti/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/SwichGIT/MorpionMulti/.idea/php.xml b/SwichGIT/MorpionMulti/.idea/php.xml new file mode 100644 index 0000000..3571588 --- /dev/null +++ b/SwichGIT/MorpionMulti/.idea/php.xml @@ -0,0 +1,6 @@ + + + + + \ No newline at end of file diff --git a/SwichGIT/MorpionMulti/DB.php b/SwichGIT/MorpionMulti/DB.php index e28a3ce..d7ed019 100644 --- a/SwichGIT/MorpionMulti/DB.php +++ b/SwichGIT/MorpionMulti/DB.php @@ -1,52 +1,78 @@ - + + + +
+ +
+
+ + +

Morpion

-

+

- +
+ +

+ query('INSERT INTO partie(Id) VALUES("'.$idpartie.'")'); + + +$action = $_REQUEST['action'] ?? NULL; +echo $action; + +if($action=="Creer"){ + $partiecreer=genererChaineAleatoire(); + $db->query('INSERT INTO partie(Id) VALUES("'.$partiecreer.'")'); + $idpartie=$partiecreer; + require("DB.php"); +} +if($action=="Rejoindre"){ + $idpartie=$_POST['placer']; + $idpartie=$partiecreer; + require("DB.php"); +} + echo "

Id : $idpartie

" ; $colonne=""; if(isset($_POST['case'])){ if($_POST['case']=='1'){ - $colonne='un'; - } - elseif ($_POST['case']=='2'){ - $colonne='deux'; - } - elseif ($_POST['case']=='3'){ - $colonne='trois'; - } - elseif ($_POST['case']=='4'){ - $colonne='quatre'; - } - elseif ($_POST['case']=='5'){ - $colonne='cinq'; - } - elseif ($_POST['case']=='6'){ - $colonne='six'; - } - elseif ($_POST['case']=='7'){ - $colonne='sept'; - } - elseif ($_POST['case']=='8'){ - $colonne='huit'; - } - elseif ($_POST['case']=='9'){ - $colonne='neuf'; - } + $colonne='un'; +} +elseif ($_POST['case']=='2'){ + $colonne='deux'; +} +elseif ($_POST['case']=='3'){ + $colonne='trois'; +} +elseif ($_POST['case']=='4'){ + $colonne='quatre'; +} +elseif ($_POST['case']=='5'){ + $colonne='cinq'; +} +elseif ($_POST['case']=='6'){ + $colonne='six'; +} +elseif ($_POST['case']=='7'){ + $colonne='sept'; +} +elseif ($_POST['case']=='8'){ + $colonne='huit'; +} +elseif ($_POST['case']=='9'){ + $colonne='neuf'; +} else{ $colonne='null'; } @@ -70,28 +96,20 @@ if(isset($colonne)and $valeur!="" and $colonne!=''){ else{ $update = $db->query('UPDATE partie SET "'.$colonne.'" = "'.$valeur.'" where Id="'.$idpartie.'" '); } - } -//$db->query('INSERT INTO partie(Id) VALUES("'.$idpartie.'")'); - - - - $afficher = $db->query('SELECT * FROM partie where Id="'.$idpartie.'" '); while ($row = $afficher->fetchArray()) { - $un=$row['un']; - $deux=$row['deux']; - $trois=$row['trois']; - $quatre=$row['quatre']; - $cinq=$row['cinq']; - $six=$row['six']; - $sept=$row['sept']; - $huit=$row['huit']; - $neuf=$row['neuf']; - - +$un=$row['un']; +$deux=$row['deux']; +$trois=$row['trois']; +$quatre=$row['quatre']; +$cinq=$row['cinq']; +$six=$row['six']; +$sept=$row['sept']; +$huit=$row['huit']; +$neuf=$row['neuf']; } echo " diff --git a/SwichGIT/MorpionMulti/MyDB.php b/SwichGIT/MorpionMulti/MyDB.php index 9ae6b82..1c579bd 100644 --- a/SwichGIT/MorpionMulti/MyDB.php +++ b/SwichGIT/MorpionMulti/MyDB.php @@ -11,7 +11,7 @@ class MyDB extends SQLite3 function genererChaineAleatoire($longueur = 10) { - $caracteres = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'; + $caracteres = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ'; $longueurMax = strlen($caracteres); $chaineAleatoire = ''; for ($i = 0; $i < $longueur; $i++) @@ -19,4 +19,13 @@ function genererChaineAleatoire($longueur = 10) $chaineAleatoire .= $caracteres[rand(0, $longueurMax - 1)]; } return $chaineAleatoire; -} \ No newline at end of file +} + +function CreerPatie(string $bd,string $id){ + $id=genererChaineAleatoire(); + $bd->query('INSERT INTO partie(Id) VALUES("'.$id.'")'); +} + +function SupprimerLigne(string $bd,string $id){ + $suppression = $bd->query('DELETE FROM partie where Id="'.$id.'" '); +} diff --git a/SwichGIT/MorpionMulti/accueil.php b/SwichGIT/MorpionMulti/accueil.php new file mode 100644 index 0000000..f395f27 --- /dev/null +++ b/SwichGIT/MorpionMulti/accueil.php @@ -0,0 +1,48 @@ + + + + + + + + +

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

+ + + + + + + diff --git a/SwichGIT/MorpionMulti/bddt.php b/SwichGIT/MorpionMulti/bddt.php new file mode 100644 index 0000000..5eef32f --- /dev/null +++ b/SwichGIT/MorpionMulti/bddt.php @@ -0,0 +1,4 @@ + \ No newline at end of file diff --git a/SwichGIT/MorpionMulti/js.js b/SwichGIT/MorpionMulti/js.js new file mode 100644 index 0000000..e69de29 diff --git a/SwichGIT/MorpionMulti/mysqlitedb.db b/SwichGIT/MorpionMulti/mysqlitedb.db index fd7e6cd9f2500adae22c762a5b0b157426e418be..cea990e5f7f784c537732da284c59285d8428f1b 100644 GIT binary patch literal 8192 zcmeI!Ta4pY835qiZ_Z`6%bDHTS%wVVvMnsdcH+dLr8K_BaqPsmIDx{>WHXt}eKN_; z?9f{%@W2BCQGrAO^#O@WAS4h-MXCTHkU;Q&1VtdNiUco}3R0y45>McnX_g-}PTzPy zIpcWj?>`rx-;Pg=hSDE)v#UFUt>s}h=R4=~`+bjQvp%2i755WxKa=8j4?>d@_y6(v zTa{OQ59YHex0XNC^10ir%rY>`z$^o^49qex%fKuHvkc5KFw4L!1G5awGVuSEf$>#; z^y2)y|Ks-#msd8syUT-N|IK}X)%mi?XU#IB@Y&PI{gs$9Zrsi zgPs2Vn}@Y<+<_jtQIT7A&*AluV%iQc_y=#sb$E_#q<}_N9kXtUQFMYj-_5pJ(qeiwVdKo*HVe}V`(A%z2qCo zJMlk7{+4_x@^bRa2|D>u@@g`L{T=%Q_A~6;*q5+puuaUu9>K0*=Mw)&{4w#1#CH>4 zNqj1?lW-Ej_Ih;PQt_`~t5@nr0;u{*J!#J(AOHuiYzW=x6YV^?CK z=%1s%iM|y5TC^Sgbd-%=kD|m<@{^GtM7|#ROynSPBT|Wwk%dSo{Fm@=!#@na5dK{F zDBKAvVJf^Bj)qL&^JQQhMowmhO`hJS_&nCZv^iIe;WK&@QcBxgKNQhkPc>p zvB2wr-vxdYcp>oFz+vD?Jz0WT18 zh0m3mWD`9FxLW39Ms1T~5j_c*EQ)o!-4aL{Jps5up}nv8u-9(GajAD~g#X8jgVW0gG+P6slTPD4+r0YL3ARW=qm6 zvXsj7EW1C z5p4p_s}0Ri>5`U18<1N{L$p~Fx6nFdrlJ#0!6+H14_L4X!*c2rT|{eu`KCowh`Lf> zQ4cUFDz;QB<9PzD0&W)b6jhTQ(?ngsMTZj17R{H6=qBJ+OEVa$%+U(!02XSd+GYe? zcF+o7v!IJa&7`>^S_aI^l!@nZMW%^v0Ircrt*(nURYD&HT%p^NWt7Wm4t)f$$l*e{ zX)0Xt;$tpne8-#5mv@A6fmK@);b`c?p#DKsHhXwYTyLNc0XDZrmL%uaDS9!BEoCOf zkgI}JRXD+L+@c-t78j?-kpsFFWXTXYNfu<(Je%z^dCqhPnY_9G-H9{z!LuD%XLb|+ zr*Fq*MGqG|ocD0f!&wh!JiP4TkDl%5 z5pd_bBk9PN54YGO^Z~$awY_G^gR-rlhXMEOt=z`2v9YS4hXAkj+jOm2TFEO(-M9F5 zci2feyTs0E_RE~Vr<3T3N{?|h3+Y0&I;P8U^4P&RQ? z1l-!&=m;Vs!lmca27+gYtmYk+NLpdRE;=Ilwl3)MMB6 z#?b~M0b7o}tF7_OK>-nfjefbr_D3rcfpEaue!f@Py4|a3=zW0cf-DRM`zwPHdJu54 zPwn(~)(Kre?**JQ$Tikd4(vU29dI4LwQ|I)=Bu0NJ%DA~*i-j9n+A{G4S3nA+*;mm z;LQW{0N@?Ea476_OY{!9AMmPrv}v$6%Z7oj0p@vzZj$Yivw_|PxZ10i+P0|oHqd>5 zhh3_ZC#ijwM^^!>-COJXMz6TJhwcTe^o0sv5_j{3n3)pHgnS`14^oPA_^!tGjY4hV(v)_Wli2*pMIP^%lXN%T z)%j$BzKnUt-0{$5Fx=swu$3dt?LGZ+%DdHk2)php2$P|Q0N^$tb6Lt)R*r67jjgxqIUJN=srU>8m!?(JvPlZk3>?1CRV@A}E_E7y-J HYtFv_msRnG literal 8192 zcmeH_y-ve05XYTTK7;K-fiz*U1OrHjfsdUQRR{@Ml~zy|qynjk1TD0QgxG+I7hq)L z5f~WR*%0r5#KaqLPU?b?9Co;?ou2(a+vlIJT-xw_SJa!WlbSCUNs1T-SrLK|vJE`} zU6}z+QVrl=j(@XlGQT7!L>YXSKtn?UNB{{S0VIF~kN^@u0!RP}AOR%sw+LKL8~v7T z8&^|)ZU5Lkt+jlw^G&R7<+GK%sAO{+c@Zfy>xZIT*;+5G%>@nR9lF7}^8HrRYpa1c z3u=DLRl@_Xai;vX*Im+fPkl9g6nI^~;Rf~2{4AwUBtz{af9Eg!k-hOde$9{gCSTwd zyJZ*bncg!>KjNTDu&@A~ZVS#?VjYIXT?4)Uh>8sPq(MfQa+$G(u z^(Yg2NE>bs>ZJj_)UTKN^ir=@%Ji7y-!BBkS&V)Y2{RojvLXuMMT?-N4RZwM31E}+ IGPqd%1bf=q=Kufz From 73ab73582e0d0021adfbf14a2f9510827233cb1a Mon Sep 17 00:00:00 2001 From: frperalde Date: Mon, 14 Dec 2020 08:43:50 +0100 Subject: [PATCH 5/5] gestion erreur --- SwichGIT/src/css/Resp3.css | 10 +++--- SwichGIT/src/css/base.css | 6 ---- SwichGIT/src/index.html | 3 +- SwichGIT/src/js/main.js | 66 +++++++++++++++++++------------------- SwichGIT/src/js/menu.js | 14 ++++---- 5 files changed, 47 insertions(+), 52 deletions(-) diff --git a/SwichGIT/src/css/Resp3.css b/SwichGIT/src/css/Resp3.css index 47f2071..4884b90 100644 --- a/SwichGIT/src/css/Resp3.css +++ b/SwichGIT/src/css/Resp3.css @@ -88,7 +88,7 @@ /* PARTIE CARRE */ .carre { position: relative; - background-color: blacke); + background-color: black; height: var(--y); width: var(--y); margin-left: auto; @@ -106,7 +106,7 @@ width: var(--z); } .carre2 { - background-color: blacke); + background-color: black; height: var(--z); width: var(--z); display: table; @@ -131,7 +131,7 @@ } .carrev2 { position: relative; - background-color: blacke); + background-color: black; height: var(--y); width: var(--y); margin-left: auto; @@ -148,7 +148,7 @@ vertical-align: middle; } .carre3 { - background-color: blacke); + background-color: black; height: var(--z); width: var(--z); display: table; @@ -158,7 +158,7 @@ =========================================== */ .pcarre { - background-color: blacke); + background-color: black; height: var(--z); width: var(--z); display: table; diff --git a/SwichGIT/src/css/base.css b/SwichGIT/src/css/base.css index 03422a9..2e13bcf 100644 --- a/SwichGIT/src/css/base.css +++ b/SwichGIT/src/css/base.css @@ -23,12 +23,6 @@ color: black; } -@font-face { - font-family: "Montserrat"; - src: url("/fonts/MonstMontserrat-Black.woff") format("woff"), - url("/fonts/MonstMontserrat-Black.woff2") format("woff2"); -} - a { cursor: pointer; z-index: 60; diff --git a/SwichGIT/src/index.html b/SwichGIT/src/index.html index 9e22aff..54ca978 100644 --- a/SwichGIT/src/index.html +++ b/SwichGIT/src/index.html @@ -1,6 +1,7 @@ + SwishGame @@ -15,7 +16,7 @@ - + diff --git a/SwichGIT/src/js/main.js b/SwichGIT/src/js/main.js index a8c6b19..32a7a25 100644 --- a/SwichGIT/src/js/main.js +++ b/SwichGIT/src/js/main.js @@ -8,8 +8,8 @@ var darkprima = "#474747"; var darkseconda = "#393939"; var darktercia = "#606060"; var carteselect = []; -var deckPartie = []; //Ensemble des cartes affichées a l'ecran -var TasDuJEU = []; // Ensemble de toutes les cartes présente dans le jeu +var deckPartie = []; //Ensemble des cartes affichees a l'ecran +var TasDuJEU = []; // Ensemble de toutes les cartes presente dans le jeu @@ -17,7 +17,7 @@ var TasDuJEU = []; // Ensemble de toutes les cartes présente dans le jeu class Carte { - constructor(id, allFigure/*,row,column,nbForme*/) { //à décommenter quand il y aura des prametres de partie + constructor(id, allFigure/*,row,column,nbForme*/) { //a decommenter quand il y aura des prametres de partie //Attribut de Classe this.identifiant = id; this.row = 4 /*row*/; @@ -65,7 +65,7 @@ class Carte { var lacarte = "card" + macarte; for (var i = 0; i < deckPartie.length; i++) { if (this.id == deckPartie[i].identifiant) { - var laCarte = deckPartie[i];//Carte liée avec le code HTML + var laCarte = deckPartie[i];//Carte liee avec le code HTML } } if (document.getElementById(lacarte).style.boxShadow != "") { @@ -186,7 +186,7 @@ class Figure { } var unRond = document.createElement('div'); - unRond.className = "rondinterieur inté"; + unRond.className = "rondinterieur inte"; unCercle.appendChild(unRond); divContainForm.appendChild(unCercle); @@ -309,7 +309,7 @@ function journuit() { function lancerpartie() { document.getElementById("pageAccueil").style.visibility = "hidden"; - //fonction de création de partie à changer en fonction du test voulu + //fonction de creation de partie a changer en fonction du test voulu creePartieClassique(); document.getElementById("pageGame").style.visibility = "visible"; } @@ -332,7 +332,7 @@ function redistribuer() { deckPartie = []; for (var i = 0; i < 16; i++) { var index = getRandom(0, TasDuJEU.length - 1) - var dejaPresente = false;//Permet de savoir si la carte est déjà dans la liste + var dejaPresente = false;//Permet de savoir si la carte est deja dans la liste for (var j = 0; j < deckPartie.length; j++) { if (TasDuJEU[index].identifiant == deckPartie[j].identifiant) { dejaPresente = true; @@ -340,7 +340,7 @@ function redistribuer() { } while (dejaPresente == true) { index = getRandom(0, TasDuJEU.length - 1) - dejaPresente = false;//Permet de savoir si la carte est déjà dans la liste + dejaPresente = false;//Permet de savoir si la carte est deja dans la liste for (var j = 0; j < deckPartie.length; j++) { if (TasDuJEU[index].identifiant == deckPartie[j].identifiant) { dejaPresente = true; @@ -354,7 +354,7 @@ function redistribuer() { } //================================================================================================================================================================ -//Fonction créations de game +//Fonction creations de game function genererTouteslesCartes3_4Possibles() { deckPartie = []; @@ -431,7 +431,7 @@ function creePartieClassique() { } for (var i = 0; i < 16; i++) { var index = getRandom(0, TasDuJEU.length - 1) - var dejaPresente = false;//Permet de savoir si la carte est déjà dans la liste + var dejaPresente = false;//Permet de savoir si la carte est deja dans la liste for (var j = 0; j < deckPartie.length; j++) { if (TasDuJEU[index].identifiant == deckPartie[j].identifiant) { dejaPresente = true; @@ -439,7 +439,7 @@ function creePartieClassique() { } while (dejaPresente == true) { index = getRandom(0, TasDuJEU.length - 1) - dejaPresente = false;//Permet de savoir si la carte est déjà dans la liste + dejaPresente = false;//Permet de savoir si la carte est deja dans la liste for (var j = 0; j < deckPartie.length; j++) { if (TasDuJEU[index].identifiant == deckPartie[j].identifiant) { dejaPresente = true; @@ -475,7 +475,7 @@ function creePartieInfini() { Coy2 = getRandom(0, 3); } AllFigure.push(new Figure(new Array(TypeFigure.Moyen), FormeFigure.Rond, Cox2, Coy2)); - //Code de Génération de Figure + //Code de Generation de Figure var uneCarte = new Carte(j, AllFigure); deckPartie.push(uneCarte); @@ -493,7 +493,7 @@ function changerlesCartesDeTasDeJeu() { TasDuJEU.splice(unIndex, 1); if (TasDuJEU.length > 16) { var index2 = getRandom(0, TasDuJEU.length - 1) - var dejaPresente = false;//Permet de savoir si la carte est déjà dans la liste + var dejaPresente = false;//Permet de savoir si la carte est deja dans la liste for (var j = 0; j < deckPartie.length; j++) { if (TasDuJEU[index2].identifiant == deckPartie[j].identifiant) { dejaPresente = true; @@ -501,7 +501,7 @@ function changerlesCartesDeTasDeJeu() { } while (dejaPresente == true) { index2 = getRandom(0, TasDuJEU.length - 1) - dejaPresente = false;//Permet de savoir si la carte est déjà dans la liste + dejaPresente = false;//Permet de savoir si la carte est deja dans la liste for (var j = 0; j < deckPartie.length; j++) { if (TasDuJEU[index2].identifiant == deckPartie[j].identifiant) { dejaPresente = true; @@ -546,7 +546,7 @@ function remplacerLaCarte(uneCarte) { Coy2 = getRandom(0, 3); } AllFigure.push(new Figure(new Array(TypeFigure.Moyen), FormeFigure.Rond, Cox2, Coy2)); - //Code de Génération de Figure + //Code de Generation de Figure var newCarte = new Carte(pos + 1, AllFigure); deckPartie[pos] = newCarte; } @@ -615,7 +615,7 @@ function creaMatrice(row, column) { } //================================================================================= -//chercheCombi => Compte les combinainsons de 2 cartes à l'écran +//chercheCombi => Compte les combinainsons de 2 cartes a l'ecran function chercheCombi2() { var Cptsolution = 0; @@ -656,15 +656,15 @@ function chercheCombi2() { } if (!solution) { Cptsolution++; - window.alert("Combinaison a 2 trouvé: " + (i + 1) + " " + (i + j + 2)); + window.alert("Combinaison a 2 trouve: " + (i + 1) + " " + (i + j + 2)); } } } - window.alert("Nombre de solution à 2 cartes : " + Cptsolution); + window.alert("Nombre de solution a 2 cartes : " + Cptsolution); } //================================================================================= -//chercheCombi => Compte les combinainsons de 3 cartes à l'écran +//chercheCombi => Compte les combinainsons de 3 cartes a l'ecran function chercheCombi3() { var Cptsolution = 0; for (var i = 0; i < 15; i++) { //Partie fixe @@ -710,7 +710,7 @@ function chercheCombi3() { } if (!solution) { Cptsolution++; - window.alert("Combinaison a 3 trouvé: " + (i + 1) + " " + (i + j + 2) + " " + (k + j + i + 3)); + window.alert("Combinaison a 3 trouve: " + (i + 1) + " " + (i + j + 2) + " " + (k + j + i + 3)); } } } @@ -718,12 +718,12 @@ function chercheCombi3() { if (Cptsolution == 0) { window.alert("Pas de solution"); } - window.alert("Nombre de solution à 3 cartes : " + Cptsolution); + window.alert("Nombre de solution a 3 cartes : " + Cptsolution); } //================================================================================= -//FONCTION DE TEST => permet de tester des fonctionnalité via le bouton VALIDER +//FONCTION DE TEST => permet de tester des fonctionnalite via le bouton VALIDER function testPourJeuInfini() { try { @@ -752,7 +752,7 @@ function testPourJeuInfini() { } } if (solution) { - window.alert("Rien trouvé chef !!!"); + window.alert("Rien trouve chef !!!"); } if (!solution) { window.alert("J'ai une solution chef !!!!"); @@ -793,7 +793,7 @@ function testPourJeuClassique() { } } if (solution) { - window.alert("Rien trouvé chef !!!"); + window.alert("Rien trouve chef !!!"); } if (!solution) { window.alert("J'ai une solution chef !!!!"); @@ -916,7 +916,7 @@ function comparaisonARBRE(CarteMereEntree, CarteFilleEntree) { for (var j = 0; j < CarteMere.SesFigures.length; j++) { if (CarteFille.SesFigures[i].X == CarteMere.SesFigures[j].X) { if (CarteFille.SesFigures[i].Y == CarteMere.SesFigures[j].Y) { - //Coordonnées identiques + //Coordonnees identiques if (CarteFille.SesFigures[i].forme == CarteMere.SesFigures[j].forme) { //Forme identiques for (var k = 0; k < CarteMere.SesFigures[j].type.length; k++) { @@ -940,7 +940,7 @@ function comparaisonARBRE(CarteMereEntree, CarteFilleEntree) { } } } - //Si le type de la figure n'y est pas on l'ajoute à la liste de carte Mere; + //Si le type de la figure n'y est pas on l'ajoute a la liste de carte Mere; liaison = liaison + 1; CarteMere.SesFigures[j].type.push(CarteFille.SesFigures[i].type[0]); } else { @@ -993,7 +993,7 @@ function SommeDeCarte(CarteMere, CarteFille) { //================================================================================== - +/* function ChoisirPseudo() { let nom = localStorage.getItem('nom'); if (nom == null) { @@ -1009,24 +1009,24 @@ function EnvoyerNouveauNom() { document.location.reload(true); }; - +*/ /* function addplayer(){ - //j'ai mis une limite de 6joueurs, mais c'est à voir + //j'ai mis une limite de 6joueurs, mais c'est a voir if(nbplayers < 7){ - //création de la div contenant le pseudo + //creation de la div contenant le pseudo var divpseudo = document.createElement('div'); divpseudo.id = 'pseudolist'; - //reprise du pseudo entré par le joueur + //reprise du pseudo entre par le joueur var pseudo = document.getElementById("inputpseudo").value; - //vérification si pseudo vide pour lui donner un pseudo du style "Joueur3" + //verification si pseudo vide pour lui donner un pseudo du style "Joueur3" if(pseudo == "") { pseudo = "Joueur " + nbplayers; } - //création du text-pseudo + //creation du text-pseudo var tag = document.createElement("p"); tag.className = "pseudojoueur"; var text = document.createTextNode(pseudo); diff --git a/SwichGIT/src/js/menu.js b/SwichGIT/src/js/menu.js index ced97d3..3371545 100644 --- a/SwichGIT/src/js/menu.js +++ b/SwichGIT/src/js/menu.js @@ -5,20 +5,20 @@ var mode = 0; function SelectShape(shape){ - //récupérer la forme + //recuperer la forme var forme = "set"+shape; var selection = document.getElementById(forme); - //Que si déjà selectionné + //Que si deja selectionne var couleurBase = selection.style.backgroundColor; - //désélection + //deselection if(couleurBase[0] == "v" && couleurBase[1] == "a" && couleurBase[2] == "r"){ - //supprimé de la liste des selectionné + //supprime de la liste des selectionne var pos = FormeSelect.indexOf(shape); FormeSelect.splice(pos, 1); - //récupérer la couleur + //recuperer la couleur var recupColor = getVarColor(couleurBase); ListeCouleur.push(recupColor); - //mettre à jour la couleur + //mettre a jour la couleur selection.style.backgroundColor = "#333"; //document.getElementById("SettingName").innerHTML = recupColor; @@ -28,7 +28,7 @@ function SelectShape(shape){ alert("NON NON NOOOOOON"); } else{ FormeSelect.push(shape); - //définir la couleur + //definir la couleur var couleur = "var(--" + ListeCouleur[0] + ")"; selection.style.backgroundColor = couleur; //Supprimer la couleur de la liste