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

2
rpg-docs/.meteor/versions
View File

@@ -21,8 +21,6 @@ cw4gn3r:jquery-event-drag@2.2.0
dburles:collection-helpers@1.0.1
ddp@1.0.11
deps@1.0.5
ecwyne:polymer-elements@1.0.4
ecwyne:polymer@1.0.3
ejson@1.0.4
email@1.0.4
fastclick@1.0.1

105
rpg-docs/Model/Character/Characters.js
View File

@@ -314,15 +314,14 @@ Characters.helpers({
var field = char[fieldName];
if(!field){
throw new Meteor.Error("getField failed",
"getField could not find field" + fieldName + " in character "+ char._id);
"getField could not find field " + fieldName + " in character "+ char._id);
}
return field;
},
//returns the value of a field
fieldValue : function(fieldName){
if(!Schemas.Character.schema(fieldName)){
console.log("Character's schema does not contain a field called: " + fieldName);
return;
throw new Meteor.Error("Field not found", "Character's schema does not contain a field called: " + fieldName);
}
//duck typing to get the right value function
//.proficiency implies skill
@@ -353,14 +352,16 @@ Characters.helpers({
//we can't visit it again unless it returns first
visitedAttributes.push(attributeName);
var charId = this._id;
var attribute = this.getField(attributeName);
//base value
var value = attributeBase(charId, attribute);
value += attribute.adjustment;
//this attribute returns, pull it from the array, we may visit it again safely
visitedAttributes = _.without(visitedAttributes, attributeName);
try{
var charId = this._id;
var attribute = this.getField(attributeName);
//base value
var value = attributeBase(charId, attribute);
value += attribute.adjustment;
}finally{
//this attribute returns or fails, pull it from the array, we may visit it again safely
visitedAttributes = _.without(visitedAttributes, attributeName);
}
return value;
}
})(),
@@ -380,14 +381,15 @@ Characters.helpers({
//push this attribute to the list of visited attributes
//we can't visit it again unless it returns first
visitedAttributes.push(attributeName);
var charId = this._id;
var attribute = this.getField(attributeName);
//base value
var value = attributeBase(charId, attribute);
//this attribute returns, pull it from the array, we may visit it again safely
visitedAttributes = _.without(visitedAttributes, attributeName);
try{
var charId = this._id;
var attribute = this.getField(attributeName);
//base value
var value = attributeBase(charId, attribute);
}finally{
//this attribute returns or fails, pull it from the array, we may visit it again safely
visitedAttributes = _.without(visitedAttributes, attributeName);
}
return value;
}
})(),
@@ -407,45 +409,46 @@ Characters.helpers({
//push this skill to the list of visited skills
//we can't visit it again unless it returns first
visitedSkills.push(skillName);
try{
var charId = this._id;
skill = this.getField(skillName);
//get the final value of the ability score
var ability = this.attributeValue(skill.ability);
var charId = this._id;
skill = this.getField(skillName);
//get the final value of the ability score
var ability = this.attributeValue(skill.ability);
//base modifier
var mod = +getMod(ability)
//base modifier
var mod = +getMod(ability)
//multiply proficiency bonus by largest value in proficiency array
var prof = this.proficiency(skill);
//multiply proficiency bonus by largest value in proficiency array
var prof = this.proficiency(skill);
//add multiplied proficiency bonus to modifier
mod += prof * this.attributeValue("proficiencyBonus");
//add multiplied proficiency bonus to modifier
mod += prof * this.attributeValue("proficiencyBonus");
//add all values in add array
_.each(skill.add, function(effect){
mod += evaluateEffect(charId, effect);
});
//add all values in add array
_.each(skill.add, function(effect){
mod += evaluateEffect(charId, effect);
});
//multiply all values in mul array
_.each(skill.mul, function(effect){
mod *= evaluateEffect(charId, effect);
});
//multiply all values in mul array
_.each(skill.mul, function(effect){
mod *= evaluateEffect(charId, effect);
});
//largest min
_.each(skill.min, function(effect){
var min = evaluateEffect(charId, effect);
mod = mod > min? mod : min;
});
//largest min
_.each(skill.min, function(effect){
var min = evaluateEffect(charId, effect);
mod = mod > min? mod : min;
});
//smallest max
_.each(skill.max, function(effect){
var max = evaluateEffect(charId, effect);
mod = mod < max? mod : max;
});
//done traversing the tree, this skill returns, pull it from the array
visitedSkills = _.without(visitedSkills, skillName);
//smallest max
_.each(skill.max, function(effect){
var max = evaluateEffect(charId, effect);
mod = mod < max? mod : max;
});
} finally{
//this skill returns or fails, pull it from the array
visitedSkills = _.without(visitedSkills, skillName);
}
return signedString(mod);
}
})(),

75
rpg-docs/client/views/GeneralCSS/color.css Normal file
View File

@@ -0,0 +1,75 @@
.red {
background-color: #F44336;
}
.pink {
background-color: #E91E63;
}
.purple {
background-color: #9C27B0;
}
.deep-purple {
background-color: #673AB7;
}
.indigo {
background-color: #3F51B5;
}
.blue {
background-color: #2196F3;
}
.light-blue {
background-color: #03A9F4;
}
.cyan {
background-color: #00BCD4;
}
.teal {
background-color: #009688;
}
.green {
background-color: #4CAF50;
}
.light-green {
background-color: #8BC34A;
}
.lime {
background-color: #CDDC39;
}
.yellow {
background-color: #FFEB3B;
}
.amber {
background-color: #FFC107;
}
.orange {
background-color: #FF9800;
}
.deep-orange {
background-color: #FF5722;
}
.brown {
background-color: #795548;
}
.grey {
background-color: #9E9E9E;
}
.blue-grey {
background-color: #607D8B;
}

80
rpg-docs/client/views/GeneralCSS/general.css Normal file
View File

@@ -0,0 +1,80 @@
root {
display: block;
}
body {
font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial;
margin: 0;
overflow-x: hidden;
}
body.core-narrow {
padding: 8px;
}
.calculatedValue {
color: #021C33;
font-weight: bold;
}
* {
box-sizing: border-box;
}
td {
padding: 0;
}
table {
border-spacing: 0;
}
hr {
background-color: #444;
opacity: 0.12;
border-width: 0;
color: #444;
height: 1px;
line-height: 0;
margin: 0 -16px;
text-align: center;
}
paper-button {
font-size: 14px;
font-weight: 400;
text-transform: uppercase;
color: #000;
color: rgba(0,0,0,0.87);
letter-spacing: 0.010;
}
.listRow {
height: 32px;
}
.card {
width: 148px;
margin: 4px;
padding: 16px;
font-size: 14px;
border-radius: 2px;
background-color: white;
}
.card.double {
width: 304px;
}
.card paper-button {
font-size: 14px;
letter-spacing: 0.01em;
}
.grey-background, body {
background-color: #E0E0E0;
}
.center {
text-align: center;
}

99
rpg-docs/client/views/GeneralCSS/typography.css Normal file
View File

@@ -0,0 +1,99 @@
.display2 {
font-size: 45px;
font-weight: 400;
color: #000;
color: rgba(0,0,0,0.54);
letter-spacing: 0;
}
.white-text .display2{
color: rgba(255,255,255,0.54);
}
.display1 {
font-size: 34px;
font-weight: 400;
color: #000;
color: rgba(0,0,0,0.54);
letter-spacing: 0;
}
.white-text .display1{
color: rgba(255,255,255,0.54);
}
h1, .headline {
font-size: 24px;
font-weight: 400;
margin: 0;
color: #000;
color: rgba(0,0,0,0.87);
letter-spacing: 0;
}
.white-text h1, .white-text .headline{
color: rgba(255,255,255,0.87);
}
h2, .title {
font-size: 20px;
font-weight: 500;
margin: 0;
color: #000;
color: rgba(0,0,0,0.87);
letter-spacing: 0.005em;
}
.white-text h2{
color: rgba(255,255,255,0.87);
}
h3, .subhead {
font-size: 16px;
font-weight: 400;
margin: 0;
color: #000;
color: rgba(0,0,0,0.87);
letter-spacing: 0.010em;
}
.white-text h3, .white-text .subhead{
color: rgba(255,255,255,0.87);
}
.body2 {
font-size: 14px;
font-weight: 500;
color: #000;
color: rgba(0,0,0,0.87);
letter-spacing: 0.010em;
}
.white-text .body2{
color: rgba(255,255,255,0.87);
}
p, .body1, body {
font-size: 14px;
font-weight: 400;
margin: 0;
color: #000;
color: rgba(0,0,0,0.87);
letter-spacing: 0.010em;
}
.white-text p{
color: rgba(255,255,255,0.87);
}
.caption{
font-size: 12px;
font-weight: 400;
color: #000;
color: rgba(0,0,0,0.54);
letter-spacing: 0.020em;
}
.white-text .caption{
color: rgba(255,255,255,0.54);
}

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

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

@@ -1,119 +0,0 @@
root {
display: block;
}
body {
font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial;
margin: 0;
overflow-x: hidden;
}
body.core-narrow {
padding: 8px;
}
.calculatedValue {
color: #021C33;
font-weight: bold;
}
* {
box-sizing: border-box;
}
h1, .headline {
font-size: 24px;
font-weight: 400;
margin: 0;
color: #000;
color: rgba(0,0,0,0.87);
letter-spacing: 0;
}
h2, .title {
font-size: 20px;
font-weight: 500;
margin: 0;
color: #000;
color: rgba(0,0,0,0.87);
letter-spacing: 0.005;
}
h3, .subhead {
font-size: 16px;
font-weight: 400;
margin: 0;
color: #000;
color: rgba(0,0,0,0.87);
letter-spacing: 0.010;
}
.body2 {
font-size: 14px;
font-weight: 500;
color: #000;
color: rgba(0,0,0,0.87);
letter-spacing: 0.010;
}
p, .body1, body {
font-size: 14px;
font-weight: 400;
color: #000;
color: rgba(0,0,0,0.87);
letter-spacing: 0.010;
}
.caption{
font-size: 12px;
font-weight: 400;
color: #000;
color: rgba(0,0,0,0.54);
letter-spacing: 0.020;
}
hr {
background-color: #444;
opacity: 0.12;
border-width: 0;
color: #444;
height: 1px;
line-height: 0;
margin: 0 -16px;
text-align: center;
}
paper-button {
font-size: 14px;
font-weight: 400;
text-transform: uppercase;
color: #000;
color: rgba(0,0,0,0.87);
letter-spacing: 0.010;
}
.card {
width: 148px;
margin: 4px;
padding: 16px;
font-size: 14px;
border-radius: 2px;
background-color: white;
}
.card.double {
width: 304px;
}
.card paper-button {
font-size: 14px;
letter-spacing: 0.01em;
}
.grey-background, body {
background-color: #E0E0E0;
}
.center {
text-align: center;
}