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

Migrated the Feature page to Polymer 1

Browse Source
This commit is contained in:
Stefan Zermatten
2017-01-20 15:45:18 +02:00
parent 4261776d8c
commit 33ca60c2e6
20 changed files with 613 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,10 +10,9 @@
<template name="featureDetails">
{{#if or canEnable hasUses}}
<div layout horizontal center justified wrap>
<div class="layout horizontal center justified wrap">
{{#if canEnable}}
<div>enabled:</div>
<paper-checkbox class="sideMargin" checked={{enabled}}></paper-checkbox>
<paper-checkbox class="sideMargin" checked={{enabled}}>enabled</paper-checkbox>
{{/if}}
{{#if hasUses}}
<div class="subhead" style="margin-right: 16px">
@@ -21,7 +20,7 @@
</div>
{{/if}}
{{#if hasUses}}
<div layout horizontal>
<div class="layout horizontal">
<paper-button class="useFeature" disabled={{noUsesLeft}}>Use</paper-button>
<paper-button class="resetFeature" disabled={{usesFull}}>Reset</paper-button>
</div>
@@ -41,44 +40,36 @@
<template name="featureEdit">
<!--name-->
<paper-input id="featureNameInput" class="fullwidth" label="Name" floatinglabel value={{name}}></paper-input>
<paper-input id="featureNameInput" class="fullwidth" label="Name" value={{name}}></paper-input>
<hr class="vertMargin">
<div layout horizontal center style="height: 60px;">
<paper-dropdown-menu id="enabledDropdown" label="Enable Feature">
<paper-dropdown layered class="dropdown">
<core-menu id="enabledMenu" class="menu" selected={{enabledSelection}} on-tap="onStatMenuTap">
<paper-item name="alwaysEnabled"> Always Enabled </paper-item>
<paper-item name="enabled"> Enabled </paper-item>
<paper-item name="disabled"> Disabled </paper-item>
</core-menu>
</paper-dropdown>
<div class="layout horizontal center wrap justified">
<paper-dropdown-menu class=flex label="Enable Feature" style="flex-basis: 150px; max-width: 200px;">
<dicecloud-selector selected={{enabledSelection}} class="dropdown-content enabled-dropdown">
<paper-item name="alwaysEnabled" style="width: 150px;">
Always Enabled
</paper-item>
<paper-item name="enabled">
Enabled
</paper-item>
<paper-item name="disabled">
Disabled
</paper-item>
</dicecloud-selector>
</paper-dropdown-menu>
<div layout horizontal center class="sideMargin">
<div>Limit Uses: </div>
<paper-toggle-button id="limitUseCheck"
class="sideMargin"
checked={{usesSet}}
role="button"
aria-pressed="false"
tabindex="0"
touch-action="pan-y">
</paper-toggle-button>
</div>
<paper-toggle-button id="limitUseCheck" checked={{usesSet}} style="margin: 0 16px; height: 62px;">
Limit uses
</paper-toggle-button>
{{#if usesSet}}
<paper-input flex id="usesInput" label="Uses" floatinglabel value={{uses}}></paper-input>
<paper-input id="usesInput" type="number" allowed-pattern="[0-9]" class="flex"
label="Uses" value={{uses}} style="flex-basis: 100px; max-width: 200px">
</paper-input>
{{else}}
<div class="flex" style="flex-basis: 100px; max-width: 200px"></div>
{{/if}}
</div>
<hr class="vertMargin">
<!--description-->
<paper-input-decorator label="Description" floatinglabel layout vertical>
<paper-autogrow-textarea>
<textarea id="featureDescriptionInput" placeholder aria-label="Description" value={{description}}></textarea>
</paper-autogrow-textarea>
</paper-input-decorator>
<paper-textarea label="Description" id="featureDescriptionInput" value={{description}}></paper-textarea>
{{> effectsEditList parentId=_id parentCollection="Features" charId=charId name=name enabled=enabled}}
{{> proficiencyEditList parentId=_id parentCollection="Features" charId=charId enabled=enabled}}

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

@@ -31,11 +31,11 @@ Template.featureDetails.helpers({
});
Template.featureDetails.events({
"tap .useFeature": function(event){
"click .useFeature": function(event){
var featureId = this._id;
Features.update(featureId, {$inc: {used: 1}});
},
"tap .resetFeature": function(event){
"click .resetFeature": function(event){
var featureId = this._id;
Features.update(featureId, {$set: {used: 0}});
},
@@ -46,10 +46,6 @@ Template.featureDetails.events({
},
});
Template.featureEdit.onRendered(function(){
updatePolymerInputs(this);
});
Template.featureEdit.helpers({
usesSet: function(){
return _.isString(this.uses);
@@ -67,32 +63,53 @@ Template.featureEdit.helpers({
},
});
const debounce = (f) => _.debounce(f, 300);
Template.featureEdit.events({
"change #featureNameInput": function(event){
var name = Template.instance().find("#featureNameInput").value;
Features.update(this._id, {$set: {name: name}});
},
"change #featureDescriptionInput": function(event){
var description = Template.instance().find("#featureDescriptionInput").value;
Features.update(this._id, {$set: {description: description}});
},
"change #limitUseCheck": function(event){
"input #featureNameInput": debounce(function(event){
var name = event.currentTarget.value;
Features.update(this._id, {
$set: {name: name}
}, {
removeEmptyStrings: false,
trimStrings: false,
});
}),
"input #featureDescriptionInput": debounce(function(event){
var description = event.currentTarget.value;
Features.update(this._id, {
$set: {description: description}
}, {
removeEmptyStrings: false,
trimStrings: false,
});
}),
"change #limitUseCheck": debounce(function(event){
var currentUses = this.uses;
var featureId = this._id;
if (event.target.checked && !_.isString(currentUses)){
Features.update(featureId, {$set: {uses: ""}}, {removeEmptyStrings: false});
Features.update(featureId, {
$set: {uses: ""}
}, {
removeEmptyStrings: false
});
} else if (!event.target.checked && _.isString(currentUses)){
Features.update(featureId, {$unset: {uses: ""}});
Features.update(featureId, {
$unset: {uses: ""}
});
}
},
"change #usesInput, input #quantityInput": function(event){
var value = event.target.value;
}),
"input #usesInput, input #quantityInput": debounce(function(event){
var value = event.currentTarget.value;
var featureId = this._id;
Features.update(featureId, {$set: {uses: value}});
},
"core-select #enabledDropdown": function(event){
Features.update(featureId, {
$set: {uses: value}
}, {
removeEmptyStrings: false,
});
}),
"iron-select .enabled-dropdown": function(event){
var detail = event.originalEvent.detail;
if (!detail.isSelected) return;
var value = detail.item.getAttribute("name");
var setter;
if (value === "enabled"){

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

@@ -3,10 +3,6 @@
}
.features {
display: flex !important;
justify-content: center;
align-items: stretch;
flex-wrap: wrap;
padding: 4px;
}

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

@@ -1,20 +1,19 @@
<template name="features">
<div fit>
<div class="scroll-y" fit>
<div class="column-container">
<!--expertiseDice-->
{{>resource name="expertiseDice" title="Expertise Dice" color="teal" char=this}}
<!--ki-->
{{>resource name="ki" title="Ki Points" color="teal" char=this}}
<!--rages-->
{{>resource name="rages" title="Rages" color="teal" char=this}}
<!--sorceryPoints-->
{{>resource name="sorceryPoints" title="Sorcery Points" color="teal" char=this}}
<!--superiorityDice-->
{{>resource name="superiorityDice" title="Superiority Dice" color="teal" char=this}}
<div class="features">
<div class="column-container">
<!--expertiseDice-->
{{>resource name="expertiseDice" title="Expertise Dice" color="teal" char=this}}
<!--ki-->
{{>resource name="ki" title="Ki Points" color="teal" char=this}}
<!--rages-->
{{>resource name="rages" title="Rages" color="teal" char=this}}
<!--sorceryPoints-->
{{>resource name="sorceryPoints" title="Sorcery Points" color="teal" char=this}}
<!--superiorityDice-->
{{>resource name="superiorityDice" title="Superiority Dice" color="teal" char=this}}
<!--Attacks-->
<div>
<!--Attacks-->
<div>
<paper-material class="card">
<div class="top white">
Attacks
@@ -22,23 +21,21 @@
<div class="bottom list">
{{#each attacks}}
<div class="item-slot">
<div class="flexible attack item"
hero-id="main" {{detailHero}}>
<div layout horizontal>
<div class="headline"
style="margin-right: 16px;"
layout horizontal center>
<div class="flexible attack item">
<div class="layout horizontal">
<div class="paper-font-headline layout horizontal center"
style="margin-right: 16px;">
{{evaluateSigned ../_id attackBonus}}
</div>
<div flex layout vertical>
<div class="body2">
<div class="flex layout vertical">
<div class="paper-font-body2">
{{name}}
</div>
<div>
{{evaluateString ../_id damage}}&nbsp;{{damageType}}
</div>
{{#if details}}
<div class="caption">
<div>
{{details}}
</div>
{{/if}}
@@ -49,46 +46,43 @@
{{/each}}
</div>
</paper-material>
</div>
</div>
<!--Proficiencies-->
<div>
<!--Proficiencies-->
<div>
<paper-material class="card">
<div class="white top">
Proficiencies
</div>
<div flex class="bottom list">
{{#if weaponProfs.count}}
<div class="subhead">Weapons</div>
<div class="paper-font-subhead">Weapons</div>
{{/if}}
{{#each weaponProfs}}
{{> proficiencyListItem}}
{{/each}}
{{#if armorProfs.count}}
<div class="subhead">Armor</div>
<div class="paper-font-subhead">Armor</div>
{{/if}}
{{#each armorProfs}}
{{> proficiencyListItem}}
{{/each}}
{{#if toolProfs.count}}
<div class="subhead">Tools</div>
<div class="paper-font-subhead">Tools</div>
{{/if}}
{{#each toolProfs}}
{{> proficiencyListItem}}
{{/each}}
</div>
</paper-material>
</div>
</div>
<!--features-->
{{#each features}}
<div>
<paper-material class="card featureCard"
hero-id="main" {{detailHero}}>
<div class="top {{colorClass}} subhead"
layout horizontal
hero-id="toolbar" {{detailHero}}>
<div flex hero-id="title" {{detailHero}}>
<!--features-->
{{#each features}}
<div>
<paper-material class="card featureCard" data-id={{_id}}>
<div class="top {{colorClass}} paper-font-subhead layout horizontal">
<div class="flex">
{{name}}
</div>
{{#if hasUses}}
@@ -97,22 +91,22 @@
</div>
{{/if}}
{{#if canEnable}}
<core-tooltip label="Feature enabled"
position="left">
<div>
<paper-checkbox class="enabledCheckbox"
checked={{enabled}}
disabled={{#unless canEditCharacter charId}}true{{/unless}}>
</paper-checkbox>
</core-tooltip>
<paper-tooltip position="left">Feature enabled</paper-tooltip>
</div>
{{/if}}
</div>
{{#if description}}
<div flex class="bottom">
<div class="bottom flex">
{{#markdown}}{{evaluateString charId shortDescription}}{{/markdown}}
</div>
{{/if}}
{{#if hasUses}}
<div layout horizontal center end-justified>
<div class="layout horizontal center end-justified">
<paper-button class="useFeature"
disabled={{noUsesLeft}}>
Use
@@ -124,20 +118,15 @@
</div>
{{/if}}
</paper-material>
</div>
{{/each}}
</div>
<div class="fab-buffer"></div>
</div>
{{/each}}
</div>
{{#if canEditCharacter _id}}
<paper-fab id="addFeature"
class="floatyButton"
icon="add"
title="Add"
role="button"
tabindex="0"
aria-label="Add"
hero-id="main"></paper-fab>
icon="add">
<paper-tooltip position="left">Add Feature</paper-tooltip>
</paper-fab>
{{/if}}
</div>
</template>
@@ -145,12 +134,8 @@
<template name="resource">
{{#if characterCalculate "attributeBase" char._id name}}
<div>
<paper-material class="card"
hero-id="main" {{detailHero name char._id}}
layout horizontal>
<div class="left {{getColor}} display1 white-text"
hero-id="toolbar" {{detailHero name char._id}}
layout horizontal center>
<paper-material class="card layout horizontal">
<div class="left {{getColor}} paper-font-display1 white-text layout horizontal center">
<div style="margin-right: 8px;">
<paper-icon-button class="resourceUp"
icon="arrow-drop-up"
@@ -164,8 +149,7 @@
<div>{{characterCalculate "attributeValue" char._id name}}</div>
<!--<div>/{{char.attributeBase name}}</div>-->
</div>
<div class="right clickable"
flex layout horizontal center>
<div class="right clickable flex layout horizontal center">
{{title}}
</div>
</paper-material>

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

@@ -43,54 +43,45 @@ Template.features.helpers({
});
Template.features.events({
"tap #addFeature": function(event){
"click #addFeature": function(event, instance){
var featureId = Features.insert({
name: "New Feature",
charId: this._id,
enabled: true,
alwaysEnabled: true,
});
GlobalUI.setDetail({
pushDialogStack({
template: "featureDialog",
data: {featureId: featureId, charId: this._id, startEditing: true},
heroId: featureId,
element: event.currentTarget,
returnElement: instance.find(`.featureCard[data-id='${featureId}']`),
});
},
"tap #addAttackButton": function(event){
var charId = this._id;
Attacks.insert({
charId: charId
}, function(error, id){
if (!error){
GlobalUI.setDetail({
template: "attackDialog",
data: {attackId: id, charId: charId},
heroId: id,
});
}
});
},
"tap .featureCard .top": function(event){
"click .featureCard .top": function(event){
var featureId = this._id;
var charId = Template.parentData()._id;
GlobalUI.setDetail({
pushDialogStack({
template: "featureDialog",
data: {featureId: featureId, charId: charId},
heroId: featureId,
element: event.currentTarget.parentElement,
});
},
"tap .attack": function(event){
openParentDialog(this.parent, this.charId, this._id);
"click .attack": function(event){
openParentDialog({
parent: this.parent,
charId: this.charId,
element: event.currentTarget,
});
},
"tap .useFeature": function(event){
"click .useFeature": function(event){
var featureId = this._id;
Features.update(featureId, {$inc: {used: 1}});
},
"tap .resetFeature": function(event){
"click .resetFeature": function(event){
var featureId = this._id;
Features.update(featureId, {$set: {used: 0}});
},
"tap .enabledCheckbox": function(event){
"click .enabledCheckbox": function(event){
event.stopPropagation();
},
"change .enabledCheckbox": function(event){
@@ -122,7 +113,7 @@ Template.resource.helpers({
});
Template.resource.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){
@@ -131,7 +122,7 @@ Template.resource.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: {}};
@@ -139,11 +130,11 @@ Template.resource.events({
Characters.update(this.char._id, modifier, {validate: false});
}
},
"tap .right": function(event, instance) {
GlobalUI.setDetail({
"click .right": function(event, instance) {
pushDialogStack({
template: "attributeDialog",
data: {name: this.title, statName: this.name, charId: this.char._id},
heroId: this.char._id + this.name,
element: event.currentTarget.parentElement,
});
},
});