From 048bb0e6092d5a52a42926549227ac7fb436a858 Mon Sep 17 00:00:00 2001 From: frperalde Date: Sun, 28 Feb 2021 19:19:48 +0100 Subject: [PATCH] =?UTF-8?q?g=C3=A9n=C3=A9ration=20forme=20aide?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- SwichGIT/Doc/GenerationForme/css/base.css | 140 ++++++++++++++++++++++ SwichGIT/Doc/GenerationForme/index.html | 115 ++++++++++++++++++ SwichGIT/Doc/GenerationForme/js/main.js | 33 +++++ 3 files changed, 288 insertions(+) create mode 100644 SwichGIT/Doc/GenerationForme/css/base.css create mode 100644 SwichGIT/Doc/GenerationForme/index.html create mode 100644 SwichGIT/Doc/GenerationForme/js/main.js diff --git a/SwichGIT/Doc/GenerationForme/css/base.css b/SwichGIT/Doc/GenerationForme/css/base.css new file mode 100644 index 0000000..b8b10d0 --- /dev/null +++ b/SwichGIT/Doc/GenerationForme/css/base.css @@ -0,0 +1,140 @@ +:root{ + --taille : 10vw; + --x: 3vw; + --y: 2.5vw; + --z: 1.5vw; +} + +.carte { + background-color: #B7B7B7; + border-radius: 0.75vw; + padding-right: 0.15vw; + padding-left: 0.15vw; + padding-bottom: 0.25vw; + display: flex; + margin-right: 0.4vw; + margin-left: 0.4vw; + margin-bottom: 1vw; + width: var(--taille); + -webkit-flex-flow: row wrap; + justify-content: space-around; +} +/*1 + 3*x colonne*/ +.case{ + width: 3vw; + padding-left: 0.1vw; + margin-top: 0.25vw; + height: 3vw; + border-radius: 10px; + display: table-cell; + position: relative; + vertical-align: middle; + background-color: #E6E6E6; +} + +.troispar4{ + width: 10vw; +} + +.troispar3{ + width: 10vw; +} + +.quatrepar3{ + width: 13vw; +} + +#conteneur{ + height: 30vw; + width: 100%; +} + +.containinte{ + 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; +} + +.containexte{ + top:calc((var(--x) - var(--y)) / 2); + left:calc((var(--x) - var(--y)) / 2); + height: var(--y); + width: var(--y); + z-index: 1; + position: absolute; +} + +.formeinte{ + height: 100%; + width: 100%; +} +.formeexte{ + height: 100%; + width: 100%; +} + +.containform3{ + position: relative; + height: var(--x); + width: var(--x); + display: table-cell; +} + +.cb { + background-color: #E6E6E6; +} + +.cn { + background-color: black; +} + +.rond{ + -webkit-clip-path: circle(50% at 50% 50%); + clip-path: circle(50% at 50% 50%); +} + +.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); +} + +.caspenta{ + margin-top: calc( (var(--y) - var(--z)) / 10); +} + +.losange{ + -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); + clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); +} + +.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%); +} \ No newline at end of file diff --git a/SwichGIT/Doc/GenerationForme/index.html b/SwichGIT/Doc/GenerationForme/index.html new file mode 100644 index 0000000..313dc36 --- /dev/null +++ b/SwichGIT/Doc/GenerationForme/index.html @@ -0,0 +1,115 @@ + + + + + + SwishGame - GenCarte + + + + + + + + + +
+ +
+ +
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/SwichGIT/Doc/GenerationForme/js/main.js b/SwichGIT/Doc/GenerationForme/js/main.js new file mode 100644 index 0000000..5199c3e --- /dev/null +++ b/SwichGIT/Doc/GenerationForme/js/main.js @@ -0,0 +1,33 @@ +function generer(){ + //recupere les valeurs + //alert(document.getElementById("colonne").value); + var nbColonne = document.getElementById("colonne").value; + var nbLigne = document.getElementById("ligne").value; + + //text de vérification + document.getElementById("verif").innerHTML = "Carte de dimension " + nbColonne + "x" + nbLigne + " "; + creerCarte(nbColonne, nbLigne); +} + +function creerCarte(column, row){ + //creer la carte + var carte = document.createElement('div'); + carte.className = "carte"; + carte.id = "carte"; + + for(var i = 0; i < column*row; i++){ + var casee = document.createElement('div'); + casee.className = "case"; + carte.appendChild(casee); + } + + document.getElementById("conteneur").appendChild(carte); + + //mettre a jour la taille /!\ c'est ca le plus important + var newTaille = column * 3.2 + 1; + document.documentElement.style.setProperty('--taille', newTaille + "vw"); + + //afficher carte + var carteinser = document.getElementById("carte"); + +} \ No newline at end of file