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

Added more material design touch response, swipe pages, and began effects lists

Browse Source
This commit is contained in:
Thaum
2014-12-09 13:42:05 +00:00
parent ad474590bd
commit a26589157e
33 changed files with 840 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
rpg-docs/client/views/character/Stats/stats.html
View File

@@ -4,70 +4,72 @@
{{> abilityCards}}
</div>
<div class="statsFlex">
<paper-shadow class="card" id="armor">
{{#clickCard class="card" id="armor"}}
<h1>{{attributeValue "armor"}}</h1>
<p class="caption">Armor</p>
</paper-shadow>
<paper-shadow class="card" id="initiative">
{{/clickCard}}
{{#clickCard class="card" id="initiative"}}
<h1>{{skillMod "initiative"}}</h1>
<p class="caption">Initiative</p>
</paper-shadow>
<paper-shadow class="card" id="proficiencyBonus">
{{/clickCard}}
{{#clickCard class="card" id="proficiencyBonus"}}
<h1>{{attributeValue "proficiencyBonus"}}</h1>
<p class="caption">Proficiency Bonus</p>
</paper-shadow>
<paper-shadow class="card" id="speed">
{{/clickCard}}
{{#clickCard class="card" id="speed"}}
<h1>{{attributeValue "speed"}}</h1>
<p class="caption">Speed</p>
</paper-shadow>
<paper-shadow class="card" id="passivePerception">
{{/clickCard}}
{{#clickCard class="card" id="passivePerception"}}
<h1>{{passiveSkill "perception"}}</h1>
<p class="caption">Passive Perception</p>
</paper-shadow>
<paper-shadow class="card" id="hitDice">
<h1>{{> hitDice hitDice="d6HitDice" d="6"}}</h1>
<h1>{{> hitDice hitDice="d8HitDice" d="8"}}</h1>
<h1>{{> hitDice hitDice="d10HitDice" d="10"}}</h1>
<h1>{{> hitDice hitDice="d12HitDice" d="12"}}</h1>
{{/clickCard}}
{{#clickCard class="card" id="hitDice"}}
<h1 class="attribute">{{> hitDice hitDice="d6HitDice" d="6"}}</h1>
<h1 class="attribute">{{> hitDice hitDice="d8HitDice" d="8"}}</h1>
<h1 class="attribute">{{> hitDice hitDice="d10HitDice" d="10"}}</h1>
<h1 class="attribute">{{> hitDice hitDice="d12HitDice" d="12"}}</h1>
<p class="caption">Hit Dice</p>
</paper-shadow>
{{/clickCard}}
{{# if canCast}}
<paper-shadow class="card" id="spellSlots">
<h1>{{> spellSlots}}</h1>
<p class="caption">Spell Slots</p>
</paper-shadow>
{{#clickCard class="card" id="spellSlots"}}
<h1>{{> spellSlots}}</h1>
<p class="caption">Spell Slots</p>
{{/clickCard}}
{{/if}}
{{# if attributeBase "rages"}}
<paper-shadow class="card" id="rages">
<h1>{{attributeValue "rages"}}</h1>
<p class="caption">rages</p>
</paper-shadow>
{{#clickCard class="card" id="rages"}}
<h1>{{attributeValue "rages"}}</h1>
<p class="caption">rages</p>
{{/clickCard}}
{{/if}}
{{# if attributeBase "sorceryPoints"}}
<paper-shadow class="card" id="sorceryPoints">
<h1>{{attributeValue "sorceryPoints"}}</h1>
<p class="caption">Sorcery Points</p>
</paper-shadow>
{{#clickCard class="card" id="sorceryPoints"}}
<h1>{{attributeValue "sorceryPoints"}}</h1>
<p class="caption">Sorcery Points</p>
{{/clickCard}}
{{/if}}
{{# if attributeBase "expertiseDice"}}
<paper-shadow class="card" id="expertiseDice">
<h1>{{attributeValue "expertiseDice"}}</h1>
<p class="caption">Expertise Dice</p>
</paper-shadow>
{{#clickCard class="card" id="expertiseDice"}}
<h1>{{attributeValue "expertiseDice"}}</h1>
<p class="caption">Expertise Dice</p>
{{/clickCard}}
{{/if}}
{{# if attributeBase "superiorityDice"}}
<paper-shadow class="card" id="superiorityDice">
<h1>{{attributeValue "superiorityDice"}}</h1>
<p class="caption">Superiority Dice</p>
</paper-shadow>
{{#clickCard class="card" id="superiorityDice"}}
<h1>{{attributeValue "superiorityDice"}}</h1>
<p class="caption">Superiority Dice</p>
{{/clickCard}}
{{/if}}
</div>
</div>
{{> attributeDialog character=this}}
{{> skillDialog character=this}}
</template>
<template name="hitDice">
{{# if ../attributeBase hitDice}}
{{../attributeValue hitDice}}d{{d}} + {{../abilityMod "constitution"}}
{{../attributeValue hitDice}}d{{d}} + {{../abilityMod "constitution"}}
{{/if}}
</template>
@@ -82,3 +84,59 @@
{{attributeValue "level8SpellSlots"}}
{{attributeValue "level9SpellSlots"}}
</template>
<template name="attributeDialog">
<!--needs character, attributeName, attributeTitle-->
<paper-dialog id="attributeDialog" heading={{session "selectedAttributeTitle"}} backdrop transition="core-transition-center">
{{#if attributeName}}
{{character.attributeValue attributeName}}<br>
{{#each effects.add}}
{{> attributeEffect}}
{{/each}}
{{#each effects.mul}}
{{> attributeEffect}}
{{/each}}
{{#each effects.min}}
{{> attributeEffect}}
{{/each}}
{{#each effects.max}}
{{> attributeEffect}}
{{/each}}
{{signedString attribute.adjustment}}
{{/if}}
</paper-dialog>
</template>
<template name="attributeEffect">
{{#if editing}}
<div class="editEffect">
<paper-dropdown-menu label="Operation">
<core-menu id="operationSelector">
<paper-item>add</paper-item>
<paper-item>multiply</paper-item>
<paper-item>min</paper-item>
<paper-item>max</paper-item>
</core-menu>
</paper-dropdown-menu>
<paper-input id="effectValueInput" label="Value" floatinglabel></paper-input>
<paper-input id="effectNameInput" label="Name" floatinglabel></paper-input>
<paper-icon-button id="doneButton" icon="done" title="save" role="button" aria-label="save"></paper-icon-button>
<paper-icon-button id="cancelButton" icon="clear" title="cancel" role="button" aria-label="cancel"></paper-icon-button>
<paper-icon-button id="deleteButton" icon="delete" title="delete" role="button" aria-label="delete"></paper-icon-button>
</div>
{{else}}
<div class="effect">
<div class="effectValue">{{operation}} {{signedEffectValue}}</div><div class="effectName"> {{name}}</div>
{{#if editable}}
<div class="editButton">EDIT</div>
{{/if}}
</div>
{{/if}}
</template>
<template name="skillDialog">
<!--needs character and skill string-->
<paper-dialog id="skillDialog" backdrop transition="core-transition-center">
</paper-dialog>
</template>

91
rpg-docs/client/views/character/Stats/stats.js Normal file
View File

@@ -0,0 +1,91 @@
selectAttribute = function(name, title){
Session.set("selectedAttribute", name);
Session.set("selectedAttributeTitle", title);
Session.set("editingEffect", null);
document.querySelector("#attributeDialog").toggle();
};
selectSkill = function(name, title){
Session.set("selectedSkill", name);
Session.set("selectedSkillTitle", title);
Session.set("editingEffect", null);
document.querySelector("#skillDialog").toggle();
};
Template.stats.events({
"click #armor": function(){
console.log("clicked armor");
selectAttribute("armor", "Armor")
}
});
Template.attributeDialog.helpers({
attributeTitle: function(){
return Session.get("selectedAttributeTitle");
},
attributeName: function(){
return Session.get("selectedAttribute");
},
attribute: function(){
return this.character.getField(Session.get("selectedAttribute"));
},
effects: function(){
var attribute = this.character.getField(Session.get("selectedAttribute"));
return _.groupBy(attribute.effects, "operation");
},
effectValue: function(){
return evaluateEffect(Template.parentData(1).character._id, this);
}
});
Template.attributeEffect.helpers({
editing: function(){
return Session.get("editingEffect") === this._id;
},
editable: function(){
return this.type === "editable";
},
operation: function(){
switch(this.operation){
case "add":
return;
case "mul":
return Spacebars.SafeString("&times;");
case "min":
return "min";
case "max":
return "max";
default:
return this.operation;
}
},
signedEffectValue: function(){
var value = evaluateEffect(Template.parentData(1).character._id, this);
return signedString(value);
}
});
Template.attributeEffect.events({
"click .editButton": function(event){
Session.set("editingEffect", this._id);
},
"click #doneButton": function(event){
var newEffect = {};
//TODO setup the changed effect
var attribute = Session.get("selectedAttribute");
var charId = Template.parentData(2)._id;
Meteor.call("updateEffect", charId, attribute, this._id, newEffect)
Session.set("editingEffect", null);
},
"click #cancelButton": function(event){
Session.set("editingEffect", null);
},
"click #deleteButton": function(event){
console.log("check that ", Template.parentData(2), "is a character");
var attribute = Session.get("selectedAttribute");
var pullObject = {};
pullObject[attribute + ".effects"] = {_id: this._id};
Characters.update(Template.parentData(2)._id, {$pull: pullObject});
Session.set("editingEffect", null);
}
});

1
rpg-docs/client/views/character/abilityCards/abilityCards.css
View File

@@ -11,6 +11,7 @@
text-align: center;
background-color: #D50000;
padding: 16px;
position: relative;
}
.abilityFlex .card {

6
rpg-docs/client/views/character/abilityCards/abilityCards.html
View File

@@ -10,6 +10,7 @@
<template name="strengthCard">
<paper-shadow class="card double">
<div class="abilityScore red white-text">
{{> ripple color="#eee"}}
<h1 class="display1">{{attributeValue "strength"}}</h1>
<h2>{{abilityMod "strength"}}</h2>
</div>
@@ -25,6 +26,7 @@
<template name="dexterityCard">
<paper-shadow class="card double">
<div class="abilityScore green white-text">
{{> ripple color="#eee"}}
<h1 class="display1">{{attributeValue "dexterity"}}</h1>
<h2>{{abilityMod "dexterity"}}</h2>
</div>
@@ -42,6 +44,7 @@
<template name="constitutionCard">
<paper-shadow class="card double">
<div class="abilityScore deep-orange white-text">
{{> ripple color="#eee"}}
<h1 class="display1">{{attributeValue "constitution"}}</h1>
<h2>{{abilityMod "constitution"}}</h2>
</div>
@@ -56,6 +59,7 @@
<template name="intelligenceCard">
<paper-shadow class="card double">
<div class="abilityScore indigo white-text">
{{> ripple color="#eee"}}
<h1 class="display1">{{attributeValue "intelligence"}}</h1>
<h2>{{abilityMod "intelligence"}}</h2>
</div>
@@ -75,6 +79,7 @@
<template name="wisdomCard">
<paper-shadow class="card double">
<div class="abilityScore purple white-text">
{{> ripple color="#eee"}}
<h1 class="display1">{{attributeValue "wisdom"}}</h1>
<h2>{{abilityMod "wisdom"}}</h2>
</div>
@@ -94,6 +99,7 @@
<template name="charismaCard">
<paper-shadow class="card double">
<div class="abilityScore pink white-text">
{{> ripple color="#eee"}}
<h1 class="display1">{{attributeValue "charisma"}}</h1>
<h2>{{abilityMod "charisma"}}</h2>
</div>

17
rpg-docs/client/views/character/characterSheet.html
View File

@@ -3,17 +3,18 @@
<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>
</paper-tabs>
<core-animated-pages selected={{selectedTab}} transitions="slide-from-right">
<div>{{> stats}}</div>
<div>features</div>
<div>inventory</div>
<div>spellBook</div>
<div>persona</div>
<div>journal</div>
<core-animated-pages id="tabPages" selected={{selectedTab}} transitions="slide-from-right">
<swipe-detect>{{> stats}}</swipe-detect>
<swipe-detect>features</swipe-detect>
<swipe-detect>inventory</swipe-detect>
<swipe-detect>spellBook</swipe-detect>
<swipe-detect>persona</swipe-detect>
<swipe-detect>journal</swipe-detect>
</core-animated-pages>
</template>

30
rpg-docs/client/views/character/characterSheet.js
View File

@@ -1,6 +1,18 @@
Template.characterSheet.created = function(){
Template.instance().selectedTab = new ReactiveVar(0)
}
};
var setTab = function(instance, num){
instance.selectedTab.set(num);
};
var incTab = function(instance, num){
var current = +instance.selectedTab.get();
var selected = current + num;
if (selected < 0) return;
if (selected >= document.querySelector('#tabPages').children.length) return;
setTab(instance, selected);
};
Template.characterSheet.rendered = function(){
var observer = new ObjectObserver(document.querySelector('#characterSheetTabs'));
@@ -9,11 +21,11 @@ Template.characterSheet.rendered = function(){
Object.keys(changed).forEach(function(property) {
if(property === "selected"){
var selected = changed[property];
instance.selectedTab.set(selected);
setTab(instance, selected);
}
})
});
}
};
Template.characterSheet.helpers({
selectedTab: function(){
@@ -22,8 +34,16 @@ Template.characterSheet.helpers({
});
Template.characterSheet.events({
})
"#tabPages track": function(event){
console.log(event);
},
"swipeleft": function(event){
incTab(Template.instance(), 1);
},
"swiperight": function(event){
incTab(Template.instance(), -1);
},
});
/* requires the following templates
stats

5
rpg-docs/client/views/character/skills/skills.css
View File

@@ -2,6 +2,11 @@
height: 32px;
display: flex;
align-items: center;
position: relative;
}
.skillRow:hover{
background: #FFEBEE;
}
.profIcon{

1
rpg-docs/client/views/character/skills/skills.html
View File

@@ -15,6 +15,7 @@
<template name="skillRow">
<div class="subhead skillRow">
{{> ripple}}
<div class="profIcon" style="background-image: url(/png/profIcons/{{profIcon skill}})"></div>
{{#if failSkill}}
<div class="fail skillMod">fail</div>

19
rpg-docs/client/views/index.html
View File

@@ -1,11 +1,16 @@
<head>
<title>RPG Docs</title>
<meta name="viewport" content="width=device-width initial-scale=1.0, user-scalable=no">
<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="/bower_components/core-animated-pages/core-animated-pages.html">
<link rel="import" href="/bower_components/core-animated-pages/transitions/slide-from-right.html">
<link rel="import" href="/bower_components/paper-shadow/paper-shadow.html">
<link rel="import" href="/bower_components/paper-spinner/paper-spinner.html">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic,900,900italic,100italic,100&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="/bower_components/core-animated-pages/core-animated-pages.html">
<link rel="import" href="/bower_components/core-animated-pages/transitions/slide-from-right.html">
<link rel="import" href="/bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="/bower_components/paper-shadow/paper-shadow.html">
<link rel="import" href="/bower_components/paper-spinner/paper-spinner.html">
<link rel="import" href="/bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="/bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="/bower_components/paper-input/paper-input.html">
<link rel="import" href="/custom_components/swipe-detect/swipe-detect.html">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic,900,900italic,100italic,100&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
</head>

6
rpg-docs/client/views/paperTemplates/clickCard/clickCard.html Normal file
View File

@@ -0,0 +1,6 @@
<template name="clickCard">
<paper-shadow class="clickCard {{class}}" z="1" animated id={{id}}>
{{> ripple}}
{{> UI.contentBlock}}
</paper-shadow>
</template>

8
rpg-docs/client/views/paperTemplates/clickCard/clickCard.js Normal file
View File

@@ -0,0 +1,8 @@
Template.clickCard.events({
"click paper-shadow ": function(event){
event.currentTarget.setZ(2);
_.delay(function(){
event.currentTarget.setZ(1);
}, 300)
}
})

8
rpg-docs/client/views/paperTemplates/ripple/ripple.css Normal file
View File

@@ -0,0 +1,8 @@
.custom-ripple {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
color: #D50000;
}

7
rpg-docs/client/views/paperTemplates/ripple/ripple.html Normal file
View File

@@ -0,0 +1,7 @@
<template name="ripple">
{{#if color}}
<paper-ripple style="color:{{color}}" class="recenteringTouch custom-ripple"></paper-ripple>
{{else}}
<paper-ripple class="recenteringTouch custom-ripple"></paper-ripple>
{{/if}}
</template>