Began implementing actual character sheet
This commit is contained in:
Thaum
@@ -0,0 +1,43 @@
|
||||
.abilityDetails {
|
||||
background-color: #ebe2d5;
|
||||
|
||||
position: absolute;
|
||||
|
||||
top: 0px;
|
||||
height: 300px;
|
||||
right: 0px;
|
||||
width: 160px;
|
||||
|
||||
z-index: 10;
|
||||
|
||||
background-color: #ebe2d5;
|
||||
|
||||
transition: right 0.3s ease;
|
||||
}
|
||||
|
||||
.stubHolder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
|
||||
position: absolute;
|
||||
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
width: 40px;
|
||||
left: -40px;
|
||||
}
|
||||
|
||||
.abilityStub {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
background-color: #ebe2d5;
|
||||
}
|
||||
|
||||
.abilityDetails.collapse{
|
||||
right: -160px;
|
||||
}
|
||||
|
||||
.abilityDetails.expand{
|
||||
right: 0px;
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
<template name="sideAbilities">
|
||||
<div class="abilityDetails {{expanded}}">
|
||||
<table>
|
||||
{{#if selected "strength"}}
|
||||
{{> skillRow name="Save" skill="strengthSave"}}
|
||||
{{> skillRow name="Athletics" skill="athletics"}}
|
||||
{{/if}}
|
||||
{{#if selected "dexterity"}}
|
||||
{{> skillRow name="Save" skill="dexteritySave"}}
|
||||
{{> skillRow name="Acrobatics" skill="acrobatics"}}
|
||||
{{> skillRow name="Sleight of Hand" skill="sleightOfHand"}}
|
||||
{{> skillRow name="Stealth" skill="stealth"}}
|
||||
{{/if}}
|
||||
{{#if selected "constitution"}}
|
||||
{{> skillRow name="Save" skill="constitutionSave"}}
|
||||
{{/if}}
|
||||
{{#if selected "intelligence"}}
|
||||
{{> skillRow name="Save" skill="intelligenceSave"}}
|
||||
{{> skillRow name="Arcana" skill="arcana"}}
|
||||
{{> skillRow name="History" skill="history"}}
|
||||
{{> skillRow name="Investigation" skill="investigation"}}
|
||||
{{> skillRow name="Nature" skill="nature"}}
|
||||
{{> skillRow name="Religion" skill="religion"}}
|
||||
{{/if}}
|
||||
{{#if selected "wisdom"}}
|
||||
{{> skillRow name="Save" skill="wisdomSave"}}
|
||||
{{> skillRow name="Animal Handling" skill="animalHandling"}}
|
||||
{{> skillRow name="Insight" skill="insight"}}
|
||||
{{> skillRow name="Medicine" skill="medicine"}}
|
||||
{{> skillRow name="Perception" skill="perception"}}
|
||||
{{> skillRow name="Survival" skill="survival"}}
|
||||
{{/if}}
|
||||
{{#if selected "charisma"}}
|
||||
{{> skillRow name="Save" skill="charismaSave"}}
|
||||
{{> skillRow name="Deception" skill="deception"}}
|
||||
{{> skillRow name="Intimidation" skill="intimidation"}}
|
||||
{{> skillRow name="Performance" skill="performance"}}
|
||||
{{> skillRow name="Persuasion" skill="persuasion"}}
|
||||
{{/if}}
|
||||
</table>
|
||||
<div class="stubHolder">
|
||||
<div class="strengthStub abilityStub">
|
||||
Str<br>{{abilityMod "strength"}}
|
||||
</div>
|
||||
<div class="dexterityStub abilityStub">
|
||||
Dex<br>{{abilityMod "dexterity"}}
|
||||
</div>
|
||||
<div class="constitutionStub abilityStub">
|
||||
Con<br>{{abilityMod "constitution"}}
|
||||
</div>
|
||||
<div class="intelligenceStub abilityStub">
|
||||
Int<br>{{abilityMod "intelligence"}}
|
||||
</div>
|
||||
<div class="wisdomStub abilityStub">
|
||||
Wis<br>{{abilityMod "wisdom"}}
|
||||
</div>
|
||||
<div class="charismaStub abilityStub">
|
||||
Cha<br>{{abilityMod "charisma"}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,38 @@
|
||||
Template.sideAbilities.created = function(){
|
||||
Template.instance().openedAbility = new ReactiveVar(null);
|
||||
};
|
||||
|
||||
Template.sideAbilities.helpers({
|
||||
openedAbility: function(){
|
||||
Template.instance().openedAbility.get();
|
||||
},
|
||||
selected: function(string){
|
||||
return Template.instance().openedAbility.get() === string;
|
||||
},
|
||||
expanded: function(){
|
||||
if(Template.instance().openedAbility.get() === null){
|
||||
return "collapse";
|
||||
} else{
|
||||
return "expand";
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var abilityOpener = function(ability){
|
||||
return function(){
|
||||
if(Template.instance().openedAbility.get() === ability){
|
||||
Template.instance().openedAbility.set(null);
|
||||
} else{
|
||||
Template.instance().openedAbility.set(ability);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
Template.sideAbilities.events({
|
||||
"click .strengthStub": abilityOpener("strength"),
|
||||
"click .dexterityStub": abilityOpener("dexterity"),
|
||||
"click .constitutionStub": abilityOpener("constitution"),
|
||||
"click .intelligenceStub": abilityOpener("intelligence"),
|
||||
"click .wisdomStub": abilityOpener("wisdom"),
|
||||
"click .charismaStub": abilityOpener("charisma")
|
||||
});
|
||||
@@ -0,0 +1,38 @@
|
||||
.profIcon{
|
||||
display: inline-block;
|
||||
width: 23px;
|
||||
height: 14px;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
table.skillTable td:nth-of-type(2) {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table.skillTable td:nth-of-type(3) {
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
td.fail {
|
||||
color: #AF0000;
|
||||
}
|
||||
|
||||
.advantage{
|
||||
background-image: url(/png/advantage/greenUp.png);
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.disadvantage{
|
||||
background-image: url(/png/advantage/redDown.png);
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
td.conditionals::after{
|
||||
content: "*";
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
<template name="skills">
|
||||
<h2>Saving Throws</h2>
|
||||
<table class="skillTable">
|
||||
{{#each saveList}}
|
||||
{{> skillRow}}
|
||||
{{/each}}
|
||||
</table>
|
||||
<h2>Skills</h2>
|
||||
<table class="skillTable">
|
||||
{{#each skillList}}
|
||||
{{> skillRow}}
|
||||
{{/each}}
|
||||
</table>
|
||||
</template>
|
||||
|
||||
<template name="skillRow">
|
||||
<tr>
|
||||
<td><div class="profIcon" style="background-image: url(/png/profIcons/{{profIcon skill}})"></div></td>
|
||||
{{#if failSkill}}
|
||||
<td class="fail">fail</td>
|
||||
{{else}}
|
||||
<td class="{{advantage}}">{{../skillMod skill}}</td>
|
||||
{{/if}}
|
||||
<td class={{conditionals}}>{{name}}</td>
|
||||
</tr>
|
||||
</template>
|
||||
@@ -0,0 +1,58 @@
|
||||
Template.skills.helpers({
|
||||
saveList: function(){
|
||||
return [
|
||||
{name: "Strength", skill: "strengthSave"},
|
||||
{name: "Dexterity", skill: "dexteritySave"},
|
||||
{name: "Constitution", skill: "constitutionSave"},
|
||||
{name: "Intelligence", skill: "intelligenceSave"},
|
||||
{name: "Wisdom", skill: "wisdomSave"},
|
||||
{name: "Charisma", skill: "charismaSave"}
|
||||
];
|
||||
},
|
||||
skillList: function(){
|
||||
return [
|
||||
{name: "Acrobatics", skill: "acrobatics"},
|
||||
{name: "Animal Handling", skill: "animalHandling"},
|
||||
{name: "Arcana", skill: "arcana"},
|
||||
{name: "Athletics", skill: "athletics"},
|
||||
{name: "Deception", skill: "deception"},
|
||||
{name: "History", skill: "history"},
|
||||
{name: "Insight", skill: "insight"},
|
||||
{name: "Intimidation", skill: "intimidation"},
|
||||
{name: "Investigation", skill: "investigation"},
|
||||
{name: "Medicine", skill: "medicine"},
|
||||
{name: "Nature", skill: "nature"},
|
||||
{name: "Perception", skill: "perception"},
|
||||
{name: "Performance", skill: "performance"},
|
||||
{name: "Persuasion", skill: "persuasion"},
|
||||
{name: "Religion", skill: "religion"},
|
||||
{name: "Sleight of Hand", skill: "sleightOfHand"},
|
||||
{name: "Stealth", skill: "stealth"},
|
||||
{name: "Survival", skill: "survival"}
|
||||
];
|
||||
}
|
||||
});
|
||||
|
||||
Template.skillRow.helpers({
|
||||
profIcon: function(skill){
|
||||
var prof = Template.parentData(1).proficiency(this.skill);
|
||||
if(prof > 0 && prof < 1) return "profHalf.png";
|
||||
if(prof === 1) return "profSingle.png";
|
||||
if(prof > 1) return "profDouble.png";
|
||||
return "profNone.png";
|
||||
},
|
||||
failSkill: function(){
|
||||
return Template.parentData(1).getField(this.skill).fail.length > 0;
|
||||
},
|
||||
advantage: function(){
|
||||
var adv = Template.parentData(1).getField(this.skill).advantage.length;
|
||||
var disadv = Template.parentData(1).getField(this.skill).disadvantage.length;
|
||||
if(adv > 0 && disadv === 0) return "advantage";
|
||||
if(disadv > 0 && adv === 0) return "disadvantage";
|
||||
},
|
||||
conditionals: function(){
|
||||
if(Template.parentData(1).getField(this.skill).conditional.length > 0){
|
||||
return "conditionals";
|
||||
}
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user