From fbd76d4ad69540a93680db64b62874edd87f3da0 Mon Sep 17 00:00:00 2001 From: frperalde Date: Sat, 30 Jan 2021 23:57:57 +0100 Subject: [PATCH] [Etude] - Generation des cartes avec lignes et colonnes (pour Yannis) --- .../Doc/GenerationDesCartes_Code/css/base.css | 44 +++++++++++++++++++ .../Doc/GenerationDesCartes_Code/index.html | 27 ++++++++++++ .../Doc/GenerationDesCartes_Code/js/main.js | 33 ++++++++++++++ 3 files changed, 104 insertions(+) create mode 100644 SwichGIT/Doc/GenerationDesCartes_Code/css/base.css create mode 100644 SwichGIT/Doc/GenerationDesCartes_Code/index.html create mode 100644 SwichGIT/Doc/GenerationDesCartes_Code/js/main.js diff --git a/SwichGIT/Doc/GenerationDesCartes_Code/css/base.css b/SwichGIT/Doc/GenerationDesCartes_Code/css/base.css new file mode 100644 index 0000000..a006a95 --- /dev/null +++ b/SwichGIT/Doc/GenerationDesCartes_Code/css/base.css @@ -0,0 +1,44 @@ +:root{ + --taille : 10vw; +} + +.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; + background-color: #E6E6E6; +} + +.troispar4{ + width: 10vw; +} + +.troispar3{ + width: 10vw; +} + +.quatrepar3{ + width: 13vw; +} + +#conteneur{ + height: 30vw; + width: 100%; +} \ No newline at end of file diff --git a/SwichGIT/Doc/GenerationDesCartes_Code/index.html b/SwichGIT/Doc/GenerationDesCartes_Code/index.html new file mode 100644 index 0000000..6c5f58f --- /dev/null +++ b/SwichGIT/Doc/GenerationDesCartes_Code/index.html @@ -0,0 +1,27 @@ + + + + + + SwishGame - GenCarte + + + + + + + + + + + + + +
+ +
+ +
+
+ + \ No newline at end of file diff --git a/SwichGIT/Doc/GenerationDesCartes_Code/js/main.js b/SwichGIT/Doc/GenerationDesCartes_Code/js/main.js new file mode 100644 index 0000000..5199c3e --- /dev/null +++ b/SwichGIT/Doc/GenerationDesCartes_Code/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