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

Finished upgrading stat tab to Polymer 1

Browse Source
This commit is contained in:
Stefan Zermatten
2017-01-20 09:05:16 +02:00
parent c4a488a176
commit b44fe33b30
10 changed files with 169 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
rpg-docs/client/views/character/stats/attributeDialog/attributeDialog.html
View File

@@ -6,12 +6,12 @@
</template>
<template name="attributeDialogView">
<div layout horizontal center-justified end>
<div class="display2">
<div class="layout horizontal center-justified end">
<div class="paper-font-display2">
{{attributeValue}}
</div>
{{#if adjustment}}
<div class="display1">
<div class="paper-font-display1">
/{{attributeBase}}
</div>
{{/if}}
@@ -19,50 +19,52 @@
<hr class="vertMargin">
<table class="summaryTable">
{{#each baseEffects}}
<tr>
<td>{{sourceName}}</td>
<td>Base: {{statValue}}</td>
<div class="layout vertical center">
<table class="summaryTable">
{{#each baseEffects}}
<tr>
<td>{{sourceName}}</td>
<td>Base: {{statValue}}</td>
</tr>
{{/each}}
{{#each addEffects}}
<tr>
<td>{{sourceName}}</td>
<td>{{signedString statValue}}</td>
</tr>
{{/each}}
{{#each mulEffects}}
<tr>
<td>{{sourceName}}</td>
<td>&times; {{statValue}}</td>
</tr>
{{/each}}
{{#each minEffects}}
<tr>
<td>{{sourceName}}</td>
<td>Min: {{statValue}}</td>
</tr>
{{/each}}
{{#each maxEffects}}
<tr>
<td>{{sourceName}}</td>
<td>Max: {{statValue}}</td>
</tr>
{{/each}}
{{#if adjustment}}
<tr class="paper-font-body2">
<td>Base Value</td>
<td>{{attributeBase}}</td>
</tr>
<tr>
<td>Adjustment</td>
<td>{{signedString adjustment}}</td>
</tr>
{{/if}}
<tr class="paper-font-body2">
<td>Total</td>
<td>{{attributeValue}}</td>
</tr>
{{/each}}
{{#each addEffects}}
<tr>
<td>{{sourceName}}</td>
<td>{{signedString statValue}}</td>
</tr>
{{/each}}
{{#each mulEffects}}
<tr>
<td>{{sourceName}}</td>
<td>&times; {{statValue}}</td>
</tr>
{{/each}}
{{#each minEffects}}
<tr>
<td>{{sourceName}}</td>
<td>Min: {{statValue}}</td>
</tr>
{{/each}}
{{#each maxEffects}}
<tr>
<td>{{sourceName}}</td>
<td>Max: {{statValue}}</td>
</tr>
{{/each}}
{{#if adjustment}}
<tr class="body2">
<td>Base Value</td>
<td>{{attributeBase}}</td>
</tr>
<tr>
<td>Adjustment</td>
<td>{{signedString adjustment}}</td>
</tr>
{{/if}}
<tr class="body2">
<td>Total</td>
<td>{{attributeValue}}</td>
</tr>
</table>
</table>
</div>
</template>

8
rpg-docs/client/views/character/stats/attributeDialog/strengthDialog/strengthDialog.html
View File

@@ -3,9 +3,9 @@
{{> attributeDialogView}}
<hr class="vertMargin">
<div>
<div class="title padded">Carrying</div>
<div class="paper-font-title padded">Carrying</div>
{{> carryCapacityTable}}
<div class="title padded">Jumping</div>
<div class="paper-font-title padded">Jumping</div>
<table class="strengthTable">
<tr>
<td>Running long jump</td>
@@ -18,7 +18,7 @@
<tr>
<td>Running high jump</td>
<td>{{evaluate charId "3 + strengthMod"}} feet</td>
<td class="caption">
<td>
Can reach a ledge as high as
{{evaluate charId "3 + strengthMod"}} feet
+ 1.5&times; your height
@@ -27,7 +27,7 @@
<tr>
<td>Standing high jump</td>
<td>{{evaluate charId "floor((3 + strengthMod)/2)"}} feet</td>
<td class="caption">
<td>
Can reach a ledge as high as
{{evaluate charId "floor((3 + strengthMod)/2)"}} feet
+ 1.5&times; your height

8
rpg-docs/client/views/character/stats/carryCapacityTable/carryCapacityTable.html
View File

@@ -3,26 +3,26 @@
<tr>
<td>Encumbered</td>
<td>&gt;{{evaluate charId "strength * 5 * carryMultiplier"}}lbs</td>
<td class="caption">Variant rule, encumbered characters move 10 feet slower</td>
<td>Variant rule, encumbered characters move 10 feet slower</td>
</tr>
<tr>
<td>Heavily encumbered</td>
<td>&gt;{{evaluate charId "strength * 10 * carryMultiplier"}}lbs</td>
<td class="caption">
<td>
Variant rule, heavily encumbered characters move 20 feet slower and have disadvantage on ability checks, attack rolls, and saving thows that use Strength, Dexterity, or Constitution
</td>
</tr>
<tr>
<td>Over Encumbered</td>
<td>&gt;{{evaluate charId "strength * 15 * carryMultiplier"}}lbs</td>
<td class="caption">
<td>
Characters that can only just lift, push or drag their current load can only move at 5 feet.
</td>
</tr>
<tr>
<td>Push, drag or lift maximum</td>
<td>{{evaluate charId "strength * 30 * carryMultiplier"}}lbs</td>
<td class="caption"></td>
<td></td>
</tr>
</table>
</template>

93
rpg-docs/client/views/character/stats/skillDialog/skillDialog.html
View File

@@ -6,11 +6,11 @@
</template>
<template name="skillDialogView">
<div layout vertical center>
<div class="display2">
<div class="layout vertical center">
<div class="paper-font-display2">
{{characterCalculate "skillMod" charId skillName}}
</div>
<div class="subhead">
<div class="paper-font-subhead">
<iron-icon icon="{{profIcon}}" class="black54"></iron-icon>
{{#if profSource}}
{{proficiencyValue}} - {{#with profSource}}{{sourceName}}{{/with}}
@@ -21,55 +21,56 @@
</div>
<hr class="vertMargin">
<table class="summaryTable">
<tr>
<td>{{abilityName}}</td>
<td>{{characterCalculate "abilityMod" charId ability}}</td>
</tr>
{{#if characterCalculate "proficiency" charId skillName}}
<div class="layout vertical center">
<table class="summaryTable">
<tr>
<td>{{proficiencyValue}}</td>
<td>{{signedString profBonus}}</td>
<td>{{abilityName}}</td>
<td>{{characterCalculate "abilityMod" charId ability}}</td>
</tr>
{{/if}}
{{#each addEffects}}
<tr>
<td>{{sourceName}}</td>
<td>{{signedString statValue}}</td>
{{#if characterCalculate "proficiency" charId skillName}}
<tr>
<td>{{proficiencyValue}}</td>
<td>{{signedString profBonus}}</td>
</tr>
{{/if}}
{{#each addEffects}}
<tr>
<td>{{sourceName}}</td>
<td>{{signedString statValue}}</td>
</tr>
{{/each}}
{{#each mulEffects}}
<tr>
<td>{{sourceName}}</td>
<td>&times;{{statValue}}</td>
</tr>
{{/each}}
{{#each minEffects}}
<tr>
<td>{{sourceName}}</td>
<td>Min: {{statValue}}</td>
</tr>
{{/each}}
{{#each maxEffects}}
<tr>
<td>{{sourceName}}</td>
<td>Max: {{statValue}}</td>
</tr>
{{/each}}
<tr class="paper-font-body2">
<td>Total</td>
<td>{{characterCalculate "skillMod" charId skillName}}</td>
</tr>
{{/each}}
{{#each mulEffects}}
<tr>
<td>{{sourceName}}</td>
<td>&times;{{statValue}}</td>
</tr>
{{/each}}
{{#each minEffects}}
<tr>
<td>{{sourceName}}</td>
<td>Min: {{statValue}}</td>
</tr>
{{/each}}
{{#each maxEffects}}
<tr>
<td>{{sourceName}}</td>
<td>Max: {{statValue}}</td>
</tr>
{{/each}}
<tr class="body2">
<td>Total</td>
<td>{{characterCalculate "skillMod" charId skillName}}</td>
</tr>
</table>
</table>
</div>
{{#if or advEffects.count dadvEffects.count conditionalEffects.count}}
<hr class="vertMargin">
{{/if}}
<div class="spaceAfter" horizontal center layout>
<div class="spaceAfter horizontal center layout">
{{#if advEffects.count}}
<div class="body2" style="width: 100px;">
<div class="paper-font-body2" style="width: 100px;">
Advantage
</div>
<div flex>
@@ -79,9 +80,9 @@
</div>
{{/if}}
</div>
<div class="spaceAfter" horizontal center layout>
<div class="spaceAfter horizontal center layout">
{{#if dadvEffects.count}}
<div class="body2" style="width: 100px;">
<div class="paper-font-body2" style="width: 100px;">
Disadvantage
</div>
<div flex>
@@ -94,7 +95,7 @@
<!--Conditional Benefits-->
{{#each conditionalEffects}}
<div class="spaceAfter">
<div class="body2">{{sourceName}}</div>
<div class="paper-font-body2">{{sourceName}}</div>
<div>*{{statValue}}</div>
</div>
{{/each}}

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

@@ -1,6 +1,6 @@
<template name="statCard">
<div>
<paper-material class="ability-mini-card layout horizontal">
<paper-material class="stat-card layout horizontal">
<div class="numbers paper-font-display1">
{{#if isSkill}}
{{prefix}}{{skillMod}}

12
rpg-docs/client/views/character/stats/stats.js
View File

@@ -1,10 +1,10 @@
Template.stats.events({
"click .statCard": function(event, instance){
"click .stat-card": function(event, instance){
var charId = instance.data._id;
if (this.isSkill){
pushDialogStack({
template: "skillDialog",
data: {
data: {
name: this.name,
skillName: this.stat,
charId: charId,
@@ -15,7 +15,7 @@ Template.stats.events({
} else {
pushDialogStack({
template: "attributeDialog",
data: {
data: {
name: this.name,
statName: this.stat,
charId: charId,
@@ -31,7 +31,7 @@ Template.stats.events({
if (this.ability === "strength") template = "strengthDialog";
pushDialogStack({
template: template,
data: {
data: {
name: this.title,
statName: this.ability,
charId: charId,
@@ -45,7 +45,7 @@ Template.stats.events({
var charId = instance.data._id;
pushDialogStack({
template: "skillDialog",
data: {
data: {
name: this.name,
skillName: skill,
charId: charId,
@@ -56,7 +56,7 @@ Template.stats.events({
"tap .hitPointTitle": function(event, instance) {
pushDialogStack({
template: "attributeDialog",
data: {
data: {
name: "Hit Points",
statName: "hitPoints",
charId: this._id,

9
rpg-docs/client/views/characterList/characterList.css
View File

@@ -9,7 +9,7 @@
}
.character-card .image {
position: relative;
}
.character-card .initials {
@@ -19,8 +19,11 @@
}
.character-card paper-item {
margin-top: 8px;
margin-bottom: 8px;
padding-top: 16px;
padding-bottom: 16px;
height: 76px;
background-color: #545454;
background-color: rgba(0,0,0,0.3);
}
.character-card .name {

24
rpg-docs/client/views/characterList/characterList.html
View File

@@ -11,23 +11,21 @@
{{#if characters.count}}
<div class="character-list layout horizontal wrap">
{{# each characters}}
<a class="character-card flex layout vertical" href="/character/{{_id}}">
<div class="flex image">
<iron-image class="fit {{colorClass}}"
sizing="cover" preload fade src={{picture}}>
</iron-image>
{{#unless picture}}
<div class="fit initials layout vertical center center-justified">
{{initials name}}
</div>
{{/unless}}
</div>
<a class="character-card flex layout vertical end-justified" href="/character/{{_id}}">
<iron-image class="fit {{colorClass}}"
sizing="cover" preload fade src={{picture}}>
</iron-image>
{{#unless picture}}
<div class="fit initials layout vertical center center-justified">
{{initials name}}
</div>
{{/unless}}
<paper-item>
<paper-item-body two-lines>
<div class="name">
<div class="name white87">
{{name}}
</div>
<div secondary>
<div secondary style="color: #8a8a8a; color: rgba(255,255,255,0.87);">
{{alignment}} {{gender}} {{race}}
</div>
</paper-item-body>

78
rpg-docs/client/views/paperTemplates/baseDialog/baseDialog.html
View File

@@ -1,44 +1,40 @@
<template name="baseDialog">
<div class="{{class}} top subhead"
style="height: 72px;"
hero-id="toolbar" hero
layout horizontal center>
<paper-icon-button id="backButton"
icon="arrow-back">
</paper-icon-button>
<div flex>{{title}}</div>
{{#if editing}}
{{#unless hideDelete}}
<paper-icon-button id="deleteButton"
role="button"
tabindex="0"
icon="delete"
aria-label="Delete Feature">
<app-header-layout has-scrolling-region class="fit base-dialog">
<app-header fixed effects="waterfall">
<app-toolbar class={{class}}>
<paper-icon-button id="backButton"
icon="arrow-back">
</paper-icon-button>
<div main-title>{{title}}</div>
{{#if editing}}
{{#unless hideDelete}}
<paper-icon-button id="deleteButton"
role="button"
tabindex="0"
icon="delete">
</paper-icon-button>
{{/unless}}
{{#unless hideColor}}
{{> colorDropdown}}
{{/unless}}
<paper-icon-button id="doneEditingButton"
icon="done">
</paper-icon-button>
{{else}}
{{#if showEdit}}
<paper-icon-button id="editButton"
icon="create">
</paper-icon-button>
{{/if}}
{{/if}}
</app-toolbar>
</app-header>
<div class="form">
{{#unless editing}}
{{> UI.contentBlock}}
{{else}}
{{> UI.elseBlock}}
{{/unless}}
{{#unless hideColor}}
{{> colorDropdown}}
{{/unless}}
<paper-icon-button id="doneEditingButton"
icon="done"
aria-label="Delete Feature">
</paper-icon-button>
{{else}}
{{#if showEdit}}
<paper-icon-button id="editButton"
icon="create"
aria-label="Delete Feature">
</paper-icon-button>
{{/if}}
{{/if}}
</div>
<div class="bottom scroll-y"
style="padding: 24px"
flex>
{{#unless editing}}
{{> UI.contentBlock}}
{{else}}
{{> UI.elseBlock}}
{{/unless}}
</div>
</template>
</div>
</app-header-layout>
</template>

10
rpg-docs/client/views/paperTemplates/baseDialog/baseDialog.js
View File

@@ -2,14 +2,10 @@ Template.baseDialog.onCreated(function(){
this.editing = new ReactiveVar(!!this.data.startEditing);
});
Template.baseDialog.onRendered(function(){
//after the dialog is built, open it
Session.set("global.ui.detailShow", true);
});
Template.baseDialog.helpers({
editing: function(){
return Template.instance().editing.get() && canEditCharacter(Template.parentData().charId);
return Template.instance().editing.get() &&
canEditCharacter(Template.parentData().charId);
},
showEdit: function() {
if (this.hideEdit) return false;
@@ -19,7 +15,7 @@ Template.baseDialog.helpers({
Template.baseDialog.events({
"tap #backButton": function(){
GlobalUI.closeDetail();
popDialogStack();
},
"tap #editButton": function(event, instance){
instance.editing.set(true);