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

Added Resources, improved layout

Browse Source
This commit is contained in:
Thaum
2015-02-17 13:46:35 +00:00
parent d18c58c5ed
commit 9601826475
12 changed files with 221 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
rpg-docs/client/views/GeneralCSS/general.css
View File

@@ -66,10 +66,11 @@ paper-button {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
/*Fixes extra margin at top of columns*/
display: inline-block;
width: 100%;
padding: 16px;
font-size: 14px;
border-radius: 2px;
background-color: white;
@@ -84,6 +85,31 @@ paper-button {
letter-spacing: 0.01em;
}
.cardHeader {
height: 48px;
padding: 0 16px 0 16px;
align-content: center;
font-size: 14px;
font-weight: 400;
color: rgba(0, 0, 0, 0.54);
}
.statCard {
cursor: pointer;
}
.resourceCards {
padding: 4px 4px 0 4px;
margin-bottom: -4px;
}
.resourceCards .card {
width: 180px;
margin: 4px;
flex-grow: 1;
flex-shrink: 1;
}
.grey-background, body {
background-color: #E0E0E0;
}

2
rpg-docs/client/views/character/effectEdit/effectEdit.js
View File

@@ -92,7 +92,7 @@ var skillOperations = [
];
Template.effectEdit.created = function(){
var statGroup = statsDict[this.data.stat].group;
var statGroup = statsDict[this.data.stat] && statsDict[this.data.stat].group;
this.selectedStatGroup = new ReactiveVar(statGroup);
};

1
rpg-docs/client/views/character/features/features.css
View File

@@ -16,5 +16,4 @@
.containerMain.featureDescription {
white-space: pre-line;
padding: 16px 0 0 0;
}

63
rpg-docs/client/views/character/features/features.html
View File

@@ -1,21 +1,49 @@
<template name="features">
<div fit>
<div class="scroll-y" fit>
<div class="resources"><!--resources-->
</div>
<div class="actions">
<div class="resourceCards" layout horizontal wrap>
<!--Armor-->
<paper-shadow class="card container statCard" hero-id="main" {{detailHero}} layout horizontal>
<div class="containerLeft">
{{attributeValue "armor"}}
</div>
<div class="containerRight" flex horizontal layout center>
Armor Class
</div>
<paper-ripple fit></paper-ripple>
</paper-shadow>
<!--Speed-->
<paper-shadow class="card container statCard" hero-id="main" {{detailHero}} layout horizontal>
<div class="containerLeft">
{{attributeValue "speed"}}
</div>
<div class="containerRight" flex horizontal layout center>
Speed
</div>
<paper-ripple fit></paper-ripple>
</paper-shadow>
<!--ki-->
{{>resource name="ki" title="Ki Points" char=this}}
<!--sorceryPoints-->
{{>resource name="sorceryPoints" title="Sorcery Points" char=this}}
<!--rages-->
{{>resource name="rages" title="Rages" char=this}}
<!--superiorityDice-->
{{>resource name="superiorityDice" title="Superiority Dice" char=this}}
<!--expertiseDice-->
{{>resource name="expertiseDice" title="Expertise Dice" char=this}}
{{>gridPadding num="6" class="card container"}}
</div>
<!--<div class="cardHeader" layout horizontal center>Features</div>-->
<div class="containers">
{{#each features}}
<paper-shadow class="card container featureCard" hero-id="main" {{detailHero}} style="order: {{featureOrder}};">
<paper-shadow class="card container featureCard" hero-id="main" {{detailHero}}>
<div class="containerTop {{colorClass}}" hero-id="toolbar" layout horizontal center {{detailHero}}>
<div class="containerName subhead" hero-id="title" flex {{detailHero}}>{{name}}</div>
{{#if hasUses}}<div class="subhead" style="margin-right: 8px">{{usesLeft}}/{{usesValue}}</div>{{/if}}
<paper-ripple fit></paper-ripple>
</div>
<div flex class="containerMain body1 featureDescription">{{description}}</div>
{{#if description}}<div flex class="containerMain body1 featureDescription">{{description}}</div>{{/if}}
{{#if hasUses}}
<div class="containerFoot" layout horizontal center end-justified>
{{#if usesLeft}}<paper-button class="useFeature">Use</paper-button>{{/if}}
@@ -36,4 +64,23 @@
aria-label="Add"
hero-id="main"></paper-fab>
</div>
</template>
</template>
<template name="resource">
{{#if char.attributeBase name}}
<paper-shadow class="card container" hero-id="main" {{detailHero}} layout horizontal>
<div class="containerLeft">
<div class="resourceValue">{{char.attributeValue name}}</div>
<!--<div class="resourceMax">{{char.attributeBase name}}</div>-->
<div class="resourceButtons">
<paper-icon-button class="resourceUp" icon="arrow-drop-up" disabled={{cantIncrement}}></paper-icon-button>
<paper-icon-button class="resourceDown" icon="arrow-drop-down" disabled={{cantDecrement}}></paper-icon-button>
</div>
</div>
<div class="containerRight" flex relative horizontal layout center>
{{title}}
<paper-ripple fit></paper-ripple>
</div>
</paper-shadow>
{{/if}}
</template>

28
rpg-docs/client/views/character/features/features.js
View File

@@ -40,4 +40,30 @@ Template.features.events({
var featureId = this._id;
Features.update(featureId, {$set: {used: 0}});
}
});
});
Template.resource.helpers({
cantIncrement: function(){
return !(this.char.attributeValue(this.name) < this.char.attributeBase(this.name));
},
cantDecrement: function(){
return !(this.char.attributeValue(this.name) > 0);
}
});
Template.resource.events({
"tap .resourceUp": function(event){
if(this.char.attributeValue(this.name) < this.char.attributeBase(this.name)){
var modifier = {$inc: {}};
modifier.$inc[this.name + ".adjustment"] = 1;
Characters.update(this.char._id, modifier, {validate: false});
}
},
"tap .resourceDown": function(event){
if(this.char.attributeValue(this.name) > 0){
var modifier = {$inc: {}};
modifier.$inc[this.name + ".adjustment"] = -1;
Characters.update(this.char._id, modifier, {validate: false});
}
}
});

82
rpg-docs/client/views/character/inventory/inventory.css
View File

@@ -8,36 +8,100 @@
padding: 8px;
}
.container {
.containerLeft {
padding: 16px;
background-color: #2196F3;
display: flex;
justify-content: center;
flex-direction: row;
border-radius: 2px 0 0 2px;
/* same style as display-1 */
font-size: 34px;
font-weight: 400;
color: #ffffff;
color: rgba(255,255,255,0.54);
letter-spacing: 0;
}
.containerRight {
padding: 16px;
cursor: pointer;
/* same style as subhead */
font-size: 16px;
font-weight: 400;
margin: 0;
color: #000;
color: rgba(0,0,0,0.87);
letter-spacing: 0.010em;
}
.resourceValue {
display: inline-block;
}
.resourceMax {
display: inline-block;
align-self: flex-end;
/* same style as subhead */
font-size: 16px;
font-weight: 400;
margin: 0;
color: #fff;
color: rgba(255,255,255,0.54);
letter-spacing: 0.010em;
}
.resourceMax:before {
content: "/";
}
.resourceButtons {
margin: -16px -16px -16px 8px;
align-self: center;
}
.resourceButtons paper-icon-button{
width: 32px;
height: 32px;
padding: 0;
display: block;
}
.resourceButtons paper-icon-button[disabled]{
color: rgba(255, 255, 255, 0.26);
}
.resourceButtons /deep/ core-icon {
width: 32px;
height: 32px;
}
.containerTop {
cursor: pointer;
margin: -16px -16px 0 -16px;
padding: 16px;
position: relative;
border-radius: 2px 2px 0 0;
}
.equipmentTop {
margin: -16px -16px 0 -16px;
padding: 16px;
border-bottom: rgba(0,0,0,0.12) solid 1px;
}
.containerMain {
margin: 0 -16px -16px -16px;
padding-bottom: 16px;
padding: 16px;
}
.equipmentMain {
margin: 0 -16px -16px -16px;
padding-bottom: 16px;
}
.inventoryItem {
background: white;
transition: box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
transition: box-shadow 0.1s ease;
height: 40px;
margin: 1px 0 1px 0;
font-size: 16px;
@@ -68,3 +132,7 @@
background-color: rgb(232, 232, 232);
background-color: rgba(0, 0, 0, 0.1);
}
#inventory .containerMain {
padding: 0 0 16px 0;
}

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

@@ -33,11 +33,11 @@
<input id="quantityInput" type="number" value={{quantity}}>
</paper-input-decorator>
<!--Weight-->
<paper-input-decorator label="Weight" floatinglabel>
<paper-input-decorator label="Weight Each (lbs)" floatinglabel>
<input id="weightInput" type="number" value={{weight}}>
</paper-input-decorator>
<!--Value-->
<paper-input-decorator label="Value" floatinglabel>
<paper-input-decorator label="Value Each (GP)" floatinglabel>
<input id="valueInput" type="number" value={{value}}>
</paper-input-decorator>
<!--Description-->

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

@@ -1,5 +1,3 @@
#persona .containerMain{
margin: 0;
padding: 16px 0 0 0;
white-space: pre-line;
}

4
rpg-docs/client/views/character/spells/spells.css
View File

@@ -1,3 +1,7 @@
#spells .containerMain {
padding: 0 0 16px 0;
}
#spells .inventoryItem {
height: 56px;
}

14
rpg-docs/client/views/character/spells/spells.html
View File

@@ -1,6 +1,18 @@
<template name="spells">
<div fit>
<div id="spells" class="scroll-y" fit>
<div class="resourceCards" layout horizontal wrap>
{{>resource name="level1SpellSlots" title="Level 1" char=this}}
{{>resource name="level2SpellSlots" title="Level 2" char=this}}
{{>resource name="level3SpellSlots" title="Level 3" char=this}}
{{>resource name="level4SpellSlots" title="Level 4" char=this}}
{{>resource name="level5SpellSlots" title="Level 5" char=this}}
{{>resource name="level6SpellSlots" title="Level 6" char=this}}
{{>resource name="level7SpellSlots" title="Level 7" char=this}}
{{>resource name="level8SpellSlots" title="Level 8" char=this}}
{{>resource name="level9SpellSlots" title="Level 9" char=this}}
{{>gridPadding num="8" class="card container"}}
</div>
<div class="containers">
{{#each spellLists}}
<paper-shadow class="card container" hero-id="main" {{detailHero}} style="order: {{order}};">
@@ -18,7 +30,7 @@
</div>
</div>
{{#if settings.showUnprepared}}
{{#if maxPrepared}}<div class="subhead">{{numPrepared}} / {{maxPrepared}}</div>{{/if}}
{{#if maxPrepared}}<div class="subhead">{{numPrepared}} / {{evaluate charId maxPrepared}}</div>{{/if}}
<paper-icon-button class="finishPrep" icon="done"></paper-icon-button>
{{else}}
<paper-icon-button class="prepSpells" icon="book"></paper-icon-button>

9
rpg-docs/client/views/paperTemplates/gridPadding/gridPadding.html Normal file
View File

@@ -0,0 +1,9 @@
<!--
Silly flexbox hack brought to you by
http://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid
-->
<template name="gridPadding">
{{#each list}}
<div class={{../class}} style="height: 0; margin-top: 0; margin-bottom: 0;"></div>
{{/each}}
</template>

6
rpg-docs/client/views/paperTemplates/gridPadding/gridPadding.js Normal file
View File

@@ -0,0 +1,6 @@
Template.gridPadding.helpers({
//create a list of true values with length = num
list: function(){
return _.range(1, this.num);
}
})