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 dburles:collection-helpers@1.0.1
ddp@1.0.11 ddp@1.0.11
deps@1.0.5 deps@1.0.5
ecwyne:polymer-elements@1.0.4
ecwyne:polymer@1.0.3
ejson@1.0.4 ejson@1.0.4
email@1.0.4 email@1.0.4
fastclick@1.0.1 fastclick@1.0.1

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

@@ -314,15 +314,14 @@ Characters.helpers({
var field = char[fieldName]; var field = char[fieldName];
if(!field){ if(!field){
throw new Meteor.Error("getField failed", 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; return field;
}, },
//returns the value of a field //returns the value of a field
fieldValue : function(fieldName){ fieldValue : function(fieldName){
if(!Schemas.Character.schema(fieldName)){ if(!Schemas.Character.schema(fieldName)){
console.log("Character's schema does not contain a field called: " + fieldName); throw new Meteor.Error("Field not found", "Character's schema does not contain a field called: " + fieldName);
return;
} }
//duck typing to get the right value function //duck typing to get the right value function
//.proficiency implies skill //.proficiency implies skill
@@ -353,14 +352,16 @@ Characters.helpers({
//we can't visit it again unless it returns first //we can't visit it again unless it returns first
visitedAttributes.push(attributeName); visitedAttributes.push(attributeName);
var charId = this._id; try{
var attribute = this.getField(attributeName); var charId = this._id;
//base value var attribute = this.getField(attributeName);
var value = attributeBase(charId, attribute); //base value
value += attribute.adjustment; var value = attributeBase(charId, attribute);
value += attribute.adjustment;
//this attribute returns, pull it from the array, we may visit it again safely }finally{
visitedAttributes = _.without(visitedAttributes, attributeName); //this attribute returns or fails, pull it from the array, we may visit it again safely
visitedAttributes = _.without(visitedAttributes, attributeName);
}
return value; return value;
} }
})(), })(),
@@ -380,14 +381,15 @@ Characters.helpers({
//push this attribute to the list of visited attributes //push this attribute to the list of visited attributes
//we can't visit it again unless it returns first //we can't visit it again unless it returns first
visitedAttributes.push(attributeName); visitedAttributes.push(attributeName);
try{
var charId = this._id; var charId = this._id;
var attribute = this.getField(attributeName); var attribute = this.getField(attributeName);
//base value //base value
var value = attributeBase(charId, attribute); var value = attributeBase(charId, attribute);
}finally{
//this attribute returns, pull it from the array, we may visit it again safely //this attribute returns or fails, pull it from the array, we may visit it again safely
visitedAttributes = _.without(visitedAttributes, attributeName); visitedAttributes = _.without(visitedAttributes, attributeName);
}
return value; return value;
} }
})(), })(),
@@ -407,45 +409,46 @@ Characters.helpers({
//push this skill to the list of visited skills //push this skill to the list of visited skills
//we can't visit it again unless it returns first //we can't visit it again unless it returns first
visitedSkills.push(skillName); 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; //base modifier
skill = this.getField(skillName); var mod = +getMod(ability)
//get the final value of the ability score
var ability = this.attributeValue(skill.ability);
//base modifier //multiply proficiency bonus by largest value in proficiency array
var mod = +getMod(ability) var prof = this.proficiency(skill);
//multiply proficiency bonus by largest value in proficiency array //add multiplied proficiency bonus to modifier
var prof = this.proficiency(skill); mod += prof * this.attributeValue("proficiencyBonus");
//add multiplied proficiency bonus to modifier //add all values in add array
mod += prof * this.attributeValue("proficiencyBonus"); _.each(skill.add, function(effect){
mod += evaluateEffect(charId, effect);
});
//add all values in add array //multiply all values in mul array
_.each(skill.add, function(effect){ _.each(skill.mul, function(effect){
mod += evaluateEffect(charId, effect); mod *= evaluateEffect(charId, effect);
}); });
//multiply all values in mul array //largest min
_.each(skill.mul, function(effect){ _.each(skill.min, function(effect){
mod *= evaluateEffect(charId, effect); var min = evaluateEffect(charId, effect);
}); mod = mod > min? mod : min;
});
//largest min //smallest max
_.each(skill.min, function(effect){ _.each(skill.max, function(effect){
var min = evaluateEffect(charId, effect); var max = evaluateEffect(charId, effect);
mod = mod > min? mod : min; mod = mod < max? mod : max;
}); });
} finally{
//smallest max //this skill returns or fails, pull it from the array
_.each(skill.max, function(effect){ visitedSkills = _.without(visitedSkills, skillName);
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);
return signedString(mod); 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; display: flex;
justify-content: center; justify-content: center;
align-items: flex-start; align-items: flex-start;
flex-wrap: wrap; 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"> <template name="stats">
<div id="stats"> <div id="stats">
{{> abilityCards}} <div class="abilityFlex">
<paper-shadow class="card" id="armor"> {{> abilityCards}}
<h1>{{attributeValue "armor"}}</h1> </div>
<p class="caption">Armor</p> <div class="statsFlex">
</paper-shadow> <paper-shadow class="card" id="armor">
<paper-shadow class="card" id="initiative"> <h1>{{attributeValue "armor"}}</h1>
<h1>{{skillMod "initiative"}}</h1> <p class="caption">Armor</p>
<p class="caption">Initiative</p> </paper-shadow>
</paper-shadow> <paper-shadow class="card" id="initiative">
<paper-shadow class="card" id="proficiencyBonus"> <h1>{{skillMod "initiative"}}</h1>
<h1>{{attributeValue "proficiencyBonus"}}</h1> <p class="caption">Initiative</p>
<p class="caption">Proficiency Bonus</p> </paper-shadow>
</paper-shadow> <paper-shadow class="card" id="proficiencyBonus">
<paper-shadow class="card" id="speed"> <h1>{{attributeValue "proficiencyBonus"}}</h1>
<h1>{{attributeValue "speed"}}</h1> <p class="caption">Proficiency Bonus</p>
<p class="caption">Speed</p> </paper-shadow>
</paper-shadow> <paper-shadow class="card" id="speed">
<paper-shadow class="card" id="passivePerception"> <h1>{{attributeValue "speed"}}</h1>
<h1>{{passiveSkill "perception"}}</h1> <p class="caption">Speed</p>
<p class="caption">Passive Perception</p> </paper-shadow>
</paper-shadow> <paper-shadow class="card" id="passivePerception">
<paper-shadow class="card" id="hitDice"> <h1>{{passiveSkill "perception"}}</h1>
<h1>{{> hitDice hitDice="d6HitDice" d="6"}}</h1> <p class="caption">Passive Perception</p>
<h1>{{> hitDice hitDice="d8HitDice" d="8"}}</h1> </paper-shadow>
<h1>{{> hitDice hitDice="d10HitDice" d="10"}}</h1> <paper-shadow class="card" id="hitDice">
<h1>{{> hitDice hitDice="d12HitDice" d="12"}}</h1> <h1>{{> hitDice hitDice="d6HitDice" d="6"}}</h1>
<p class="caption">Hit Dice</p> <h1>{{> hitDice hitDice="d8HitDice" d="8"}}</h1>
</paper-shadow> <h1>{{> hitDice hitDice="d10HitDice" d="10"}}</h1>
{{# if canCast}} <h1>{{> hitDice hitDice="d12HitDice" d="12"}}</h1>
<paper-shadow class="card" id="spellSlots"> <p class="caption">Hit Dice</p>
<h1>{{> spellSlots}}</h1> </paper-shadow>
<p class="caption">Spell Slots</p> {{# if canCast}}
</paper-shadow> <paper-shadow class="card" id="spellSlots">
{{/if}} <h1>{{> spellSlots}}</h1>
{{# if attributeBase "rages"}} <p class="caption">Spell Slots</p>
<paper-shadow class="card" id="rages"> </paper-shadow>
<h1>{{attributeValue "rages"}}</h1> {{/if}}
<p class="caption">rages</p> {{# if attributeBase "rages"}}
</paper-shadow> <paper-shadow class="card" id="rages">
{{/if}} <h1>{{attributeValue "rages"}}</h1>
{{# if attributeBase "sorceryPoints"}} <p class="caption">rages</p>
<paper-shadow class="card" id="sorceryPoints"> </paper-shadow>
<h1>{{attributeValue "sorceryPoints"}}</h1> {{/if}}
<p class="caption">Sorcery Points</p> {{# if attributeBase "sorceryPoints"}}
</paper-shadow> <paper-shadow class="card" id="sorceryPoints">
{{/if}} <h1>{{attributeValue "sorceryPoints"}}</h1>
{{# if attributeBase "expertiseDice"}} <p class="caption">Sorcery Points</p>
<paper-shadow class="card" id="expertiseDice"> </paper-shadow>
<h1>{{attributeValue "expertiseDice"}}</h1> {{/if}}
<p class="caption">Expertise Dice</p> {{# if attributeBase "expertiseDice"}}
</paper-shadow> <paper-shadow class="card" id="expertiseDice">
{{/if}} <h1>{{attributeValue "expertiseDice"}}</h1>
{{# if attributeBase "superiorityDice"}} <p class="caption">Expertise Dice</p>
<paper-shadow class="card" id="superiorityDice"> </paper-shadow>
<h1>{{attributeValue "superiorityDice"}}</h1> {{/if}}
<p class="caption">Superiority Dice</p> {{# if attributeBase "superiorityDice"}}
</paper-shadow> <paper-shadow class="card" id="superiorityDice">
{{/if}} <h1>{{attributeValue "superiorityDice"}}</h1>
</div> <p class="caption">Superiority Dice</p>
</paper-shadow>
{{/if}}
</div>
</div>
</template> </template>
<template name="hitDice"> <template name="hitDice">
{{# if ../attributeBase hitDice}} {{# if ../attributeBase hitDice}}
{{../attributeValue hitDice}}d{{d}} + {{../abilityMod "constitution"}} {{../attributeValue hitDice}}d{{d}} + {{../abilityMod "constitution"}}
{{/if}} {{/if}}
</template> </template>
<template name="spellSlots"> <template name="spellSlots">
{{attributeValue "level1SpellSlots"}} {{attributeValue "level1SpellSlots"}}
{{attributeValue "level2SpellSlots"}} {{attributeValue "level2SpellSlots"}}
{{attributeValue "level3SpellSlots"}} {{attributeValue "level3SpellSlots"}}
{{attributeValue "level4SpellSlots"}} {{attributeValue "level4SpellSlots"}}
{{attributeValue "level5SpellSlots"}} {{attributeValue "level5SpellSlots"}}
{{attributeValue "level6SpellSlots"}} {{attributeValue "level6SpellSlots"}}
{{attributeValue "level7SpellSlots"}} {{attributeValue "level7SpellSlots"}}
{{attributeValue "level8SpellSlots"}} {{attributeValue "level8SpellSlots"}}
{{attributeValue "level9SpellSlots"}} {{attributeValue "level9SpellSlots"}}
</template> </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"> <template name="abilityCards">
{{> strengthCard}} {{> strengthCard}}
{{> dexterityCard}} {{> dexterityCard}}
{{> constitutionCard}} {{> constitutionCard}}
{{> intelligenceCard}} {{> intelligenceCard}}
{{> wisdomCard}} {{> wisdomCard}}
{{> charismaCard}} {{> charismaCard}}
</template> </template>
<template name="strengthCard"> <template name="strengthCard">
<paper-shadow class="card double"> <paper-shadow class="card double">
<h1>Strength</h1> <div class="abilityScore red white-text">
<h1>{{attributeValue "strength"}}</h1> <h1 class="display1">{{attributeValue "strength"}}</h1>
<h2>{{abilityMod "strength"}}</h2> <h2>{{abilityMod "strength"}}</h2>
<hr> </div>
<table> <div class="abilityCardRight">
{{> skillRow name="Strength Save" skill="strengthSave"}} <h1>Strength</h1>
{{> skillRow name="Athletics" skill="athletics"}} {{> skillRow name="Save" skill="strengthSave"}}
</table> <hr>
</paper-shadow> {{> skillRow name="Athletics" skill="athletics"}}
</div>
</paper-shadow>
</template> </template>
<template name="dexterityCard"> <template name="dexterityCard">
<paper-shadow class="card double"> <paper-shadow class="card double">
<h1>Dexterity</h1> <div class="abilityScore green white-text">
<h1>{{attributeValue "dexterity"}}</h1> <h1 class="display1">{{attributeValue "dexterity"}}</h1>
<h2>{{abilityMod "dexterity"}}</h2> <h2>{{abilityMod "dexterity"}}</h2>
<hr> </div>
<table> <div class="abilityCardRight">
{{> skillRow name="Dexterity Save" skill="dexteritySave"}} <h1>Dexterity</h1>
{{> skillRow name="Acrobatics" skill="acrobatics"}} {{> skillRow name="Save" skill="dexteritySave"}}
{{> skillRow name="Sleight of Hand" skill="sleightOfHand"}} <hr>
{{> skillRow name="Stealth" skill="stealth"}} {{> skillRow name="Acrobatics" skill="acrobatics"}}
</table> {{> skillRow name="Sleight of Hand" skill="sleightOfHand"}}
</paper-shadow> {{> skillRow name="Stealth" skill="stealth"}}
</div>
</paper-shadow>
</template> </template>
<template name="constitutionCard"> <template name="constitutionCard">
<paper-shadow class="card double"> <paper-shadow class="card double">
<h1>Constitution</h1> <div class="abilityScore deep-orange white-text">
<h1>{{attributeValue "constitution"}}</h1> <h1 class="display1">{{attributeValue "constitution"}}</h1>
<h2>{{abilityMod "constitution"}}</h2> <h2>{{abilityMod "constitution"}}</h2>
<hr> </div>
<table> <div class="abilityCardRight">
{{> skillRow name="Constitution Save" skill="constitutionSave"}} <h1>Constitution</h1>
</table> {{> skillRow name="Save" skill="constitutionSave"}}
</paper-shadow> <hr>
</div>
</paper-shadow>
</template> </template>
<template name="intelligenceCard"> <template name="intelligenceCard">
<paper-shadow class="card double"> <paper-shadow class="card double">
<h1>Intelligence</h1> <div class="abilityScore indigo white-text">
<h1>{{attributeValue "intelligence"}}</h1> <h1 class="display1">{{attributeValue "intelligence"}}</h1>
<h2>{{abilityMod "intelligence"}}</h2> <h2>{{abilityMod "intelligence"}}</h2>
<hr> </div>
<table> <div class="abilityCardRight">
{{> skillRow name="Intelligence Save" skill="intelligenceSave"}} <h1>Intelligence</h1>
{{> skillRow name="Arcana" skill="arcana"}} {{> skillRow name="Save" skill="intelligenceSave"}}
{{> skillRow name="History" skill="history"}} <hr>
{{> skillRow name="Investigation" skill="investigation"}} {{> skillRow name="Arcana" skill="arcana"}}
{{> skillRow name="Nature" skill="nature"}} {{> skillRow name="History" skill="history"}}
{{> skillRow name="Religion" skill="religion"}} {{> skillRow name="Investigation" skill="investigation"}}
</table> {{> skillRow name="Nature" skill="nature"}}
</paper-shadow> {{> skillRow name="Religion" skill="religion"}}
</div>
</paper-shadow>
</template> </template>
<template name="wisdomCard"> <template name="wisdomCard">
<paper-shadow class="card double"> <paper-shadow class="card double">
<h1>Wisdom</h1> <div class="abilityScore purple white-text">
<h1>{{attributeValue "wisdom"}}</h1> <h1 class="display1">{{attributeValue "wisdom"}}</h1>
<h2>{{abilityMod "wisdom"}}</h2> <h2>{{abilityMod "wisdom"}}</h2>
<hr> </div>
<table> <div class="abilityCardRight">
{{> skillRow name="Wisdom Save" skill="wisdomSave"}} <h1>Wisdom</h1>
{{> skillRow name="Animal Handling" skill="animalHandling"}} {{> skillRow name="Save" skill="wisdomSave"}}
{{> skillRow name="Insight" skill="insight"}} <hr>
{{> skillRow name="Medicine" skill="medicine"}} {{> skillRow name="Animal Handling" skill="animalHandling"}}
{{> skillRow name="Perception" skill="perception"}} {{> skillRow name="Insight" skill="insight"}}
{{> skillRow name="Survival" skill="survival"}} {{> skillRow name="Medicine" skill="medicine"}}
</table> {{> skillRow name="Perception" skill="perception"}}
</paper-shadow> {{> skillRow name="Survival" skill="survival"}}
</div>
</paper-shadow>
</template> </template>
<template name="charismaCard"> <template name="charismaCard">
<paper-shadow class="card double"> <paper-shadow class="card double">
<h1>Charisma</h1> <div class="abilityScore pink white-text">
<h1>{{attributeValue "charisma"}}</h1> <h1 class="display1">{{attributeValue "charisma"}}</h1>
<h2>{{abilityMod "charisma"}}</h2> <h2>{{abilityMod "charisma"}}</h2>
<hr> </div>
<table> <div class="abilityCardRight">
{{> skillRow name="Charisma Save" skill="charismaSave"}} <h1>Charisma</h1>
{{> skillRow name="Deception" skill="deception"}} {{> skillRow name="Save" skill="charismaSave"}}
{{> skillRow name="Intimidation" skill="intimidation"}} <hr>
{{> skillRow name="Performance" skill="performance"}} {{> skillRow name="Deception" skill="deception"}}
{{> skillRow name="Persuasion" skill="persuasion"}} {{> skillRow name="Intimidation" skill="intimidation"}}
</table> {{> skillRow name="Performance" skill="performance"}}
</paper-shadow> {{> skillRow name="Persuasion" skill="persuasion"}}
</div>
</paper-shadow>
</template> </template>

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

@@ -2,18 +2,18 @@
<paper-tabs id="characterSheetTabs" scrollable="true" selected={{selectedTab}}> <paper-tabs id="characterSheetTabs" scrollable="true" selected={{selectedTab}}>
<paper-tab>Stats</paper-tab> <paper-tab>Stats</paper-tab>
<paper-tab>Features</paper-tab> <paper-tab>Features</paper-tab>
<paper-tab>Persona</paper-tab>
<paper-tab>Inventory</paper-tab> <paper-tab>Inventory</paper-tab>
<paper-tab>Spellbook</paper-tab> <paper-tab>Spellbook</paper-tab>
<paper-tab>Persona</paper-tab>
<paper-tab>Journal</paper-tab> <paper-tab>Journal</paper-tab>
</paper-tabs> </paper-tabs>
<core-animated-pages selected={{selectedTab}} transitions="slide-from-right"> <core-animated-pages selected={{selectedTab}} transitions="slide-from-right">
<div>{{> stats}}</div> <div>{{> stats}}</div>
<div>features</div> <div>features</div>
<div>persona</div>
<div>inventory</div> <div>inventory</div>
<div>spellBook</div> <div>spellBook</div>
<div>persona</div>
<div>journal</div> <div>journal</div>
</core-animated-pages> </core-animated-pages>
</template> </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>
<template name="skillRow"> <template name="skillRow">
<tr> <div class="subhead skillRow">
<td><div class="profIcon" style="background-image: url(/png/profIcons/{{profIcon skill}})"></div></td> <div class="profIcon" style="background-image: url(/png/profIcons/{{profIcon skill}})"></div>
{{#if failSkill}} {{#if failSkill}}
<td class="fail">fail</td> <div class="fail skillMod">fail</div>
{{else}} {{else}}
<td class="{{advantage}}">{{../skillMod skill}}</td> <div class="{{advantage}} skillMod">{{../skillMod skill}}</div>
{{/if}} {{/if}}
<td class={{conditionals}}>{{name}}</td> <div class="{{conditionals}} skillName">{{name}}</div>
</tr> </div>
</template> </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;
}