mirror of
https://github.com/ikrpg/ikrpg.github.io.git
synced 2026-05-13 14:27:22 +00:00
Added another custom character sheets containing hero details.
This commit is contained in:
phil
parent
0d5d03216a
commit
df25ce900a
7 changed files with 275 additions and 132 deletions
BIN
static/images/sheet/Details.png
Normal file
BIN
static/images/sheet/Details.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
|
|
@ -66,142 +66,144 @@ function Heroic(Hero) {
|
|||
};
|
||||
|
||||
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);
|
||||
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";
|
||||
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);
|
||||
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) {
|
||||
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;
|
||||
}
|
||||
};
|
||||
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) {
|
||||
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"));
|
||||
var button = portrait.querySelector("input[type='button']");
|
||||
addListener(button, "click", function(event) { displayPortrait(portrait, "none", "auto")(event); setPortrait(Hero); });
|
||||
}
|
||||
|
||||
redirect();
|
||||
redirect();
|
||||
};
|
||||
|
||||
document.addEventListener("DOMContentLoaded", initialize, false);
|
||||
|
|
|
|||
|
|
@ -6,6 +6,8 @@ section.content {
|
|||
section.content > p {
|
||||
margin: 1.5em 0;
|
||||
text-align: justify; }
|
||||
section.content > p.right {
|
||||
text-align: right; }
|
||||
section.content > h2 {
|
||||
font-size: 1.5em;
|
||||
margin-bottom: -0.5em;
|
||||
|
|
|
|||
|
|
@ -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 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 {
|
||||
section.content > div.sheet { display: block; -webkit-transform: scale(0.4); -o-transform: scale(0.4); transform: scale(0.4); }
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue