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

Made hero attribute reactive and iterated inventory UI

Browse Source
This commit is contained in:
Thaum
2015-02-03 10:47:16 +00:00
parent 4377da5275
commit aa9cfbf04e
13 changed files with 86 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
rpg-docs/Model/Inventory/Containers.js
View File

@@ -23,7 +23,7 @@ Containers.helpers({
},
totalWeight: function(){
var weight = this.weight;
Items.find({container: this._id, equipped: false}, {fields: {weight: 1, value: 1}}).forEach(function(item){
Items.find({container: this._id, equipped: false}, {fields: {quantity: 1, weight: 1}}).forEach(function(item){
weight += item.totalWeight();
});
return weight;

16
rpg-docs/client/globalHelpers/GlobalUI.js
View File

@@ -37,7 +37,7 @@ this.GlobalUI = (function() {
GlobalUI.showDetail = function(opts) {
Session.set("global.ui.detailData", opts.data);
Session.set("global.ui.detailTemplate", opts.template);
GlobalUI.detailHero = opts.hero;
Session.set("global.ui.detailHeroId", opts.heroId);
Session.set("global.ui.detailShow", true);
};
@@ -51,7 +51,7 @@ this.GlobalUI = (function() {
GlobalUI.setDetail = function(opts) {
Session.set("global.ui.detailData", opts.data);
Session.set("global.ui.detailTemplate", opts.template);
GlobalUI.detailHero = opts.hero;
Session.set("global.ui.detailHeroId", opts.heroId);
};
GlobalUI.closeDetail = function(){
@@ -108,21 +108,15 @@ Template.layout.events({
} else {
Session.set("global.ui.detailData", null);
Session.set("global.ui.detailTemplate", null);
//remove the hero attribute
var heroElem = GlobalUI.detailHero;
heroElem && heroElem.attr("hero", null);
heroElem && heroElem.find("[hero-id]").attr("hero", null);
GlobalUI.detailHero = null;
Session.set("global.ui.detailHeroId", null);
}
},
"core-animated-pages-transition-prepare": function(e) {
var detailOpened = Session.get("global.ui.detailShow");
if(detailOpened) {
//add the hero attribute where needed
var heroElem = GlobalUI.detailHero;
heroElem && heroElem.attr("hero", "");
heroElem && heroElem.find("[hero-id]").attr("hero", "");
//set up the transition
} else {
//undo hack
$("#mainContentSection").removeClass("fake-selected");
}
},

5
rpg-docs/client/globalHelpers/detailHero.js Normal file
View File

@@ -0,0 +1,5 @@
Template.registerHelper("detailHero", function(){
if ( Session.equals("global.ui.detailHeroId", this._id) ) {
return "hero";
}
});

6
rpg-docs/client/globalHelpers/round.js Normal file
View File

@@ -0,0 +1,6 @@
Template.registerHelper("round", function(value, decimalPlaces){
decimalPlaces = +decimalPlaces || 2;
var num = +value;
var tens = Math.pow(10, decimalPlaces)
return Math.round(num * tens) / tens;
});

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

@@ -44,7 +44,7 @@ h2, .title {
letter-spacing: 0.005em;
}
.white-text h2{
.white-text h2, .white-text .title, .white-text.title{
color: rgba(255,255,255,0.87);
}

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

@@ -9,8 +9,8 @@
</div>
<div class="features">
{{#each features}}
<paper-shadow class="featureCard" hero-id="main" animated>
<div hero-id="toolbar"></div>
<paper-shadow class="featureCard" hero-id="main" {{detailHero}} animated>
<div hero-id="toolbar" {{detailHero}}></div>
<div class="featureCardTop">
<h2>{{name}}</h2>
</div>

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

@@ -11,7 +11,7 @@ Template.features.events({
GlobalUI.setDetail({
template: "featureDialog",
data: {featureId: featureId, charId: this._id},
hero: $(event.currentTarget)
heroId: featureId
})
},
"tap .featureCard": function(event){
@@ -20,7 +20,7 @@ Template.features.events({
GlobalUI.setDetail({
template: "featureDialog",
data: {featureId: featureId, charId: charId},
hero: $(event.currentTarget)
heroId: featureId
});
}
});

2
rpg-docs/client/views/character/inventory/containerDialog/containerDialog.html
View File

@@ -3,7 +3,7 @@
<core-header-panel fit>
<core-toolbar hero-id="toolbar" hero>
<paper-icon-button id="backButton" role="button" tabindex="0" icon="arrow-back" aria-label="close"></paper-icon-button>
<div flex>{{name}}</div>
<div flex hero-id="title" hero>{{name}}</div>
<paper-icon-button id="deleteContainer"
role="button"
tabindex="0"

29
rpg-docs/client/views/character/inventory/inventory.css
View File

@@ -1,3 +1,28 @@
.containerName {
#inventory {
padding: 4px;
}
.containers {
display: flex;
flex-wrap: wrap;
}
.container {
width: 332px;
flex-grow: 1;
}
.containerTop {
cursor: pointer;
}
margin: -16px -16px 0 -16px;
padding: 16px;
}
.containerBottom {
margin: 0 -16px -16px -16px;
padding: 16px;
}
.inventoryItem {
background: white;
}

18
rpg-docs/client/views/character/inventory/inventory.html
View File

@@ -5,27 +5,33 @@
Armor:<br>
{{#if armor}}
{{#with armor}}
<paper-item class="inventoryItem" hero-id="main">{{name}}</paper-item>
<paper-item class="inventoryItem" hero-id="main" {{detailHero}}>{{name}}</paper-item>
{{/with}}
{{else}}
<paper-item>none</paper-item>
{{/if}}
Equipment:<br>
{{#each equipment}}
<paper-item class="inventoryItem" hero-id="main">
<paper-item class="inventoryItem" hero-id="main" {{detailHero}}>
{{name}}
</paper-item>
{{/each}}
</paper-shadow>
<div class="containers">
{{#each containers}}
<paper-shadow class="card" hero-id="main">
<h2 class="containerName">{{name}}</h2>
{{#each items ../_id _id}}
<paper-item class="inventoryItem" hero-id="main">
<paper-shadow class="card container" hero-id="main" {{detailHero}}>
<div class="containerTop green white-text" hero-id="toolbar" layout horizontal {{detailHero}}>
<div class="containerName title" hero-id="title" flex {{detailHero}}>{{name}}</div>
<div class="caption" style="margin-right: 8px">{{valueString totalValue}}</div>
<div class="caption">{{round totalWeight}}lbs</div>
</div>
<div flex class="containerMain">
{{#each items ../_id _id}}
<paper-item class="inventoryItem" hero-id="main" {{detailHero}}>
{{#if gt1 quantity}}{{quantity}}{{/if}}&nbsp;{{pluralName}}
</paper-item>
{{/each}}
</div>
</paper-shadow>
{{/each}}
</div>

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

@@ -39,7 +39,7 @@ Template.inventory.events({
GlobalUI.setDetail({
template: "itemDialog",
data: {itemId: itemId, charId: charId},
hero: $(event.currentTarget)
heroId: itemId
});
});
},
@@ -47,8 +47,8 @@ Template.inventory.events({
var containerId = Containers.insert({name: "New Container", isCarried: true, charId: this._id});
GlobalUI.setDetail({
template: "containerDialog",
data: {containerId: this._id, charId: this.charId},
hero: $(event.currentTarget)
data: {containerId: containerId, charId: this.charId},
heroId: containerId
});
},
"tap .inventoryItem": function(event){
@@ -57,14 +57,14 @@ Template.inventory.events({
GlobalUI.setDetail({
template: "itemDialog",
data: {itemId: itemId, charId: charId},
hero: $(event.currentTarget)
heroId: itemId
});
},
"tap .containerName": function(event){
"tap .containerTop": function(event){
GlobalUI.setDetail({
template: "containerDialog",
data: {containerId: this._id, charId: this.charId},
hero: $(event.currentTarget).parent()
heroId: this._id
});
}
});

16
rpg-docs/client/views/character/inventory/itemDialog/itemDialog.html
View File

@@ -47,21 +47,21 @@
</paper-autogrow-textarea>
</paper-input-decorator>
<!--Container dropdown-->
<paper-dropdown-menu label="Container">
<paper-dropdown class="dropdown">
<core-menu id="containerDropDown" class="menu" selected={{containerIndex}}>
<paper-dropdown-menu id="containerDropDown" label="Container">
<paper-dropdown layered class="dropdown">
<core-menu class="menu" selected={{containerIndex}}>
{{#each containers}}
<paper-item class="containerMenuItem">{{name}}</paper-item>
<paper-item containerId={{_id}} class="containerMenuItem">{{name}}</paper-item>
{{/each}}
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
<!--Equipment slot dropdown-->
<paper-dropdown-menu label="slot">
<paper-dropdown class="dropdown">
<core-menu id="slotDropDown" class="menu" selected={{equipmentSlotIndex}}>
<paper-dropdown-menu id="slotDropDown" label="slot">
<paper-dropdown layered class="dropdown">
<core-menu class="menu" selected={{equipmentSlotIndex}}>
{{#each equipmentSlots}}
<paper-item class="slotMenuItem">{{name}}</paper-item>
<paper-item class="slotMenuItem" value={{value}}>{{name}}</paper-item>
{{/each}}
</core-menu>
</paper-dropdown>

14
rpg-docs/client/views/character/inventory/itemDialog/itemDialog.js
View File

@@ -64,11 +64,17 @@ Template.itemDialog.events({
var equipped = Template.instance().find("#equippedInput").checked;
Items.update(this._id, {$set: {equipped: equipped}});
},
"tap .containerMenuItem": function(event){
Items.update(Template.currentData().itemId, {$set: {container: this._id}});
"core-select #containerDropDown": function(event){
var detail = event.originalEvent.detail;
if(!detail.isSelected) return;
var containerId = detail.item.getAttribute("containerId");
Items.update(Template.currentData().itemId, {$set: {container: containerId}});
},
"tap .slotMenuItem": function(event){
Items.update(Template.currentData().itemId, {$set: {equipmentSlot: this.value}});
"core-select #slotDropDown": function(event){
var detail = event.originalEvent.detail;
if(!detail.isSelected) return;
var value = detail.item.getAttribute("value");
Items.update(Template.currentData().itemId, {$set: {equipmentSlot: value}});
}
});