Finished basic new user experience

rpg-docs/client/views/character/characterSheet.html

@@ -55,7 +55,7 @@
 					</paper-tabs>
 				</div>
 			</app-toolbar>
-			{{#if session "showNewUserExperience"}}{{> newUserStepper}}{{/if}}
+			{{#if newUserExperience}}{{> newUserStepper}}{{/if}}
 		</app-header>
 		<div class="flex" style="position: relative;">
 			<iron-pages id="tabPages" class="fit" selected={{selectedTab}}>

rpg-docs/client/views/character/characterSheet.js

@@ -31,16 +31,6 @@ Template.characterSheet.onRendered(function() {
 		);
 	});
 
-	// 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);
 });
@@ -187,10 +177,8 @@ Template.characterSheet.helpers({
 		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) ||

rpg-docs/client/views/character/features/featureDialog/featureDialog.js

@@ -48,7 +48,8 @@ Template.featureDetails.events({
 
 Template.featureEdit.helpers({
 	showNewUserExperience: function(){
-		return Session.get("newUserExperienceStep") === 0;
+		return Session.get("newUserExperienceStep") === 0 ||
+			Session.get("newUserExperienceStep") === 1;
 	},
 	usesSet: function(){
 		return _.isString(this.uses);

rpg-docs/client/views/character/journal/raceDialog/raceDialog.html

@@ -1,11 +1,34 @@
 <template name="raceDialog">
 	{{#baseDialog title="Race" class=color hideColor="true" hideDelete="true" startEditing=startEditing}}
+		{{#if showNewUserExperience}}
+			{{#infoBox}}
+				{{#if stepComplete}}
+					<p>You can add all the effects you need to represent how your race affects your character's attributes.</p>
+				{{else}}
+					<p>Click the edit button to edit your race and add a racial effect</p>
+				{{/if}}
+			{{/infoBox}}
+		{{/if}}
 		<div class="horizontal layout center-justified paper-font-display2">
 			{{race}}
 		</div>
 		{{> effectsViewList charId=charId parentId=charId parentGroup="racial"}}
 		{{> proficiencyViewList charId=charId parentId=charId parentGroup="racial"}}
 	{{else}}
+		{{#if showNewUserExperience}}
+			{{#infoBox}}
+				{{#if stepComplete}}
+					<p>You can add all the effects you need to represent how your race affects your character's attributes.</p>
+				{{else}}
+					<p>
+						Add an effect with the following options: <br>
+						Attribute: <b>stats > speed</b> <br>
+						Operation: <b>Base Value</b> <br>
+						Value: <b>30</b> (might be different for some races)
+					</p>
+				{{/if}}
+			{{/infoBox}}
+		{{/if}}
 		<paper-input id="raceInput" label="Race" value={{race}}></paper-input>
 		{{> effectsEditList parentId=charId parentCollection="Characters" charId=charId parentGroup="racial"}}
 		{{> proficiencyEditList parentId=charId parentCollection="Characters" charId=charId parentGroup="racial"}}

rpg-docs/client/views/character/journal/raceDialog/raceDialog.js

@@ -19,4 +19,10 @@ Template.raceDialog.helpers({
 		var char = Characters.findOne(this.charId, {fields: {color: 1}});
 		if (char) return getColorClass(char.color);
 	},
+	stepComplete: function(){
+		return Session.get("newUserExperienceStep") > 1;
+	},
+	showNewUserExperience: function(){
+		return Session.get("newUserExperienceStep") >= 1;
+	},
 });

rpg-docs/client/views/character/newUserStepper/newUserStepper.css

@@ -1,5 +1,5 @@
 .newUserStepper {
-	height: 300px !important;
+	height: 210px !important;
 }
 
 .newUserStepper paper-step .invalid-step-message {

rpg-docs/client/views/character/newUserStepper/newUserStepper.html

@@ -16,7 +16,10 @@
 			</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.
+			Done! If you get stuck, be sure to check out the <a href="/guide">guide</a>, or ask for help using the feedback form
+			<div class="layout vertical end">
+				<paper-button class="done-button" style="color: #d13b2e">Finish</paper-button>
+			</div>
 		</paper-step>
 	</paper-stepper>
 </template>

rpg-docs/client/views/character/newUserStepper/newUserStepper.js

@@ -1,30 +1,36 @@
 Template.newUserStepper.onRendered(function(){
+	Session.set("newUserExperienceStep", 0);
 	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();
-		}
+	_.defer(() => {
+		this.autorun((c) => {
+			var step = Session.get("newUserExperienceStep");
+			var hasFeatures = Features.find({charId: this.data._id}).count() > 1;
+			console.log({step, hasFeatures});
+			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",
+				"parent.group": "racial",
+			}).count();
+			if (step === 1 && hasEffect){
+				stepper.continue();
+				c.stop();
+			}
+		});
+		this.autorun((c) => {
+			var step = Session.get("newUserExperienceStep");
+			if (step === 2 && Session.get("viewedSpeed")){
+				Session.set("viewedSpeed", undefined);
+				stepper.continue();
+				c.stop();
+			}
+		});
 	});
 });
 
@@ -38,4 +44,17 @@ Template.newUserStepper.events({
 		Session.set("showNewUserExperience", undefined);
 		Characters.update(this._id, {$unset: {"settings.newUserExperience": 1}});
 	},
+	"click .done-button": function(event, instance){
+		const stepper = instance.find("paper-stepper");
+		stepper.continue();
+	},
+});
+
+Template.stats.events({
+	"click .stat-card": function(event, instance){
+		var step = Session.get("newUserExperienceStep");
+		if (this.stat === "speed" && step === 2){
+			Session.set("viewedSpeed", true);
+		}
+	}
 });

rpg-docs/client/views/character/stats/attributeDialog/attributeDialog.html

@@ -6,6 +6,16 @@
 </template>
 
 <template name="attributeDialogView">
+	{{#if showNewUserExperience}}
+		{{#infoBox}}
+			<p>
+				This dialog shows how your speed is set by the effect you added to your character's race.
+			</p>
+			<p>
+				In DiceCloud you don't change stats directly, rather you add effects which impact your stats in different ways. This way, you can always tell where your stats came from, and how they got to their current value.
+			</p>
+		{{/infoBox}}
+	{{/if}}
 	<div class="layout horizontal center-justified end">
 		<div class="paper-font-display2">
 			{{attributeValue}}