|
|
Post by Dungeon Master on Oct 28, 2014 0:50:19 GMT -5
|
|
|
|
Post by Dungeon Master on Feb 27, 2015 13:41:18 GMT -5
 <!DOCTYPE html>
<html><head><link href="http://fonts.googleapis.com/css?family=Lora:700" rel="stylesheet" type="text/css"/><link href="http://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic,700italic" rel="stylesheet" type="text/css"/><meta charset="utf-8"/><title>Statblock example</title><style>
body {
margin: 0;
}
stat-block {
/* A bit of margin for presentation purposes, to show off the drop
shadow. */
margin-left: 20px;
margin-top: 20px;
}
</style></head><body><template id="tapered-rule">
<style>
svg {
fill: #922610;
/* Stroke is necessary for good antialiasing in Chrome. */
stroke: #922610;
margin-top: 0.7em;
margin-bottom: 0.35em;
}
</style>
<svg height="5" width="400">
<polyline points="0,0 400,2.5 0,5"></polyline>
</svg>
</template><script>
(function(window, document) {
var elemName = 'tapered-rule';
var thatDoc = document;
var thisDoc = (thatDoc.currentScript || thatDoc._currentScript).ownerDocument;
var proto = Object.create(HTMLElement.prototype, {
createdCallback: {
value: function() {
var template = thisDoc.getElementById(elemName);
var clone = thatDoc.importNode(template.content, true);
this.createShadowRoot().appendChild(clone);
}
}
});
thatDoc.registerElement(elemName, {prototype: proto});
})(window, document);
</script><template id="top-stats">
<tapered-rule></tapered-rule>
<content></content>
<tapered-rule></tapered-rule>
</template><script>
(function(window, document) {
var elemName = 'top-stats';
var thatDoc = document;
var thisDoc = (thatDoc.currentScript || thatDoc._currentScript).ownerDocument;
var proto = Object.create(HTMLElement.prototype, {
createdCallback: {
value: function() {
var template = thisDoc.getElementById(elemName);
var clone = thatDoc.importNode(template.content, true);
this.createShadowRoot().appendChild(clone);
}
}
});
thatDoc.registerElement(elemName, {prototype: proto});
})(window, document);
</script><template id="creature-heading">
<style>
::content > h1 {
font-family: 'Lora', 'Calisto MT', 'Bookman Old Style', Bookman,
'Goudy Old Style', Garamond, 'Hoefler Text',
'Bitstream Charter', Georgia, serif;
color: #7A200D;
font-weight: 700;
margin-top: -6px;
margin-bottom: -2px;
font-size: 25px;
letter-spacing: 2px;
font-variant: small-caps;
}
::content > h2 {
font-weight: normal;
font-style: italic;
font-size: 12px;
margin: 0;
}
</style>
<content select="h1"></content>
<content select="h2"></content>
</template><script>
(function(window, document) {
var elemName = 'creature-heading';
var thatDoc = document;
var thisDoc = (thatDoc.currentScript || thatDoc._currentScript).ownerDocument;
var proto = Object.create(HTMLElement.prototype, {
createdCallback: {
value: function() {
var template = thisDoc.getElementById(elemName);
var clone = thatDoc.importNode(template.content, true);
this.createShadowRoot().appendChild(clone);
}
}
});
thatDoc.registerElement(elemName, {prototype: proto});
})(window, document);
</script><template id="abilities-block">
<style>
:host {
color: #7A200D;
}
table {
width: 100%;
border: 0px;
border-collapse: collapse;
}
th, td {
width: 50px;
text-align: center;
}
</style>
<tapered-rule></tapered-rule>
<table>
<tbody><tr>
<th>STR</th>
<th>DEX</th>
<th>CON</th>
<th>INT</th>
<th>WIS</th>
<th>CHA</th>
</tr>
<tr>
<td id="str"></td>
<td id="dex"></td>
<td id="con"></td>
<td id="int"></td>
<td id="wis"></td>
<td id="cha"></td>
</tr>
</tbody></table>
<tapered-rule></tapered-rule>
</template><script>
(function(window, document) {
function abilityModifier(abilityScore) {
var score = parseInt(abilityScore, 10);
return Math.floor((score - 10) / 2);
}
function formattedModifier(abilityModifier) {
if (abilityModifier >= 0) {
return '+' + abilityModifier;
}
// This is an en dash, NOT a "normal" dash. The minus sign needs to be more
// visible.
return '–' + Math.abs(abilityModifier);
}
function abilityText(abilityScore) {
return [String(abilityScore),
' (',
formattedModifier(abilityModifier(abilityScore)),
')'].join('');
}
var elemName = 'abilities-block';
var thatDoc = document;
var thisDoc = (thatDoc.currentScript || thatDoc._currentScript).ownerDocument;
var proto = Object.create(HTMLElement.prototype, {
createdCallback: {
value: function() {
var template = thisDoc.getElementById(elemName);
var clone = thatDoc.importNode(template.content, true);
var root = this.createShadowRoot().appendChild(clone);
}
},
attachedCallback: {
value: function() {
var root = this.shadowRoot;
for (var i = 0; i < this.attributes.length; i++) {
var attribute = this.attributes[i];
var abilityShortName = attribute.name.split('-')[1];
root.getElementById(abilityShortName).textContent =
abilityText(attribute.value);
}
}
}
});
thatDoc.registerElement(elemName, {prototype: proto});
})(window, document);
</script><template id="property-block">
<style>
::content > h4 {
display: inline;
font-weight: bold;
font-style: italic;
}
::content > p {
display: inline;
}
p {
margin-top: 0.3em;
margin-bottom: 0.9em;
}
</style>
<p><content></content></p>
</template><script>
(function(window, document) {
var elemName = 'property-block';
var thatDoc = document;
var thisDoc = (thatDoc.currentScript || thatDoc._currentScript).ownerDocument;
var proto = Object.create(HTMLElement.prototype, {
createdCallback: {
value: function() {
var template = thisDoc.getElementById(elemName);
var clone = thatDoc.importNode(template.content, true);
this.createShadowRoot().appendChild(clone);
}
}
});
thatDoc.registerElement(elemName, {prototype: proto});
})(window, document);
</script><template id="property-line">
<style>
:host {
color: #7A200D;
}
div {
/* Indenting everything EXCEPT the first line. */
text-indent: -1em;
margin-left: 1em;
}
::content > * {
display: inline;
}
::content > p {
margin-left: 0.4em;
}
</style>
<!-- Specific select expressions needed instead of just one <content>
to avoid the original witespace between the elements. -->
<div><content select="h4"></content><content select="p"></content></div>
</template><script>
(function(window, document) {
var elemName = 'property-line';
var thatDoc = document;
var thisDoc = (thatDoc.currentScript || thatDoc._currentScript).ownerDocument;
var proto = Object.create(HTMLElement.prototype, {
createdCallback: {
value: function() {
var template = thisDoc.getElementById(elemName);
var clone = thatDoc.importNode(template.content, true);
this.createShadowRoot().appendChild(clone);
}
}
});
thatDoc.registerElement(elemName, {prototype: proto});
})(window, document);
</script><template id="stat-block">
<style>
:host {
width: 424px;
display: block;
}
#content-wrap {
font-family: 'Noto Sans', 'Myriad Pro', Calibri, Helvetica, Arial,
sans-serif;
font-size: 13px;
display: block;
background: #FDF1DC;
padding: 0.6em;
border: 1px #DDD solid;
box-shadow: 0 0 1.5em #867453;
/* We don't want the box-shadow in front of the bar divs. */
position: relative;
z-index: 0;
/* Leaving room for the two bars to protrude outwards */
margin-left: 2px;
margin-right: 2px;
}
::content > h3 {
border-bottom: 1px solid #7A200D;
color: #7A200D;
font-size: 18px;
font-variant: small-caps;
font-weight: normal;
letter-spacing: 1px;
margin: 0;
}
/* Last block shouldn't have margin, too much white space. */
::content property-block:last-child /deep/ p {
margin-bottom: 0;
}
.bar {
height: 5px;
background: #E69A28;
border: 1px solid #000;
position: relative;
z-index: 1;
}
</style>
<div class="bar"></div>
<div id="content-wrap">
<content></content>
</div>
<div class="bar"></div>
</template><script>
(function(window, document) {
var elemName = 'stat-block';
var thatDoc = document;
var thisDoc = (thatDoc.currentScript || thatDoc._currentScript).ownerDocument;
var proto = Object.create(HTMLElement.prototype, {
createdCallback: {
value: function() {
var template = thisDoc.getElementById(elemName);
var clone = thatDoc.importNode(template.content, true);
this.createShadowRoot().appendChild(clone);
}
}
});
thatDoc.registerElement(elemName, {prototype: proto});
})(window, document);
</script>
<stat-block>
<creature-heading>
<h1>Agent of Esus</h1>
<h2>Changeling Rogue 3/Ranger 4, Neutral Evil</h2>
</creature-heading>
<top-stats>
<property-line>
<h4>Armor Class</h4>
<p>16 (breastplate)</p>
</property-line>
<property-line>
<h4>Hit Points</h4>
<p>30 (3d10 + 3d8 - 7)</p>
</property-line>
<property-line>
<h4>Speed</h4>
<p>30ft</p>
</property-line>
<abilities-block data-cha="16" data-con="8" data-dex="16" data-int="10" data-str="8" data-wis="14"></abilities-block>
<property-line>
<h4>Proficiencies</h4>
<p>Acrobatics +6, Deception +6, Intimidation +6, Investigation +3,
Perception +5, Sleight of Hand +6, Stealth +9, Survival +8;
Disguise kit, Forgery kit, Herbalism kit, Poisoner's kit, Thieves' tools;
Simple weapons, Martial Weapons, Light armor, Medium armor, Shields.</p>
</property-line>
<property-line>
<h4>Features</h4>
<p>Assassinate, Crossbow Expert, Cunning Action, Expertise, Favored Enemy - humans and elves,
Fighting Style - archery, Natural Explorer - urban, Primeval Awareness,
Sneak Attack +2d6, Spellcasting, Thieves' Cant</p>
</property-line>
<property-line>
<h4>Saving Throws</h4>
<p>Dexterity +6, Intelligence +3</p>
</property-line>
<property-line>
<h4>Senses</h4>
<p>passive Perception 15, Darkvision 60 ft.</p>
</property-line>
<property-line>
<h4>Equipment</h4>
<p><i>Amulet of Proof against Detection and Location,</i> <i>Boots of Elvenkind,</i>
Breastplate, Burglar's Pack, Crossbow Bolts (40), Dagger,
<i>Goggles of Night,</i> Hand Crossbow, Heavy Crossbow, Rapier,
Tools (disguise kit, forgery kit, herbalism kit, poisoner's kit, thieve's tool).</p>
</property-line>
<property-line>
<h4>Languages</h4>
<p>Ancient Patrian, Common, Elven</p>
</property-line>
<property-line>
<h4>Challenge</h4>
<p>3 (700 XP)</p>
</property-line>
</top-stats>
<property-block>
<h4>Shapechanger.</h4>
<p>As an action, a Changeling can polymorph into any humanoid of its size that it has seen,
or back into its true form. However, the Changeling's equipment does not change with it. If the
Changeling dies, it reverts to its natural appearance.</p>
</property-block>
<property-block>
<h4>Horde Breaker.</h4>
<p>Once on each of the Agent's turns when it makes a weapon attack, the Agent can make
another attack with the same weapon against a different creature that is within 5 feet
of the original target and within range of your weapon.</p>
</property-block>
<property-block>
<h4>Assassinate.</h4>
<p>The Agent of Esus is deadliest when it gets the drop on its enemies. The Agent has advantage
on attack rolls against any creature that hasn't taken a turn in the combat yet. In addition,
any hit the Agent scores against a creature that is surprised is a critical hit.</p>
</property-block>
<property-block>
<h4>Svartalfar Poison.</h4>
<p>A creature damaged by the Agent's weapons must succeed on a DC 13 Constitution saving throw
or be poisoned for 1 hour. If the saving throw fails by 5 or more, the creature is also
unconscious while poisoned in this way. The creature wakes up if it takes damage or if
another creature takes an action to shake it awake.</p>
</property-block>
<h3>Actions</h3>
<property-block>
<h4>Heavy Crossbow.</h4>
<p><i>Ranged Weapon Attack:</i> +6 to hit, range 100/400, one to two targets.
<i>Hit:</i> 9 (1d10 + 3) piercing damage + Svartalfar Poison.</p>
</property-block>
<property-block>
<h4>Rapier & Hand Crossbow.</h4>
<p><i>Melee & Ranged Weapon Attack:</i> +6/+6 to hit, reach 5 ft., range 30/120, one to two targets.
<i>Hit:</i> 8 (1d8 + 3) & 7 (1d6 + 3) piercing damage + Svartalfar Poison.</p>
</property-block>
</stat-block></body></html>
|
|
