[Etude] - Generation des cartes avec lignes et colonnes (pour Yannis)

4 years ago · fbd76d4ad6
parent 9080a23807
commit fbd76d4ad6
3 changed files with 104 additions and 0 deletions
--- a/SwichGIT/Doc/GenerationDesCartes_Code/css/base.css
+++ 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%;
+}
--- a/SwichGIT/Doc/GenerationDesCartes_Code/index.html
+++ b/SwichGIT/Doc/GenerationDesCartes_Code/index.html
@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head lang="fr">
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>SwishGame - GenCarte</title>
+    <link rel="stylesheet" href="css/base.css">
+
+
+    <script type="text/javascript" src="js/main.js"></script>
+  
+
+
+</head>
+<body>
+        <label>Nb colonne :</label>
+        <input type="text" id="colonne">
+        <label>Nb lignes :</label>
+        <input type="text" id="ligne">
+    <br>
+        <input type="submit" name="générer" value="Générer" onclick="generer()">
+    <br>
+        <h id="verif"></h>
+        <div id="conteneur">
+        </div>
+</body>
+</html>
--- a/SwichGIT/Doc/GenerationDesCartes_Code/js/main.js
+++ 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");
+	  
+}