Added another custom character sheets containing hero details.

This commit is contained in:
phil 2013-07-17 16:56:07 +02:00
parent 0d5d03216a
commit df25ce900a
7 changed files with 275 additions and 132 deletions

View file

@ -0,0 +1,102 @@
---
layout: ikrpg
tags: [ Character Sheet, None, None ]
categories: [ Character-Sheet ]
---
<p>
<a href="/portal/Character-Sheet">Back to the Character Sheet main page</a>.
</p>
<h2>Usage</h2>
<ol>
<li><strong>Fill out</strong> the input fields of the character sheet.</li>
<li>Click the <strong>Save sheet to URL</strong> link below the sheet.</li>
<li><strong>Copy the URL</strong> and share it with your friends!</li>
</ol>
<div class="sheet">
<form id="details" class="card">
<input id="name" type="text" />
<div id="attributes">
<input id="playerName" type="text" />
<input id="careers" type="text" />
<input id="sex" type="text" />
<input id="archetype" type="text" />
<input id="race" type="text" />
<input id="definingCharacteristics" type="text" />
<input id="faith" type="text" />
<input id="weight" type="text" />
<input id="height" type="text" />
</div>
<div id="injuries">
<input id="injury1" type="text" />
<input id="injury2" type="text" />
<input id="injury3" type="text" />
</div>
<div id="beliefs">
<input id="belief1" type="text" />
<input id="belief2" type="text" />
<input id="belief3" type="text" />
</div>
<div id="connections">
<input id="connection1" type="text" />
<input id="connection2" type="text" />
<input id="connection3" type="text" />
<input id="connection4" type="text" />
</div>
<div id="languages">
<input id="language1" type="text" />
<input id="language2" type="text" />
<input id="language3" type="text" />
<input id="language4" type="text" />
<input id="language5" type="text" />
<input id="language6" type="text" />
<input id="language7" type="text" />
<input id="language8" type="text" />
</div>
</form>
</div>
<p>
<a href="javascript:hero.url();">Save sheet to URL</a>
</p>
<p class="right">
Thanks to XYZ for the Sheet!
</p>
<script type="text/javascript" src="/static/javascripts/heroic.js"></script>
<script type="text/javascript">
var hero = new Heroic({
"name": "Hero's name",
"archetype": "Archetype",
"race": "Race",
"careers": "Careers",
"playerName": "Player's Name",
"sex":"sex",
"definingCharacteristics": "Defining Characteristics",
"faith": "Faith",
"weight": "Weight",
"height": "Height",
"injury1": "Injury 1",
"injury2": "Injury 2",
"injury3": "...",
"belief1": "Religious Belief 1",
"belief2": "Religious Belief 2",
"belief3": "...",
"connection1": "Connection 1",
"connection2": "Connection 2",
"connection3": "...",
"connection4": "",
"language1": "Language 1",
"language2": "Language 2",
"language3": "...",
"language4": "",
"language5": "",
"language6": "",
"language7": "",
"language8": ""
});
hero.bind();
</script>

View file

@ -105,9 +105,11 @@ categories: [ Character-Sheet ]
<input title="XP" id="xp" type="text" /> <input title="XP" id="xp" type="text" />
</form> </form>
</div> </div>
<p> <p>
<a href="javascript:hero.url();">Save sheet to URL</a> <a href="javascript:hero.url();">Save sheet to URL</a>
</p> </p>
<script type="text/javascript" src="/static/javascripts/heroic.js"></script> <script type="text/javascript" src="/static/javascripts/heroic.js"></script>
<script type="text/javascript"> <script type="text/javascript">
var hero = new Heroic({ var hero = new Heroic({
@ -142,7 +144,6 @@ categories: [ Character-Sheet ]
"arm_mod": 0, "arm_mod": 0,
"cmd_mod": 0, "cmd_mod": 0,
"xp": 0, "xp": 0,
"hash": "stats",
"r1m1": true, "r1m1": true,
"r2m1": false, "r2m1": false,
"r1m2": false, "r1m2": false,

View file

@ -9,9 +9,9 @@ tags:
--- ---
<p> <p>
The character sheet is composed of the <em>Stats page</em>, the <em>Skills page</em>, the Our custom character sheet is composed of the <em>Stats page</em>, the <em>Skills page</em>, the
<em>Benefits page</em>, the <em>Abilities page</em>, the <em>Spells page</em>, the <em>Gear page</em> <em>Benefits page</em>, the <em>Abilities page</em>, the <em>Spells page</em>, the <em>Gear page</em>,
and the <em>Notes page</em>. the <em>Notes page</em> and the <em>Details page</em>.
</p> </p>
<h2>Character sheets</h2> <h2>Character sheets</h2>
@ -23,6 +23,7 @@ tags:
<li><a href="/character-sheet/Spells">Spells</a></li> <li><a href="/character-sheet/Spells">Spells</a></li>
<li><a href="/character-sheet/Gear">Gear</a></li> <li><a href="/character-sheet/Gear">Gear</a></li>
<li><a href="/character-sheet/Notes">Notes</a></li> <li><a href="/character-sheet/Notes">Notes</a></li>
<li><a href="/character-sheet/Details">Details</a></li>
</ul> </ul>
<h2>Example</h2> <h2>Example</h2>

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

View file

@ -66,142 +66,144 @@ function Heroic(Hero) {
}; };
var initialize = function() { var initialize = function() {
var textareas = document.querySelectorAll("textarea"); var textareas = document.querySelectorAll("textarea");
var fillOut = function(attribute, value) { var fillOut = function(attribute, value) {
if (isString(value) || isNumber(value)) { if (isString(value) || isNumber(value)) {
var element = document.querySelector("input#"+attribute); var element = document.querySelector("input#"+attribute);
if (element != null && isDefined(element.value)) { if (element != null && isDefined(element.value)) {
element.value = value; element.value = value;
if (element.nodeName == "TEXTAREA") resizeTextarea(element)(); 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);
addListener(input, "change", updateSearchString);
}
} 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(); }
}
};
var setPortrait = function(hero) {
var portrait = hero["portrait"]
, portraitDiv = document.querySelector("#portrait");
if (portrait && portraitDiv) {
var url = portrait["url"]
, x = portrait["x"]
, y = portrait["y"]
, size = portrait["size"];
if (url != null && x != null && y != null && size != null) {
var sheet = document.querySelector("div.sheet");
if (sheet) {
sheet.style["backgroundImage"] = "url("+url+")";
sheet.style["backgroundPosition"] = x+"px "+y+"px";
sheet.style["backgroundSize"] = size == "auto" ? "auto" : size+"px";
} }
} 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);
addListener(input, "change", updateSearchString);
}
} 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(); }
}
};
var setPortrait = function(hero) {
var portrait = hero["portrait"]
, portraitDiv = document.querySelector("#portrait");
if (portrait && portraitDiv) {
var url = portrait["url"]
, x = portrait["x"]
, y = portrait["y"]
, size = portrait["size"];
if (url != null && x != null && y != null && size != null) {
var sheet = document.querySelector("div.sheet");
if (sheet) {
sheet.style["backgroundImage"] = "url("+url+")";
sheet.style["backgroundPosition"] = x+"px "+y+"px";
sheet.style["backgroundSize"] = isNaN(parseInt(size, 10)) ? size : size+"px";
} }
} }
}; }
};
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]); }
setPortrait(Hero);
focusLastInput(Hero);
//var names = document.querySelectorAll("section > input.name");
//for (name in names) { names[name].value = Hero["name"]; }
var displayPortrait = function(portrait, value, pointerEvent) { for (var i = 0; i < textareas.length; i++) { autoresizableTextarea(textareas[i]); }
return function(event) { showWeapons(Hero);
event.preventDefault(); for (attribute in Hero) { fillOut(attribute, Hero[attribute]); }
event.stopPropagation(); for (attribute in Hero) { saveOnChange(attribute, Hero[attribute]); }
var inputs = portrait.querySelectorAll("input"); setPortrait(Hero);
focusLastInput(Hero);
for (var index = 0; index < inputs.length; index++) {
var input = inputs.item(index); //var names = document.querySelectorAll("section > input.name");
input.style["display"] = value; //for (name in names) { names[name].value = Hero["name"]; }
portrait.style["pointerEvents"] = pointerEvent;
} var displayPortrait = function(portrait, value, pointerEvent) {
}; return function(event) {
event.preventDefault();
event.stopPropagation();
var inputs = portrait.querySelectorAll("input");
for (var index = 0; index < inputs.length; index++) {
var input = inputs.item(index);
input.style["display"] = value;
portrait.style["pointerEvents"] = pointerEvent;
}
}; };
var portrait = document.querySelector("#portrait") };
, button = portrait.querySelector("input[type='button']");
var portrait = document.querySelector("#portrait");
if (portrait != null) {
addListener(portrait, "click", displayPortrait(portrait, "block", "none")); addListener(portrait, "click", displayPortrait(portrait, "block", "none"));
var button = portrait.querySelector("input[type='button']");
addListener(button, "click", function(event) { displayPortrait(portrait, "none", "auto")(event); setPortrait(Hero); }); addListener(button, "click", function(event) { displayPortrait(portrait, "none", "auto")(event); setPortrait(Hero); });
}
redirect(); redirect();
}; };
document.addEventListener("DOMContentLoaded", initialize, false); document.addEventListener("DOMContentLoaded", initialize, false);

View file

@ -6,6 +6,8 @@ section.content {
section.content > p { section.content > p {
margin: 1.5em 0; margin: 1.5em 0;
text-align: justify; } text-align: justify; }
section.content > p.right {
text-align: right; }
section.content > h2 { section.content > h2 {
font-size: 1.5em; font-size: 1.5em;
margin-bottom: -0.5em; margin-bottom: -0.5em;

View file

@ -121,6 +121,41 @@ div.sheet > form#notes div.content div.note { position: relative; }
div.sheet > form#notes div.content div.note input.title { position: relative; width: 658px; font-size: 17px; text-transform: uppercase; font-weight: bold; } div.sheet > form#notes div.content div.note input.title { position: relative; width: 658px; font-size: 17px; text-transform: uppercase; font-weight: bold; }
div.sheet > form#notes div.content div.note textarea.text { position: relative; width: 658px; height: auto; font-size: 17px; } div.sheet > form#notes div.content div.note textarea.text { position: relative; width: 658px; height: auto; font-size: 17px; }
div.sheet > form#details { padding-top: 66px; background-image: url(/static/images/sheet/Details.png); background-size: contain; }
div.sheet > form#details input#name { top: 46px; left: 180px; height: 45px; width: 485px; font-size: 37px; text-transform: uppercase; }
div.sheet > form#details div#attributes { top: 143px; left: 275px; }
div.sheet > form#details div#attributes > input#playerName { width: 375px; }
div.sheet > form#details div#attributes > input#careers { top: 57px; width: 270px; }
div.sheet > form#details div#attributes > input#sex { top: 57px; left: 288px; width: 73px; }
div.sheet > form#details div#attributes > input#archetype { top: 112px; width: 190px; }
div.sheet > form#details div#attributes > input#race { top: 112px; left: 210px; width: 150px; }
div.sheet > form#details div#attributes > input#definingCharacteristics { top: 167px; width: 350px; }
div.sheet > form#details div#attributes > input#faith { top: 222px; width: 190px; }
div.sheet > form#details div#attributes > input#weight { top: 222px; left: 200px; width: 190px; }
div.sheet > form#details div#attributes > input#height { top: 277px; width: 190px; }
div.sheet > form#details div#injuries { top: 500px; left: 270px; }
div.sheet > form#details div#injuries > input { width: 390px; }
div.sheet > form#details div#injuries > input#injury2 { top: 31px; }
div.sheet > form#details div#injuries > input#injury3 { top: 62px; }
div.sheet > form#details div#beliefs { top: 642px; left: 270px; }
div.sheet > form#details div#beliefs > input { width: 390px; }
div.sheet > form#details div#beliefs > input#belief2 { top: 31px; }
div.sheet > form#details div#beliefs > input#belief3 { top: 62px; }
div.sheet > form#details div#connections { top: 805px; left: 270px; }
div.sheet > form#details div#connections > input { width: 390px; }
div.sheet > form#details div#connections > input#connection2 { top: 28px; }
div.sheet > form#details div#connections > input#connection3 { top: 56px; }
div.sheet > form#details div#connections > input#connection4 { top: 84px; }
div.sheet > form#details div#languages { top: 205px; left: 33px; }
div.sheet > form#details div#languages > input { width: 230px; }
div.sheet > form#details div#languages > input#language2 { top: 31px; }
div.sheet > form#details div#languages > input#language3 { top: 62px; }
div.sheet > form#details div#languages > input#language4 { top: 93px; }
div.sheet > form#details div#languages > input#language5 { top: 124px; }
div.sheet > form#details div#languages > input#language6 { top: 155px; }
div.sheet > form#details div#languages > input#language7 { top: 186px; }
div.sheet > form#details div#languages > input#language8 { top: 217px; }
@media print { @media print {
section.content > div.sheet { display: block; -webkit-transform: scale(0.4); -o-transform: scale(0.4); transform: scale(0.4); } section.content > div.sheet { display: block; -webkit-transform: scale(0.4); -o-transform: scale(0.4); transform: scale(0.4); }
} }