Implemented Effect View for skills

This commit is contained in:
Thaum
2015-03-06 11:03:09 +00:00
parent 76ba6b441e
commit 40a050d88f
28 changed files with 602 additions and 86 deletions

View File

@@ -1,4 +1,4 @@
Schemas.Skill = new SimpleSchema({
//attribute name that this skill used as base mod for roll
ability: { type: String, defaultValue: "" },
});
});

View File

@@ -98,14 +98,7 @@ Template.layout.events({
},
"core-animated-pages-transition-end [detail-pages]": function(e) {
var detailOpened = Session.get("global.ui.detailShow");
if(detailOpened){
//HACK by putting core-selected back on the main content section
//we stop it being hidden while the detail section is shown
$("#mainContentSection").addClass("core-selected");
//but we still want to track whether it is or isn't actually selected
//so we can hide hero elements, since they are technically now shown as detail
$("#mainContentSection").addClass("fake-selected");
} else {
if(!detailOpened){
Session.set("global.ui.detailData", null);
Session.set("global.ui.detailTemplate", null);
Session.set("global.ui.detailHeroId", null);

View File

@@ -1,5 +1,6 @@
Template.registerHelper("detailHero", function(suffix){
var id = suffix? this._id + suffix : this._id;
Template.registerHelper("detailHero", function(suffix, givenId){
var id = givenId || this._id;
if(suffix) id += suffix;
if ( Session.equals("global.ui.detailHeroId", id) ) {
return "hero";
}

View File

@@ -1,83 +1,83 @@
html /deep/ .red {
.red {
background-color: #F44336;
}
html /deep/ .pink {
.pink {
background-color: #E91E63;
}
html /deep/ .purple {
.purple {
background-color: #9C27B0;
}
html /deep/ .deep-purple {
.deep-purple {
background-color: #673AB7;
}
html /deep/ .indigo {
.indigo {
background-color: #3F51B5;
}
html /deep/ .blue {
.blue {
background-color: #2196F3;
}
html /deep/ .light-blue {
.light-blue {
background-color: #03A9F4;
}
html /deep/ .cyan {
.cyan {
background-color: #00BCD4;
}
html /deep/ .teal {
.teal {
background-color: #009688;
}
html /deep/ .green {
.green {
background-color: #4CAF50;
}
html /deep/ .light-green {
.light-green {
background-color: #8BC34A;
}
html /deep/ .lime {
.lime {
background-color: #CDDC39;
}
html /deep/ .yellow {
.yellow {
background-color: #FFEB3B;
}
html /deep/ .amber {
.amber {
background-color: #FFC107;
}
html /deep/ .orange {
.orange {
background-color: #FF9800;
}
html /deep/ .deep-orange {
.deep-orange {
background-color: #FF5722;
}
html /deep/ .brown {
.brown {
background-color: #795548;
}
html /deep/ .grey {
.grey {
background-color: #9E9E9E;
}
html /deep/ .blue-grey {
.blue-grey {
background-color: #607D8B;
}
html /deep/ .white {
.white {
background-color: #ffffff;
}
html /deep/ .black {
background-color: #000000;
.black {
background-color: #262626;
}

View File

@@ -63,6 +63,6 @@
}
}
.fake-selected [hero] {
.not-selected [hero] {
visibility: hidden;
}

View File

@@ -82,7 +82,7 @@ p, .body1, body {
letter-spacing: 0.010em;
}
.white-text p{
.white-text p, .white-text .body1{
color: rgba(255,255,255,0.87);
}

View File

@@ -5,7 +5,9 @@
<div flex>
{{name}}
</div>
<paper-icon-button icon="more-vert" role="button"></paper-icon-button>
<div>
{{> colorDropdown}}
</div>
<div class="bottom fit" horizontal layout>
<paper-tabs flex horizontal center layout id="characterSheetTabs" selected={{selectedTab}} class="{{colorClass}}">
<paper-tab name="stats">Stats</paper-tab>

View File

@@ -22,5 +22,8 @@ Template.characterSheet.events({
},
"tap #characterSheetTabs paper-tab": function(event, instance){
setTab(this._id, event.currentTarget.getAttribute("name"));
}
},
"color-change": function(event, instance){
Characters.update(this._id, {$set: {color: event.color}});
},
});

View File

@@ -0,0 +1,12 @@
<template name="effectView">
<div class="effectView" layout horizontal center>
{{#if sourceId}}
<div>{{sourceName}}</div>
{{else}}
<div flex>{{statName}}</div>
{{/if}}
<div>{{operationName}}</div>
<div>{{statValue}}</div>
<br>
</div>
</template>

View File

@@ -0,0 +1,133 @@
//TODO add dexterity armor
var stats = {
"strength":{"name":"Strength"},
"dexterity":{"name":"Dexterity"},
"constitution":{"name":"Constitution"},
"intelligence":{"name":"Intelligence"},
"wisdom":{"name":"Wisdom"},
"charisma":{"name":"Charisma"},
"strengthSave":{"name":"Strength Save",},
"dexteritySave":{"name":"Dexterity Save",},
"constitutionSave":{"name":"Constitution Save",},
"intelligenceSave":{"name":"Intelligence Save",},
"wisdomSave":{"name":"Wisdom Save",},
"charismaSave":{"name":"Charisma Save",},
"acrobatics":{"name":"Acrobatics",},
"animalHandling":{"name":"Animal Handling",},
"arcana":{"name":"Arcana",},
"athletics":{"name":"Athletics",},
"deception":{"name":"Deception",},
"history":{"name":"History",},
"insight":{"name":"Insight",},
"intimidation":{"name":"Intimidation",},
"investigation":{"name":"Investigation",},
"medicine":{"name":"Medicine",},
"nature":{"name":"Nature",},
"perception":{"name":"Perception",},
"performance":{"name":"Performance",},
"persuasion":{"name":"Persuasion",},
"religion":{"name":"Religion",},
"sleightOfHand":{"name":"Sleight of Hand",},
"stealth":{"name":"Stealth",},
"survival":{"name":"Survival",},
"initiative":{"name":"Initiative",},
"hitPoints":{"name":"Hit Points"},
"armor":{"name":"Armor"},
"dexterityArmor":{"name":"Dexterity Armor Bonus"}
,"speed":{"name":"Speed"},
"proficiencyBonus":{"name":"Proficiency Bonus"},
"ki":{"name":"Ki Points"},
"sorceryPoints":{"name":"Sorcery Points"},
"rages":{"name":"Rages"},
"rageDamage":{"name":"Rage Damage"},
"expertiseDice":{"name":"Expertise Dice"},
"superiorityDice":{"name":"Superiority Dice"},
"level1SpellSlots":{"name":"level 1 Spell Slots"},
"level2SpellSlots":{"name":"level 2 Spell Slots"},
"level3SpellSlots":{"name":"level 3 Spell Slots"},
"level4SpellSlots":{"name":"level 4 Spell Slots"},
"level5SpellSlots":{"name":"level 5 Spell Slots"},
"level6SpellSlots":{"name":"level 6 Spell Slots"},
"level7SpellSlots":{"name":"level 7 Spell Slots"},
"level8SpellSlots":{"name":"level 8 Spell Slots"},
"level9SpellSlots":{"name":"level 9 Spell Slots"},
"d6HitDice":{"name":"d6 Hit Dice"},
"d8HitDice":{"name":"d8 Hit Dice"},
"d10HitDice":{"name":"d10 Hit Dice"},
"d12HitDice":{"name":"d12 Hit Dice"},
"acidMultiplier":{"name":"Acid", "group": "Weakness/Resistance"},
"bludgeoningMultiplier":{"name":"Bludgeoning", "group": "Weakness/Resistance"},
"coldMultiplier":{"name":"Cold", "group": "Weakness/Resistance"},
"fireMultiplier":{"name":"Fire", "group": "Weakness/Resistance"},
"forceMultiplier":{"name":"Force", "group": "Weakness/Resistance"},
"lightningMultiplier":{"name":"Lightning", "group": "Weakness/Resistance"},
"necroticMultiplier":{"name":"Necrotic", "group": "Weakness/Resistance"},
"piercingMultiplier":{"name":"Piercing", "group": "Weakness/Resistance"},
"poisonMultiplier":{"name":"Poison", "group": "Weakness/Resistance"},
"psychicMultiplier":{"name":"Psychic", "group": "Weakness/Resistance"},
"radiantMultiplier":{"name":"Radiant", "group": "Weakness/Resistance"},
"slashingMultiplier":{"name":"Slashing", "group": "Weakness/Resistance"},
"thunderMultiplier":{"name":"Thunder", "group": "Weakness/Resistance"}
};
var operations = {
base: {name: "Base Value"},
proficiency: {name: "Proficiency"},
add: {name: "Add"},
mul: {name: "Multiply"},
min: {name: "Min"},
max: {name: "Max"},
advantage: {name: "Advantage"},
disadvantage: {name: "Disadvantage"},
passiveAdd: {name: "Passive Bonus"},
fail: {name: "Automatically Fail"},
conditional: {name: "Conditional Benefit"}
};
Template.effectView.helpers({
sourceName: function(){
var id = this.sourceId;
if(!id) return;
switch(this.type){
case "feature":
return "Feature - " + Features.findOne(id, {fields: {name: 1}}).name;
case "class":
return Classes.findOne(id, {fields: {name: 1}}).name;
case "buff":
return "Buff - " + Buffs.findOne(id, {fields: {name: 1}}).name;
case "equipment":
return "Equipment - " + Items.findOne(id, {fields: {name: 1}}).name;
case "racial":
return Characters.findOne(this.charId, {fields: {race: 1}}).race;
case "inate":
return "Inate"
}
},
statName: function(){
return stats[this.stat] && stats[this.stat].name || "No Stat"
},
operationName: function(){
if(this.operation === "proficiency") return null;
if(stats[this.stat].group === "Weakness/Resistance") return null;
return operations[this.operation] && operations[this.operation].name || "No Operation"
},
statValue: function(){
if(this.operation === "advantage" ||
this.operation === "disadvantage" ||
this.operation === "fail" ||
this.operation === "conditional"){
return null;
}
if(this.operation === "proficiency"){
if(this.value == 0.5 || this.calculation == 0.5) return "Half Proficiency";
if(this.value == 1 || this.calculation == 1) return "Proficiency";
if(this.value == 2 || this.calculation == 2) return "Double Proficiency";
}
if(stats[this.stat].group === "Weakness/Resistance"){
if(this.value == 0.5 || this.calculation == 0.5) return "Resistance";
if(this.value == 2 || this.calculation == 2) return "Vulnerability";
if(this.value == 0 || this.calculation == 0) return "Immunity";
}
return this.calculation || this.value;
}
});

View File

@@ -0,0 +1,12 @@
<!--needs to be given charId, sourceId and type-->
<template name="effectsViewList">
{{#if effects}}
<hr style="margin: 16px 0 16px 0;">
<div id="effects">
<h2>Effects</h2>
{{#each effects}}
{{>effectView}}
{{/each}}
</div>
{{/if}}
</template>

View File

@@ -0,0 +1,10 @@
Template.effectsViewList.helpers({
effects: function(){
if(this.sourceId){
return Effects.find({sourceId: this.sourceId, type: this.type, charId: this.charId}, {fields: {sourceId: 0}});
} else if(this.stat){
return Effects.find({charId: this.charId, stat: this.stat});
}
}
});

View File

@@ -36,8 +36,5 @@ Template.featureDialog.helpers({
},
usesSet: function(){
return _.isString(this.uses);
},
colorClass: function(){
return getColorClass(this.color)
}
});

View File

@@ -22,9 +22,9 @@
</template>
<template name="containerCardHelper">
<paper-shadow class="card container {{class}}" hero-id="main" {{detailHero field}}>
<div class="containerTop {{colorClass}}" hero-id="toolbar" layout horizontal center {{detailHero field}}>
<div class="containerName subhead" hero-id="title" flex {{detailHero field}}>{{title}}</div>
<paper-shadow class="card container {{class}}" hero-id="main" {{detailHero field ../_id}}>
<div class="containerTop {{colorClass}}" hero-id="toolbar" layout horizontal center {{detailHero field ../_id}}>
<div class="containerName subhead" hero-id="title" flex {{detailHero field ../_id}}>{{title}}</div>
</div>
<div flex class="containerMain">{{> UI.contentBlock}}</div>
</paper-shadow>

View File

@@ -1,13 +1,13 @@
<template name="abilityMiniCard">
<paper-shadow class="card double">
<paper-shadow class="card double abilityMiniCard">
<div class="abilityScore white-text {{color}}">
{{> ripple color="#eee"}}
<h1 class="display1">{{../attributeValue ability}}</h1>
<h2>{{../abilityMod ability}}</h2>
</div>
<div class="abilityCardRight subhead" layout horizontal center>
{{title}}
</div>
<paper-ripple fit></paper-ripple>
</paper-shadow>
</template>

View File

@@ -0,0 +1,81 @@
<!-- needs name, char, and skillName -->
<template name="skillDialog">
{{#baseDialog title=name class=colorClass hideColor="true" hideDelete="true"}}
<!--proficiency-->
<div>
<core-icon icon="{{profIcon}}"></core-icon>
{{#if profSource}}
{{#with profSource}}
{{statValue}} - {{sourceName}}
{{/with}}
{{else}}
Not Proficient
{{/if}}
</div>
<!--numerical value-->
<div>
<!--Ability Mod-->
<div>
<div>{{abilityName}}</div>
<div>{{char.abilityMod ability}}</div>
</div>
<!--Prof bonus-->
{{#if char.proficiency skillName}}
<div>
<div>{{#with profSource}}{{statValue}}{{/with}}</div>
<div>+{{profBonus}}</div>
</div>
{{/if}}
<!--numerical effects-->
{{#each addEffects}}
<div>
<div>{{sourceName}}</div>
<div>&plus;{{statValue}}</div>
</div>
{{/each}}
{{#each mulEffects}}
<div>
<div>{{sourceName}}</div>
<div>&times;{{statValue}}</div>
</div>
{{/each}}
{{#each minEffects}}
<div>
<div>{{sourceName}}</div>
<div>Min: {{statValue}}</div>
</div>
{{/each}}
{{#each maxEffects}}
<div>
<div>{{sourceName}}</div>
<div>Max: {{statValue}}</div>
</div>
{{/each}}
<!--Total-->
<div>
<div>Total</div>
<div>{{char.skillMod skillName}}</div>
</div>
</div>
<!--Advantage effects-->
{{#if advEffects.count}}
Advantage:
{{#each advEffects}}
<div>{{sourceName}}</div>
{{/each}}
{{/if}}
{{#if dadvEffects.count}}
Disadvantage:
{{#each dadvEffects}}
<div>{{sourceName}}</div>
{{/each}}
{{/if}}
<!--Conditional Benefits-->
{{#each conditionalEffects}}
<div>
<div>{{sourceName}}</div>
<div>*{{statValue}}</div>
</div>
{{/each}}
{{/baseDialog}}
</template>

View File

@@ -0,0 +1,195 @@
//TODO add dexterity armor
var stats = {
"strength":{"name":"Strength"},
"dexterity":{"name":"Dexterity"},
"constitution":{"name":"Constitution"},
"intelligence":{"name":"Intelligence"},
"wisdom":{"name":"Wisdom"},
"charisma":{"name":"Charisma"},
"strengthSave":{"name":"Strength Save",},
"dexteritySave":{"name":"Dexterity Save",},
"constitutionSave":{"name":"Constitution Save",},
"intelligenceSave":{"name":"Intelligence Save",},
"wisdomSave":{"name":"Wisdom Save",},
"charismaSave":{"name":"Charisma Save",},
"acrobatics":{"name":"Acrobatics",},
"animalHandling":{"name":"Animal Handling",},
"arcana":{"name":"Arcana",},
"athletics":{"name":"Athletics",},
"deception":{"name":"Deception",},
"history":{"name":"History",},
"insight":{"name":"Insight",},
"intimidation":{"name":"Intimidation",},
"investigation":{"name":"Investigation",},
"medicine":{"name":"Medicine",},
"nature":{"name":"Nature",},
"perception":{"name":"Perception",},
"performance":{"name":"Performance",},
"persuasion":{"name":"Persuasion",},
"religion":{"name":"Religion",},
"sleightOfHand":{"name":"Sleight of Hand",},
"stealth":{"name":"Stealth",},
"survival":{"name":"Survival",},
"initiative":{"name":"Initiative",},
"hitPoints":{"name":"Hit Points"},
"armor":{"name":"Armor"},
"dexterityArmor":{"name":"Dexterity Armor Bonus"}
,"speed":{"name":"Speed"},
"proficiencyBonus":{"name":"Proficiency Bonus"},
"ki":{"name":"Ki Points"},
"sorceryPoints":{"name":"Sorcery Points"},
"rages":{"name":"Rages"},
"rageDamage":{"name":"Rage Damage"},
"expertiseDice":{"name":"Expertise Dice"},
"superiorityDice":{"name":"Superiority Dice"},
"level1SpellSlots":{"name":"level 1 Spell Slots"},
"level2SpellSlots":{"name":"level 2 Spell Slots"},
"level3SpellSlots":{"name":"level 3 Spell Slots"},
"level4SpellSlots":{"name":"level 4 Spell Slots"},
"level5SpellSlots":{"name":"level 5 Spell Slots"},
"level6SpellSlots":{"name":"level 6 Spell Slots"},
"level7SpellSlots":{"name":"level 7 Spell Slots"},
"level8SpellSlots":{"name":"level 8 Spell Slots"},
"level9SpellSlots":{"name":"level 9 Spell Slots"},
"d6HitDice":{"name":"d6 Hit Dice"},
"d8HitDice":{"name":"d8 Hit Dice"},
"d10HitDice":{"name":"d10 Hit Dice"},
"d12HitDice":{"name":"d12 Hit Dice"},
"acidMultiplier":{"name":"Acid", "group": "Weakness/Resistance"},
"bludgeoningMultiplier":{"name":"Bludgeoning", "group": "Weakness/Resistance"},
"coldMultiplier":{"name":"Cold", "group": "Weakness/Resistance"},
"fireMultiplier":{"name":"Fire", "group": "Weakness/Resistance"},
"forceMultiplier":{"name":"Force", "group": "Weakness/Resistance"},
"lightningMultiplier":{"name":"Lightning", "group": "Weakness/Resistance"},
"necroticMultiplier":{"name":"Necrotic", "group": "Weakness/Resistance"},
"piercingMultiplier":{"name":"Piercing", "group": "Weakness/Resistance"},
"poisonMultiplier":{"name":"Poison", "group": "Weakness/Resistance"},
"psychicMultiplier":{"name":"Psychic", "group": "Weakness/Resistance"},
"radiantMultiplier":{"name":"Radiant", "group": "Weakness/Resistance"},
"slashingMultiplier":{"name":"Slashing", "group": "Weakness/Resistance"},
"thunderMultiplier":{"name":"Thunder", "group": "Weakness/Resistance"}
};
var operations = {
base: {name: "Base Value"},
proficiency: {name: "Proficiency"},
add: {name: "&plus;"},
mul: {name: "&times;"},
min: {name: "Min"},
max: {name: "Max"},
advantage: {name: "Advantage"},
disadvantage: {name: "Disadvantage"},
passiveAdd: {name: "Passive Bonus"},
fail: {name: "Automatically Fail"},
conditional: {name: "Conditional Benefit"}
};
var abilities = {
strength: {name: "Strength"},
dexterity: {name: "Dexterity"},
constitution: {name: "Constitution"},
intelligence: {name: "Intelligence"},
wisdom: {name: "Wisdom"},
charisma: {name: "Charisma"},
}
Template.skillDialog.created = function(){
this.data.char = Characters.findOne(this.data.charId, {fields: {_id : 1}});
};
Template.skillDialog.helpers({
profIcon: function(){
var prof = this.char.proficiency(this.skillName);
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";
},
profSource: function(){
var effs = Effects.find({charId: this.char._id, stat: this.skillName, operation: "proficiency"}, {sort: {value: -1}}).fetch();
return effs && effs[0];
},
profBonus: function(){
return this.char.proficiency(this.skillName) * this.char.attributeValue("proficiencyBonus");
},
addEffects: function(){
return Effects.find({charId: this.char._id, stat: this.skillName, operation: "add"});
},
mulEffects: function(){
return Effects.find({charId: this.char._id, stat: this.skillName, operation: "mul"});
},
minEffects: function(){
return Effects.find({charId: this.char._id, stat: this.skillName, operation: "min"});
},
maxEffects: function(){
return Effects.find({charId: this.char._id, stat: this.skillName, operation: "max"});
},
advEffects: function(){
return Effects.find({charId: this.char._id, stat: this.skillName, operation: "advantage"});
},
dadvEffects: function(){
return Effects.find({charId: this.char._id, stat: this.skillName, operation: "disadvantage"});
},
conditionalEffects: function(){
return Effects.find({charId: this.char._id, stat: this.skillName, operation: "conditional"});
},
ability: function(){
var opts = {fields: {}};
opts.fields[this.skillName] = 1;
var char = Characters.findOne(this.char._id, opts);
var skill = char && char[this.skillName];
return skill.ability;
},
abilityName: function(){
var opts = {fields: {}};
opts.fields[this.skillName] = 1;
var char = Characters.findOne(this.char._id, opts);
var skill = char && char[this.skillName];
var ability = skill.ability;
return abilities[ability] && abilities[ability].name;
},
char: function(){
return Characters.findOne(this.charId, {fields:{_id: 1}});
},
sourceName: function(){
var id = this.sourceId;
if(!id) return;
switch(this.type){
case "feature":
return Features.findOne(id, {fields: {name: 1}}).name;
case "class":
return Classes.findOne(id, {fields: {name: 1}}).name;
case "buff":
return Buffs.findOne(id, {fields: {name: 1}}).name;
case "equipment":
return Items.findOne(id, {fields: {name: 1}}).name;
case "racial":
return Characters.findOne(this.charId, {fields: {race: 1}}).race;
case "inate":
return "Inate"
}
},
operationName: function(){
if(this.operation === "proficiency") return null;
if(stats[this.stat].group === "Weakness/Resistance") return null;
return operations[this.operation] && operations[this.operation].name || "No Operation"
},
statValue: function(){
if(this.operation === "advantage" ||
this.operation === "disadvantage" ||
this.operation === "fail"){
return null;
}
if(this.operation === "proficiency"){
if(this.value == 0.5 || this.calculation == 0.5) return "Half Proficiency";
if(this.value == 1 || this.calculation == 1) return "Proficiency";
if(this.value == 2 || this.calculation == 2) return "Double Proficiency";
}
if(stats[this.stat].group === "Weakness/Resistance"){
if(this.value == 0.5 || this.calculation == 0.5) return "Resistance";
if(this.value == 2 || this.calculation == 2) return "Vulnerability";
if(this.value == 0 || this.calculation == 0) return "Immunity";
}
return this.calculation || this.value;
}
});

View File

@@ -1,6 +1,7 @@
.skillRow {
height: 32px;
margin: 0 -16px 0 -16px;
background: white;
}
.skillRow core-icon {

View File

@@ -1,5 +1,5 @@
<template name="skillRow">
<paper-item class="skillRow" layout horizontal>
<paper-item class="skillRow" layout horizontal hero-id="main" {{detailHero skill ../_id}}>
<core-icon icon="{{profIcon}}"></core-icon>
{{#if failSkill}}
<div class="fail skillMod">fail</div>

View File

@@ -11,46 +11,17 @@
{{> abilityMiniCard ability="intelligence" title="Intelligence" color="deep-orange"}}
{{> abilityMiniCard ability="wisdom" title="Wisdom" color="purple"}}
{{> abilityMiniCard ability="charisma" title="Charisma" color="pink"}}
<!--Armor-->
<paper-shadow class="card container statCard" hero-id="main" {{detailHero}} layout horizontal>
<div class="containerLeft teal">
{{attributeValue "armor"}}
</div>
<div class="containerRight" flex horizontal layout center>
Armor Class
</div>
<paper-ripple fit></paper-ripple>
</paper-shadow>
{{> statCard stat="armor" name="Armor Class" color="teal"}}
<!--Speed-->
<paper-shadow class="card container statCard" hero-id="main" {{detailHero}} layout horizontal>
<div class="containerLeft teal">
{{attributeValue "speed"}}
</div>
<div class="containerRight" flex horizontal layout center>
Speed
</div>
<paper-ripple fit></paper-ripple>
</paper-shadow>
{{> statCard stat="speed" name="Speed" color="teal"}}
<!--Initiative-->
<paper-shadow class="card container statCard" hero-id="main" {{detailHero}} layout horizontal>
<div class="containerLeft indigo">
{{skillMod "initiative"}}
</div>
<div class="containerRight" flex horizontal layout center>
Initiative
</div>
<paper-ripple fit></paper-ripple>
</paper-shadow>
{{> statCard stat="initiative" name="Initiative" color="indigo" isSkill="true"}}
<!--Proficiency Bonus-->
<paper-shadow class="card container statCard" hero-id="main" {{detailHero}} layout horizontal>
<div class="containerLeft blue">
+{{attributeValue "proficiencyBonus"}}
</div>
<div class="containerRight" flex horizontal layout center>
Proficiency Bonus
</div>
<paper-ripple fit></paper-ripple>
</paper-shadow>
{{> statCard stat="proficiencyBonus" name="Proficiency Bonus" color="blue" prefix="+"}}
<!--Hit Dice-->
{{>hitDice name="d6HitDice" diceNum="6" char=this}}
{{>hitDice name="d8HitDice" diceNum="8" char=this}}
{{>hitDice name="d10HitDice" diceNum="10" char=this}}
@@ -98,3 +69,19 @@
</div>
</div>
</template>
<template name="statCard">
<paper-shadow class="card container statCard" hero-id="main" {{detailHero stat ../_id}} layout horizontal>
<div class="containerLeft {{color}}">
{{#if isSkill}}
{{../skillMod stat}}
{{else}}
{{prefix}}{{../attributeValue stat}}
{{/if}}
</div>
<div class="containerRight" flex horizontal layout center>
{{name}}
</div>
<paper-ripple fit></paper-ripple>
</paper-shadow>
</template>

View File

@@ -1,5 +1,23 @@
Template.stats.events({
"tap .statCard": function(event, instance){
if(this.isSkill){
var charId = instance.data._id;
GlobalUI.setDetail({
template: "skillDialog",
data: {name: this.name, skillName: this.stat, charId: charId},
heroId: charId + this.stat
});
}
},
"tap .skillRow": function(event, instance){
var skill = this.skill;
var charId = instance.data._id;
GlobalUI.setDetail({
template: "skillDialog",
data: {name: this.name, skillName: skill, charId: charId},
heroId: charId + skill
});
}
});
Template.stats.helpers({

View File

@@ -0,0 +1,12 @@
#accountSummary {
padding-top: 32px;
min-height: 146px;
background-image: url(/png/paper-dice-crown.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
#mainContentSection {
display: initial !important;
}

View File

@@ -2,7 +2,41 @@
<core-drawer-panel>
<core-header-panel drawer navigation flex mode="seamed" class="white">
<core-toolbar class="grey white-text">Cloud Character Sheet</core-toolbar>
<div id="accountSummary" class="padded white-text">
{{#if loggingIn}}
<paper-spinner active alt="Signing In"></paper-spinner>
{{else}}{{#if currentUser}}
{{#with currentUser}}
<div class="body2">
{{username}}
</div>
<div class="body1">
{{#each emails}}
{{address}}
{{/each}}
<paper-menu-button>
<paper-icon-button icon="arrow-drop-down" noink></paper-icon-button>
<paper-dropdown class="dropdown">
<core-menu class="menu">
<paper-item id="signOutButton">Sign Out</paper-item>
</core-menu>
</paper-dropdown>
</paper-menu-button>
</div>
{{/with}}
{{else}}
<h2>Sign In</h2>
<paper-input class="fullwidth" label="Email" id="emailInput"></paper-input><br>
<paper-input-decorator class="fullwidth" label="Password">
<input class="fullwidth" type="password" is="core-input" id="passwordInput">
</paper-input-decorator><br>
{{#if session "creatingNewUser"}}
<paper-button raised id="createAccountButton">Create Account</paper-button>
{{else}}
<paper-button raised id="signInButton">Sign In</paper-button>
{{/if}}
{{/if}}{{/if}}
</div>
<core-menu theme="core-light-theme">
<paper-item id="charactersMenuButton">Characters</paper-item>
</core-menu>
@@ -12,7 +46,7 @@
detail-pages
transitions="hero-transition cross-fade"
selected={{globalDetailSelected}}>
<section id="mainContentSection">
<section id="mainContentSection" class={{notSelected}}>
<core-header-panel fit mode="seamed">
{{> yield}}
</core-header-panel>

View File

@@ -1,4 +1,29 @@
Template.layout.helpers({
notSelected: function(){
return Session.get("global.ui.detailShow")? "not-selected" : null;
}
})
Template.layout.events({
"tap #signInButton": function(event, instance){
var email = instance.find("#emailInput").value;
var pass = instance.find("#passwordInput").value;
Meteor.loginWithPassword(email, pass);
},
"keypress #emailInput, keypress #passwordInput": function (event, instance) {
if (event.which === 13) {
var email = instance.find("#emailInput").value;
var pass = instance.find("#passwordInput").value;
Meteor.loginWithPassword(email, pass);
}
},
"tap #signOutButton": function(event, instance){
Meteor.logout();
},
"tap #createAccountButton": function(event, instance){
console.warn("not yet implemented");
//Session.set("creatingNewUser", true);
},
"tap #charactersMenuButton": function(event, instance){
Router.go("/");
}

View File

@@ -13,7 +13,7 @@
<template name="colorDropdown">
<paper-menu-button id="colorDropdown">
<paper-icon-button icon="editor:format-paint" noink></paper-icon-button>
<paper-dropdown class="dropdown">
<paper-dropdown class="dropdown" halign="right">
<core-menu class="menu">
{{#each colors}}
<paper-item name={{key}} class="colorMenuItem {{colorClass key}}">{{className}}</paper-item>

Binary file not shown.

After

Width:  |  Height:  |  Size: 77 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 60 KiB