mirror of
https://github.com/ikrpg/ikrpg.github.io.git
synced 2026-05-13 14:27:22 +00:00
Integrating character sheets (wip).
This commit is contained in:
phil
parent
bcdc8dfab5
commit
109910e6bd
18 changed files with 600 additions and 7 deletions
|
|
@ -1,5 +1,5 @@
|
||||||
name: IKRPG Wiki
|
name: IKRPG Wiki
|
||||||
pygments: false
|
pygments: false
|
||||||
permalink: /:title/
|
permalink: /:categories/:title/
|
||||||
port: 8080
|
port: 8080
|
||||||
exclude: [ Makefile, README.md ]
|
exclude: [ Makefile, README.md ]
|
||||||
|
|
@ -34,7 +34,7 @@
|
||||||
</header>
|
</header>
|
||||||
<section class="content" itemprop="articleBody">{{ content }}</section>
|
<section class="content" itemprop="articleBody">{{ content }}</section>
|
||||||
<footer id="foot">
|
<footer id="foot">
|
||||||
<p>Images originating from the <a href="http://privateerpress.com">Privateer Press website</a> are © 2001—2013 Privateer Press, Inc. All Rights Reserved. Privateer Press ®, WARMACHINE ®, Cryx, Cygnar, Khador, Protectorate of Menoth, Retribution of Scryah, Steam-powered Miniatures Combat, warcaster, warjack, WARMACHINE: Prime, WARMACHINE: Escalation, WARMACHINE: Apotheosis, WARMACHINE: Superiority, WARMACHINE: Prime Remix, WARMACHINE: Legends, Forces of WARMACHINE: Pirates of the Broken Coast, Forces of WARMACHINE: Retribution of Scyrah, Forces of WARMACHINE: Cygnar, Forces of WARMACHINE: Khador, Forces of WARMACHINE: Cryx, Forces of WARMACHINE: Protectorate of Menoth, HORDES, Circle Orboros, Legion of Everblight, Skorne, Trollbloods, Trollblood, Monsterous Miniatures Combat, warbeast, HORDES: Primal, HORDES: Evolution, HORDES: Metamorphosis, Forces of HORDES: Circle Orboros, Forces of HORDES: Legion of Everblight, Forces of HORDES: Skorne, Forces of HORDES: Trollbloods, Iron Kingdoms, Immoren, The Witchfire Trilogy, Monsternomicon, Five Fingers: The Port of Deceit, Formula P3, Formula P3 Hobby Series, No Quarter Magazine and their logos are trademarks of Privateer Press, Inc. Images and trademarks used without permission. This website is unofficial and is not endorsed by Privateer Press. The background image originates from the warmachine video game's <a href="http://whitemoondreams.com/warmachine/media/webkit-2">Webkit</a>.</p>
|
<p>Images originating from the <a href="http://privateerpress.com">Privateer Press website</a> are © 2001—2013 Privateer Press, Inc. All Rights Reserved. Privateer Press ®, WARMACHINE ®, Cryx, Cygnar, Khador, Protectorate of Menoth, Retribution of Scryah, Steam-powered Miniatures Combat, warcaster, warjack, WARMACHINE: Prime, WARMACHINE: Escalation, WARMACHINE: Apotheosis, WARMACHINE: Superiority, WARMACHINE: Prime Remix, WARMACHINE: Legends, Forces of WARMACHINE: Pirates of the Broken Coast, Forces of WARMACHINE: Retribution of Scyrah, Forces of WARMACHINE: Cygnar, Forces of WARMACHINE: Khador, Forces of WARMACHINE: Cryx, Forces of WARMACHINE: Protectorate of Menoth, HORDES, Circle Orboros, Legion of Everblight, Skorne, Trollbloods, Trollblood, Monsterous Miniatures Combat, warbeast, HORDES: Primal, HORDES: Evolution, HORDES: Metamorphosis, Forces of HORDES: Circle Orboros, Forces of HORDES: Legion of Everblight, Forces of HORDES: Skorne, Forces of HORDES: Trollbloods, Iron Kingdoms, Immoren, The Witchfire Trilogy, Monsternomicon, Five Fingers: The Port of Deceit, Formula P3, Formula P3 Hobby Series, No Quarter Magazine and their logos are trademarks of Privateer Press, Inc. Images and trademarks used without permission. This website is unofficial and is not endorsed by Privateer Press. The background image is taken from the warmachine video game's <a href="http://whitemoondreams.com/warmachine/media/webkit-2">Webkit</a>.</p>
|
||||||
</footer>
|
</footer>
|
||||||
</article>
|
</article>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
9
_posts/0000-01-01-Character-Sheet.html
Normal file
9
_posts/0000-01-01-Character-Sheet.html
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
---
|
||||||
|
layout: ikrpg
|
||||||
|
tags: [Rules, None, None]
|
||||||
|
---
|
||||||
|
|
||||||
|
<p>
|
||||||
|
The character sheet composes the <a href="/Character-Sheet/Stats">Stats page</a>, the
|
||||||
|
<a href="/Character-Sheet/Skills">Skills page</a>, …
|
||||||
|
</p>
|
||||||
187
_posts/Character-Sheet/0000-01-01-Skills.html
Normal file
187
_posts/Character-Sheet/0000-01-01-Skills.html
Normal file
|
|
@ -0,0 +1,187 @@
|
||||||
|
---
|
||||||
|
layout: ikrpg
|
||||||
|
tags: [Rules, None, None]
|
||||||
|
categories: [ Character-Sheet ]
|
||||||
|
---
|
||||||
|
|
||||||
|
<div class="sheet">
|
||||||
|
<form id="skills" class="card">
|
||||||
|
<input id="name" type="text" />
|
||||||
|
<div class="content">
|
||||||
|
<div id="s1" class="skill">
|
||||||
|
<input type="text" class="title" />
|
||||||
|
<input type="text" class="stat" />
|
||||||
|
<input type="text" class="base" />
|
||||||
|
<input type="text" class="lvl" />
|
||||||
|
<input type="text" class="sum" />
|
||||||
|
</div>
|
||||||
|
<div id="s2" class="skill">
|
||||||
|
<input type="text" class="title" />
|
||||||
|
<input type="text" class="stat" />
|
||||||
|
<input type="text" class="base" />
|
||||||
|
<input type="text" class="lvl" />
|
||||||
|
<input type="text" class="sum" />
|
||||||
|
</div>
|
||||||
|
<div id="s3" class="skill">
|
||||||
|
<input type="text" class="title" />
|
||||||
|
<input type="text" class="stat" />
|
||||||
|
<input type="text" class="base" />
|
||||||
|
<input type="text" class="lvl" />
|
||||||
|
<input type="text" class="sum" />
|
||||||
|
</div>
|
||||||
|
<div id="s4" class="skill">
|
||||||
|
<input type="text" class="title" />
|
||||||
|
<input type="text" class="stat" />
|
||||||
|
<input type="text" class="base" />
|
||||||
|
<input type="text" class="lvl" />
|
||||||
|
<input type="text" class="sum" />
|
||||||
|
</div>
|
||||||
|
<div id="s5" class="skill">
|
||||||
|
<input type="text" class="title" />
|
||||||
|
<input type="text" class="stat" />
|
||||||
|
<input type="text" class="base" />
|
||||||
|
<input type="text" class="lvl" />
|
||||||
|
<input type="text" class="sum" />
|
||||||
|
</div>
|
||||||
|
<div id="s6" class="skill">
|
||||||
|
<input type="text" class="title" />
|
||||||
|
<input type="text" class="stat" />
|
||||||
|
<input type="text" class="base" />
|
||||||
|
<input type="text" class="lvl" />
|
||||||
|
<input type="text" class="sum" />
|
||||||
|
</div>
|
||||||
|
<div id="s7" class="skill">
|
||||||
|
<input type="text" class="title" />
|
||||||
|
<input type="text" class="stat" />
|
||||||
|
<input type="text" class="base" />
|
||||||
|
<input type="text" class="lvl" />
|
||||||
|
<input type="text" class="sum" />
|
||||||
|
</div>
|
||||||
|
<div id="s8" class="skill">
|
||||||
|
<input type="text" class="title" />
|
||||||
|
<input type="text" class="stat" />
|
||||||
|
<input type="text" class="base" />
|
||||||
|
<input type="text" class="lvl" />
|
||||||
|
<input type="text" class="sum" />
|
||||||
|
</div>
|
||||||
|
<div id="s9" class="skill">
|
||||||
|
<input type="text" class="title" />
|
||||||
|
<input type="text" class="stat" />
|
||||||
|
<input type="text" class="base" />
|
||||||
|
<input type="text" class="lvl" />
|
||||||
|
<input type="text" class="sum" />
|
||||||
|
</div>
|
||||||
|
<div id="s10" class="skill">
|
||||||
|
<input type="text" class="title" />
|
||||||
|
<input type="text" class="stat" />
|
||||||
|
<input type="text" class="base" />
|
||||||
|
<input type="text" class="lvl" />
|
||||||
|
<input type="text" class="sum" />
|
||||||
|
</div>
|
||||||
|
<div id="s11" class="skill">
|
||||||
|
<input type="text" class="title" />
|
||||||
|
<input type="text" class="stat" />
|
||||||
|
<input type="text" class="base" />
|
||||||
|
<input type="text" class="lvl" />
|
||||||
|
<input type="text" class="sum" />
|
||||||
|
</div>
|
||||||
|
<div id="s12" class="skill">
|
||||||
|
<input type="text" class="title" />
|
||||||
|
<input type="text" class="stat" />
|
||||||
|
<input type="text" class="base" />
|
||||||
|
<input type="text" class="lvl" />
|
||||||
|
<input type="text" class="sum" />
|
||||||
|
</div>
|
||||||
|
<div id="s13" class="skill">
|
||||||
|
<input type="text" class="title" />
|
||||||
|
<input type="text" class="stat" />
|
||||||
|
<input type="text" class="base" />
|
||||||
|
<input type="text" class="lvl" />
|
||||||
|
<input type="text" class="sum" />
|
||||||
|
</div>
|
||||||
|
<div id="s14" class="skill">
|
||||||
|
<input type="text" class="title" />
|
||||||
|
<input type="text" class="stat" />
|
||||||
|
<input type="text" class="base" />
|
||||||
|
<input type="text" class="lvl" />
|
||||||
|
<input type="text" class="sum" />
|
||||||
|
</div>
|
||||||
|
<div id="s15" class="skill">
|
||||||
|
<input type="text" class="title" />
|
||||||
|
<input type="text" class="stat" />
|
||||||
|
<input type="text" class="base" />
|
||||||
|
<input type="text" class="lvl" />
|
||||||
|
<input type="text" class="sum" />
|
||||||
|
</div>
|
||||||
|
<div id="s16" class="skill">
|
||||||
|
<input type="text" class="title" />
|
||||||
|
<input type="text" class="stat" />
|
||||||
|
<input type="text" class="base" />
|
||||||
|
<input type="text" class="lvl" />
|
||||||
|
<input type="text" class="sum" />
|
||||||
|
</div>
|
||||||
|
<div id="s17" class="skill">
|
||||||
|
<input type="text" class="title" />
|
||||||
|
<input type="text" class="stat" />
|
||||||
|
<input type="text" class="base" />
|
||||||
|
<input type="text" class="lvl" />
|
||||||
|
<input type="text" class="sum" />
|
||||||
|
</div>
|
||||||
|
<div id="s18" class="skill">
|
||||||
|
<input type="text" class="title" />
|
||||||
|
<input type="text" class="stat" />
|
||||||
|
<input type="text" class="base" />
|
||||||
|
<input type="text" class="lvl" />
|
||||||
|
<input type="text" class="sum" />
|
||||||
|
</div>
|
||||||
|
<div id="s19" class="skill">
|
||||||
|
<input type="text" class="title" />
|
||||||
|
<input type="text" class="stat" />
|
||||||
|
<input type="text" class="base" />
|
||||||
|
<input type="text" class="lvl" />
|
||||||
|
<input type="text" class="sum" />
|
||||||
|
</div>
|
||||||
|
<div id="s20" class="skill">
|
||||||
|
<input type="text" class="title" />
|
||||||
|
<input type="text" class="stat" />
|
||||||
|
<input type="text" class="base" />
|
||||||
|
<input type="text" class="lvl" />
|
||||||
|
<input type="text" class="sum" />
|
||||||
|
</div>
|
||||||
|
<div id="s21" class="skill">
|
||||||
|
<input type="text" class="title" />
|
||||||
|
<input type="text" class="stat" />
|
||||||
|
<input type="text" class="base" />
|
||||||
|
<input type="text" class="lvl" />
|
||||||
|
<input type="text" class="sum" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var Hero = {
|
||||||
|
"name": "Hero's name",
|
||||||
|
"s1": { "title": "Skill 1 name", "stat": "", "base": "", "lvl": "", "sum": "" },
|
||||||
|
"s2": { "title": "Skill 2 name", "stat": "", "base": "", "lvl": "", "sum": "" },
|
||||||
|
"s3": { "title": "...", "stat": "", "base": "", "lvl": "", "sum": "" },
|
||||||
|
"s4": { "title": "", "stat": "", "base": "", "lvl": "", "sum": "" },
|
||||||
|
"s5": { "title": "", "stat": "", "base": "", "lvl": "", "sum": "" },
|
||||||
|
"s6": { "title": "", "stat": "", "base": "", "lvl": "", "sum": "" },
|
||||||
|
"s7": { "title": "", "stat": "", "base": "", "lvl": "", "sum": "" },
|
||||||
|
"s8": { "title": "", "stat": "", "base": "", "lvl": "", "sum": "" },
|
||||||
|
"s9": { "title": "", "stat": "", "base": "", "lvl": "", "sum": "" },
|
||||||
|
"s10": { "title": "", "stat": "", "base": "", "lvl": "", "sum": "" },
|
||||||
|
"s11": { "title": "", "stat": "", "base": "", "lvl": "", "sum": "" },
|
||||||
|
"s12": { "title": "", "stat": "", "base": "", "lvl": "", "sum": "" },
|
||||||
|
"s13": { "title": "", "stat": "", "base": "", "lvl": "", "sum": "" },
|
||||||
|
"s14": { "title": "", "stat": "", "base": "", "lvl": "", "sum": "" },
|
||||||
|
"s15": { "title": "", "stat": "", "base": "", "lvl": "", "sum": "" },
|
||||||
|
"s16": { "title": "", "stat": "", "base": "", "lvl": "", "sum": "" },
|
||||||
|
"s17": { "title": "", "stat": "", "base": "", "lvl": "", "sum": "" },
|
||||||
|
"s18": { "title": "", "stat": "", "base": "", "lvl": "", "sum": "" },
|
||||||
|
"s19": { "title": "", "stat": "", "base": "", "lvl": "", "sum": "" },
|
||||||
|
"s20": { "title": "", "stat": "", "base": "", "lvl": "", "sum": "" },
|
||||||
|
"s21": { "title": "", "stat": "", "base": "", "lvl": "", "sum": "" }
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" src="/static/javascripts/heroic.js"></script>
|
||||||
124
_posts/Character-Sheet/0000-01-01-Stats.html
Normal file
124
_posts/Character-Sheet/0000-01-01-Stats.html
Normal file
|
|
@ -0,0 +1,124 @@
|
||||||
|
---
|
||||||
|
layout: ikrpg
|
||||||
|
tags: [Rules, None, None]
|
||||||
|
categories: [ Character-Sheet ]
|
||||||
|
---
|
||||||
|
|
||||||
|
<div class="sheet">
|
||||||
|
<form id="stats" class="card">
|
||||||
|
<input id="name" type="text" />
|
||||||
|
<input id="archetype" type="text" />
|
||||||
|
<input id="race" type="text" />
|
||||||
|
<input id="level" type="text" />
|
||||||
|
<input id="careers" type="text" />
|
||||||
|
<div id="battle" class="stats">
|
||||||
|
<input id="ini" type="text" />
|
||||||
|
<input id="spd" type="text" />
|
||||||
|
<input id="str" type="text" />
|
||||||
|
<input id="cmd" type="text" />
|
||||||
|
<input id="def" type="text" />
|
||||||
|
<input id="arm" type="text" />
|
||||||
|
<input id="arc" type="text" />
|
||||||
|
</div>
|
||||||
|
<div class="weapons" id="r1m1"></div>
|
||||||
|
<div class="weapons" id="r2m1"></div>
|
||||||
|
<div class="weapons" id="r1m2"></div>
|
||||||
|
<div class="weapons" id="r2"></div>
|
||||||
|
<div class="weapons" id="m2"></div>
|
||||||
|
<div id="rat1" class="ranged">
|
||||||
|
<input class="name" type="text" />
|
||||||
|
<div class="stats">
|
||||||
|
<input class="rat" type="text" />
|
||||||
|
<input class="rng" type="text" />
|
||||||
|
<input class="aoe" type="text" />
|
||||||
|
<input class="pow" type="text" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="rat2" class="ranged">
|
||||||
|
<input class="name" type="text" />
|
||||||
|
<div class="stats">
|
||||||
|
<input class="rat" type="text" />
|
||||||
|
<input class="rng" type="text" />
|
||||||
|
<input class="aoe" type="text" />
|
||||||
|
<input class="pow" type="text" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="mat1" class="melee">
|
||||||
|
<input class="name" type="text" />
|
||||||
|
<div class="stats">
|
||||||
|
<input class="mat" type="text" />
|
||||||
|
<input class="pow" type="text" />
|
||||||
|
<input class="ps" type="text" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="mat2" class="melee">
|
||||||
|
<input class="name" type="text" />
|
||||||
|
<div class="stats">
|
||||||
|
<input class="mat" type="text" />
|
||||||
|
<input class="pow" type="text" />
|
||||||
|
<input class="ps" type="text" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="mat3" class="melee">
|
||||||
|
<input class="name" type="text" />
|
||||||
|
<div class="stats">
|
||||||
|
<input class="mat" type="text" />
|
||||||
|
<input class="pow" type="text" />
|
||||||
|
<input class="ps" type="text" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<input id="feats" type="text" />
|
||||||
|
<a id="weapons-switch" href="javascript:switchWeapons();"> </a>
|
||||||
|
<div id="roleplay" class="stats">
|
||||||
|
<input id="phy" type="text" />
|
||||||
|
<input id="agl" type="text" />
|
||||||
|
<input id="prw" type="text" />
|
||||||
|
<input id="poi" type="text" />
|
||||||
|
<input id="int" type="text" />
|
||||||
|
<input id="per" type="text" />
|
||||||
|
</div>
|
||||||
|
<div id="mod">
|
||||||
|
<input id="ini_mod" type="text" />
|
||||||
|
<input id="def_mod" type="text" />
|
||||||
|
<input id="arm_mod" type="text" />
|
||||||
|
<input id="cmd_mod" type="text" />
|
||||||
|
</div>
|
||||||
|
<input id="wil" type="text" />
|
||||||
|
<input id="xp" type="text" />
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var Hero = {
|
||||||
|
"name": "Hero's name",
|
||||||
|
"archetype": "Archetype",
|
||||||
|
"race": "Race",
|
||||||
|
"level": "Level",
|
||||||
|
"careers": "Careers",
|
||||||
|
"phy": 0,
|
||||||
|
"spd": 0,
|
||||||
|
"str": 0,
|
||||||
|
"agl": 0,
|
||||||
|
"poi": 0,
|
||||||
|
"prw": 0,
|
||||||
|
"int": 0,
|
||||||
|
"arc": 0,
|
||||||
|
"per": 0,
|
||||||
|
"def": 0,
|
||||||
|
"ini": 0,
|
||||||
|
"cmd": 0,
|
||||||
|
"arm": 0,
|
||||||
|
"wil": 0,
|
||||||
|
"rat1": { "name": "Weapon name", "rat": 0, "rng": 0, "aoe": 0, "pow": 0 },
|
||||||
|
"rat2": { "name": "Weapon name", "rat": 0, "rng": 0, "aoe": 0, "pow": 0 },
|
||||||
|
"mat1": { "name": "Weapon name", "mat": 0, "pow": 0, "ps": 0 },
|
||||||
|
"mat2": { "name": "Weapon name", "mat": 0, "pow": 0, "ps": 0 },
|
||||||
|
"mat3": { "name": "Weapon name", "mat": 0, "pow": 0, "ps": 0 },
|
||||||
|
"feats": 0,
|
||||||
|
"ini_mod": 0,
|
||||||
|
"def_mod": 0,
|
||||||
|
"arm_mod": 0,
|
||||||
|
"cmd_mod": 0,
|
||||||
|
"xp": 0
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" src="/static/javascripts/heroic.js"></script>
|
||||||
BIN
static/images/sheet/M+M.png
Normal file
BIN
static/images/sheet/M+M.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
BIN
static/images/sheet/R+M+M.png
Normal file
BIN
static/images/sheet/R+M+M.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
BIN
static/images/sheet/R+R+M.png
Normal file
BIN
static/images/sheet/R+R+M.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 152 KiB |
BIN
static/images/sheet/R+R.png
Normal file
BIN
static/images/sheet/R+R.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 90 KiB |
BIN
static/images/sheet/Skills.png
Normal file
BIN
static/images/sheet/Skills.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1 MiB |
BIN
static/images/sheet/Stats.png
Normal file
BIN
static/images/sheet/Stats.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
BIN
static/images/sheet/reload.png
Normal file
BIN
static/images/sheet/reload.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
149
static/javascripts/heroic.js
Normal file
149
static/javascripts/heroic.js
Normal file
|
|
@ -0,0 +1,149 @@
|
||||||
|
var query = window.location.search;
|
||||||
|
var Query = (query == "") ? {} : JSON.parse(unescape(query.substring(1)));
|
||||||
|
|
||||||
|
for (attr in Query) Hero[attr] = Query[attr];
|
||||||
|
|
||||||
|
var isArray = function(someVar) { return Object.prototype.toString.call(someVar) === "[object Array]"; };
|
||||||
|
var isBoolean = function(someVar) { return Object.prototype.toString.call(someVar) === "[object Boolean]"; };
|
||||||
|
var isDefined = function(someVar) { return typeof someVar !== "undefined" && someVar != null; };
|
||||||
|
var isString = function(someVar) { return typeof someVar === "string"; };
|
||||||
|
var isNumber = function(someVar) { return typeof someVar === "number"; };
|
||||||
|
var isObject = function(someVar) { return typeof someVar === "object"; };
|
||||||
|
|
||||||
|
var observe;
|
||||||
|
if (window.attachEvent) observe = function (element, event, handler) { element.attachEvent('on'+event, handler); };
|
||||||
|
else observe = function (element, event, handler) { element.addEventListener(event, handler, false); };
|
||||||
|
|
||||||
|
var resizeTextarea = function(textarea) {
|
||||||
|
return function() {
|
||||||
|
textarea.style.height = "auto";
|
||||||
|
textarea.style.height = (textarea.scrollHeight)+"px";
|
||||||
|
};
|
||||||
|
};
|
||||||
|
var delayedTextareaResize = function(textarea) {
|
||||||
|
return function() { window.setTimeout(resizeTextarea(textarea), 0); };
|
||||||
|
};
|
||||||
|
var autoresizableTextarea = function(textarea) {
|
||||||
|
observe(textarea, "change", resizeTextarea(textarea));
|
||||||
|
observe(textarea, "cut", delayedTextareaResize(textarea));
|
||||||
|
observe(textarea, "paste", delayedTextareaResize(textarea));
|
||||||
|
observe(textarea, "drop", delayedTextareaResize(textarea));
|
||||||
|
observe(textarea, "keydown", delayedTextareaResize(textarea));
|
||||||
|
};
|
||||||
|
|
||||||
|
var redirect = function() {
|
||||||
|
document.location.search = encodeURIComponent(JSON.stringify(Hero));
|
||||||
|
};
|
||||||
|
|
||||||
|
var switchWeapons = function() {
|
||||||
|
var r1m1 = Hero.r1m1;
|
||||||
|
var r2m1 = Hero.r2m1;
|
||||||
|
var r1m2 = Hero.r1m2;
|
||||||
|
var r2 = Hero.r2;
|
||||||
|
var m2 = Hero.m2;
|
||||||
|
if (r1m1 == true) { Hero.r1m1 = false; Hero.r2m1 = true; }
|
||||||
|
else if (r2m1 == true) { Hero.r2m1 = false; Hero.r1m2 = true; }
|
||||||
|
else if (r1m2 == true) { Hero.r1m2 = false; Hero.r2 = true; }
|
||||||
|
else if (r2 == true) { Hero.r2 = false; Hero.m2 = true; }
|
||||||
|
else if (m2 == true) { Hero.m2 = false; Hero.r1m1 = true; }
|
||||||
|
else { Hero.r1m1 = true; }
|
||||||
|
redirect();
|
||||||
|
};
|
||||||
|
|
||||||
|
var initialize = function() {
|
||||||
|
var textareas = document.querySelectorAll("textarea");
|
||||||
|
var fillOut = function(attribute, value) {
|
||||||
|
if (isString(value) || isNumber(value)) {
|
||||||
|
var element = document.querySelector("input#"+attribute);
|
||||||
|
if (element != null && isDefined(element.value)) {
|
||||||
|
element.value = value;
|
||||||
|
if (element.nodeName == "TEXTAREA") resizeTextarea(element)();
|
||||||
|
}
|
||||||
|
} else if (isObject(value)) {
|
||||||
|
var parent = document.querySelector("#"+attribute);
|
||||||
|
for (key in value) {
|
||||||
|
var child = parent.querySelector("input."+key+", textarea."+key);
|
||||||
|
if (child != null && isDefined(child.value)) {
|
||||||
|
child.value = value[key];
|
||||||
|
if (child.nodeName == "TEXTAREA") resizeTextarea(child)();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
var saveOnChange = function(attribute, value) {
|
||||||
|
var updateSearchString;
|
||||||
|
if (isString(value) || isNumber(value)) {
|
||||||
|
var input = document.querySelector("input#"+attribute);
|
||||||
|
updateSearchString = function() {
|
||||||
|
Hero[attribute] = input.value;
|
||||||
|
Hero["focus"] = attribute;
|
||||||
|
redirect();
|
||||||
|
};
|
||||||
|
if (isDefined(input)) { input.addEventListener("change", updateSearchString, false); }
|
||||||
|
} else if (isObject(value)) {
|
||||||
|
var parent = document.querySelector("#"+attribute);
|
||||||
|
updateSearchString = function(key, input) {
|
||||||
|
return function() {
|
||||||
|
Hero[attribute][key] = input.value;
|
||||||
|
Hero["focus"] = attribute;
|
||||||
|
redirect();
|
||||||
|
};
|
||||||
|
};
|
||||||
|
for (key in value) {
|
||||||
|
var child = parent.querySelector("input."+key+", textarea."+key);
|
||||||
|
if (isDefined(child)) { observe(child, "change", updateSearchString(key, child)); }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
var showWeapons = function(hero) {
|
||||||
|
var setDisplay = function(element, bool) { if (isDefined(element.style)) element.style.display = (bool) ? "block" : "none"; };
|
||||||
|
var showElement = function(element) { setDisplay(element, true); };
|
||||||
|
var hideElement = function(element) { setDisplay(element, false); };
|
||||||
|
var showElements = function(array) { if (isDefined(array.forEach)) array.forEach(showElement); };
|
||||||
|
var hideElements = function(array) { if (isDefined(array.forEach)) array.forEach(hideElement); };
|
||||||
|
var r1m1 = document.querySelector("div#r1m1");
|
||||||
|
var r2m1 = document.querySelector("div#r2m1");
|
||||||
|
var r1m2 = document.querySelector("div#r1m2");
|
||||||
|
var r2 = document.querySelector("div#r2");
|
||||||
|
var m2 = document.querySelector("div#m2");
|
||||||
|
var rat1 = document.querySelector("div#rat1");
|
||||||
|
var rat2 = document.querySelector("div#rat2");
|
||||||
|
var mat1 = document.querySelector("div#mat1");
|
||||||
|
var mat2 = document.querySelector("div#mat2");
|
||||||
|
var mat3 = document.querySelector("div#mat3");
|
||||||
|
if (isBoolean(hero.r1m1) && hero.r1m1 == true) {
|
||||||
|
showElements([ r1m1, rat1, mat2 ]);
|
||||||
|
hideElements([ r2m1, r1m2, r2, m2, mat1, rat2, mat3 ]);
|
||||||
|
} else if (isBoolean(hero.r2m1) && hero.r2m1 == true) {
|
||||||
|
showElements([ r2m1, rat1, rat2, mat3 ]);
|
||||||
|
hideElements([ r1m1, r1m2, r2, m2, mat1, mat2 ]);
|
||||||
|
} else if (isBoolean(hero.r1m2) && hero.r1m2 == true) {
|
||||||
|
showElements([ r1m2, rat1, mat2, mat3 ]);
|
||||||
|
hideElements([ r1m1, r2m1, r2, m2, mat1, rat2 ]);
|
||||||
|
} else if (isBoolean(hero.r2) && hero.r2 == true) {
|
||||||
|
showElements([ r2, rat1, rat2 ]);
|
||||||
|
hideElements([ r1m1, r2m1, r1m2, m2, mat1, mat2, mat3 ]);
|
||||||
|
} else if (isBoolean(hero.m2) && hero.m2 == true) {
|
||||||
|
showElements([ m2, mat1, mat2 ]);
|
||||||
|
hideElements([ r1m1, r2m1, r1m2, r2, rat1, rat2, mat3 ]);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
var focusLastInput = function(hero) {
|
||||||
|
if (isDefined(hero["focus"])) {
|
||||||
|
var input = document.querySelector("input#"+hero["focus"]);
|
||||||
|
if (input == null) input = document.querySelector("#"+hero["focus"]+" input");
|
||||||
|
if (input != null) { input.focus(); input.scrollIntoView(); }
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
for (var i = 0; i < textareas.length; i++) { autoresizableTextarea(textareas[i]); }
|
||||||
|
showWeapons(Hero);
|
||||||
|
for (attribute in Hero) { fillOut(attribute, Hero[attribute]); }
|
||||||
|
for (attribute in Hero) { saveOnChange(attribute, Hero[attribute]); }
|
||||||
|
focusLastInput(Hero);
|
||||||
|
|
||||||
|
var names = document.querySelectorAll("section > input.name");
|
||||||
|
for (name in names) { names[name].value = Hero["name"]; }
|
||||||
|
};
|
||||||
|
|
||||||
|
document.addEventListener("DOMContentLoaded", initialize, false);
|
||||||
124
static/stylesheets/content/character-sheet.css
Normal file
124
static/stylesheets/content/character-sheet.css
Normal file
|
|
@ -0,0 +1,124 @@
|
||||||
|
/*form.sheet {
|
||||||
|
margin: 2em auto 0 auto;
|
||||||
|
width: 699px;
|
||||||
|
height: 988px;
|
||||||
|
background-image: url(/static/images/Stats.png);
|
||||||
|
background-repeat: no-repeat; }*/
|
||||||
|
|
||||||
|
|
||||||
|
div.sheet {
|
||||||
|
margin: 2em auto 0 auto;
|
||||||
|
width: 699px;
|
||||||
|
height: 988px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.sheet > form.card { height: 988px; width: 699px; overflow: hidden; }
|
||||||
|
div.sheet > form.card input,
|
||||||
|
div.sheet > form.card textarea { height: 30px; font-family: Georgia; font-size: 23px; text-align: justify; color: #333; background: none; border: none; }
|
||||||
|
|
||||||
|
div.sheet * { position: absolute; }
|
||||||
|
div.sheet > form#stats { pointer-events: none; }
|
||||||
|
div.sheet > form#stats * { pointer-events: auto; }
|
||||||
|
div.sheet > form#stats { background-image: url(/static/images/sheet/Stats.png); }
|
||||||
|
div.sheet > form#stats input#name { top: 20px; left: 180px; height: 45px; width: 485px; font-size: 37px; text-transform: uppercase; }
|
||||||
|
div.sheet > form#stats input#archetype { top: 58px; left: 180px; width: 190px; }
|
||||||
|
div.sheet > form#stats input#race { top: 58px; left: 370px; width: 150px; }
|
||||||
|
div.sheet > form#stats input#level { top: 58px; left: 520px; width: 150px; }
|
||||||
|
div.sheet > form#stats input#careers { top: 106px; left: 362px; width: 300px; }
|
||||||
|
div.sheet > form#stats div#battle.stats { top: 157px; }
|
||||||
|
div.sheet > form#stats div#battle.stats input { width: 30px; text-align: center; }
|
||||||
|
div.sheet > form#stats div#battle.stats input#ini { left: 360px; }
|
||||||
|
div.sheet > form#stats div#battle.stats input#spd { left: 406px; }
|
||||||
|
div.sheet > form#stats div#battle.stats input#str { left: 452px; }
|
||||||
|
div.sheet > form#stats div#battle.stats input#cmd { left: 498px; }
|
||||||
|
div.sheet > form#stats div#battle.stats input#def { left: 544px; }
|
||||||
|
div.sheet > form#stats div#battle.stats input#arm { left: 590px; }
|
||||||
|
div.sheet > form#stats div#battle.stats input#arc { left: 640px; }
|
||||||
|
div.sheet > form#stats div.weapons { height: 988px; width: 699px; pointer-events: none; display: none; }
|
||||||
|
div.sheet > form#stats div.ranged,
|
||||||
|
div.sheet > form#stats div.melee { left: 435px; }
|
||||||
|
div.sheet > form#stats div.ranged input.name,
|
||||||
|
div.sheet > form#stats div.melee input.name { width: 230px; text-transform: uppercase; }
|
||||||
|
div.sheet > form#stats div.ranged div.stats,
|
||||||
|
div.sheet > form#stats div.melee div.stats { top: 49px }
|
||||||
|
div.sheet > form#stats div.melee div.stats input,
|
||||||
|
div.sheet > form#stats div.ranged div.stats input { width: 30px; text-align: center; }
|
||||||
|
div.sheet > form#stats div.ranged input.rat { left: 66px; }
|
||||||
|
div.sheet > form#stats div.ranged input.rng { left: 110px; }
|
||||||
|
div.sheet > form#stats div.ranged input.aoe { left: 154px; }
|
||||||
|
div.sheet > form#stats div.ranged input.pow { left: 198px; }
|
||||||
|
div.sheet > form#stats div.melee input.mat { left: 70px; }
|
||||||
|
div.sheet > form#stats div.melee input.pow { left: 135px; }
|
||||||
|
div.sheet > form#stats div.melee input.ps { left: 200px; }
|
||||||
|
div.sheet > form#stats div.ranged#rat1 { top: 243px; display: block; }
|
||||||
|
div.sheet > form#stats div.ranged#rat2 { top: 380px; display: none; }
|
||||||
|
div.sheet > form#stats div.melee#mat1 { top: 245px; display: none; }
|
||||||
|
div.sheet > form#stats div.melee#mat2 { top: 382px; display: block; }
|
||||||
|
div.sheet > form#stats div.melee#mat3 { top: 516px; display: none; }
|
||||||
|
div.sheet > form#stats div#r1m2 { background-image: url(/static/images/sheet/R+M+M.png); }
|
||||||
|
div.sheet > form#stats div#r2m1 { background-image: url(/static/images/sheet/R+R+M.png); }
|
||||||
|
div.sheet > form#stats div#r2 { background-image: url(/static/images/sheet/R+R.png); }
|
||||||
|
div.sheet > form#stats div#m2 { background-image: url(/static/images/sheet/M+M.png); }
|
||||||
|
div.sheet > form#stats input#feats { top: 502px; left: 161px; height: 52px; font-size: 40px; width: 50px; text-align: center; }
|
||||||
|
div.sheet > form#stats a#weapons-switch { display: block; top: 532px; left: 335px; height: 60px; width: 60px; text-decoration: none; }
|
||||||
|
div.sheet > form#stats div#roleplay.stats { top: 673px; }
|
||||||
|
div.sheet > form#stats div#roleplay.stats input { width: 30px; text-align: center; }
|
||||||
|
div.sheet > form#stats div#roleplay.stats input#phy { left: 398px; }
|
||||||
|
div.sheet > form#stats div#roleplay.stats input#agl { left: 445px; }
|
||||||
|
div.sheet > form#stats div#roleplay.stats input#prw { left: 492px; }
|
||||||
|
div.sheet > form#stats div#roleplay.stats input#poi { left: 539px; }
|
||||||
|
div.sheet > form#stats div#roleplay.stats input#int { left: 586px; }
|
||||||
|
div.sheet > form#stats div#roleplay.stats input#per { left: 633px; }
|
||||||
|
div.sheet > form#stats div#mod { top: 708px; }
|
||||||
|
div.sheet > form#stats div#mod input { width: 30px; text-align: center; }
|
||||||
|
div.sheet > form#stats div#mod input#ini_mod { left: 607px; }
|
||||||
|
div.sheet > form#stats div#mod input#def_mod { top: 23px; left: 607px; }
|
||||||
|
div.sheet > form#stats div#mod input#arm_mod { top: 46px; left: 607px; }
|
||||||
|
div.sheet > form#stats div#mod input#cmd_mod { top: 69px; left: 516px; }
|
||||||
|
div.sheet > form#stats input#wil { top: 784px; left: 572px; width: 92px; height: 52px; font-size: 40px; text-align: center; }
|
||||||
|
div.sheet > form#stats input#xp { top: 918px; left: 570px; width: 40px; text-align: center; }
|
||||||
|
div.sheet > form#stats a#weapons-switch { height: 51px; width: 51px; background-image: url(/static/images/sheet/reload.png); }
|
||||||
|
|
||||||
|
div.sheet > form#skills { background-image: url(/static/images/sheet/Skills.png); }
|
||||||
|
div.sheet > form#skills input#name { top: 47px; left: 143px; height: 46px; width: 526px; font-size: 37px; text-transform: uppercase; }
|
||||||
|
div.sheet > form#skills div.content { top: 180px; left: 20px; }
|
||||||
|
div.sheet > form#skills div.content div.skill { position: relative; }
|
||||||
|
div.sheet > form#skills div.content div.skill input { position: relative; width: 64px; text-align: center; }
|
||||||
|
div.sheet > form#skills div.content div.skill input.title { width: 376px; font-size: 17px; text-align: left; text-transform: uppercase; font-weight: bold; }
|
||||||
|
|
||||||
|
div.sheet > section#benefits { top: 0; left: 1398px; background-image: url(/static/images/sheet/Feats.png); }
|
||||||
|
div.sheet > section#benefits input.name { top: 47px; left: 143px; height: 46px; width: 526px; font-size: 37px; text-transform: uppercase; }
|
||||||
|
div.sheet > section#benefits div.content { top: 200px; left: 20px; }
|
||||||
|
div.sheet > section#benefits div.content div.benefit { position: relative; }
|
||||||
|
div.sheet > section#benefits div.content div.benefit input.title { position: relative; width: 658px; font-size: 17px; text-transform: uppercase; font-weight: bold; }
|
||||||
|
div.sheet > section#benefits div.content div.benefit textarea.description { position: relative; width: 658px; height: auto; font-size: 17px; }
|
||||||
|
|
||||||
|
div.sheet > section#abilities { top: 0; left: 2097px; background-image: url(/static/images/sheet/Abilities.png); }
|
||||||
|
div.sheet > section#abilities input.name { top: 47px; left: 143px; height: 46px; width: 526px; font-size: 37px; text-transform: uppercase; }
|
||||||
|
div.sheet > section#abilities div.content { top: 130px; left: 20px; }
|
||||||
|
div.sheet > section#abilities div.content div.ability { position: relative; }
|
||||||
|
div.sheet > section#abilities div.content div.ability input.title { position: relative; width: 658px; font-size: 17px; text-transform: uppercase; font-weight: bold; }
|
||||||
|
div.sheet > section#abilities div.content div.ability textarea.description { position: relative; width: 658px; height: auto; font-size: 17px; }
|
||||||
|
|
||||||
|
div.sheet > section#spells { top: 0; left: 2796px; background-image: url(/static/images/sheet/Spells.png); }
|
||||||
|
div.sheet > section#spells input.name { top: 47px; left: 143px; height: 46px; width: 526px; font-size: 37px; text-transform: uppercase; }
|
||||||
|
div.sheet > section#spells div.content { top: 180px; left: 20px; }
|
||||||
|
div.sheet > section#spells div.content div.spell { position: relative; }
|
||||||
|
div.sheet > section#spells div.content div.spell input { position: relative; width: 64px; text-align: center; }
|
||||||
|
div.sheet > section#spells div.content div.spell input.title { width: 236px; font-size: 17px; text-align: left; text-transform: uppercase; font-weight: bold; }
|
||||||
|
div.sheet > section#spells div.content div.spell textarea.description { position: relative; width: 658px; height: auto; font-size: 17px; }
|
||||||
|
|
||||||
|
div.sheet > section#gear { top: 0; left: 3495px; background-image: url(/static/images/sheet/Gear.png); }
|
||||||
|
div.sheet > section#gear input.name { top: 47px; left: 143px; height: 46px; width: 526px; font-size: 37px; text-transform: uppercase; }
|
||||||
|
div.sheet > section#gear div.content { top: 180px; left: 20px; }
|
||||||
|
div.sheet > section#gear div.content div.gear { position: relative; }
|
||||||
|
div.sheet > section#gear div.content div.gear input { position: relative; font-size: 17px; }
|
||||||
|
div.sheet > section#gear div.content div.gear input.title { width: 236px; text-transform: uppercase; font-weight: bold; }
|
||||||
|
div.sheet > section#gear div.content div.gear input.benefit { width: 410px; }
|
||||||
|
|
||||||
|
div.sheet > section#notes { top: 0; left: 4194px; background-image: url(/static/images/sheet/Abilities.png); }
|
||||||
|
div.sheet > section#notes input.name { top: 47px; left: 143px; height: 46px; width: 526px; font-size: 37px; text-transform: uppercase; }
|
||||||
|
div.sheet > section#notes div.content { top: 130px; left: 20px; }
|
||||||
|
div.sheet > section#notes div.content div.note { position: relative; }
|
||||||
|
div.sheet > section#notes div.content div.note input.title { position: relative; width: 658px; font-size: 17px; text-transform: uppercase; font-weight: bold; }
|
||||||
|
div.sheet > section#notes div.content div.note textarea.text { position: relative; width: 658px; height: auto; font-size: 17px; }
|
||||||
|
|
@ -27,7 +27,7 @@ footer#foot > ul:after {
|
||||||
height: 24px;
|
height: 24px;
|
||||||
background-image: url(/static/images/bg.jpg);
|
background-image: url(/static/images/bg.jpg);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: 50% -877px;
|
background-position: 50% -852px;
|
||||||
/*background-position: 50% -1002px;*/ }
|
/*background-position: 50% -1002px;*/ }
|
||||||
footer#foot > p:before {
|
footer#foot > p:before {
|
||||||
margin-bottom: 24px; }
|
margin-bottom: 24px; }
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@ body {
|
||||||
color: #666;
|
color: #666;
|
||||||
background-image: url(/static/images/bg.jpg);
|
background-image: url(/static/images/bg.jpg);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: 50% 100%;
|
background-position: 50% -370px;
|
||||||
background-attachment: fixed;
|
background-attachment: fixed;
|
||||||
background-color: #1A1A1A;
|
background-color: #1A1A1A;
|
||||||
transition: color 1s; -webkit-transition: color 1s; -moz-transition: color 1s; -ms-transition: color 1s; }
|
transition: color 1s; -webkit-transition: color 1s; -moz-transition: color 1s; -ms-transition: color 1s; }
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@ header#head {
|
||||||
background-color: #1A1A1A;
|
background-color: #1A1A1A;
|
||||||
background-image: url(/static/images/bg.jpg);
|
background-image: url(/static/images/bg.jpg);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: 50% 50%; }
|
background-position: 50% -436px; }
|
||||||
header#head a {
|
header#head a {
|
||||||
color: #FCFDF6;
|
color: #FCFDF6;
|
||||||
border-bottom: 1px solid #DDDDDB; }
|
border-bottom: 1px solid #DDDDDB; }
|
||||||
|
|
@ -11,10 +11,9 @@ header#head a:hover {
|
||||||
header#head h1 {
|
header#head h1 {
|
||||||
font-size: 3em;
|
font-size: 3em;
|
||||||
padding: 54px 24px 19px 24px;
|
padding: 54px 24px 19px 24px;
|
||||||
font-family: 'Cabin', sans-serif;
|
font-family: "Cabin", sans-serif;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: rgba(255, 255, 255, 0.85);
|
color: rgba(255, 255, 255, 0.85);
|
||||||
/*color: #FCFDF6;*/
|
|
||||||
font-weight: bold; }
|
font-weight: bold; }
|
||||||
header#head nav {
|
header#head nav {
|
||||||
padding: 0 0 30px 24px;
|
padding: 0 0 30px 24px;
|
||||||
|
|
|
||||||
|
|
@ -6,4 +6,5 @@
|
||||||
@import url("/static/stylesheets/content.css") all;
|
@import url("/static/stylesheets/content.css") all;
|
||||||
@import url("/static/stylesheets/content/tables.css") all;
|
@import url("/static/stylesheets/content/tables.css") all;
|
||||||
@import url("/static/stylesheets/content/lists.css") all;
|
@import url("/static/stylesheets/content/lists.css") all;
|
||||||
|
@import url("/static/stylesheets/content/character-sheet.css") all;
|
||||||
@import url("/static/stylesheets/foot.css") all;
|
@import url("/static/stylesheets/foot.css") all;
|
||||||
Loading…
Add table
Add a link
Reference in a new issue