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

Upgraded spells page to Polymer 1

Browse Source
This commit is contained in:
Stefan Zermatten
2017-01-30 13:02:22 +02:00
parent fd21f4f7d7
commit 7af3b8e06e
12 changed files with 435 additions and 376 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
rpg-docs/client/views/character/attacks/attackEdit/attackEdit.html
View File

@@ -5,10 +5,7 @@
<!--attackBonus-->
<paper-input class="attackBonusInput flex" label="Attack Bonus" value={{attackBonus}}
style="flex-basis: 200px; margin-right: 16px;">
<div suffix>
<paper-tooltip position="left" animation-delay="0">This is a formula field</paper-tooltip>
<iron-icon icon="lightbulb-outline"></iron-icon>
</div>
{{> formulaSuffix}}
</paper-input>
<!--details-->
<paper-input class="detailInput" label="Details" value={{details}} style="flex-basis: 200px;">
@@ -18,10 +15,7 @@
<!--damageBonus-->
<paper-input class="damageInput flex" label="Damage" value={{damage}}
style="flex-basis: 200px; margin-right: 16px;">
<div suffix>
<paper-tooltip position="left" animation-delay="0">This field accepts formulae in {curly brackets}</paper-tooltip>
<iron-icon icon="dicecloud:code-braces"></iron-icon>
</div>
{{> bracketSuffix}}
</paper-input>
<!--DamageType-->
<paper-dropdown-menu label="Damage Type" dynamic-align>

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

@@ -67,13 +67,20 @@ const debounce = (f) => _.debounce(f, 300);
Template.featureEdit.events({
"input #featureNameInput": debounce(function(event){
var name = event.currentTarget.value;
Features.update(this._id, {
$set: {name: name}
}, {
removeEmptyStrings: false,
trimStrings: false,
});
const input = event.currentTarget;
var name = input.value;
if (!name){
input.invalid = true;
input.errorMessage = "Name is required";
} else {
input.invalid = false;
Features.update(this._id, {
$set: {name: name}
}, {
removeEmptyStrings: false,
trimStrings: false,
});
}
}),
"input #featureDescriptionInput": debounce(function(event){
var description = event.currentTarget.value;

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

@@ -54,7 +54,7 @@ Template.features.events({
template: "featureDialog",
data: {featureId: featureId, charId: this._id, startEditing: true},
element: event.currentTarget,
returnElement: instance.find(`.featureCard[data-id='${featureId}']`),
returnElement: () => instance.find(`.featureCard[data-id='${featureId}']`),
});
},
"click .featureCard .top": function(event){

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

@@ -1,3 +1,7 @@
.spellDialog paper-checkbox {
margin: 8px 16px 8px 8px;
.spell-dialog paper-checkbox {
margin: 8px;
}
.spell-dialog paper-dropdown-menu, .spell-dialog paper-input {
margin: 0 4px;
}

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

@@ -1,36 +1,38 @@
<template name="spellDialog">
{{#with spell}}
{{#baseDialog title=name class=colorClass startEditing=../startEditing}}
{{> spellDetails}}
{{else}}
{{> spellEdit}}
{{/baseDialog}}
{{/with}}
<div class="spell-dialog">
{{#with spell}}
{{#baseDialog title=name class=colorClass startEditing=../startEditing}}
{{> spellDetails}}
{{else}}
{{> spellEdit}}
{{/baseDialog}}
{{/with}}
</div>
</template>
<template name="spellDetails">
<div class="body2">
<div class="paper-font-body2">
Level {{level}} {{school}} {{#if ritual}}ritual{{/if}}, {{preparedString}}
</div>
<div style="margin: 16px 0 16px 0;">
{{#if castingTime}}
<div>
<span class="body2">Casting Time: </span><span>{{castingTime}}</span>
<span class="paper-font-body2">Casting Time: </span><span>{{castingTime}}</span>
</div>
{{/if}}
{{#if range}}
<div>
<span class="body2">Range: </span><span>{{range}}</span>
<span class="paper-font-body2">Range: </span><span>{{range}}</span>
</div>
{{/if}}
{{#if getComponents}}
<div>
<span class="body2">Components: </span><span>{{getComponents}}</span>
<span class="paper-font-body2">Components: </span><span>{{getComponents}}</span>
</div>
{{/if}}
{{#if duration}}
<div>
<span class="body2">Duration: </span><span>{{duration}}</span>
<span class="paper-font-body2">Duration: </span><span>{{duration}}</span>
</div>
{{/if}}
</div>
@@ -39,101 +41,78 @@
</template>
<template name="spellEdit">
<div horizontal layout>
<paper-input id="spellNameInput" label="Name" floatinglabel value={{name}} flex></paper-input>
</div>
<div layout horizontal justified wrap>
<paper-dropdown-menu id="schoolDropdown" label="School">
<paper-dropdown layered class="dropdown">
<core-menu class="menu" selected={{school}}>
{{#each magicSchools}}
<paper-item name={{this}} class="containerMenuItem">{{this}}</paper-item>
{{/each}}
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
<paper-dropdown-menu id="levelDropdown" label="Level">
<paper-dropdown layered class="dropdown">
<core-menu class="menu" selected={{level}}>
{{#each spellLevels}}
<paper-item name={{level}} class="containerMenuItem">{{name}}</paper-item>
{{/each}}
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
<div class="horizontal layout wrap">
<paper-input id="spellNameInput" label="Name" class="flex" value={{name}}></paper-input>
<paper-dropdown-menu id="listDropdown" label="Spell List">
<paper-dropdown layered class="dropdown">
<core-menu class="menu" selected={{parent.id}}>
{{#each spellLists}}
<dicecloud-selector class="dropdown-content" selected={{parent.id}}>
{{#each spellLists}}
<paper-item name={{_id}} class="containerMenuItem">{{name}}</paper-item>
{{/each}}
</core-menu>
</paper-dropdown>
{{/each}}
</dicecloud-selector>
</paper-dropdown-menu>
<paper-dropdown-menu id="preparedDropdown" label="School">
<paper-dropdown layered class="dropdown">
<core-menu class="menu" selected={{prepared}}>
{{#each preparedOptions}}
</div>
<div class="layout horizontal center justified wrap">
<paper-dropdown-menu id="levelDropdown" label="Level">
<dicecloud-selector class="dropdown-content" selected={{level}}>
{{#each spellLevels}}
<paper-item name={{level}} class="containerMenuItem">{{name}}</paper-item>
{{/each}}
</dicecloud-selector>
</paper-dropdown-menu>
<paper-dropdown-menu id="schoolDropdown" label="School">
<dicecloud-selector class="dropdown-content" selected={{school}}>
{{#each magicSchools}}
<paper-item name={{this}} class="containerMenuItem">{{this}}</paper-item>
{{/each}}
</dicecloud-selector>
</paper-dropdown-menu>
<paper-dropdown-menu id="preparedDropdown" label="Prepared">
<dicecloud-selector class="dropdown-content" selected={{prepared}}>
{{#each preparedOptions}}
<paper-item name={{value}} class="containerMenuItem">{{name}}</paper-item>
{{/each}}
</core-menu>
</paper-dropdown>
{{/each}}
</dicecloud-selector>
</paper-dropdown-menu>
<paper-checkbox id="ritualCheckbox" class="sideMargin" checked={{ritual}}>
Ritual
</paper-checkbox>
</div>
<hr class="vertMargin">
<div horizontal layout center justified wrap>
<div layout horizontal center>
<span>Verbal:</span>
<paper-checkbox id="verbalCheckbox" class="sideMargin" checked={{components.verbal}}></paper-checkbox>
</div>
<div layout horizontal center>
<span>Somatic:</span>
<paper-checkbox id="somaticCheckbox" class="sideMargin" checked={{components.somatic}}></paper-checkbox>
</div>
<div layout horizontal center>
<span>Concentration:</span>
<paper-checkbox id="concentrationCheckbox" class="sideMargin" checked={{components.concentration}}></paper-checkbox>
</div>
<div layout horizontal center>
<span>Ritual: </span>
<paper-checkbox id="ritualCheckbox" class="sideMargin" checked={{ritual}}></paper-checkbox>
</div>
</div>
<div layout horizontal center>
<div>Material: </div>
<paper-input id="materialInput" class="sideMargin" label="Material Components" floatinglabel value={{components.material}} flex></paper-input>
</div>
<hr class="vertMargin">
<div layout horizontal justified wrap>
<div class="layout horizontal center justified wrap">
<paper-input id="castingTimeInput"
label="Casting Time"
value={{castingTime}}
floatinglabel
flex></paper-input>
class="flex"
></paper-input>
<paper-input id="rangeInput"
class="sideMargin"
class="sideMargin flex"
label="Range"
value={{range}}
floatinglabel
flex></paper-input>
></paper-input>
</div>
<div class="horizontal layout center justified wrap">
<paper-checkbox id="verbalCheckbox" class="sideMargin" checked={{components.verbal}}>
Verbal
</paper-checkbox>
<paper-checkbox id="somaticCheckbox" class="sideMargin" checked={{components.somatic}}>
Somatic
</paper-checkbox>
<paper-input id="materialInput" class="sideMargin flex" label="Material Components" value={{components.material}}>
</paper-input>
</div>
<div class="horizontal laout center justified wrap">
<paper-input id="durationInput"
label="Duration"
value={{duration}}
floatinglabel
flex></paper-input>
class="flex"
></paper-input>
<paper-checkbox id="concentrationCheckbox" class="sideMargin" checked={{components.concentration}}>
Concentration
</paper-checkbox>
</div>
<hr class="vertMargin">
<!--Description-->
<paper-input-decorator label="Description" floatinglabel layout vertical>
<paper-autogrow-textarea>
<textarea id="descriptionInput" placeholder value={{description}}></textarea>
</paper-autogrow-textarea>
</paper-input-decorator>
<paper-textarea id="descriptionInput" label="Description" value="{{description}}">
</paper-textarea>
{{> attackEditList parentId=_id parentCollection="Spells" charId=charId enabled=true name=name}}
</template>

99
rpg-docs/client/views/character/spells/spellDialog/spellDialog.js
View File

@@ -24,7 +24,7 @@ Template.spellDialog.events({
"tap #deleteButton": function(event, instance){
Spells.softRemoveNode(instance.data.spellId);
GlobalUI.deletedToast(instance.data.spellId, "Spells", "Spell");
GlobalUI.closeDetail();
popDialogStack();
},
});
@@ -47,10 +47,6 @@ Template.spellDetails.helpers({
},
});
Template.spellEdit.onRendered(function(){
updatePolymerInputs(this);
});
Template.spellEdit.helpers({
spellLists: function(){
return SpellLists.find({charId: this.charId}, {fields: {name: 1}});
@@ -70,55 +66,92 @@ Template.spellEdit.helpers({
},
});
const debounce = (f) => _.debounce(f, 300);
Template.spellEdit.events({
"change #spellNameInput, input #spellNameInput": function(event){
"change #spellNameInput, input #spellNameInput": debounce(function(event){
const input = event.currentTarget;
var value = input.value;
if (!value){
input.invalid = true;
input.errorMessage = "Name is required";
} else {
input.invalid = false;
Spells.update(this._id, {
$set: {name: value}
}, {
removeEmptyStrings: false,
trimStrings: false,
});
}
}),
"change #castingTimeInput, input #castingTimeInput": debounce(function(event){
var value = event.currentTarget.value;
Spells.update(this._id, {$set: {name: value}});
},
"change #castingTimeInput": function(event){
Spells.update(this._id, {
$set: {castingTime: value}
}, {
removeEmptyStrings: false,
trimStrings: false,
});
}),
"change #rangeInput, input #rangeInput": debounce(function(event){
var value = event.currentTarget.value;
Spells.update(this._id, {$set: {castingTime: value}});
},
"change #rangeInput": function(event){
Spells.update(this._id, {
$set: {range: value}
}, {
removeEmptyStrings: false,
trimStrings: false,
});
}),
"change #durationInput, input #durationInput": debounce(function(event){
var value = event.currentTarget.value;
Spells.update(this._id, {$set: {range: value}});
},
"change #durationInput": function(event){
Spells.update(this._id, {
$set: {duration: value}
}, {
removeEmptyStrings: false,
trimStrings: false,
});
}),
"change #materialInput, input #materialInput": debounce(function(event){
var value = event.currentTarget.value;
Spells.update(this._id, {$set: {duration: value}});
},
"change #materialInput": function(event){
Spells.update(this._id, {
$set: {"components.material": value}
}, {
removeEmptyStrings: false,
trimStrings: false,
});
}),
"input #descriptionInput": debounce(function(event){
var value = event.currentTarget.value;
Spells.update(this._id, {$set: {"components.material": value}});
},
"change #descriptionInput": function(event){
var value = event.currentTarget.value;
Spells.update(this._id, {$set: {"description": value}});
},
"core-select #listDropdown": function(event){
Spells.update(this._id, {
$set: {"description": value}
}, {
removeEmptyStrings: false,
trimStrings: false,
});
}),
"iron-select #listDropdown": function(event){
var detail = event.originalEvent.detail;
if (!detail.isSelected) return;
var value = detail.item.getAttribute("name");
if (value == this.parent.id) return;
Spells.update(this._id, {$set: {"parent.id": value}});
Spells.update(this._id, {
$set: {"parent.id": value}
});
},
"core-select #levelDropdown": function(event){
"iron-select #levelDropdown": function(event){
var detail = event.originalEvent.detail;
if (!detail.isSelected) return;
var value = detail.item.getAttribute("name");
if (value == this.level) return;
Spells.update(this._id, {$set: {level: value}});
},
"core-select #schoolDropdown": function(event){
"iron-select #schoolDropdown": function(event){
var detail = event.originalEvent.detail;
if (!detail.isSelected) return;
var value = detail.item.getAttribute("name");
if (value == this.school) return;
Spells.update(this._id, {$set: {school: value}});
},
"core-select #preparedDropdown": function(event){
"iron-select #preparedDropdown": function(event){
var detail = event.originalEvent.detail;
if (!detail.isSelected) return;
var value = detail.item.getAttribute("name");
if (value == this.school) return;
Spells.update(this._id, {$set: {prepared: value}});

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

@@ -2,10 +2,10 @@
{{#with spellList}}
{{#baseDialog title=name class=colorClass startEditing=../startEditing}}
<div>
<div layout horizontal justified wrap class="subhead">
<div class="paper-font-subhead layout horizontal justified wrap">
{{#if attackBonus}}
<div>
Attack Bonus: {{evaluate charId attackBonus}}
Attack Bonus: {{evaluateSigned charId attackBonus}}
</div>
{{/if}}
{{#if saveDC}}
@@ -15,7 +15,7 @@
{{/if}}
{{#if maxPrepared}}
<div>
Max Prepared: {{evaluateSigned charId maxPrepared}}
Max Prepared Spells: {{evaluate charId maxPrepared}}
</div>
{{/if}}
</div>
@@ -23,36 +23,26 @@
<div>{{#markdown}}{{evaluateString charId description}}{{/markdown}}</div>
</div>
{{else}}
<div class="layout vertical">
<!--Name-->
<paper-input id="spellListNameInput"
class="fullwidth"
label="Name"
floatinglabel
value={{name}}></paper-input>
<paper-input id="spellListNameInput" label="Name" value={{name}}>
</paper-input>
<!--Save DC-->
<paper-input id="spellListSaveDCInput"
label="Save DC"
floatinglabel
value={{saveDC}}
style="width: 100%;"></paper-input><br>
<paper-input id="spellListSaveDCInput" label="Save DC" value={{saveDC}}>
{{> formulaSuffix}}
</paper-input>
<!--Attack Bonus-->
<paper-input id="spellListAttackBonusInput"
label="Attack Bonus"
floatinglabel
value={{attackBonus}}
style="width: 100%;"></paper-input><br>
<paper-input id="spellListAttackBonusInput" label="Attack Bonus" value={{attackBonus}}>
{{> formulaSuffix}}
</paper-input>
<!--Max Prepared-->
<paper-input id="spellListMaxPreparedInput"
label="Maximum Prepared Spells"
floatinglabel
value={{maxPrepared}}
style="width: 100%;"></paper-input><br>
<paper-input id="spellListMaxPreparedInput" label="Maximum Prepared Spells" value={{maxPrepared}}>
{{> formulaSuffix}}
</paper-input>
<!--Description-->
<paper-input-decorator label="Description" floatinglabel layout vertical>
<paper-autogrow-textarea>
<textarea id="spellListDescriptionInput" placeholder value={{description}}></textarea>
</paper-autogrow-textarea>
</paper-input-decorator>
<paper-textarea id="spellListDescriptionInput" label="Description" value={{description}}>
</paper-textarea>
</div>
{{/baseDialog}}
{{/with}}
</template>
</template>

84
rpg-docs/client/views/character/spells/spellListDialog/spellListDialog.js
View File

@@ -1,48 +1,80 @@
Template.spellListDialog.onRendered(function(){
updatePolymerInputs(this);
Template.spellListDialog.helpers({
spellList: function(){
return SpellLists.findOne(this.spellListId);
}
});
const debounce = (f) => _.debounce(f, 300);
Template.spellListDialog.events({
"color-change": function(event, instance){
SpellLists.update(instance.data.spellListId, {$set: {color: event.color}});
},
"tap #deleteButton": function(event, instance){
"click #deleteButton": function(event, instance){
SpellLists.softRemoveNode(instance.data.spellListId);
GlobalUI.deletedToast(
instance.data.spellListId,
"SpellLists",
"Spell list and contents"
);
GlobalUI.closeDetail();
popDialogStack();
},
//TODO clean up String -> num here so they don't need casting by Schema.clean
//TODO validate input (integer, non-negative, etc) for these inputs and give validation errors
"change #spellListNameInput, input #spellListNameInput": function(event){
"change #spellListNameInput, input #spellListNameInput":
debounce(function(event){
const input = event.currentTarget;
var value = input.value;
if (!value){
input.invalid = true;
input.errorMessage = "Name is required";
} else {
input.invalid = false;
SpellLists.update(this._id, {
$set: {name: value}
}, {
removeEmptyStrings: false,
trimStrings: false,
});
}
}),
"change #spellListSaveDCInput, input #spellListSaveDCInput":
debounce(function(event){
var value = event.currentTarget.value;
SpellLists.update(this._id, {$set: {name: value}});
},
"change #spellListSaveDCInput, input #spellListSaveDCInput": function(event){
var value = event.currentTarget.value;
SpellLists.update(this._id, {$set: {saveDC: value}});
},
SpellLists.update(this._id, {
$set: {saveDC: value}
}, {
removeEmptyStrings: false,
trimStrings: false,
});
}),
"change #spellListAttackBonusInput, input #spellListAttackBonusInput":
function(event){
debounce(function(event){
var value = event.currentTarget.value;
SpellLists.update(this._id, {$set: {attackBonus: value}});
},
SpellLists.update(this._id, {
$set: {attackBonus: value}
}, {
removeEmptyStrings: false,
trimStrings: false,
});
}),
"change #spellListMaxPreparedInput, input #spellListMaxPreparedInput":
function(event){
debounce(function(event){
var value = event.currentTarget.value;
SpellLists.update(this._id, {$set: {maxPrepared: value}});
},
"change #spellListDescriptionInput": function(event){
SpellLists.update(this._id, {
$set: {maxPrepared: value}
}, {
removeEmptyStrings: false,
trimStrings: false,
});
}),
"input #spellListDescriptionInput": debounce(function(event){
var value = event.currentTarget.value;
SpellLists.update(this._id, {$set: {description: value}});
},
});
Template.spellListDialog.helpers({
spellList: function(){
return SpellLists.findOne(this.spellListId);
}
SpellLists.update(this._id, {
$set: {description: value}
}, {
removeEmptyStrings: false,
trimStrings: false,
});
}),
});

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

@@ -67,17 +67,15 @@
margin: 4px;
}
.spellList .containerMain {
-ms-column-width: 300px;
-webkit-column-width: 300px;
-moz-column-width: 300px;
.spellList.card .bottom.list {
column-width: 300px;
-ms-column-gap: 8px;
-webkit-column-gap: 8px;
-moz-column-gap: 8px;
column-gap: 8px;
-moz-column-fill: balance;
column-fill: balance;
padding: 16px 4px;
}
.spellList .bottom .paper-font-subhead {
margin-left: 16px;
}
.spellLevel {

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

@@ -1,147 +1,145 @@
<template name="spells">
<div fit>
<div id="spells" class="scroll-y" fit>
<div style="padding: 4px;"
layout horizontal start wrap>
{{#if hasSlots}}
<paper-material class="card"
style="margin: 4px;"
hero-id="main" {{detailHero}}>
<div class="white top subhead"
layout horizontal center>
Spell Slots
</div>
<div class="bottom list">
{{#each levels}}{{#if showSlots ..}}
<div class="item-slot">
<div class="item spellSlot"
hero-id="main" {{detailHero slotStatName ../_id}}
layout horizontal center>
<div style="margin-right: 16px">
{{name}}
</div>
<div flex layout horizontal center>
{{#each slotBubbles ..}}
<paper-icon-button class="slotBubble"
icon={{icon}}
disabled={{disabled}}>
</paper-icon-button>
{{/each}}
</div>
<div id="spells" class="animation-slider">
<div style="padding: 4px;"
class="layout horizontal start wrap">
{{#if hasSlots}}
<paper-material class="card"
style="margin: 4px;">
<div class="white top subhead layout horizontal center">
Spell Slots
</div>
<div class="bottom list">
{{#each levels}}{{#if showSlots ..}}
<div class="item-slot">
<div class="item spellSlot layout horizontal center">
<div style="margin-right: 16px">
{{name}}
</div>
<div class="flex layout horizontal center">
{{#each slotBubbles ..}}
<paper-icon-button class="slotBubble"
icon={{icon}}
disabled={{disabled}}>
</paper-icon-button>
{{/each}}
</div>
</div>
{{/if}}{{/each}}
</div>
</paper-material>
{{/if}}
{{#each spellLists}}
<paper-material class="card spellList" flex
hero-id="main" {{detailHero}}
style="margin: 4px;">
<div class="top {{colorClass}}"
hero-id="toolbar" {{detailHero}}
layout horizontal center>
<div flex>
<div class="subhead">{{name}}</div>
<div class="caption">
{{#if saveDC}}
<span style="margin-right: 16px;">
Save DC: {{evaluate charId saveDC}}
</span>
{{/if}}
{{#if attackBonus}}
<span>
Attack Bonus: {{evaluateSigned charId attackBonus}}
</span>
{{/if}}
</div>
</div>
{{#if settings.showUnprepared}}
{{#if maxPrepared}}
<div class="subhead">
{{numPrepared}} / {{evaluate charId maxPrepared}}
{{/if}}{{/each}}
</div>
</paper-material>
{{/if}}
{{#each spellLists}}
<paper-material class="card spellList flex" data-id={{_id}} style="margin: 4px;">
<div class="top {{colorClass}} layout horizontal center">
<div class="flex">
<div class="paper-font-subhead">{{name}}</div>
<div class="paper-font-caption">
{{#if saveDC}}
<span style="margin-right: 16px;">
Save DC: {{evaluate charId saveDC}}
</span>
{{/if}}
{{#if attackBonus}}
<span>
Attack Bonus: {{evaluateSigned charId attackBonus}}
</span>
{{/if}}
</div>
</div>
{{#if showUnprepared _id}}
{{#if maxPrepared}}
<div class="paper-font-subhead">
{{numPrepared}} / {{evaluate charId maxPrepared}}
</div>
{{/if}}
<div>
<paper-tooltip position="left">
Done
</paper-tooltip>
<paper-icon-button class="finishPrep" icon="done">
</paper-icon-button>
</div>
{{else}}
<div>
<paper-tooltip position="left">
Change prepared spells
</paper-tooltip>
<paper-icon-button class="prepSpells"
disabled={{#unless canEditCharacter charId}}true{{/unless}}
icon="book">
</paper-icon-button>
</div>
{{/if}}
</div>
<div class="bottom list">
{{#each levels}}
<div class="spellLevel">
{{#if spellCount .. ../../_id}}
<div class="paper-font-subhead">
{{name}}
</div>
{{/if}}
<core-tooltip label="Done"
position="left">
<paper-icon-button class="finishPrep"
icon="done">
</paper-icon-button>
</core-tooltip>
{{else}}
<core-tooltip label="Change prepared spells"
position="left">
<paper-icon-button class="prepSpells"
disabled={{#unless canEditCharacter charId}}true{{/unless}}
icon="book">
</paper-icon-button>
</core-tooltip>
{{/if}}
</div>
<div class="bottom list column-container">
{{#each levels}}
<div class="spellLevel">
{{#if spellCount .. ../../_id}}
<div class="subhead">
{{name}}
{{#each spells ../_id ../../_id}}
{{#if showSpell ../../_id}}
<div class="item-slot">
<div class="tall spell item layout horizontal center" data-id={{_id}}>
<iron-icon icon="social:whatshot"
style="color: {{hexColor color}};
margin-right: 16px;"
></iron-icon>
<div class="flex layout vertical">
<div>{{name}}</div>
<div class="paper-font-caption">
{{school}}
{{castingTime}}
{{#if ritual}}
(ritual)
{{/if}}
{{#if spellComponents}}
- {{spellComponents}}
{{/if}}
</div>
</div>
{{#if showUnprepared ../../_id}}
<paper-checkbox class="preparedCheckbox"
checked={{isPrepared}}
disabled={{cantUnprepare}}>
</paper-checkbox>
{{/if}}
</div>
</div>
{{/if}}
{{#each spells ../_id ../../_id}}
{{#if showSpell ../../settings.showUnprepared}}
<div class="item-slot">
<div class="tall spell item"
hero-id="main" {{detailHero}}
layout horizontal center>
<iron-icon icon="social:whatshot"
style="color: {{hexColor color}};
margin-right: 16px;"
></iron-icon>
<div flex layout vertical>
<div>{{name}}</div>
<div class="caption">
{{school}}
{{castingTime}}
{{#if ritual}}
(ritual)
{{/if}}
{{#if spellComponents}}
- {{spellComponents}}
{{/if}}
</div>
</div>
{{#if ../../settings.showUnprepared}}
<paper-checkbox class="preparedCheckbox"
checked={{isPrepared}}
disabled={{cantUnprepare}}>
</paper-checkbox>
{{/if}}
</div>
</div>
{{/if}}
{{/each}}
</div>
{{/each}}
</div>
</paper-material>
{{/each}}
</div>
<div class="fab-buffer"></div>
{{/each}}
</div>
{{/each}}
</div>
</paper-material>
{{/each}}
</div>
<div class="fab-buffer"></div>
</div>
{{#if canEditCharacter _id}}
{{#fabMenu}}
<core-tooltip label="New spell list" position="left">
<div>
<paper-tooltip position="left">
New spell list
</paper-tooltip>
<paper-fab icon="work"
class="addSpellList"
mini>
</paper-fab>
</core-tooltip>
<core-tooltip label="New spell" position="left">
</div>
<div>
<paper-tooltip position="left">
New spell
</paper-tooltip>
<paper-fab icon="note-add"
class="addSpell"
mini>
class="addSpell"
mini>
</paper-fab>
</core-tooltip>
</div>
{{/fabMenu}}
{{/if}}
</template>

103
rpg-docs/client/views/character/spells/spells.js
View File

@@ -11,13 +11,17 @@ var spellLevels = [
{name: "Level 9", level: 9},
];
const showUnprepared = (listId) => {
return Session.get(`showUnprepared.${listId}`);
}
Template.spells.helpers({
spellLists: function(){
return SpellLists.find({charId: this._id}, {sort: {color: 1, name: 1}});
},
spellCount: function(list, charId){
if (!list || !list.settings) return;
if (list.settings.showUnprepared){
if (!list) return;
if (showUnprepared(list._id)){
return Spells.find(
{charId: charId, "parent.id": list._id, level: this.level},
{fields: {_id: 1, level: 1}}
@@ -43,6 +47,9 @@ Template.spells.helpers({
levels: function(){
return spellLevels;
},
showUnprepared: function(listId){
return showUnprepared(listId);
},
numPrepared: function(){
return Spells.find({
charId: Template.parentData()._id,
@@ -72,8 +79,8 @@ Template.spells.helpers({
isPrepared: function(){
return this.prepared === "prepared" || this.prepared === "always";
},
showSpell: function(listShowPrepped){
if (listShowPrepped) {
showSpell: function(listId){
if (showUnprepared(listId)) {
return true;
} else {
return this.prepared === "prepared" || this.prepared === "always";
@@ -84,7 +91,9 @@ Template.spells.helpers({
},
cantCast: function(level, char){
for (var i = level; i <= 9; i++){
if (Characters.calculate.attributeValue(char._id, "level" + i + "SpellSlots") > 0){
if (Characters.calculate.attributeValue(
char._id, "level" + i + "SpellSlots"
) > 0){
return false;
}
}
@@ -97,21 +106,27 @@ Template.spells.helpers({
},
hasSlots: function(){
for (var i = 1; i <= 9; i += 1){
if (Characters.calculate.attributeBase(this._id, "level" + i + "SpellSlots")){
if (Characters.calculate.attributeBase(
this._id, "level" + i + "SpellSlots"
)){
return true;
}
}
return false;
},
slotBubbles: function(char){
var baseSlots = Characters.calculate.attributeBase(char._id, "level" + this.level + "SpellSlots");
var currentSlots = Characters.calculate.attributeValue(char._id, "level" + this.level + "SpellSlots");
var baseSlots = Characters.calculate.attributeBase(
char._id, "level" + this.level + "SpellSlots"
);
var currentSlots = Characters.calculate.attributeValue(
char._id, "level" + this.level + "SpellSlots"
);
var slotsUsed = baseSlots - currentSlots;
var bubbles = [];
var i;
for (i = 0; i < currentSlots; i++){
bubbles.push({
icon: "radio-button-on",
icon: "radio-button-checked",
disabled: i !== currentSlots - 1 || !canEditCharacter(char._id), //last full slot not disabled
attribute: "level" + this.level + "SpellSlots",
charId: char._id,
@@ -119,7 +134,7 @@ Template.spells.helpers({
}
for (i = 0; i < slotsUsed; i++){
bubbles.push({
icon: "radio-button-off",
icon: "radio-button-unchecked",
disabled: i !== 0 || !canEditCharacter(char._id), //first empty slot not disabled
attribute: "level" + this.level + "SpellSlots",
charId: char._id,
@@ -133,11 +148,11 @@ Template.spells.helpers({
});
Template.spells.events({
"tap .slotBubble": function(event){
"click .slotBubble": function(event){
var modifier;
if (!event.currentTarget.disabled){
var char = Characters.findOne(this.charId);
if (event.currentTarget.icon === "radio-button-off"){
if (event.currentTarget.icon === "radio-button-unchecked"){
if (
Characters.calculate.attributeValue(char._id, this.attribute) <
Characters.calculate.attributeBase(char._id, this.attribute)
@@ -156,51 +171,49 @@ Template.spells.events({
}
event.stopPropagation();
},
"tap .spellSlot": function(event, instance) {
"click .spellSlot": function(event, instance) {
var name = "Level " + this.level + " Spell Slots";
var stat = "level" + this.level + "SpellSlots";
var charId = instance.data._id;
GlobalUI.setDetail({
pushDialogStack({
template: "attributeDialog",
data: {name: name, statName: stat, charId: charId},
heroId: charId + stat,
element: event.currentTarget,
});
},
"tap .spellList .top": function(event){
GlobalUI.setDetail({
"click .spellList .top": function(event){
pushDialogStack({
template: "spellListDialog",
data: {spellListId: this._id, charId: this.charId},
heroId: this._id,
element: event.currentTarget.parentElement,
});
},
"tap .spell": function(event){
GlobalUI.setDetail({
"click .spell": function(event){
pushDialogStack({
template: "spellDialog",
data: {spellId: this._id, charId: this.charId},
heroId: this._id,
element: event.currentTarget,
});
},
"tap .addSpellList": function(event){
"click .addSpellList": function(event, instance){
var charId = this.charId;
SpellLists.insert({
var id = SpellLists.insert({
name: "New SpellList",
charId: this._id,
saveDC: "8 + intelligenceMod + proficiencyBonus",
attackBonus: "intelligenceMod + proficiencyBonus",
}, function(error, id){
if (!error){
GlobalUI.setDetail({
template: "spellListDialog",
data: {spellListId: id, charId: charId, startEditing: true},
heroId: id,
});
}
});
pushDialogStack({
template: "spellListDialog",
data: {spellListId: id, charId: charId, startEditing: true},
element: event.currentTarget,
returnElement: () => instance.find(`.spellList[data-id='${id}']`),
});
},
"tap .addSpell": function(event){
"click .addSpell": function(event, instance){
var charId = this.charId;
var listId = SpellLists.findOne({charId: this._id})._id;
Spells.insert({
var id = Spells.insert({
name: "New Spell",
charId: this._id,
parent: {
@@ -208,17 +221,15 @@ Template.spells.events({
collection: "SpellLists",
},
prepared: "prepared",
}, function(error, id){
if (!error){
GlobalUI.setDetail({
template: "spellDialog",
data: {spellId: id, charId: charId, startEditing: true},
heroId: id,
});
}
});
pushDialogStack({
template: "spellDialog",
data: {spellId: id, charId: charId, startEditing: true},
element: event.currentTarget,
returnElement: () => instance.find(`.spell[data-id='${id}']`),
});
},
"tap .preparedCheckbox": function(event){
"click .preparedCheckbox": function(event){
event.stopPropagation();
},
"change .preparedCheckbox": function(event){
@@ -228,12 +239,12 @@ Template.spells.events({
else if (this.prepared === "prepared" && !value)
Spells.update(this._id, {$set: {prepared: "unprepared"}});
},
"tap .prepSpells": function(event){
SpellLists.update(this._id, {$set: {"settings.showUnprepared": true}});
"click .prepSpells": function(event){
Session.set(`showUnprepared.${this._id}`, true);
event.stopPropagation();
},
"tap .finishPrep": function(event){
SpellLists.update(this._id, {$set: {"settings.showUnprepared": false}});
"click .finishPrep": function(event){
Session.set(`showUnprepared.${this._id}`, false);
event.stopPropagation();
},
});

13
rpg-docs/client/views/paperTemplates/inputSuffixes/inputSuffixes.html Normal file
View File

@@ -0,0 +1,13 @@
<template name="formulaSuffix">
<div suffix>
<paper-tooltip position="left" animation-delay="0">This is a formula field</paper-tooltip>
<iron-icon icon="lightbulb-outline"></iron-icon>
</div>
</template>
<template name="bracketSuffix">
<div suffix>
<paper-tooltip position="left" animation-delay="0">This field accepts formulae in {curly brackets}</paper-tooltip>
<iron-icon icon="dicecloud:code-braces"></iron-icon>
</div>
</template>