rename /rpg-docs to /app

app/client/views/character/newUserStepper/newUserStepper.css

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

app/client/views/character/newUserStepper/newUserStepper.html

@@ -0,0 +1,29 @@
+<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">
+			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>
+
+<template name="newUserStepperPlaceholder">
+	<div style="height: 300px"></div>
+</template>

app/client/views/character/newUserStepper/newUserStepper.js

@@ -0,0 +1,58 @@
+Template.newUserStepper.onRendered(function(){
+	Session.set("newUserExperienceStep", 0);
+	let stepper = this.find("paper-stepper");
+	_.defer(() => {
+		this.autorun((c) => {
+			var step = Session.get("newUserExperienceStep");
+			var hasFeatures = Features.find({charId: this.data._id}).count() > 1;
+			if (step === 0 && hasFeatures){
+				stepper.continue();
+			}
+		});
+		this.autorun((c) => {
+			var step = Session.get("newUserExperienceStep");
+			var hasEffect = !!Effects.find({
+				charId: this.data._id,
+				stat: "speed",
+				"parent.group": "racial",
+				operation: "base",
+				value: {$gt: 0},
+			}).count();
+			if (step === 1 && hasEffect){
+				stepper.continue();
+			}
+		});
+		this.autorun((c) => {
+			var step = Session.get("newUserExperienceStep");
+			if (step === 2 && Session.get("viewedSpeed")){
+				Session.set("viewedSpeed", undefined);
+				stepper.continue();
+			}
+		});
+	});
+});
+
+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}});
+	},
+	"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);
+		}
+	}
+});