Initial commit - not usable

Still working on the scripting and layout.
This commit is contained in:
Alexander Yakovlev 2012-11-05 19:13:05 +07:00
commit d6f568dc7a
6 changed files with 349 additions and 0 deletions

2
Makefile Normal file
View File

@ -0,0 +1,2 @@
all:
lessc style.less >style.css

9
README.md Normal file
View File

@ -0,0 +1,9 @@
It's a simple character generator for my tabletop RPG system.
My system has close resemblance to the SPECIAL system (Fallout 2) :-) but still there are differences. The generator is flexible and is quick to configure for any similar set of rules.
Used libraries: [jQuery](http://jquery.com), [LESS](http://www.lesscss.org).
Texture by webtreats: http://www.flickr.com/photos/webtreatsetc/4081217898/ (CC-BY 2.0)
Text is in Russian, but code should be obvious.

BIN
bgr.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 434 KiB

79
chargen.html Normal file
View File

@ -0,0 +1,79 @@
<!DOCTYPE html>
<html lang="ru"><head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<title>Генератор персонажа</title>
<link rel="stylesheet" media="all" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<div id="wrapper_overview">
<div class="group" id="specials"></div>
<div class="group" id="derived"></div>
<div id="skills" class="group">
<div class="parameter">
<div class="name"><input type="checkbox">Энергетическое Оружие</div>
<div class="value" id="energy_weapons"></div>
</div>
<div class="parameter">
<div class="name">Огнестрельное Оружие</div>
<div class="value" id="guns"></div>
</div>
<div class="parameter">
<div class="name">Стрельба из лука</div>
<div class="value" id="archery"></div>
</div>
<div class="parameter">
<div class="name">Холодное оружие</div>
<div class="value" id="melee"></div>
</div>
<div class="parameter">
<div class="name">Рукопашный бой</div>
<div class="value" id="unarmed"></div>
</div>
<div class="parameter">
<div class="name">Метание</div>
<div class="value" id="throwing"></div>
</div>
<div class="parameter">
<div class="name">Взлом</div>
<div class="value" id="lockpick"></div>
</div>
<div class="parameter">
<div class="name">Медицина</div>
<div class="value" id="first_aid"></div>
</div>
<div class="parameter">
<div class="name">Ремонт</div>
<div class="value" id="repair"></div>
</div>
<div class="parameter">
<div class="name">Наука</div>
<div class="value" id="science"></div>
</div>
<div class="parameter">
<div class="name">Скрытность</div>
<div class="value" id="stealth"></div>
</div>
<div class="parameter">
<div class="name">Выступление</div>
<div class="value" id="performance"></div>
</div>
<div class="parameter">
<div class="name">Выживание</div>
<div class="value" id="survival"></div>
</div>
<div class="parameter">
<div class="name">Обращение с животными</div>
<div class="value" id="animal_handling"></div>
</div>
<div class="parameter">
<div class="name">Вождение</div>
<div class="value" id="driving"></div>
</div>
</div>
</div>
</body>
</html>

100
script.js Normal file
View File

@ -0,0 +1,100 @@
function parameter(id, name, value) {
if (typeof value === 'undefined') {
value = 5;
}
return {
id: id,
name: name,
value: value
};
}
parameter.prototype.increment = function () {
this.value = this.value + 1;
};
parameter.prototype.decrement = function () {
this.value = this.value - 1;
};
function positive(value) {
if (value < 1) return 1;
else return value;
}
var options = {
specials: {
strength: parameter('strength', 'Сила'),
endurance: parameter('endurance', 'Выносливость'),
charisma: parameter('charisma', 'Обаяние'),
intelligence: parameter('intelligence', 'Интеллект'),
agility: parameter('agility', 'Ловкость'),
luck: parameter('luck', 'Удача'),
},
special_points: 5,
skills_to_tag: 3,
derived: [
parameter('action_points','Очки действий', function(specials){
return Math.floor(5 + specials.agility.value * 0.5);
}),
parameter('carry_weight','Максимальный вес, кг', function(specials){
return 6 + specials.strength.value * 10;
}),
parameter('critical_chance','Критический шанс, %', function(specials){
return specials.luck.value;
}),
parameter('hit_points','Очки Здоровья', function(specials){
return 15 + specials.strength.value + specials.endurance.value * 2;
}),
parameter('skill_points','Очки навыков на уровень', function(specials){
return 5 + specials.intelligence.value * 2;
}),
parameter('combat_sequence','Очерёдность в бою', function(specials){
return Math.floor(specials.agility.value + (specials.luck.value + specials.strength.value) * 0.5);
}),
parameter('healing_rate','Скорость лечения', function(specials){
return specials.endurance.value + 6;
}),
parameter('throwing_range','Дальность броска, м', function(specials){
return specials.strength.value + 6;
}),
parameter('poison_resistance','Сопротивление яду, %', function(specials){
return specials.endurance.value * 5;
}),
parameter('radiation_resistance','Сопротивление радиации, %', function(specials){
return specials.endurance.value * 2;
}),
parameter('armor_class','Базовый класс брони', function(specials){
return specials.agility.value;
}),
parameter('melee_damage','Рукопашный урон', function(specials){
return positive(specials.strength.value - 5);
})
],
skills: {
}
};
function rewrite_value(newvalue) {
jQuery(this).siblings(".value").text(newvalue);
}
function update_derived() {
var i = 0;
jQuery('#derived').empty();
for (i = 0; i < options.derived.length; i++) {
jQuery('#derived').append('<div class="parameter"><div class="value" id="' + options.derived[i].id + '"> '+ options.derived[i].value(options.specials) + ' </div></div><div class="name">' + options.derived[i].name + '</div>');
}
}
jQuery(document).ready(function () {
var i = 0;
objects = ['strength', 'endurance', 'charisma', 'intelligence', 'agility', 'luck'];
for (i = 0; i < objects.length; i++) {
jQuery('#specials').append('<div class="parameter"><a class="decrement" href="#"></a><div class="value" id="' + options.specials[objects[i]].id + '"> '+ options.specials[objects[i]].value + ' </div><a class="increment" href="#">+</a></div><div class="name">' + options.specials[objects[i]].name + '</div>');
}
update_derived();
jQuery('#specials .increment').click(function () {
for (i = 0; i < objects.length; i++) {
if (options.specials[objects[i]].id === jQuery(this).id) {
options.specials[objects[i]].increment();
rewrite_value(options.specials[objects[i]].value);
}
}
update_derived();
});
});

159
style.less Normal file
View File

@ -0,0 +1,159 @@
@font-size: 18; //in pixels
@column: 30;
@gutter: 10;
@columns: 12;
//@total-width: 100%;
// from Frameless - http://framelessgrid.com/
.width (@cols:1) {
width: (@cols * (@column + @gutter) - @gutter) / @font-size * 1em;
}
/*
Margin, padding, and border resets
except for form elements
*/
body, div,
h1, h2, h3, h4, h5, h6,
p, blockquote, pre, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, th, td,
article, aside, figure, footer, header, hgroup, menu, nav, section {
margin: 0;
padding: 0;
border: 0;
}
/*
Consistency fixes
adopted from http://necolas.github.com/normalize.css/
*/
article, aside, details, figcaption, figure,
footer, header, hgroup, nav, section, audio, canvas, video {
display: block;
}
html {
height: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {min-height: 100%; font-size: 100%;}
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {top: -0.5em;}
sub {bottom: -0.25em;}
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}
b, strong {font-weight: bold;}
abbr[title] {border-bottom: 1px dotted;}
table {
border-collapse: collapse;
border-spacing: 0;
}
a img, img {
-ms-interpolation-mode: bicubic;
border: 0;
}
input, textarea, button, select {
margin: 0;
font-size: 100%;
line-height: normal;
vertical-align: baseline;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
cursor: pointer;
-webkit-appearance: button;
}
input[type="checkbox"],
input[type="radio"] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
textarea {overflow: auto;}
#wrapper_overview{
margin: 1em auto;
.width(20);
}
.group{
.width(10);
.parameter{
.width(2);
display: inline-block;
.value{
display: inline;
}
}
.name{
.width(8);
display: inline-block;
}
}
.invert(left){
text-align: right;
}
.invert(right){
text-align: left;
}
.align(@x) {
float: @x;
.value{
text-align: @x;
}
.name{
.invert(@x);
}
}
#specials, #skills{
.align(left);
}
#derived{
.align(right);
}
.increment, .decrement{
visibility: visible;
}
#skills{
/* checkboxes! */
}
/* Colors */
@text: #be008a;
@background: #7c005a;
@links: #df64bd;
body{
background: url('bgr.jpg');
color: @text;
}
a {
color: @links;
}