factorise JS WIP

html/testBotScripts/tron.html

@@ -25,7 +25,9 @@ section{margin: 0 auto; width: 90%;}
 article{float: right; width:70%;}
 aside{float:left;width:29%;}
 .playerBox{}
-.playerBox input, .playerBox select {width:100%;}
+.playerBox em {width: 100%;}
+.playerBox em label { width: 40%; text-align: right;}
+.playerBox em input,.playerBox em input, .playerBox em select {width:59%; float:right;}
 
 
 
@@ -91,6 +93,7 @@ function createElemWithLabel(type,attributes,labelTxt, id =''){
     var forId = makeid();
  }
  var label = createElem('label',{'for' : forId});
+ label.innerHTML = labelTxt;
  em.appendChild(label);
  var elem = createElem(type,attributes);
  if (typeof attributes['id'] !== 'undefined') {
@@ -119,54 +122,64 @@ function createLineSelect(labelTxt,arrayOptions,attributes){
   
   for(var i=0; i < arrayOptions.length; i++){
     var option = createElem('option',{'value':arrayOptions[i]['value']});
-    
+    option.innerHTML =  arrayOptions[i]['text'];
-  
+    select.appendChild(option);
   }
-
+  em.appendChild(select);
   return em;
 }
 function createPlayerForm(index){
   var container = document.getElementById("playersSettings");
   var divForm = createElem("div", {"id": "containerPlayer" + index,"class":"playerBox" } );
-  
+    
-  //Type of player
+   divForm.appendChild(
-  var select = createElem("select",{"id":"playerType" + index,"onchange":"changeTypePlayer('" + index + "', this.value);"});
+	    createLineSelect('Type:',
-  var optionHuman = createElem("option",{"value":"Human"});
+				      [ {'value':'bot','text' : 'bot'},
-  optionHuman.innerHTML = "Human";
+					{'value':'human','text' : 'human'}
-  var optionBot = createElem("option",{"value":"Bot"});
+				      ],
-  optionBot.innerHTML = "Bot";
+				      
-  
+				      {"id":"playerType" + index,
-  select.appendChild(optionBot);
+					"onchange":"changeTypePlayer('" + index + "', this.value);"
-  select.appendChild(optionHuman);
+				      }
-  divForm.appendChild(select);
+			    )
-  
+  );
-  //url 
+  divForm.appendChild(
-  var inputUrl = createElem("input", {"id":"botUrl" + index, "type": "text", "value":"", "placeholder":"http://Bot.url" });
+    createElemWithLabel(
-  divForm.appendChild(inputUrl);
+			  'input',
-  
+			  {
-  
+			    "id":"botUrl" + index, "type": "text", "value":"",
-  
+			    "placeholder":"http://Bot.url" 
-  //Starting cell
+			  },
-  var selectRandomStartCell = createElem("select",{
+			  'URL du Bot'
-		"id": "randomOrNot" + index,
+      )
-		"onchange":"changeRandom('" + index + "', this.value);"
+    
-	      });
+  );
-  
+   divForm.appendChild(
-  var optionRandom = createElem("option",{"value":"random","selected":"selected"});
+	    createLineSelect('Starting cell:',
-  optionRandom.innerHTML = "random";
+				      [ {'value':'random','text' : 'random'},
-  
+					{'value':'defined','text' : 'Let me define it'}
-  var optionDefined = createElem("option",{"value":"defined"});
+				      ],
-  optionDefined.innerHTML = "Let me define it";
+				      
-  selectRandomStartCell.appendChild(optionRandom);
+				      {
-  selectRandomStartCell.appendChild(optionDefined);
+					"id": "randomOrNot" + index,
-  
+					"onchange":"changeRandom('" + index + "', this.value);"
-  divForm.appendChild(selectRandomStartCell);
+				      }
-  
+			    )
-  var inputX = createElem("input",{"type":"text","value": "0","id":"posX" + index,"class":"hidden"});
+  );
-  var inputY = createElem("input",{"type":"text","value": "0","id":"posY" + index,"class":"hidden"});
+  divForm.appendChild(
-  
+    createElemWithLabel(
-  divForm.appendChild(inputX);
+      'input',
-  divForm.appendChild(inputY);
+      {"type":"text","value": "0","id":"posX" + index},
+      'X coord:'
+    )
+  );
+  divForm.appendChild(
+    createElemWithLabel(
+      'input',
+      {"type":"text","value": "0","id":"posY" + index},
+      'Y coord:'
+    )
+  );
   
   container.appendChild(divForm);