CSS looks quite good now.

This commit is contained in:
Oliver Rümpelein 2014-10-07 11:57:12 +02:00
parent c9dab55c5b
commit 689cd3855f
4 changed files with 44 additions and 21 deletions

View file

@ -9,33 +9,36 @@ body {
body>div { body>div {
postion:relative; postion:relative;
background: rgba(163,128,95,0.9); background: rgba(163,128,95,0.9);
/* align: center;
text-align: center;*/
border-radius: 20px; border-radius: 20px;
padding: 5px; padding: 5px 10px 5px 10px;
width: width:
} }
h1 { h1 {
align: center; text-align: center;
margin-top: 10px; margin-top: 10px;
} }
#game { #game {
width:auto; width:auto;
margin: 20px auto; margin: 0px 20px 0px 0px;
border: #692200 4px solid ; border: #692200 4px solid ;
border-radius: 4px;
float:left;
} }
#output { #output {
position:relative; position:relative;
left: 20px;
width: 350px;
} }
#ui { #ui {
position: relative; right: 30px;
right: 200px; }
width: 350px;
bottom: 20px; #load {
margin: 0px auto;
}
#clear {
clear: both;
} }

View file

@ -8,12 +8,15 @@
<body> <body>
<div> <div>
<h1>JSDSH - Javascript Dungeonslayers Helper</h1> <h1>JSDSH - Javascript Dungeonslayers Helper</h1>
<div id="game"></div> <div id="game"></div>
<button id="load">Load</button>
<div id="output"></div>
<div id="ui"></div> <div id="ui"></div>
<div id="clear"></div>
<div id="output"></div>
<button id="load">Load</button>
</div> </div>
<script type="text/javascript" src="lib/crafty.js"></script> <script type="text/javascript" src="lib/crafty.js"></script>
<script type="text/javascript" src="lib/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="lib/jquery-1.11.1.min.js"></script>

View file

@ -1,3 +1,13 @@
$(document).ready( function() { $(document).ready( function() {
$('#load').click(function() { $.getScript("/assets/adv01/adv_01.js"); $('#load').hide();}); $('#game').hide();
$('#ui').hide();
$('#output').hide();
$('#load').click(function() {
$.getScript("/assets/adv01/adv_01.js");
$('#load').hide();
$('#game').show();
$('#ui').show();
$('#output').show();
});
}); });

View file

@ -70,6 +70,10 @@
// Helper-Funcs // Helper-Funcs
var clearoutput = function() {
$('#output').empty();
};
var clearui = function() { var clearui = function() {
$('#output').empty(); $('#output').empty();
$('#ui').empty(); $('#ui').empty();
@ -129,7 +133,7 @@
}, },
attack: function(enem) { attack: function(enem) {
clearui(); clearoutput();
var output=$('#output'); var output=$('#output');
output.html(this.info.cname+" greift "+enem.info.cname+" an!<br>"); output.html(this.info.cname+" greift "+enem.info.cname+" an!<br>");
var attack_val = dice(this.battle[this.att]); var attack_val = dice(this.battle[this.att]);
@ -189,7 +193,7 @@
}, },
sel_att: function() { sel_att: function() {
var outstr=""; var outstr="<p>";
outstr += "Angriffstyp?<br>"; outstr += "Angriffstyp?<br>";
outstr += "<select id='att'>"; outstr += "<select id='att'>";
outstr += "<option value='melee' id='melee'>Melee (" + this.battle["melee"] + ")</option>"; outstr += "<option value='melee' id='melee'>Melee (" + this.battle["melee"] + ")</option>";
@ -202,6 +206,7 @@
outstr += "<select id='defendible'>"; outstr += "<select id='defendible'>";
outstr += "<option value=true selected=true>Ja</option>"; outstr += "<option value=true selected=true>Ja</option>";
outstr += "<option value=false>Nein</option>"; outstr += "<option value=false>Nein</option>";
outstr += "</p>";
$('#ui').html(outstr); $('#ui').html(outstr);
$('#att').bind("change", function() {cur_sel.att=this.value;}); $('#att').bind("change", function() {cur_sel.att=this.value;});
@ -231,12 +236,13 @@
this.battle.shoot_chant = this.battle.chant + this.extern.chant - this.extern.armor; this.battle.shoot_chant = this.battle.chant + this.extern.chant - this.extern.armor;
}, },
printoutput: function() { printoutput: function() {
outstr = ""; outstr = "<p>";
outstr += this.info.cname + " (gespielt von "+this.info.pname +")<br>"; outstr += this.info.cname + " (gespielt von "+this.info.pname +")<br>";
outstr += "Greift derzeit durch " + this.att + " mit einer Stärke von " outstr += "Greift derzeit durch " + this.att + " mit einer Stärke von "
+ this.battle[this.att] + " an.<br>"; + this.battle[this.att] + " an.<br>";
outstr += "Verteidigungsstärke: " + this.battle.defense + "<br>"; outstr += "Verteidigungsstärke: " + this.battle.defense + "<br>";
outstr += "Kraftpunkte: " + this.life; outstr += "Kraftpunkte: " + this.life;
outstr += "</p>";
$('#output').html(outstr); $('#output').html(outstr);
} }
}); });
@ -255,13 +261,14 @@
this.enem = true; this.enem = true;
}, },
printoutput: function() { printoutput: function() {
clearui(); clearoutput();
outstr = ""; outstr = "<p>";
outstr += "Ein "+ this.info.race + "<br>"; outstr += "Ein "+ this.info.race + "<br>";
outstr += "Greift derzeit durch " + this.att + " mit einer Stärke von " outstr += "Greift derzeit durch " + this.att + " mit einer Stärke von "
+ this.battle[this.att] + " an.<br>"; + this.battle[this.att] + " an.<br>";
outstr += "Verteidigungsstärke: " + this.battle.defense + "<br>"; outstr += "Verteidigungsstärke: " + this.battle.defense + "<br>";
outstr += "Kraftpunkte: " + this.life; outstr += "Kraftpunkte: " + this.life;
outstr += "</p>";
$('#output').html(outstr); $('#output').html(outstr);
} }
}); });