Styling and Layout of UI changed

assets/style.css

@@ -44,6 +44,20 @@ h1 {
     clear: both;
 }
 
+.bon {
+    width: 50px;
+}
+
+.label {
+    display: inline-block;
+    width: 160px;
+    padding: auto;
+}
+
+select {
+    width: 100px;
+}
+
 /* Don't show anything but warning, if too small */
 /* handheld doesn't work, don't know why…*/
 @media handheld {

index.html

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

src/jsds.js

@@ -254,7 +254,7 @@
 	// Write out the UI for attack-selection, including binding.
 	sel_att: function() {
 	    var outstr="<p>";
-	    outstr += "Angriffstyp?<br>";
+	    outstr += "<span class='label'>Angriffstyp:</span>";
 	    outstr += "<select id='att'>";
 	    outstr += "<option value='melee' id='melee'>Melee (" + this.battle["melee"] + ")</option>";
 	    outstr += "<option value='shoot' id='shoot'>Schuss (" + this.battle["shoot"] + ")</option>";
@@ -262,7 +262,7 @@
 		+")</option>";
 	    outstr += "</select><br>";
 	    
-	    outstr += "Abwehrbar? ";
+	    outstr += "<span class='label'>Abwehrbar:</span>";
 	    outstr += "<select id='defendible'>";
 	    outstr += "<option value=true selected=true>Ja</option>";
 	    outstr += "<option value=false>Nein</option>";
@@ -289,7 +289,32 @@
 	    var dy = Math.abs(g.cy - g.old_pos.cy);
 	    var distpx= Math.sqrt(dx*dx + dy*dy);
 	    return (distpx/meters).toFixed(1);
+	},
+
+	battleoutput: function() {
+	    var outstr = "Greift derzeit durch ";
+	    if (this.att === "melee") {
+		outstr +="Schlagen";
 	    }
+	    else if (this.att === "shoot") {
+		outstr +="Schiessen";
+	    }
+	    else if (this.att === "chant") {
+		outstr +="Zaubern";
+	    }
+	    else if (this.att === "shoot_chant") {
+		outstr +="Zielzaubern";
+	    }
+	    outstr += " mit einer Stärke von "
+		+ this.battle[this.att] + " an.<br>";
+	    outstr += "Ist "+this.calc_dist()+"m von der alten Position entfernt (max "+
+		this.battle.walk+"m)<br>";
+	    outstr += "Verteidigungsstärke: " + this.battle.defense + "<br>";
+	    outstr += "Kraftpunkte: " + this.life;
+	    outstr += "</p>";
+	    return outstr;
+	}
+
     });
     
     // Maybe the most important class in here
@@ -320,10 +345,10 @@
 	sel_bon: function() {
 	    var outstr="<p>";
 	    outstr += "Boni?<br>";
-	    outstr += "Waffenbonus Nahkampf: <input id='wbn' class='bon' type=numer step=1 min=0></input><br />";
+	    outstr += "<span class='label'>Waffenbonus Nahkampf:</span><input id='wbn' class='bon' type=numer step=1 min=0></input><br />";
-	    outstr += "Waffenbonus Fernkampf: <input id='wbf' class='bon' type=numer step=1 min=0></input><br>";
+	    outstr += "<span class='label'>Waffenbonus Fernkampf:</span><input id='wbf' class='bon' type=numer step=1 min=0></input><br>";
-	    outstr += "Panzerungsbonus: <input id='pb' class='bon' type=numer step=1 min=0></input><br>";
+	    outstr += "<span class='label'>Panzerungsbonus:</span><input id='pb' class='bon' type=numer step=1 min=0></input><br>";
-	    outstr += "Zauberbonus: <input id='zb' class='bon' type=numer step=1 min=0></input><br>";
+	    outstr += "<span class='label'>Zauberbonus:</span><input id='zb' class='bon' type=numer step=1 min=0></input><br>";
 
 	    $('#uibon').html(outstr);
 	    $('.bon').bind("change", function() {
@@ -344,12 +369,7 @@
 	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 "
+	    outstr += this.battleoutput();
-		+ this.battle[this.att] + " an.<br>";
-	    outstr += "Ist "+this.calc_dist()+"m von der alten Position entfernt (max ??)<br>";
-	    outstr += "Verteidigungsstärke: " + this.battle.defense + "<br>";
-	    outstr += "Kraftpunkte: " + this.life;
-	    outstr += "</p>";
 	    $('#output').html(outstr);
 	}
     });
@@ -370,12 +390,7 @@
 	    clearoutput();
 	    outstr = "<p>";
 	    outstr += "Ein "+ this.info.race + "<br>";
-	    outstr += "Greift derzeit durch " + this.att + " mit einer Stärke von "
+	    outstr += this.battleoutput();
-		+ this.battle[this.att] + " an.<br>";
-	    outstr += "Ist "+this.calc_dist()+"m von der alten Position entfernt (max ??)<br>";
-	    outstr += "Verteidigungsstärke: " + this.battle.defense + "<br>";
-	    outstr += "Kraftpunkte: " + this.life;
-	    outstr += "</p>";
 	    $('#output').html(outstr);
 	}
     });