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

Added basic onboarding steps

Browse Source
This commit is contained in:
Stefan Zermatten
2017-09-27 16:19:00 +02:00
parent 44da62a962
commit f6b2dde479
29 changed files with 2036 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
rpg-docs/client/style/bounce.css Normal file
View File

@@ -0,0 +1,17 @@
@keyframes bounce {
from {
transform: translate(0px,0px);
}
to {
transform: translate(0px,-16px);
}
}
.bounce{
animation-name: bounce;
animation-duration: 0.3s;
animation-direction: alternate;
animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
animation-delay: 0s;
animation-iteration-count: infinite;
}

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

@@ -44,17 +44,18 @@
</div>
<div bottom-item>
<paper-tabs id="characterSheetTabs" selected={{selectedTab}} class="{{colorClass}}">
<paper-tab name="stats">Stats</paper-tab>
<paper-tab name="features">Features</paper-tab>
<paper-tab name="stats" class="{{#if shouldBounce 0}}bounce{{/if}}">Stats</paper-tab>
<paper-tab name="features" class="{{#if shouldBounce 1}}bounce{{/if}}">Features</paper-tab>
<paper-tab name="inventory">Inventory</paper-tab>
{{#unless hideSpellcasting}}
<paper-tab name="spells">Spells</paper-tab>
{{/unless}}
<paper-tab name="persona">Persona</paper-tab>
<paper-tab name="journal">Journal</paper-tab>
<paper-tab name="journal" class="{{#if shouldBounce 5}}bounce{{/if}}">Journal</paper-tab>
</paper-tabs>
</div>
</app-toolbar>
{{#if session "showNewUserExperience"}}{{> newUserStepper}}{{/if}}
</app-header>
<div class="flex" style="position: relative;">
<iron-pages id="tabPages" class="fit" selected={{selectedTab}}>

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

@@ -29,7 +29,17 @@ Template.characterSheet.onRendered(function() {
tabFabMenus = _.times(6, (n) =>
tabPages[n].find(".mini-holder")
);
})
});
// New user experience starts on the features tab
var settings = Characters.findOne(this.data._id, {
fields: {settings: 1}
}).settings;
if (settings && settings.newUserExperience){
Session.set(this.data._id + ".selectedTab", "1");
Session.set("showNewUserExperience", true);
Session.set("newUserExperienceStep", 0);
}
//watch this character and make sure their encumbrance is updated
//trackEncumbranceConditions(this.data._id, this);
@@ -172,6 +182,20 @@ Template.characterSheet.helpers({
var char = Characters.findOne(this._id);
return char && char.settings.hideSpellcasting;
},
newUserExperience: function(){
var char = Characters.findOne(this._id);
return char && char.settings.newUserExperience;
},
shouldBounce: function(tab){
console.log(this._id);
const selected = Session.get(this._id + ".selectedTab")
const step = Session.get("newUserExperienceStep");
console.log({selected, step, tab});
if (selected == tab) return false;
return (tab === 1 && step === 0) ||
(tab === 5 && step === 1) ||
(tab === 0 && step === 2);
},
});
Template.characterSheet.events({

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

@@ -42,9 +42,20 @@
</template>
<template name="featureEdit">
{{#if showNewUserExperience}}
{{# infoBox}}
<p>
Features represent all the permanent things your character can do.
</p><p>
A feature can change a character's stats with effects,
or give the character proficiencies, attacks, and buffs.
</p><p>
Give the feature a name, and close it to continue.
</p>
{{/infoBox}}
{{/if}}
<!--name-->
<paper-input id="featureNameInput" class="fullwidth" label="Name" value={{name}}></paper-input>
<div class="layout horizontal center wrap justified">
<paper-dropdown-menu class=flex label="Enable Feature" style="flex-basis: 150px; max-width: 200px;">
<dicecloud-selector selected={{enabledSelection}} class="dropdown-content enabled-dropdown">

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

@@ -47,6 +47,9 @@ Template.featureDetails.events({
});
Template.featureEdit.helpers({
showNewUserExperience: function(){
return Session.get("newUserExperienceStep") === 0;
},
usesSet: function(){
return _.isString(this.uses);
},

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

@@ -102,7 +102,7 @@
</div>
{{#if canEditCharacter _id}}
<paper-fab id="addFeature"
class="floatyButton"
class="floatyButton {{#if shouldFloatyButtonBounce}}bounce{{/if}}"
icon="add">
<paper-tooltip position="left">Add Feature</paper-tooltip>
</paper-fab>

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

@@ -59,6 +59,10 @@ Template.features.helpers({
hasCharacters: function(string){
return string && string.match(/\S/);
},
shouldFloatyButtonBounce: function(){
const step = Session.get("newUserExperienceStep");
return step === 0 && Features.find({charId: this._id}).count() <= 1;
},
});
Template.features.events({

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

@@ -53,7 +53,7 @@
</div>
<div class="bottom list">
<div class="item-slot">
<div class="item race layout horizontal center">
<div class="item race layout horizontal center {{#if shouldRaceBounce}}bounce{{/if}}">
{{race}}
</div>
</div>

3
rpg-docs/client/views/character/journal/journal.js
View File

@@ -50,6 +50,9 @@ Template.journal.helpers({
var char = Characters.findOne(this._id, {fields: {race: 1}});
return char && char.race;
},
shouldRaceBounce: function(){
return Session.get("newUserExperienceStep") === 1;
},
});
Template.journal.events({

12
rpg-docs/client/views/character/newUserStepper/newUserStepper.css Normal file
View File

@@ -0,0 +1,12 @@
.newUserStepper {
height: 300px !important;
}
.newUserStepper paper-step .invalid-step-message {
color: #d13b2e;
visibility: hidden;
}
.newUserStepper paper-step[invalid] .invalid-step-message {
visibility: visible;
}

26
rpg-docs/client/views/character/newUserStepper/newUserStepper.html Normal file
View File

@@ -0,0 +1,26 @@
<template name="newUserStepper">
<paper-stepper linear selected="0" class="newUserStepper">
<paper-step id="step0" label="Add a feature">
<p>
To get started, add a feature
</p>
</paper-step>
<paper-step id="step1" label="Add an effect">
<p>
Add a racial effect to set your speed
</p>
</paper-step>
<paper-step id="step2" label="See the effect in action">
<p>
View your speed stat
</p>
</paper-step>
<paper-step id="step3" label="Finish">
If you get stuck, be sure to check out the guide, or ask for help using the feedback form.
</paper-step>
</paper-stepper>
</template>
<template name="newUserStepperPlaceholder">
<div style="height: 300px"></div>
</template>

41
rpg-docs/client/views/character/newUserStepper/newUserStepper.js Normal file
View File

@@ -0,0 +1,41 @@
Template.newUserStepper.onRendered(function(){
let stepper = this.find("paper-stepper");
this.autorun((c) => {
var step = Session.get("newUserExperienceStep");
var hasFeatures = Features.find({charId: this.data._id}).count() > 1
if (step === 0 && hasFeatures){
stepper.continue();
c.stop();
}
});
this.autorun((c) => {
var step = Session.get("newUserExperienceStep");
var hasEffect = !!Effects.find({
charId: this.data._id,
stat: "speed",
}).count();
if (step === 1 && hasEffect){
stepper.continue();
c.stop();
}
});
this.autorun((c) => {
var step = Session.get("newUserExperienceStep");
if (step === 2 && Session.get("viewedSpeed")){
stepper.continue();
c.stop();
}
});
});
Template.newUserStepper.events({
"paper-stepper-progressed paper-stepper": function(event, template){
const step = template.find("paper-stepper").selected;
Session.set("newUserExperienceStep", step);
},
"paper-stepper-completed paper-stepper": function(event, template){
Session.set("newUserExperienceStep", undefined);
Session.set("showNewUserExperience", undefined);
Characters.update(this._id, {$unset: {"settings.newUserExperience": 1}});
},
});

15
rpg-docs/client/views/paperTemplates/infoBox/infoBox.css Normal file
View File

@@ -0,0 +1,15 @@
.infoBox iron-icon {
color: #747474;
color: rgba(0,0,0,0.54);
height: 32px;
width: 32px;
margin-right: 12px;
}
.infoBox > div > p {
margin: 0;
}
.infoBox > div > p + p {
margin-top: 10px;
}

10
rpg-docs/client/views/paperTemplates/infoBox/infoBox.html Normal file
View File

@@ -0,0 +1,10 @@
<template name="infoBox">
<div class="layout horizontal center infoBox">
<div>
<iron-icon icon="info-outline"></iron-icon>
</div>
<div class="flex">
{{> Template.contentBlock}}
</div>
</div>
</template>