jschaufuss/DiceCloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implemented skill list

Browse Source 
Proficiency icons
(dis)advantage icons
asterisks for conditionals
"auto fail" notification
better looking border art
This commit is contained in:
Thaum
2014-11-06 11:58:46 +00:00
parent 58fea9d6a1
commit 071f48831e
15 changed files with 149 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
rpg-docs/client/views/character/character.css
View File

@@ -1,6 +1,7 @@
.flexContainer {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
#abilityScores {
@@ -14,12 +15,16 @@
.floatBox{
color: #301d02;
/*Fancy image border*/
border-image-width: 92px 60px 57px 60px;
border-image-outset: 15px;
border-image-source: url('/png/big-border.png');
border-image-slice: 275 179 171 179;
border-image-repeat: stretch;
/*Shadow*/
box-shadow: 0px 5px 20px rgba(0, 0, 0, 1);
padding: 0px 5px 5px 5px;
margin: 15px;
background: #f0e3d1;

2
rpg-docs/client/views/character/character.html
View File

@@ -11,7 +11,7 @@
Proficiency Bonus {{proficiencyBonus}}
</div>
<div id="savesAndSkills" class="floatBox">
{{> savesAndSkills}}
{{> skills}}
</div>
</div>
<div id="stats" class="flexItem">

2
rpg-docs/client/views/character/healthBar/healthBar.css
View File

@@ -34,7 +34,7 @@
top: 2px;
height: 26px;
border-radius: 15px;
background-color: #AF6700;
background-color: #CA9548;
}
.healthBarBorder{

52
rpg-docs/client/views/character/savesAndSkills.html
View File

@@ -1,52 +0,0 @@
<template name="savesAndSkills">
<h2>Saving Throws</h2>
<div>
Strength Save {{skillMod skills.strengthSave}}
</div><div>
Dexterity Save {{skillMod skills.dexteritySave}}
</div><div>
Constitution Save {{skillMod skills.constitutionSave}}
</div><div>
Intelligence Save {{skillMod skills.intelligenceSave}}
</div><div>
Wisdom Save {{skillMod skills.wisdomSave}}
</div><div>
Charisma Save {{skillMod skills.charismaSave}}
</div>
<h2>Skills</h2>
<div>
Acrobatics {{skillMod skills.acrobatics}}
</div><div>
Animal Handling {{skillMod skills.animalHandling}}
</div><div>
Arcana {{skillMod skills.arcana}}
</div><div>
Athletics {{skillMod skills.athletics}}
</div><div>
Deception {{skillMod skills.deception}}
</div><div>
History {{skillMod skills.history}}
</div><div>
Insight {{skillMod skills.insight}}
</div><div>
Intimidation {{skillMod skills.intimidation}}
</div><div>
Investigation {{skillMod skills.investigation}}
</div><div>
Medicine {{skillMod skills.medicine}}
</div><div>
Nature {{skillMod skills.nature}}
</div><div>
Perception {{skillMod skills.perception}}
</div><div>
Persuasion {{skillMod skills.persuasion}}
</div><div>
Religion {{skillMod skills.religion}}
</div><div>
Sleight of Hand {{skillMod skills.sleightOfHand}}
</div><div>
Stealth {{skillMod skills.stealth}}
</div><div>
Survival {{skillMod skills.survival}}
</div>
</template>

38
rpg-docs/client/views/character/skills/skills.css Normal file
View File

@@ -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: "*";
}

30
rpg-docs/client/views/character/skills/skills.html Normal file
View File

@@ -0,0 +1,30 @@
<template name="skills">
<h2>Saving Throws</h2>
<table class="skillTable">
{{#each saveList}}
<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>
{{/each}}
</table>
<h2>Skills</h2>
<table class="skillTable">
{{#each skillList}}
<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>
{{/each}}
</table>
</template>

53
rpg-docs/client/views/character/skills/skills.js Normal file
View File

@@ -0,0 +1,53 @@
Template.skills.helpers({
saveList: function(){
return [
{name: "Strength", skill: this.skills.strengthSave},
{name: "Dexterity", skill: this.skills.dexteritySave},
{name: "Constitution", skill: this.skills.constitutionSave},
{name: "Intelligence", skill: this.skills.intelligenceSave},
{name: "Wisdom", skill: this.skills.wisdomSave},
{name: "Charisma", skill: this.skills.charismaSave}
];
},
skillList: function(){
return [
{name: "Acrobatics", skill: this.skills.acrobatics},
{name: "Animal Handling", skill: this.skills.animalHandling},
{name: "Arcana", skill: this.skills.arcana},
{name: "Athletics", skill: this.skills.athletics},
{name: "Deception", skill: this.skills.deception},
{name: "History", skill: this.skills.history},
{name: "Insight", skill: this.skills.insight},
{name: "Intimidation", skill: this.skills.intimidation},
{name: "Investigation", skill: this.skills.investigation},
{name: "Medicine", skill: this.skills.medicine},
{name: "Nature", skill: this.skills.nature},
{name: "Perception", skill: this.skills.perception},
{name: "Performance", skill: this.skills.performance},
{name: "Persuasion", skill: this.skills.persuasion},
{name: "Religion", skill: this.skills.religion},
{name: "Sleight of Hand", skill: this.skills.sleightOfHand},
{name: "Stealth", skill: this.skills.stealth},
{name: "Survival", skill: this.skills.survival}
];
},
profIcon: function(skill){
var prof = Template.parentData(1).proficiency(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 this.skill.fail.length > 0;
},
advantage: function(){
var adv = this.skill.advantage.length;
var disadv = this.skill.disadvantage.length;
if(adv > 0 && disadv === 0) return "advantage";
if(disadv > 0 && adv === 0) return "disadvantage";
},
conditionals: function(){
if(this.skill.conditional.length > 0) return "conditionals";
}
});

2
rpg-docs/client/views/general.css
View File

@@ -4,5 +4,5 @@ root {
body {
font-family: sans-serif;
background-color: #333;
background: #201500;
}