Implemented Features and Items granting effects, actions, attacks and spells

This commit is contained in:
Thaum
2015-01-06 12:25:58 +00:00
parent c55f2c51ab
commit 2d70119ee0
48 changed files with 625 additions and 442 deletions

View File

@@ -58,7 +58,6 @@ paper-button {
}
.card {
width: 148px;
margin: 4px;
padding: 16px;
font-size: 14px;
@@ -67,7 +66,7 @@ paper-button {
}
.card.double {
width: 304px;
width: 332px;
}
.card paper-button {

View File

@@ -31,7 +31,7 @@ h1, .headline {
letter-spacing: 0;
}
.white-text h1, .white-text .headline{
.white-text h1, .white-text .headline, .white-text.headline{
color: rgba(255,255,255,0.87);
}

View File

@@ -1,8 +0,0 @@
<template name="features">
{{#each features}}
<li><strong>{{name}}</strong><input class="enabled" type="checkbox" checked={{enabled}}><br>
{{# each effects}}
{{stat}}: {{value}}
{{/each}}</li>
{{/each}}
</template>

View File

@@ -11,6 +11,7 @@
#stats .card {
flex-grow: 1;
max-width: 480px;
}
#stats .abilityFlex{
@@ -25,6 +26,26 @@
flex-grow: 1;
}
.attribute.card, .skill.card {
padding: 0;
display: flex;
flex-direction: column;
text-align: center;
}
.card-top {
flex-grow: 1;
padding: 16px;
border-radius: 2px 2px 0 0;
display: flex;
align-items: center;
justify-content: center;
}
.card .subhead {
padding: 16px;
}
.editEffect > * {
vertical-align: bottom;
}
@@ -35,6 +56,14 @@
padding: 16px;
}
#armorHeading {
background: url(/jpg/rusted-metal-armor.jpg) no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#detailContainer {
position: fixed;
display: flex;

View File

@@ -4,73 +4,6 @@
<div class="abilityFlex">
{{> abilityCards}}
</div>
<div class="statsFlex">
<paper-shadow {{isHero "armor"}} class="card attribute" hero-id="armor">
<h1>{{attributeValue "armor"}}</h1>
<p class="caption">Armor</p>
</paper-shadow>
<paper-shadow {{isHero "initiative"}} class="card skill" hero-id="initiative">
<h1>{{skillMod "initiative"}}</h1>
<p class="caption">Initiative</p>
</paper-shadow>
<paper-shadow {{isHero "proficiencyBonus"}} class="card attribute" hero-id="proficiencyBonus">
<h1>{{attributeValue "proficiencyBonus"}}</h1>
<p class="caption">Proficiency Bonus</p>
</paper-shadow>
<paper-shadow {{isHero "speed"}} class="card attribute" hero-id="speed">
<h1>{{attributeValue "speed"}}</h1>
<p class="caption">Speed</p>
</paper-shadow>
<paper-shadow {{isHero "passivePerception"}} class="card" hero-id="passivePerception">
<h1>{{passiveSkill "perception"}}</h1>
<p class="caption">Passive Perception</p>
</paper-shadow>
<paper-shadow class="card" id="hitDice">
<h1 class="attribute" hero-id="d6HitDice" {{isHero "d6HitDice"}}>
{{> hitDice hitDice="d6HitDice" d="6"}}
</h1>
<h1 class="attribute" hero-id="d8HitDice" {{isHero "d8HitDice"}}>
{{> hitDice hitDice="d8HitDice" d="8"}}
</h1>
<h1 class="attribute" hero-id="d10HitDice" {{isHero "d10HitDice"}}>
{{> hitDice hitDice="d10HitDice" d="10"}}
</h1>
<h1 class="attribute" hero-id="d12HitDice" {{isHero "d12HitDice"}}>
{{> hitDice hitDice="d12HitDice" d="12"}}
</h1>
<p class="caption">Hit Dice</p>
</paper-shadow>
{{# if canCast}}
<paper-shadow class="card" id="spellSlots">
<h1>{{> spellSlots}}</h1>
<p class="caption">Spell Slots</p>
</paper-shadow>
{{/if}}
{{# if attributeBase "rages"}}
<paper-shadow class="card" id="rages">
<h1>{{attributeValue "rages"}}</h1>
<p class="caption">rages</p>
</paper-shadow>
{{/if}}
{{# if attributeBase "sorceryPoints"}}
<paper-shadow class="card" id="sorceryPoints">
<h1>{{attributeValue "sorceryPoints"}}</h1>
<p class="caption">Sorcery Points</p>
</paper-shadow>
{{/if}}
{{# if attributeBase "expertiseDice"}}
<paper-shadow class="card" id="expertiseDice">
<h1>{{attributeValue "expertiseDice"}}</h1>
<p class="caption">Expertise Dice</p>
</paper-shadow>
{{/if}}
{{# if attributeBase "superiorityDice"}}
<paper-shadow class="card" id="superiorityDice">
<h1>{{attributeValue "superiorityDice"}}</h1>
<p class="caption">Superiority Dice</p>
</paper-shadow>
{{/if}}
</div>
</section>
<section id="detailContainer">
<div cross-fade id="darkOverlay"></div>
@@ -80,12 +13,6 @@
</core-animated-pages>
</template>
<template name="hitDice">
{{# if ../attributeBase hitDice}}
{{../attributeValue hitDice}}d{{d}} + {{../abilityMod "constitution"}}
{{/if}}
</template>
<template name="spellSlots">
{{attributeValue "level1SpellSlots"}}
{{attributeValue "level2SpellSlots"}}
@@ -98,6 +25,17 @@
{{attributeValue "level9SpellSlots"}}
</template>
<template name="statCard">
<paper-shadow {{isHero id}} class="card {{type}}" hero-id={{id}}>
<div id="{{id}}Heading" class="card-top headline {{class}}">
{{> UI.contentBlock}}
</div>
<div class="subhead">
{{title}}
</div>
</paper-shadow>
</template>
<template name="attributeDialog">
<!--needs character, attributeName, attributeTitle-->
{{#if attributeName}}

View File

@@ -55,6 +55,15 @@ Template.stats.helpers({
}
});
Template.statCard.helpers({
isHero: function(string){
if(string === Session.get("selectedAttribute")||
string === Session.get("selectedSkill")){
return "hero";
}
}
});
Template.attributeDialog.helpers({
attributeTitle: function(){
return Session.get("selectedAttributeTitle");

View File

@@ -12,6 +12,7 @@
background-color: #D50000;
padding: 16px;
position: relative;
border-radius: 2px 0 0 2px;
}
.abilityFlex .card {
@@ -20,10 +21,11 @@
.abilityCardRight {
flex-grow: 1;
padding-right: 0;
}
.abilityCardRight hr{
margin: 8px -16px;
margin: 8px 0 8px -16px;
}
.abilityCardRight h1{

View File

@@ -33,6 +33,7 @@
<div class="abilityCardRight">
<h1>Dexterity</h1>
{{> skillRow name="Save" skill="dexteritySave"}}
{{> skillRow name="Initiative" skill="initiative"}}
<hr>
{{> skillRow name="Acrobatics" skill="acrobatics"}}
{{> skillRow name="Sleight of Hand" skill="sleightOfHand"}}
@@ -52,6 +53,18 @@
<h1>Constitution</h1>
{{> skillRow name="Save" skill="constitutionSave"}}
<hr>
<h1 class="attribute" hero-id="d6HitDice">
{{> hitDice hitDice="d6HitDice" d="6"}}
</h1>
<h1 class="attribute" hero-id="d8HitDice">
{{> hitDice hitDice="d8HitDice" d="8"}}
</h1>
<h1 class="attribute" hero-id="d10HitDice">
{{> hitDice hitDice="d10HitDice" d="10"}}
</h1>
<h1 class="attribute" hero-id="d12HitDice">
{{> hitDice hitDice="d12HitDice" d="12"}}
</h1>
</div>
</paper-shadow>
</template>
@@ -90,7 +103,7 @@
{{> skillRow name="Animal Handling" skill="animalHandling"}}
{{> skillRow name="Insight" skill="insight"}}
{{> skillRow name="Medicine" skill="medicine"}}
{{> skillRow name="Perception" skill="perception"}}
{{> skillRow name="Perception" skill="perception" showPassive="true"}}
{{> skillRow name="Survival" skill="survival"}}
</div>
</paper-shadow>
@@ -114,3 +127,9 @@
</div>
</paper-shadow>
</template>
<template name="hitDice">
{{# if ../attributeBase hitDice}}
{{../attributeValue hitDice}}d{{d}} {{../abilityMod "constitution"}}
{{/if}}
</template>

View File

@@ -3,7 +3,6 @@
<paper-tab>Stats</paper-tab>
<paper-tab>Features</paper-tab>
<paper-tab>Inventory</paper-tab>
Proficiency Bonus
<paper-tab>Spellbook</paper-tab>
<paper-tab>Persona</paper-tab>
<paper-tab>Journal</paper-tab>
@@ -11,7 +10,7 @@
<core-animated-pages id="tabPages" selected={{selectedTab}} transitions="slide-from-right">
<swipe-detect touch-action="pan-y">{{> stats}}</swipe-detect>
<swipe-detect touch-action="pan-y">features</swipe-detect>
<swipe-detect touch-action="pan-y">{{> features}}</swipe-detect>
<swipe-detect touch-action="pan-y">inventory</swipe-detect>
<swipe-detect touch-action="pan-y">spellBook</swipe-detect>
<swipe-detect touch-action="pan-y">persona</swipe-detect>

View File

@@ -0,0 +1,32 @@
<template name="features">
<div class="statsFlex"><!--resources-->
{{#if attributeBase "rages"}}
{{#statCard id="rages" type="attribute" title="Rages"}}
{{attributeValue "rages"}}
{{/statCard}}
{{/if}}
{{#if canCast}}
{{#statCard id="spellSlots" type="attribute" title="Spell Slots"}}
<h1>{{> spellSlots}}</h1>
{{/statCard}}
{{/if}}
{{#if attributeBase "sorceryPoints"}}
{{#statCard id="sorceryPoints" type="attribute" title="Sorcery Points"}}
{{attributeValue "sorceryPoints"}}
{{/statCard}}
{{/if}}
{{#if attributeBase "expertiseDice"}}
{{#statCard id="expertiseDice" type="attribute" title="Expertise Dice"}}
{{attributeValue "expertiseDice"}}
{{/statCard}}
{{/if}}
{{#if attributeBase "superiorityDice"}}
{{#statCard id="superiorityDice" type="attribute" title="Superiority Dice"}}
{{attributeValue "superiorityDice"}}
{{/statCard}}
{{/if}}
</div>
<div class="actionsFlex">
</div>
</template>

View File

@@ -1,10 +0,0 @@
<template name="containerTable">
<div>
<h3>{{name}}</h3>
<table>
{{#each items}}
{{> itemRow}}
{{/each}}
</table>
</div>
</template>

View File

@@ -1,5 +0,0 @@
Template.containerTable.helpers({
items: function(){
return Items.find({container: this._id});
}
});

View File

@@ -1,6 +1,20 @@
<template name="inventory">
<div class="flexItem floatBox">
<h2>Inventory</h2>
{{> inventoryTables}}
<paper-shadow class="equipment">
Armor: {{#if equippedArmor}}{{equippedArmor}}{{else}}None{{/if}}
</paper-shadow>
<div class="containers">
{{#each containers}}
<paper-shadow>
<h3>{{name}}</h3>
<table>
{{#each items}}
<tr class={{#if isSelected}}selected{{/if}}>
<td>{{#if stackable}}{{quantity}}{{/if}}</td>
<td>{{pluralName}}</td>
</tr>
{{/each}}
</table>
</paper-shadow>
{{/each}}
</div>
</template>

View File

@@ -1,5 +0,0 @@
<template name="inventoryTables">
{{#each containers}}
{{> containerTable}}
{{/each}}
</template>

View File

@@ -1,5 +0,0 @@
Template.inventoryTables.helpers({
containers: function(){
return Containers.find({owner: this._id});
}
});

View File

@@ -1,3 +0,0 @@
tr.selected{
background-color: #4182BC;
}

View File

@@ -1,6 +0,0 @@
<template name="itemRow">
<tr class={{#if isSelected}}selected{{/if}}>
<td>{{#if stackable}}{{quantity}}{{/if}}</td>
<td>{{pluralName}}</td>
</tr>
</template>

View File

@@ -1,15 +0,0 @@
Template.itemRow.helpers({
isSelected: function(){
return Session.get('selectedItemRow')=== this._id;
}
});
Template.itemRow.events({
"click": function(e){
if(Session.get('selectedItemRow')=== this._id){
Session.set('selectedItemRow', null);
} else{
Session.set('selectedItemRow', this._id);
}
}
});

View File

@@ -22,6 +22,11 @@
{{else}}
<div class="{{advantage}} skillMod">{{../skillMod skill}}</div>
{{/if}}
<div class="{{conditionals}} skillName">{{name}}</div>
<div class="{{conditionals}} skillName">
{{name}}
{{#if showPassive}}
({{../passiveSkill skill}})
{{/if}}
</div>
</div>
</template>