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

Finished colourful ability score cards

Browse Source
This commit is contained in:
Thaum
2014-11-28 12:05:25 +00:00
parent 5945ff2bd6
commit f018a5f3a3
15 changed files with 579 additions and 375 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
rpg-docs/client/views/character/SideAbilities/skills/skills.css
View File

@@ -1,42 +0,0 @@
.profIcon{
display: inline-block;
width: 23px;
height: 14px;
background-size: contain;
background-repeat: no-repeat;
position: relative;
top: 1px;
/*TODO fix the actual images and remove inversion*/
-webkit-filter: invert(100%);
opacity: 0.54;
}
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: "*";
}

22
rpg-docs/client/views/character/Stats/stats.css
View File

@@ -1,6 +1,22 @@
#stats{
#stats {
padding: 4px;
}
#stats, #stats .abilityFlex, #stats .statsFlex{
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
align-items: flex-start;
flex-wrap: wrap;
}
#stats .abilityFlex{
flex-basis: 642px;
flex-grow: 1;
flex-shrink: 1;
}
#stats .statsFlex{
min-width: 152px;
flex-basis: 0px;
flex-grow: 1;
}

148
rpg-docs/client/views/character/Stats/stats.html
View File

@@ -1,80 +1,84 @@
<template name="stats">
<div id="stats">
{{> abilityCards}}
<paper-shadow class="card" id="armor">
<h1>{{attributeValue "armor"}}</h1>
<p class="caption">Armor</p>
</paper-shadow>
<paper-shadow class="card" id="initiative">
<h1>{{skillMod "initiative"}}</h1>
<p class="caption">Initiative</p>
</paper-shadow>
<paper-shadow class="card" id="proficiencyBonus">
<h1>{{attributeValue "proficiencyBonus"}}</h1>
<p class="caption">Proficiency Bonus</p>
</paper-shadow>
<paper-shadow class="card" id="speed">
<h1>{{attributeValue "speed"}}</h1>
<p class="caption">Speed</p>
</paper-shadow>
<paper-shadow class="card" id="passivePerception">
<h1>{{passiveSkill "perception"}}</h1>
<p class="caption">Passive Perception</p>
</paper-shadow>
<paper-shadow class="card" id="hitDice">
<h1>{{> hitDice hitDice="d6HitDice" d="6"}}</h1>
<h1>{{> hitDice hitDice="d8HitDice" d="8"}}</h1>
<h1>{{> hitDice hitDice="d10HitDice" d="10"}}</h1>
<h1>{{> hitDice hitDice="d12HitDice" d="12"}}</h1>
<p class="caption">Hit Dice</p>
</paper-shadow>
{{# if canCast}}
<paper-shadow class="card" id="spellSlots">
<h1>{{> spellSlots}}</h1>
<p class="caption">Spell Slots</p>
</paper-shadow>
{{/if}}
{{# if attributeBase "rages"}}
<paper-shadow class="card" id="rages">
<h1>{{attributeValue "rages"}}</h1>
<p class="caption">rages</p>
</paper-shadow>
{{/if}}
{{# if attributeBase "sorceryPoints"}}
<paper-shadow class="card" id="sorceryPoints">
<h1>{{attributeValue "sorceryPoints"}}</h1>
<p class="caption">Sorcery Points</p>
</paper-shadow>
{{/if}}
{{# if attributeBase "expertiseDice"}}
<paper-shadow class="card" id="expertiseDice">
<h1>{{attributeValue "expertiseDice"}}</h1>
<p class="caption">Expertise Dice</p>
</paper-shadow>
{{/if}}
{{# if attributeBase "superiorityDice"}}
<paper-shadow class="card" id="superiorityDice">
<h1>{{attributeValue "superiorityDice"}}</h1>
<p class="caption">Superiority Dice</p>
</paper-shadow>
{{/if}}
</div>
<div id="stats">
<div class="abilityFlex">
{{> abilityCards}}
</div>
<div class="statsFlex">
<paper-shadow class="card" id="armor">
<h1>{{attributeValue "armor"}}</h1>
<p class="caption">Armor</p>
</paper-shadow>
<paper-shadow class="card" id="initiative">
<h1>{{skillMod "initiative"}}</h1>
<p class="caption">Initiative</p>
</paper-shadow>
<paper-shadow class="card" id="proficiencyBonus">
<h1>{{attributeValue "proficiencyBonus"}}</h1>
<p class="caption">Proficiency Bonus</p>
</paper-shadow>
<paper-shadow class="card" id="speed">
<h1>{{attributeValue "speed"}}</h1>
<p class="caption">Speed</p>
</paper-shadow>
<paper-shadow class="card" id="passivePerception">
<h1>{{passiveSkill "perception"}}</h1>
<p class="caption">Passive Perception</p>
</paper-shadow>
<paper-shadow class="card" id="hitDice">
<h1>{{> hitDice hitDice="d6HitDice" d="6"}}</h1>
<h1>{{> hitDice hitDice="d8HitDice" d="8"}}</h1>
<h1>{{> hitDice hitDice="d10HitDice" d="10"}}</h1>
<h1>{{> hitDice hitDice="d12HitDice" d="12"}}</h1>
<p class="caption">Hit Dice</p>
</paper-shadow>
{{# if canCast}}
<paper-shadow class="card" id="spellSlots">
<h1>{{> spellSlots}}</h1>
<p class="caption">Spell Slots</p>
</paper-shadow>
{{/if}}
{{# if attributeBase "rages"}}
<paper-shadow class="card" id="rages">
<h1>{{attributeValue "rages"}}</h1>
<p class="caption">rages</p>
</paper-shadow>
{{/if}}
{{# if attributeBase "sorceryPoints"}}
<paper-shadow class="card" id="sorceryPoints">
<h1>{{attributeValue "sorceryPoints"}}</h1>
<p class="caption">Sorcery Points</p>
</paper-shadow>
{{/if}}
{{# if attributeBase "expertiseDice"}}
<paper-shadow class="card" id="expertiseDice">
<h1>{{attributeValue "expertiseDice"}}</h1>
<p class="caption">Expertise Dice</p>
</paper-shadow>
{{/if}}
{{# if attributeBase "superiorityDice"}}
<paper-shadow class="card" id="superiorityDice">
<h1>{{attributeValue "superiorityDice"}}</h1>
<p class="caption">Superiority Dice</p>
</paper-shadow>
{{/if}}
</div>
</div>
</template>
<template name="hitDice">
{{# if ../attributeBase hitDice}}
{{../attributeValue hitDice}}d{{d}} + {{../abilityMod "constitution"}}
{{/if}}
{{# if ../attributeBase hitDice}}
{{../attributeValue hitDice}}d{{d}} + {{../abilityMod "constitution"}}
{{/if}}
</template>
<template name="spellSlots">
{{attributeValue "level1SpellSlots"}}
{{attributeValue "level2SpellSlots"}}
{{attributeValue "level3SpellSlots"}}
{{attributeValue "level4SpellSlots"}}
{{attributeValue "level5SpellSlots"}}
{{attributeValue "level6SpellSlots"}}
{{attributeValue "level7SpellSlots"}}
{{attributeValue "level8SpellSlots"}}
{{attributeValue "level9SpellSlots"}}
{{attributeValue "level1SpellSlots"}}
{{attributeValue "level2SpellSlots"}}
{{attributeValue "level3SpellSlots"}}
{{attributeValue "level4SpellSlots"}}
{{attributeValue "level5SpellSlots"}}
{{attributeValue "level6SpellSlots"}}
{{attributeValue "level7SpellSlots"}}
{{attributeValue "level8SpellSlots"}}
{{attributeValue "level9SpellSlots"}}
</template>

30
rpg-docs/client/views/character/abilityCards/abilityCards.css
View File

@@ -0,0 +1,30 @@
.card.double {
display: flex;
}
.card.double > div{
vertical-align: top;
padding: 16px;
}
.abilityScore {
width: 70px;
text-align: center;
background-color: #D50000;
padding: 16px;
}
.abilityFlex .card {
padding: 0;
}
.abilityCardRight {
flex-grow: 1;
}
.abilityCardRight hr{
margin: 8px -16px;
}
.abilityCardRight h1{
margin-bottom: 8px;
}

168
rpg-docs/client/views/character/abilityCards/abilityCards.html
View File

@@ -1,98 +1,110 @@
<template name="abilityCards">
{{> strengthCard}}
{{> dexterityCard}}
{{> constitutionCard}}
{{> intelligenceCard}}
{{> wisdomCard}}
{{> charismaCard}}
{{> strengthCard}}
{{> dexterityCard}}
{{> constitutionCard}}
{{> intelligenceCard}}
{{> wisdomCard}}
{{> charismaCard}}
</template>
<template name="strengthCard">
<paper-shadow class="card double">
<h1>Strength</h1>
<h1>{{attributeValue "strength"}}</h1>
<h2>{{abilityMod "strength"}}</h2>
<hr>
<table>
{{> skillRow name="Strength Save" skill="strengthSave"}}
{{> skillRow name="Athletics" skill="athletics"}}
</table>
</paper-shadow>
<paper-shadow class="card double">
<div class="abilityScore red white-text">
<h1 class="display1">{{attributeValue "strength"}}</h1>
<h2>{{abilityMod "strength"}}</h2>
</div>
<div class="abilityCardRight">
<h1>Strength</h1>
{{> skillRow name="Save" skill="strengthSave"}}
<hr>
{{> skillRow name="Athletics" skill="athletics"}}
</div>
</paper-shadow>
</template>
<template name="dexterityCard">
<paper-shadow class="card double">
<h1>Dexterity</h1>
<h1>{{attributeValue "dexterity"}}</h1>
<h2>{{abilityMod "dexterity"}}</h2>
<hr>
<table>
{{> skillRow name="Dexterity Save" skill="dexteritySave"}}
{{> skillRow name="Acrobatics" skill="acrobatics"}}
{{> skillRow name="Sleight of Hand" skill="sleightOfHand"}}
{{> skillRow name="Stealth" skill="stealth"}}
</table>
</paper-shadow>
<paper-shadow class="card double">
<div class="abilityScore green white-text">
<h1 class="display1">{{attributeValue "dexterity"}}</h1>
<h2>{{abilityMod "dexterity"}}</h2>
</div>
<div class="abilityCardRight">
<h1>Dexterity</h1>
{{> skillRow name="Save" skill="dexteritySave"}}
<hr>
{{> skillRow name="Acrobatics" skill="acrobatics"}}
{{> skillRow name="Sleight of Hand" skill="sleightOfHand"}}
{{> skillRow name="Stealth" skill="stealth"}}
</div>
</paper-shadow>
</template>
<template name="constitutionCard">
<paper-shadow class="card double">
<h1>Constitution</h1>
<h1>{{attributeValue "constitution"}}</h1>
<h2>{{abilityMod "constitution"}}</h2>
<hr>
<table>
{{> skillRow name="Constitution Save" skill="constitutionSave"}}
</table>
</paper-shadow>
<paper-shadow class="card double">
<div class="abilityScore deep-orange white-text">
<h1 class="display1">{{attributeValue "constitution"}}</h1>
<h2>{{abilityMod "constitution"}}</h2>
</div>
<div class="abilityCardRight">
<h1>Constitution</h1>
{{> skillRow name="Save" skill="constitutionSave"}}
<hr>
</div>
</paper-shadow>
</template>
<template name="intelligenceCard">
<paper-shadow class="card double">
<h1>Intelligence</h1>
<h1>{{attributeValue "intelligence"}}</h1>
<h2>{{abilityMod "intelligence"}}</h2>
<hr>
<table>
{{> skillRow name="Intelligence 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"}}
</table>
</paper-shadow>
<paper-shadow class="card double">
<div class="abilityScore indigo white-text">
<h1 class="display1">{{attributeValue "intelligence"}}</h1>
<h2>{{abilityMod "intelligence"}}</h2>
</div>
<div class="abilityCardRight">
<h1>Intelligence</h1>
{{> skillRow name="Save" skill="intelligenceSave"}}
<hr>
{{> 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"}}
</div>
</paper-shadow>
</template>
<template name="wisdomCard">
<paper-shadow class="card double">
<h1>Wisdom</h1>
<h1>{{attributeValue "wisdom"}}</h1>
<h2>{{abilityMod "wisdom"}}</h2>
<hr>
<table>
{{> skillRow name="Wisdom 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"}}
</table>
</paper-shadow>
<paper-shadow class="card double">
<div class="abilityScore purple white-text">
<h1 class="display1">{{attributeValue "wisdom"}}</h1>
<h2>{{abilityMod "wisdom"}}</h2>
</div>
<div class="abilityCardRight">
<h1>Wisdom</h1>
{{> skillRow name="Save" skill="wisdomSave"}}
<hr>
{{> 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"}}
</div>
</paper-shadow>
</template>
<template name="charismaCard">
<paper-shadow class="card double">
<h1>Charisma</h1>
<h1>{{attributeValue "charisma"}}</h1>
<h2>{{abilityMod "charisma"}}</h2>
<hr>
<table>
{{> skillRow name="Charisma Save" skill="charismaSave"}}
{{> skillRow name="Deception" skill="deception"}}
{{> skillRow name="Intimidation" skill="intimidation"}}
{{> skillRow name="Performance" skill="performance"}}
{{> skillRow name="Persuasion" skill="persuasion"}}
</table>
</paper-shadow>
<paper-shadow class="card double">
<div class="abilityScore pink white-text">
<h1 class="display1">{{attributeValue "charisma"}}</h1>
<h2>{{abilityMod "charisma"}}</h2>
</div>
<div class="abilityCardRight">
<h1>Charisma</h1>
{{> skillRow name="Save" skill="charismaSave"}}
<hr>
{{> skillRow name="Deception" skill="deception"}}
{{> skillRow name="Intimidation" skill="intimidation"}}
{{> skillRow name="Performance" skill="performance"}}
{{> skillRow name="Persuasion" skill="persuasion"}}
</div>
</paper-shadow>
</template>

4
rpg-docs/client/views/character/characterSheet.html
View File

@@ -2,18 +2,18 @@
<paper-tabs id="characterSheetTabs" scrollable="true" selected={{selectedTab}}>
<paper-tab>Stats</paper-tab>
<paper-tab>Features</paper-tab>
<paper-tab>Persona</paper-tab>
<paper-tab>Inventory</paper-tab>
<paper-tab>Spellbook</paper-tab>
<paper-tab>Persona</paper-tab>
<paper-tab>Journal</paper-tab>
</paper-tabs>
<core-animated-pages selected={{selectedTab}} transitions="slide-from-right">
<div>{{> stats}}</div>
<div>features</div>
<div>persona</div>
<div>inventory</div>
<div>spellBook</div>
<div>persona</div>
<div>journal</div>
</core-animated-pages>
</template>

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

@@ -0,0 +1,48 @@
.skillRow {
height: 32px;
display: flex;
align-items: center;
}
.profIcon{
display: inline-block;
width: 40px;
height: 26px;
background-size: contain;
background-repeat: no-repeat;
/*TODO fix the actual images and remove inversion*/
-webkit-filter: invert(100%);
opacity: 0.54;
}
.skillMod {
width: 20px;
text-align: right;
}
.skillName, .skillMod{
display: inline-block;
vertical-align: top;
margin-right: 8px;
}
.fail.skillMod {
color: #D50000;
}
.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: "*";
}

12
rpg-docs/client/views/character/SideAbilities/skills/skills.html → rpg-docs/client/views/character/skills/skills.html
View File

@@ -14,13 +14,13 @@
</template>
<template name="skillRow">
<tr>
<td><div class="profIcon" style="background-image: url(/png/profIcons/{{profIcon skill}})"></div></td>
<div class="subhead skillRow">
<div class="profIcon" style="background-image: url(/png/profIcons/{{profIcon skill}})"></div>
{{#if failSkill}}
<td class="fail">fail</td>
<div class="fail skillMod">fail</div>
{{else}}
<td class="{{advantage}}">{{../skillMod skill}}</td>
<div class="{{advantage}} skillMod">{{../skillMod skill}}</div>
{{/if}}
<td class={{conditionals}}>{{name}}</td>
</tr>
<div class="{{conditionals}} skillName">{{name}}</div>
</div>
</template>

0
rpg-docs/client/views/character/SideAbilities/skills/skills.js → rpg-docs/client/views/character/skills/skills.js
View File