Only Elements with battle info show the UI

TODO

@@ -1,7 +1,7 @@
 ToDo for JSDSH:
  - Implement FrontEnd (Add Player, etc) ?
  - Background and Wall Editing/Importing
- - Basic Modifiers
+ * Basic Modifiers
  - on-the-fly-adding of characters
  - traps etc.
  - JSON instead of JavaScript importing

assets/style.css

@@ -22,7 +22,7 @@ h1 {
     position:relative;
 }
 
-#ui {
+#uibon, #uiatt {
     right: 30px;
 }
 

index.html

@@ -10,7 +10,8 @@
       <h1>JSDSH - Javascript Dungeonslayers Helper</h1>
       <div id="game"></div>
       
-      <div id="ui"></div>
+      <div id="uibon"></div>
+      <div id="uiatt"></div>
       <div id="clear"></div>
       
       <div id="output"></div>

src/jsds.js

@@ -232,11 +232,6 @@
 	// Write out the UI for attack-selection, including binding.
 	sel_att: function() {
 	    var outstr="<p>";
-	    outstr += "Boni?<br>";
-	    outstr += "Waffenbonus Nahkampf: <input id='wbn' type=numer step=1 min=0></input><br />";
-	    outstr += "Waffenbonus Fernkampf: <input id='wbf' type=numer step=1 min=0></input><br>";
-	    outstr += "Panzerungsbonus: <input id='pb' type=numer step=1 min=0></input><br>";
-	    outstr += "Zauberbonus: <input id='zb' type=numer step=1 min=0></input><br>";
 	    outstr += "Angriffstyp?<br>";
 	    outstr += "<select id='att'>";
 	    outstr += "<option value='melee' id='melee'>Melee (" + this.battle["melee"] + ")</option>";
@@ -251,9 +246,11 @@
 	    outstr += "<option value=false>Nein</option>";
 	    outstr += "</p>";
 	    
-	    $('#ui').html(outstr);
+	    $('#uiatt').html(outstr);
+	    
 	    $('#att').bind("change", function() {cur_sel.att=this.value;});
-	    $('#defendible').bind("change", function() { cur_sel.defendible = (this.value === "true" ? true : false);});
+	    $('#defendible').bind("change",
+				  function() { cur_sel.defendible = (this.value === "true" ? true : false);});
 	    $("#"+this.att).get(0).selected="true";
 	}
     });
@@ -282,12 +279,50 @@
 	    this.battle.chant = this.battle_base.chant + this.extern.chant - this.extern.armor;
 	    this.battle.shoot_chant = this.battle_base.chant + this.extern.chant - this.extern.armor;
 	},
+	// Write out the UI for bonus-selection.
+	sel_bon: function() {
+	    var outstr="<p>";
+	    outstr += "Boni?<br>";
+	    outstr += "Waffenbonus Nahkampf: <input id='wbn' type=numer step=1 min=0></input><br />";
+	    outstr += "Waffenbonus Fernkampf: <input id='wbf' type=numer step=1 min=0></input><br>";
+	    outstr += "Panzerungsbonus: <input id='pb' type=numer step=1 min=0></input><br>";
+	    outstr += "Zauberbonus: <input id='zb' type=numer step=1 min=0></input><br>";
 
+	    $('#uibon').html(outstr);
+	    $('#wbn').attr("value", cur_sel.extern.weapon_near+"")
+		.bind("change", 
+		      function() {cur_sel.extern.weapon_near = this.value*1;
+				  cur_sel.recalc_battle();
+				  cur_sel.printoutput();
+				 }
+		     );
+	    $('#wbf').attr("value", cur_sel.extern.weapon_far)
+		.bind("change", 
+		      function() {cur_sel.extern.weapon_far = this.value*1;
+				  cur_sel.recalc_battle();
+				  cur_sel.printoutput();
+				 }
+		     );
+	    $('#pb').attr("value",cur_sel.extern.armor)
+		.bind("change", 
+		      function() {cur_sel.extern.armor = this.value*1;
+				  cur_sel.recalc_battle();
+				  cur_sel.printoutput();
+				 }
+		     );
+	    $('#zb').attr("value",cur_sel.extern.chant)
+		.bind("change", 
+		      function() {cur_sel.extern.chant = this.value*1; 
+				  cur_sel.recalc_battle();
+				  cur_sel.printoutput();
+				 }
+		     );
+	},
 	printoutput: function() {
 	    outstr = "<p>";
 	    outstr += this.info.cname + " (gespielt von "+this.info.pname +")<br>";
 	    outstr += "Greift derzeit durch " + this.att + " mit einer Stärke von "
-		+ this.battle[this.att] + " an. (WB: "+ this.extern.defense +"<br>";
+		+ this.battle[this.att] + " an.<br>";
 	    outstr += "Verteidigungsstärke: " + this.battle.defense + "<br>";
 	    outstr += "Kraftpunkte: " + this.life;
 	    outstr += "</p>";

src/jsds_crafty.js

@@ -88,13 +88,23 @@
 		 */
 		this.bind('MouseDown', function(e) {
 		    if(e.mouseButton === Crafty.mouseButtons.LEFT) {
+			if( cur_sel != player[this.id] ) {
 			    this.calc_center();
+			};
 			this.old_pos["x"]=this.x;
 			this.old_pos["y"]=this.y;
 		    	Crafty("Creature").each( function() {
 			    this.disableControl();
 			});
 			cur_sel=player[this.id];
+			if (! cur_sel.enem) {
+			    $('#uibon').show();
+			    cur_sel.sel_bon();
+			}
+			else {
+			    console.log("Hide UIBON");
+			    $('#uibon').hide();
+			}
 			cur_sel.printoutput();
 			cur_sel.sel_att();
 			this.enableControl();