Added quality-of-life UI to determining a character's encumbrance
This commit is contained in:
Stefan Zermatten
@@ -0,0 +1,14 @@
|
||||
<template name="carryCapacityBar">
|
||||
<div class="carryCapacityBar">
|
||||
<div class="carriedWeightBar"
|
||||
style="width: {{carriedPercent}}%;
|
||||
background-color: {{carriedColor}}">
|
||||
</div>
|
||||
<div class="tick"
|
||||
style="width: 33.333%;">
|
||||
</div>
|
||||
<div class="tick"
|
||||
style="width: 66.666%;">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,38 @@
|
||||
var getFractionCarried = function(char) {
|
||||
//find out the weight
|
||||
var weight = 0;
|
||||
Containers.find(
|
||||
{charId: char._id, isCarried: true}
|
||||
).forEach(function(container){
|
||||
weight += container.totalWeight();
|
||||
});
|
||||
Items.find(
|
||||
{charId: char._id, "parent.id": char._id},
|
||||
{fields: {weight : 1, quantity: 1}}
|
||||
).forEach(function(item){
|
||||
weight += item.totalWeight();
|
||||
});
|
||||
//get strength
|
||||
var strength = char.attributeValue("strength");
|
||||
var capacity = strength * 15;
|
||||
return weight / capacity;
|
||||
};
|
||||
|
||||
Template.carryCapacityBar.helpers({
|
||||
carriedPercent: function() {
|
||||
var percent = 100 * getFractionCarried(this);
|
||||
return percent > 100 ? 100 : percent;
|
||||
},
|
||||
carriedColor: function() {
|
||||
var frac = getFractionCarried(this);
|
||||
if (frac < 1 / 3){
|
||||
return "#2196F3";
|
||||
} else if (frac < 2 / 3){
|
||||
return "#CDDC39";
|
||||
} else if (frac < 1) {
|
||||
return "#FFC107";
|
||||
} else {
|
||||
return "#F44336";
|
||||
}
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,14 @@
|
||||
.carryCapacityBar {
|
||||
background-color: #7DC580;
|
||||
background-color: rgba(255,255,255,0.27);
|
||||
position: relative;
|
||||
height: 4px;
|
||||
div{
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
.tick {
|
||||
border-right: solid 2px #E5E5E5;
|
||||
border-right-color: rgba(255,255,255,0.54);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
<template name="carryDialog">
|
||||
{{#baseDialog title="Weight Carried" class=color hideEdit=true}}
|
||||
<div layout horizontal center-justified end>
|
||||
<div class="display2">
|
||||
{{round carriedWeight 1}}
|
||||
</div>
|
||||
<div class="display1">
|
||||
lbs
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="vertMargin">
|
||||
|
||||
{{> carryCapacityTable}}
|
||||
|
||||
{{/baseDialog}}
|
||||
</template>
|
||||
@@ -0,0 +1,20 @@
|
||||
Template.carryDialog.helpers({
|
||||
carriedWeight: function() {
|
||||
var weight = 0;
|
||||
Containers.find(
|
||||
{charId: this.charId, isCarried: true}
|
||||
).forEach(function(container){
|
||||
weight += container.totalWeight();
|
||||
});
|
||||
Items.find(
|
||||
{charId: this.charId, "parent.id": this.charId},
|
||||
{fields: {weight : 1, quantity: 1}}
|
||||
).forEach(function(item){
|
||||
weight += item.totalWeight();
|
||||
});
|
||||
return weight;
|
||||
},
|
||||
color: function() {
|
||||
if (this.color) return this.color + " white-text";
|
||||
},
|
||||
});
|
||||
@@ -3,21 +3,31 @@
|
||||
<div id="inventory" class="scroll-y" fit>
|
||||
<div class="column-container">
|
||||
<!--Net Worth-->
|
||||
<paper-shadow class="card" layout horizontal>
|
||||
<div class="indigo white-text subhead left">
|
||||
Net Worth
|
||||
</div>
|
||||
<div class="right" flex>
|
||||
{{valueString netWorth}}
|
||||
<paper-shadow class="card">
|
||||
<div class="white top" layout horizontal center>
|
||||
<div class="subhead" flex>
|
||||
Net Worth
|
||||
</div>
|
||||
<div>
|
||||
{{valueString netWorth}}
|
||||
</div>
|
||||
</div>
|
||||
</paper-shadow>
|
||||
<!--Weight Carried-->
|
||||
<paper-shadow class="card" layout horizontal>
|
||||
<div class="green white-text subhead left">
|
||||
Weight Carried
|
||||
<paper-shadow class="card weightCarried"
|
||||
hero-id="main" {{detailHero "weightCarried" _id}}>
|
||||
<div class="top green white-text"
|
||||
hero-id="toolbar" {{detailHero "weightCarried" _id}}
|
||||
layout horizontal center>
|
||||
<div class="subhead" flex>
|
||||
Weight Carried
|
||||
</div>
|
||||
<div>
|
||||
{{round weightCarried}}lbs
|
||||
</div>
|
||||
</div>
|
||||
<div class="right" flex>
|
||||
{{round weightCarried}}lbs
|
||||
<div class="bottom green" style="padding: 0;">
|
||||
{{> carryCapacityBar}}
|
||||
</div>
|
||||
</paper-shadow>
|
||||
<!--Equipment-->
|
||||
@@ -51,7 +61,7 @@
|
||||
<!--Carried Items-->
|
||||
<paper-shadow class="card carriedContainer">
|
||||
<div class="white top" layout horizontal center>
|
||||
<div class="subhead">
|
||||
<div class="subhead" flex>
|
||||
Carried
|
||||
</div>
|
||||
<div class="caption" style="margin-right: 8px">
|
||||
|
||||
@@ -136,6 +136,14 @@ Template.inventory.events({
|
||||
heroId: containerId,
|
||||
});
|
||||
},
|
||||
"tap .weightCarried": function(event) {
|
||||
var charId = this._id;
|
||||
GlobalUI.setDetail({
|
||||
template: "carryDialog",
|
||||
data: {charId: charId, color: "green"},
|
||||
heroId: charId + "weightCarried",
|
||||
});
|
||||
},
|
||||
"tap .inventoryItem": function(event){
|
||||
var itemId = this._id;
|
||||
var charId = Template.parentData()._id;
|
||||
|
||||
@@ -4,32 +4,7 @@
|
||||
<hr class="vertMargin">
|
||||
<div>
|
||||
<div class="title padded">Carrying</div>
|
||||
<table class="strengthTable">
|
||||
<tr>
|
||||
<td>Encumbered</td>
|
||||
<td>{{evaluate charId "strength * 5"}}lbs</td>
|
||||
<td class="caption">Speed drops by 10 feet</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Heavily encumbered</td>
|
||||
<td>{{evaluate charId "strength * 10"}}lbs</td>
|
||||
<td class="caption">
|
||||
Speed drops by 20 feet, disadvantage on strength,
|
||||
dexterity and constitution ability checks, attack
|
||||
rolls and saving throws
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Maximum carrying capacity</td>
|
||||
<td>{{evaluate charId "strength * 15"}}lbs</td>
|
||||
<td class="caption">Speed drops to 5 feet</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Push, drag or lift maximum</td>
|
||||
<td>{{evaluate charId "strength * 30"}}lbs</td>
|
||||
<td class="caption">You can't move more than this weight</td>
|
||||
</tr>
|
||||
</table>
|
||||
{{> carryCapacityTable}}
|
||||
<div class="title padded">Jumping</div>
|
||||
<table class="strengthTable">
|
||||
<tr>
|
||||
|
||||
@@ -0,0 +1,28 @@
|
||||
<template name="carryCapacityTable">
|
||||
<table class="carryCapacityTable strengthTable">
|
||||
<tr>
|
||||
<td>Encumbered</td>
|
||||
<td>>{{evaluate charId "strength * 5"}}lbs</td>
|
||||
<td class="caption">Variant rule, encumbered characters move 10 feet slower</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Heavily encumbered</td>
|
||||
<td>>{{evaluate charId "strength * 10"}}lbs</td>
|
||||
<td class="caption">
|
||||
Variant rule, heavily encumbered characters move 20 feet slower and have disadvantage on ability checks, attack rolls, and saving thows that use Strength, Dexterity, or Constitution
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Over Encumbered</td>
|
||||
<td>>{{evaluate charId "strength * 15"}}lbs</td>
|
||||
<td class="caption">
|
||||
Characters that can only just lift, push or drag their current load can only move at 5 feet.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Push, drag or lift maximum</td>
|
||||
<td>{{evaluate charId "strength * 30"}}lbs</td>
|
||||
<td class="caption"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</template>
|
||||
Reference in New Issue
Block a user