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

Migrated stats tab to Polymer 1.0

Browse Source
This commit is contained in:
Stefan Zermatten
2017-01-17 15:01:11 +02:00
parent b8fdc27df9
commit 420de9b005
19 changed files with 214 additions and 255 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
rpg-docs/client/style/cards.scss
View File

@@ -56,7 +56,7 @@ $thinColumnWidth: 240px;
padding: 16px;
border-radius: 0 0 2px 2px;
&.list {
padding: 0 0 16px 0;
padding: 16px 0;
.subhead {
color: rgba(0,0,0,0.54);
font-size: 14px;

4
rpg-docs/client/style/listItem.scss
View File

@@ -3,7 +3,7 @@ List items
*/
.item-slot {
background-color: rgb(232, 232, 232);
background-color: rgba(0, 0, 0, 0.1);
background-color: rgba(0, 0, 0, 0.1);
}
.item {
@@ -30,7 +30,7 @@ List items
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.37);
z-index: 10;
}
core-icon, paper-icon-button {
iron-icon, paper-icon-button {
color: #747474;
color: rgba(0,0,0,0.54);
}

8
rpg-docs/client/style/main.scss
View File

@@ -35,14 +35,6 @@ hr {
text-align: center;
}
/*
Stop all links from formatting themselves
*/
a {
text-decoration: none;
color: inherit;
}
.avatar {
display: inline-block;
box-sizing: border-box;

88
rpg-docs/client/views/GeneralCSS/typography.css
View File

@@ -1,107 +1,35 @@
.display2 {
font-size: 45px;
font-weight: 400;
color: #000;
color: rgba(0,0,0,0.54);
letter-spacing: 0;
}
.white-text .display2{
.white-text .paper-font-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, .white-text.display1{
.white-text .paper-font-display1, .white-text.paper-font-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, .white-text.headline{
.white-text h1, .white-text .paper-font-headline, .white-text.paper-font-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, .white-text .title, .white-text.title{
.white-text h2, .white-text .paper-font-title, .white-text.paper-font-title{
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{
.white-text h3, .white-text .paper-font-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{
.white-text .paper-font-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, .white-text .body1{
.white-text p, .white-text .paper-font-body1{
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{
.white-text .paper-font-caption{
color: rgba(255,255,255,0.54);
}
html /deep/ .white-text{
color: #fff;
}
.black54 {
color: #444;
color: rgba(0,0,0,0.54);

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

@@ -1,54 +1,56 @@
<template name="characterSheet">
<app-header>
<app-toolbar class="medium-tall {{colorClass}}">
<paper-icon-button icon="menu" drawer-toggle top-item></paper-icon-button>
<div class="flex" top-item>
{{name}}
</div>
{{#if canEditCharacter _id}}
{{> colorDropdown}}
<paper-menu-button top-item>
<paper-icon-button icon="more-vert" class="dropdown-trigger"></paper-icon-button>
<paper-menu class="dropdown-content" halign="right">
<paper-icon-item id="deleteCharacter">
<iron-icon icon="delete" item-icon></iron-icon>
Delete
</paper-icon-item>
<paper-icon-item id="shareCharacter">
<iron-icon icon="social:share" item-icon></iron-icon>
Share
</paper-icon-item>
<paper-icon-item id="characterSettings">
<iron-icon icon="settings" item-icon></iron-icon>
Settings
</paper-icon-item>
</paper-menu>
</paper-menu-button>
{{/if}}
<div bottom-item>
<paper-tabs id="characterSheetTabs" selected={{selectedTab}} class="{{colorClass}}" attr-for-selected="name">
<paper-tab name="stats">Stats</paper-tab>
<paper-tab name="features">Features</paper-tab>
<paper-tab name="inventory">Inventory</paper-tab>
{{#unless hideSpellcasting}}
<paper-tab name="spells">Spells</paper-tab>
{{/unless}}
<paper-tab name="persona">Persona</paper-tab>
<paper-tab name="journal">Journal</paper-tab>
</paper-tabs>
</div>
</app-toolbar>
</app-header>
<div>
<neon-animated-pages id="tabPages" selected={{selectedTab}} transitions="slide-from-right" attr-for-selected="name">
<div name="stats">{{> stats}}</div>
<div name="features">{{> features}}</div>
<div name="inventory">{{> inventory}}</div>
{{#unless hideSpellcasting}}
<div name="spells">{{> spells}}</div>
{{/unless}}
<div name="persona">{{> persona}}</div>
<div name="journal">{{> journal}}</div>
</neon-animated-pages>
</div>
<app-header-layout has-scrolling-region fullbleed>
<app-header fixed>
<app-toolbar class="medium-tall {{colorClass}}">
<paper-icon-button icon="menu" drawer-toggle top-item></paper-icon-button>
<div class="flex" top-item>
{{name}}
</div>
{{#if canEditCharacter _id}}
{{> colorDropdown}}
<paper-menu-button top-item>
<paper-icon-button icon="more-vert" class="dropdown-trigger"></paper-icon-button>
<paper-menu class="dropdown-content" halign="right">
<paper-icon-item id="deleteCharacter">
<iron-icon icon="delete" item-icon></iron-icon>
Delete
</paper-icon-item>
<paper-icon-item id="shareCharacter">
<iron-icon icon="social:share" item-icon></iron-icon>
Share
</paper-icon-item>
<paper-icon-item id="characterSettings">
<iron-icon icon="settings" item-icon></iron-icon>
Settings
</paper-icon-item>
</paper-menu>
</paper-menu-button>
{{/if}}
<div bottom-item>
<paper-tabs id="characterSheetTabs" selected={{selectedTab}} class="{{colorClass}}" attr-for-selected="name">
<paper-tab name="stats">Stats</paper-tab>
<paper-tab name="features">Features</paper-tab>
<paper-tab name="inventory">Inventory</paper-tab>
{{#unless hideSpellcasting}}
<paper-tab name="spells">Spells</paper-tab>
{{/unless}}
<paper-tab name="persona">Persona</paper-tab>
<paper-tab name="journal">Journal</paper-tab>
</paper-tabs>
</div>
</app-toolbar>
</app-header>
<div>
<neon-animated-pages id="tabPages" selected={{selectedTab}} transitions="slide-from-right" attr-for-selected="name">
<div name="stats">{{> stats}}</div>
<div name="features">{{> features}}</div>
<div name="inventory">{{> inventory}}</div>
{{#unless hideSpellcasting}}
<div name="spells">{{> spells}}</div>
{{/unless}}
<div name="persona">{{> persona}}</div>
<div name="journal">{{> journal}}</div>
</neon-animated-pages>
</div>
</app-header-layout>
</template>

23
rpg-docs/client/views/character/stats/abilityCards/abilityCards.css Normal file
View File

@@ -0,0 +1,23 @@
.ability-mini-card {
min-width: 75px;
text-align: center;
cursor: pointer;
-webkit-margin-collapse: separate;
background: #fff;
}
.ability-mini-card .title {
padding: 16px;
}
.ability-mini-card .numbers {
min-width: 72px;
padding: 16px;
}
.ability-mini-card .modifier {
font-weight: 600;
font-size: 24px;
color: #747474;
color: rgba(0,0,0,0.54);
}

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

@@ -1,16 +1,17 @@
<template name="abilityMiniCard">
<div>
<paper-material class="card abilityMiniCard clickable"
hero-id="main" {{detailHero ability ../_id}}
layout horizontal>
<div class="left white-text {{color}}"
hero-id="toolbar" {{detailHero ability ../_id}}>
<div class="display1">{{characterCalculate "attributeValue" ../_id ability}}</div>
<div class="title">{{abilityMod}}</div>
</div>
<div class="right subhead" layout horizontal center>
{{title}}
</div>
</paper-material>
<paper-material class="ability-mini-card layout horizontal">
<div class="numbers">
<div class="paper-font-display1 stat">
{{characterCalculate "attributeValue" ../_id ability}}
</div>
<div class="paper-font-subhead modifier">
{{abilityMod}}
</div>
</div>
<div class="paper-font-subhead title flex layout horizontal center">
{{title}}
</div>
</paper-material>
</div>
</template>

37
rpg-docs/client/views/character/stats/healthCard/healthCard.html
View File

@@ -1,31 +1,28 @@
<template name="healthCard">
<paper-material class="card container healthCard"
hero-id="main" {{detailHero "hitPoints" _id}}
layout horizontal wrap>
<div class="green white-text subhead left"
hero-id="toolbar" {{detailHero "hitPoints" _id}}
layout vertical center center-justified>
<div class="hitPointTitle clickable">Hit Points</div>
<paper-material class="card container healthCard layout horizontal wrap">
<div class="green white-text subhead left layout vertical center center-justified">
<div class="hitPointTitle clickable">
Hit Points
</div>
<paper-icon-button class="white54"
id="addTempHP"
icon="add"
disabled={{#unless canEditCharacter _id}}true{{/unless}}>
</paper-icon-button>
</div>
<div class="right" flex layout vertical center-justified style="min-width: 180px;">
<div layout horizontal>
<div class="right flex layout vertical center-justified" style="min-width: 180px;">
<div class="layout horizontal">
<paper-diff-slider id="hitPointSlider"
value={{characterCalculate "attributeValue" _id "hitPoints"}}
max={{characterCalculate "attributeBase" _id "hitPoints"}}
editable pin
disabled={{#unless canEditCharacter _id}}true{{/unless}}
role="slider">
disabled={{#unless canEditCharacter _id}}true{{/unless}}>
</paper-diff-slider>
</div>
{{#each tempHitPoints}}
<div>
{{name}}
<div layout horizontal>
<div class="layout horizontal">
<paper-diff-slider class="tempHitPointSlider"
value={{left}}
max={{maximum}}
@@ -58,20 +55,20 @@
</div>
{{#if showDeathSave}}
{{#with deathSaveObject}}
<div class="padded" layout vertical center>
<div class="subhead">
<div class="padded layout vertical center">
<div class="paper-font-subhead">
Death Saves
</div>
<div layout horizontal>
<div layout vertical center>
<div class="layout horizontal">
<div class="layout vertical center">
<div class="caption">Fail</div>
<div layout horizontal center-justified wrap reverse>
<div class="layout horizontal center-justified wrap reverse">
<paper-icon-button class="slotBubble failBubble" icon={{failIcon 1}} disabled={{failDisabled 1}}></paper-icon-button>
<paper-icon-button class="slotBubble failBubble" icon={{failIcon 2}} disabled={{failDisabled 2}}></paper-icon-button>
<paper-icon-button class="slotBubble failBubble" icon={{failIcon 3}} disabled={{failDisabled 3}}></paper-icon-button>
</div>
</div>
<div layout horizontal center center-justified style="min-width: 94px">
<div class="layout horizontal center center-justified" style="min-width: 94px">
{{#if dead}}
DEAD
{{else}}
@@ -83,8 +80,8 @@
{{/if}}
</div>
<div layout vertical center>
<div class="caption">Pass</div>
<div layout horizontal center-justified wrap>
<div class="paper-font-caption">Pass</div>
<div class="layout horizontal center-justified wrap">
<paper-icon-button class="slotBubble passBubble" icon={{passIcon 1}} disabled={{passDisabled 1}}></paper-icon-button>
<paper-icon-button class="slotBubble passBubble" icon={{passIcon 2}} disabled={{passDisabled 2}}></paper-icon-button>
<paper-icon-button class="slotBubble passBubble" icon={{passIcon 3}} disabled={{passDisabled 3}}></paper-icon-button>

46
rpg-docs/client/views/character/stats/hitDice/hitDice.html
View File

@@ -1,35 +1,31 @@
<template name="hitDice">
{{#if characterCalculate "attributeBase" ../_id name}}
<div>
<paper-material class="card hit-dice" hero-id="main"
{{detailHero name ../_id}}
layout horizontal>
<div class="left green display1 white-text"
hero-id="toolbar" {{detailHero name ../_id}}
layout horizontal>
<div>
<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 class="resourceValue" layout vertical center>
<paper-material class="card hit-dice layout horizontal">
<div class="left green paper-font-display1 white-text layout horizontal">
<div>
{{characterCalculate "attributeValue" ../_id name}}
<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 class="title white-text">
d{{diceNum}} {{conMod}}
<div class="resourceValue layout vertical center">
<div>
{{characterCalculate "attributeValue" ../_id name}}
</div>
<div class="paper-font-title white-text">
d{{diceNum}} {{conMod}}
</div>
</div>
</div>
</div>
<div class="right clickable" flex relative horizontal layout center>
Hit Dice
</div>
</paper-material>
<div class="right clickable flex relative horizontal layout center">
Hit Dice
</div>
</paper-material>
</div>
{{/if}}
</template>

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

@@ -16,7 +16,7 @@ Template.hitDice.helpers({
});
Template.hitDice.events({
"tap .resourceUp": function(event){
"click .resourceUp": function(event){
var value = Characters.calculate.attributeValue(this.char._id, this.name);
var base = Characters.calculate.attributeBase(this.char._id, this.name);
if (value < base){
@@ -25,7 +25,7 @@ Template.hitDice.events({
Characters.update(this.char._id, modifier, {validate: false});
}
},
"tap .resourceDown": function(event){
"click .resourceDown": function(event){
var value = Characters.calculate.attributeValue(this.char._id, this.name);
if (value > 0){
var modifier = {$inc: {}};
@@ -33,10 +33,10 @@ Template.hitDice.events({
Characters.update(this.char._id, modifier, {validate: false});
}
},
"tap .right": function() {
"click .right": function(event, template) {
var charId = Template.parentData()._id;
var title = "d" + this.diceNum + " Hit Dice";
GlobalUI.setDetail({
pushDialogStack({
template: "attributeDialog",
data: {
name: title,
@@ -44,7 +44,7 @@ Template.hitDice.events({
charId: charId,
color: "green",
},
heroId: charId + this.name,
element: event.currentTarget.parentElement,
});
},
});

7
rpg-docs/client/views/character/stats/skillRow/skillRow.html
View File

@@ -1,9 +1,6 @@
<template name="skillRow">
<div class="item-slot">
<div class="skill-row item small"
hero-id="main"
{{detailHero skill ../_id}}
layout horizontal center>
<div class="skill-row item small layout horizontal center">
<iron-icon icon="{{profIcon}}"></iron-icon>
{{#if failSkill}}
<div class="fail skill-mod">fail</div>
@@ -23,4 +20,4 @@
</div>
</div>
</div>
</template>
</template>

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

@@ -12,7 +12,7 @@ Template.skillRow.helpers({
if (prof > 0 && prof < 1) return "image:brightness-2";
if (prof === 1) return "image:brightness-1";
if (prof > 1) return "av:album";
return "radio-button-off";
return "radio-button-unchecked";
},
failSkill: function(){
var charId = Template.parentData()._id;

16
rpg-docs/client/views/character/stats/statCard/statCard.css Normal file
View File

@@ -0,0 +1,16 @@
.stat-card {
min-width: 75px;
text-align: center;
cursor: pointer;
-webkit-margin-collapse: separate;
background: #fff;
}
.stat-card .title {
padding: 16px;
}
.stat-card .numbers {
min-width: 72px;
padding: 16px;
}

16
rpg-docs/client/views/character/stats/statCard/statCard.html Normal file
View File

@@ -0,0 +1,16 @@
<template name="statCard">
<div>
<paper-material class="ability-mini-card layout horizontal">
<div class="numbers paper-font-display1">
{{#if isSkill}}
{{prefix}}{{skillMod}}
{{else}}
{{prefix}}{{characterCalculate "attributeValue" ../_id stat}}
{{/if}}
</div>
<div class="paper-font-subhead title flex layout horizontal center">
{{name}}
</div>
</paper-material>
</div>
</template>

9
rpg-docs/client/views/character/stats/statCard/statCard.js Normal file
View File

@@ -0,0 +1,9 @@
Template.statCard.helpers({
skillMod: function() {
return signedString(
Characters.calculate.skillMod(
Template.parentData()._id, this.stat
)
);
},
});

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

@@ -29,7 +29,7 @@
<!--Saving Throws-->
<div>
<paper-material class="card">
<div class="top white subhead">
<div class="top white paper-font-subhead">
Saving Throws
</div>
<div flex class="bottom list">
@@ -45,7 +45,7 @@
<!--Skills-->
<div>
<paper-material class="card">
<div class="top white subhead">
<div class="top white paper-font-subhead">
Skills
</div>
<div flex class="bottom list">
@@ -73,21 +73,3 @@
</div>
</div>
</template>
<template name="statCard">
<div>
<paper-material class="card statCard clickable" hero-id="main" {{detailHero stat ../_id}} layout horizontal>
<div class="left display1 white-text {{color}}"
hero-id="toolbar" {{detailHero stat ../_id}}>
{{#if isSkill}}
{{prefix}}{{skillMod}}
{{else}}
{{prefix}}{{characterCalculate "attributeValue" ../_id stat}}
{{/if}}
</div>
<div class="right subhead" flex horizontal layout center>
{{name}}
</div>
</paper-material>
</div>
</template>

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

@@ -1,8 +1,8 @@
Template.stats.events({
"tap .statCard": function(event, instance){
"click .statCard": function(event, instance){
var charId = instance.data._id;
if (this.isSkill){
GlobalUI.setDetail({
pushDialogStack({
template: "skillDialog",
data: {
name: this.name,
@@ -10,10 +10,10 @@ Template.stats.events({
charId: charId,
color: this.color,
},
heroId: charId + this.stat,
element: event.currentTarget,
});
} else {
GlobalUI.setDetail({
pushDialogStack({
template: "attributeDialog",
data: {
name: this.name,
@@ -21,15 +21,15 @@ Template.stats.events({
charId: charId,
color: this.color,
},
heroId: charId + this.stat,
element: event.currentTarget,
});
}
},
"tap .abilityMiniCard": function(event, instance){
"click .ability-mini-card": function(event, instance){
var charId = Template.parentData()._id;
var template = "attributeDialog";
if (this.ability === "strength") template = "strengthDialog";
GlobalUI.setDetail({
pushDialogStack({
template: template,
data: {
name: this.title,
@@ -37,24 +37,24 @@ Template.stats.events({
charId: charId,
color: this.color,
},
heroId: charId + this.ability,
element: event.currentTarget,
});
},
"tap .skill-row": function(event, instance){
var skill = this.skill;
var charId = instance.data._id;
GlobalUI.setDetail({
pushDialogStack({
template: "skillDialog",
data: {
name: this.name,
skillName: skill,
charId: charId,
},
heroId: charId + skill,
element: event.currentTarget,
});
},
"tap .hitPointTitle": function(event, instance) {
GlobalUI.setDetail({
pushDialogStack({
template: "attributeDialog",
data: {
name: "Hit Points",
@@ -62,17 +62,7 @@ Template.stats.events({
charId: this._id,
color: "green",
},
heroId: this._id + "hitPoints",
element: event.currentTarget.parentElement.parentElement,
});
},
});
Template.statCard.helpers({
skillMod: function() {
return signedString(
Characters.calculate.skillMod(
Template.parentData()._id, this.stat
)
);
},
});

4
rpg-docs/client/views/layout/polymerImports.html
View File

@@ -11,12 +11,12 @@
<link rel="import" href="/components/app-layout/app-scroll-effects/effects/resize-title.html">
<link rel="import" href="/components/iron-icon/iron-icon.html">
<!--<link rel="import" href="/components/iron-icons/av-icons.html">-->
<link rel="import" href="/components/iron-icons/av-icons.html">
<!--<link rel="import" href="/components/iron-icons/communication-icons.html">-->
<!--<link rel="import" href="/components/iron-icons/device-icons.html">-->
<!--<link rel="import" href="/components/iron-icons/editor-icons.html">-->
<!--<link rel="import" href="/components/iron-icons/hardware-icons.html">-->
<!--<link rel="import" href="/components/iron-icons/image-icons.html">-->
<link rel="import" href="/components/iron-icons/image-icons.html">
<link rel="import" href="/components/iron-icons/iron-icons.html">
<!--<link rel="import" href="/components/iron-icons/maps-icons.html">-->
<!--<link rel="import" href="/components/iron-icons/notification-icons.html">-->

10
rpg-docs/public/custom_components/app-theme.html
View File

@@ -1,6 +1,7 @@
<link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="../components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../components/paper-styles/classes/typography.html">
<link rel="import" href="../components/paper-styles/classes/global.html">
<style is="custom-style" include="iron-flex iron-flex-alignment iron-positioning">
--primary-color: #424242;
@@ -12,4 +13,13 @@
paper-item.short {
--paper-item-min-height: 32px;
}
a {
color: inherit;
text-decoration: none;
text-transform: inherit;
font-size: inherit;
font-weight: inherit;
letter-spacing: inherit;
line-height: inherit;
}
</style>