pheerai/JSDSH
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Styling and Layout of UI changed

Browse source
This commit is contained in:
Oliver Rümpelein 2014-10-24 17:14:09 +02:00
parent ab24c83164
commit 4e28bf8ff2
3 changed files with 48 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
assets/style.css
View file

@ -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 {

2
index.html
View file

@ -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>

51
src/jsds.js
View file

@ -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 += "Waffenbonus Fernkampf: <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 += "Zauberbonus: <input id='zb' 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 += "<span class='label'>Waffenbonus Fernkampf:</span><input id='wbf' 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 += "<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 "
+ 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>";
outstr += this.battleoutput();
$('#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 "
+ 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>";
outstr += this.battleoutput();
$('#output').html(outstr);
}
});