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

Changed attribute dialogs to hero transitions

Browse Source
This commit is contained in:
Thaum
2014-12-18 11:02:03 +00:00
parent a26589157e
commit c55f2c51ab
10 changed files with 246 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
rpg-docs/.meteor/release
View File

@@ -1 +1 @@
METEOR@1.0
METEOR@1.0.1

24
rpg-docs/.meteor/versions
View File

@@ -2,9 +2,9 @@ accounts-base@1.1.2
accounts-password@1.0.4
accounts-ui-unstyled@1.1.4
accounts-ui@1.1.3
aldeed:autoform@3.2.0
aldeed:autoform@4.1.0
aldeed:collection2@2.2.0
aldeed:simple-schema@1.0.3
aldeed:simple-schema@1.1.0
application-configuration@1.0.3
autoupdate@1.1.3
base64@1.0.1
@@ -18,7 +18,7 @@ ctl-helper@1.0.4
ctl@1.0.2
cw4gn3r:jquery-event-drag@2.2.0
dburles:collection-helpers@1.0.1
ddp@1.0.11
ddp@1.0.12
deps@1.0.5
ejson@1.0.4
email@1.0.4
@@ -30,14 +30,14 @@ htmljs@1.0.2
http@1.0.8
id-map@1.0.1
insecure@1.0.1
iron:controller@1.0.0
iron:core@1.0.0
iron:dynamic-template@1.0.0
iron:layout@1.0.0
iron:location@1.0.1
iron:middleware-stack@1.0.0
iron:router@1.0.1
iron:url@1.0.0
iron:controller@1.0.3
iron:core@1.0.3
iron:dynamic-template@1.0.3
iron:layout@1.0.3
iron:location@1.0.3
iron:middleware-stack@1.0.3
iron:router@1.0.3
iron:url@1.0.3
jquery@1.0.1
json@1.0.1
launch-screen@1.0.0
@@ -51,7 +51,7 @@ minifiers@1.1.2
minimongo@1.0.5
mobile-status-bar@1.0.1
mongo-livedata@1.0.6
mongo@1.0.8
mongo@1.0.9
mrt:moment@2.6.0
npm-bcrypt@0.7.7
observe-sequence@1.0.3

16
rpg-docs/client/views/GeneralCSS/general.css
View File

@@ -12,6 +12,10 @@ body.core-narrow {
padding: 8px;
}
body /deep/ core-menu {
overflow-x: hidden !important;
}
.calculatedValue {
color: #021C33;
font-weight: bold;
@@ -78,3 +82,15 @@ paper-button {
.center {
text-align: center;
}
.screen-center {
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
*[hidden] {
visibility: hidden;
}

43
rpg-docs/client/views/character/Stats/stats.css
View File

@@ -3,12 +3,16 @@
}
#stats, #stats .abilityFlex, #stats .statsFlex{
display: flex;
display: flex !important;
justify-content: center;
align-items: flex-start;
align-items: stretch;
flex-wrap: wrap;
}
#stats .card {
flex-grow: 1;
}
#stats .abilityFlex{
flex-basis: 642px;
flex-grow: 1;
@@ -19,4 +23,39 @@
min-width: 152px;
flex-basis: 0px;
flex-grow: 1;
}
.editEffect > * {
vertical-align: bottom;
}
.detailCard {
background: white;
border-radius: 2px;
padding: 16px;
}
#detailContainer {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
pointer-events: none;
}
#detailContainer > *{
pointer-events: auto;
}
#darkOverlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.6);
}
section:not(.core-selected):not([animate]) paper-shadow[hero] {
visibility: hidden;
}

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

@@ -1,70 +1,83 @@
<template name="stats">
<div id="stats">
<div class="abilityFlex">
{{> abilityCards}}
</div>
<div class="statsFlex">
{{#clickCard class="card" id="armor"}}
<h1>{{attributeValue "armor"}}</h1>
<p class="caption">Armor</p>
{{/clickCard}}
{{#clickCard class="card" id="initiative"}}
<h1>{{skillMod "initiative"}}</h1>
<p class="caption">Initiative</p>
{{/clickCard}}
{{#clickCard class="card" id="proficiencyBonus"}}
<h1>{{attributeValue "proficiencyBonus"}}</h1>
<p class="caption">Proficiency Bonus</p>
{{/clickCard}}
{{#clickCard class="card" id="speed"}}
<h1>{{attributeValue "speed"}}</h1>
<p class="caption">Speed</p>
{{/clickCard}}
{{#clickCard class="card" id="passivePerception"}}
<h1>{{passiveSkill "perception"}}</h1>
<p class="caption">Passive Perception</p>
{{/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>
{{/clickCard}}
{{# if canCast}}
{{#clickCard class="card" id="spellSlots"}}
<h1>{{> spellSlots}}</h1>
<p class="caption">Spell Slots</p>
{{/clickCard}}
{{/if}}
{{# if attributeBase "rages"}}
{{#clickCard class="card" id="rages"}}
<h1>{{attributeValue "rages"}}</h1>
<p class="caption">rages</p>
{{/clickCard}}
{{/if}}
{{# if attributeBase "sorceryPoints"}}
{{#clickCard class="card" id="sorceryPoints"}}
<h1>{{attributeValue "sorceryPoints"}}</h1>
<p class="caption">Sorcery Points</p>
{{/clickCard}}
{{/if}}
{{# if attributeBase "expertiseDice"}}
{{#clickCard class="card" id="expertiseDice"}}
<h1>{{attributeValue "expertiseDice"}}</h1>
<p class="caption">Expertise Dice</p>
{{/clickCard}}
{{/if}}
{{# if attributeBase "superiorityDice"}}
{{#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}}
<core-animated-pages selected={{selectedSection}} transitions="hero-transition cross-fade">
<section id="stats">
<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>
{{> attributeDialog character=this}}
{{> skillDialog character=this}}
</section>
</core-animated-pages>
</template>
<template name="hitDice">
@@ -87,8 +100,14 @@
<template name="attributeDialog">
<!--needs character, attributeName, attributeTitle-->
<paper-dialog id="attributeDialog" heading={{session "selectedAttributeTitle"}} backdrop transition="core-transition-center">
{{#if attributeName}}
{{#if attributeName}}
<paper-shadow id="attributeDialog"
class="detailCard"
hero-id={{session "selectedAttribute"}}
hero
heading={{session "selectedAttributeTitle"}}
z="2">
{{character.attributeValue attributeName}}<br>
{{#each effects.add}}
{{> attributeEffect}}
@@ -103,23 +122,25 @@
{{> attributeEffect}}
{{/each}}
{{signedString attribute.adjustment}}
{{/if}}
</paper-dialog>
</paper-shadow>
{{/if}}
</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 layered class="dropdown">
<core-menu id="operationSelector" selected={{operationNumber}} class="menu">
<paper-item>add</paper-item>
<paper-item>multiply</paper-item>
<paper-item>min</paper-item>
<paper-item>max</paper-item>
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
<paper-input id="effectValueInput" label="Value" floatinglabel></paper-input>
<paper-input id="effectNameInput" label="Name" floatinglabel></paper-input>
<paper-input id="effectValueInput" label="Value" value={{value}} floatinglabel></paper-input>
<paper-input id="effectNameInput" label="Name" value={{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>
@@ -128,7 +149,7 @@
<div class="effect">
<div class="effectValue">{{operation}} {{signedEffectValue}}</div><div class="effectName"> {{name}}</div>
{{#if editable}}
<div class="editButton">EDIT</div>
<paper-icon-button id="editButton" icon="create" title="edit" role="button" aria-label="edit"></paper-icon-button>
{{/if}}
</div>
{{/if}}
@@ -136,7 +157,7 @@
<template name="skillDialog">
<!--needs character and skill string-->
<paper-dialog id="skillDialog" backdrop transition="core-transition-center">
<paper-dialog layered="false" id="skillDialog" backdrop transition="core-transition-center">
</paper-dialog>
</template>

73
rpg-docs/client/views/character/Stats/stats.js
View File

@@ -2,20 +2,56 @@ 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.created = function(){
this.selectedSection = new ReactiveVar(0);
}
Template.stats.events({
"click #armor": function(){
console.log("clicked armor");
selectAttribute("armor", "Armor")
"tap .attribute": function(event){
var instance = Template.instance();
var selected = $(event.currentTarget).attr("hero-id");
var current = Session.get("selectedAttribute");
var f = function(){
selectAttribute(selected, "Title");
instance.selectedSection.set(1);
}
//we already have the dialog open
if(instance.selectedSection.get() === 1 && current != selected){
instance.selectedSection.set(0);
_.delay(f, 200);
} else {
f();
}
},
"tap #darkOverlay": function(event){
Template.instance().selectedSection.set(0);
// let the user click through before it is completely gone
$("#darkOverlay").css("pointer-events", "none");
// make clickable again later
_.delay(function(){
$("#darkOverlay").css("pointer-events", "auto");
}, 500);
}
});
Template.stats.helpers({
selectedSection: function(){
return Template.instance().selectedSection.get();
},
isHero: function(string){
if(string === Session.get("selectedAttribute")||
string === Session.get("selectedSkill")){
return "hero";
}
}
});
@@ -59,6 +95,20 @@ Template.attributeEffect.helpers({
return this.operation;
}
},
operationNumber: function(){
switch(this.operation){
case "add":
return 0;
case "mul":
return 1;
case "min":
return 2;
case "max":
return 3;
default:
return -1;
}
},
signedEffectValue: function(){
var value = evaluateEffect(Template.parentData(1).character._id, this);
return signedString(value);
@@ -66,22 +116,23 @@ Template.attributeEffect.helpers({
});
Template.attributeEffect.events({
"click .editButton": function(event){
"tap #editButton": function(event){
Session.set("editingEffect", this._id);
},
"click #doneButton": function(event){
var newEffect = {};
"tap #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){
"tap #cancelButton": function(event){
Session.set("editingEffect", null);
},
"click #deleteButton": function(event){
console.log("check that ", Template.parentData(2), "is a character");
"tap #deleteButton": function(event){
var attribute = Session.get("selectedAttribute");
var pullObject = {};
pullObject[attribute + ".effects"] = {_id: this._id};

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

@@ -10,11 +10,11 @@
</paper-tabs>
<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>
<swipe-detect touch-action="pan-y">{{> stats}}</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>
<swipe-detect touch-action="pan-y">journal</swipe-detect>
</core-animated-pages>
</template>

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

@@ -19,6 +19,7 @@
/*TODO fix the actual images and remove inversion*/
-webkit-filter: invert(100%);
opacity: 0.54;
pointer-events: none;
}
.skillMod {

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

@@ -5,10 +5,15 @@
<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/core-animated-pages/transitions/hero-transition.html">
<link rel="import" href="/bower_components/core-animated-pages/transitions/cross-fade.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-dropdown/paper-dropdown.html">
<link rel="import" href="/bower_components/core-menu/core-menu.html">
<link rel="import" href="/bower_components/paper-item/paper-item.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">

2
rpg-docs/client/views/paperTemplates/clickCard/clickCard.html
View File

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