krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-12-17 14:47:53 +01:00
Code Issues Packages Projects Releases Wiki Activity

New client tour (#8921)

Browse Source 
* Linted tour. Added intro tour

* Added initial tours

* Fixed page number for intro

* Lint fix

* Updated shrinkwrap

* Removed bootstrap tour

* Lint fix
This commit is contained in:
Keith Holliday
2017-08-02 20:15:00 -06:00
committed by GitHub
parent 026014b8d6
commit e61884ed08
8 changed files with 376 additions and 333 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
npm-shrinkwrap.json generated
View File

@@ -5189,6 +5189,11 @@
"from": "intersect@>=0.0.3 <0.1.0",
"resolved": "https://registry.npmjs.org/intersect/-/intersect-0.0.3.tgz"
},
"intro.js": {
"version": "2.6.0",
"from": "intro.js@latest",
"resolved": "http://registry.npmjs.org/intro.js/-/intro.js-2.6.0.tgz"
},
"invariant": {
"version": "2.2.2",
"from": "invariant@>=2.2.0 <3.0.0",

1
package.json
View File

@@ -73,6 +73,7 @@
"html-webpack-plugin": "^2.8.1",
"image-size": "~0.3.2",
"in-app-purchase": "^1.1.6",
"intro.js": "^2.6.0",
"jade": "~1.11.0",
"jquery": "^3.1.1",
"js2xmlparser": "~1.0.0",

1
website/client/app.vue
View File

@@ -63,6 +63,7 @@ export default {
};
</script>
<style src="intro.js/minified/introjs.min.css"></style>
<style src="bootstrap/scss/bootstrap.scss" lang="scss"></style>
<style src="assets/scss/index.scss" lang="scss"></style>
<style src="assets/css/index.css"></style>

2
website/client/components/inventory/equipment/index.vue
View File

@@ -84,10 +84,10 @@
v-for="group in itemsGroups",
v-if="viewOptions[group.key].selected",
:key="group.key",
:class='group.key',
)
h2
| {{ group.label }}
|
span.badge.badge-pill.badge-default {{items[group.key].length}}
.items

2
website/client/components/inventory/items/index.vue
View File

@@ -105,11 +105,9 @@
div.potion-icon(:class="'Pet_HatchingPotion_'+currentDraggingPotion.key")
div.popover
div.popover-content {{ $t('clickOnEggToHatch', {potionName: currentDraggingPotion.text() }) }}
</template>
<style lang="scss" scoped>
.hatchingPotionInfo {
position: absolute;
left: -500px;

16
website/client/components/notifications.vue
View File

@@ -25,6 +25,7 @@ div
import { mapState } from 'client/libs/store';
import notifications from 'client/mixins/notifications';
import guide from 'client/mixins/guide';
import welcomeModal from './achievements/welcome';
import newStuff from './achievements/newStuff';
@@ -49,7 +50,7 @@ import ultimateGear from './achievements/ultimateGear';
import wonChallenge from './achievements/wonChallenge';
export default {
mixins: [notifications],
mixins: [notifications, guide],
components: {
wonChallenge,
ultimateGear,
@@ -132,8 +133,8 @@ export default {
invitedToQuest () {
return this.user.party.quest.RSVPNeeded && !this.user.party.quest.completed;
},
userDailies () {
return this.$store.state.tasks.data.dailys;
userTasks () {
return this.$store.state.tasks.data;
},
},
watch: {
@@ -223,7 +224,8 @@ export default {
if (after !== true) return;
this.$root.$emit('show::modal', 'quest-invitation');
},
userDailies () {
userTasks () {
// @TODO: Is this the best way to check for loaded?
this.runYesterDailies();
},
},
@@ -231,6 +233,12 @@ export default {
if (!this.user.flags.welcomed) {
this.$root.$emit('show::modal', 'welcome');
}
window.setTimeout(() => {
this.initTour();
if (this.user.flags.tour.intro === this.TOUR_END) return;
this.goto('intro', 0);
}, 2000);
},
methods: {
playSound () {

2
website/client/components/tasks/column.vue
View File

@@ -1,5 +1,5 @@
<template lang="pug">
.tasks-column
.tasks-column(:class='type')
b-modal(ref="editTaskModal")
span Hello From My Modal!
.d-flex

680
website/client/mixins/guide.js
View File

@@ -1,325 +1,355 @@
// var chapters = {
// intro: [
// [
// {
// state: 'options.profile.avatar',
// element: '.tab-content.ng-scope',
// content: this.$t('tourAvatar'),
// placement: 'top',
// proceed: this.$t('tourAvatarProceed'),
// backdrop: false,
// orphan: true,
// gold: 4,
// experience: 29
// },
// {
// state: 'tasks',
// element: '.task-column.todos',
// content: this.$t('tourToDosBrief'),
// placement: 'top',
// proceed: this.$t('tourOkay'),
// gold: 4,
// experience: 29
// },
// {
// state: 'tasks',
// element: '.task-column.dailys',
// content: this.$t('tourDailiesBrief'),
// placement: 'top',
// proceed: this.$t('tourDailiesProceed'),
// gold: 4,
// experience: 29
// },
// {
// state: 'tasks',
// element: '.task-column.habits',
// content: this.$t('tourHabitsBrief'),
// placement: 'top',
// proceed: this.$t('tourHabitsProceed'),
// gold: 4,
// experience: 29
// },
// {
// state: 'tasks',
// element: 'h2.task-column_title.reward-title',
// content: User.user.flags.armoireEnabled ? this.$t('tourRewardsArmoire') : this.$t('tourRewardsBrief'),
// placement: 'left',
// proceed: this.$t('tourRewardsProceed'),
// gold: 4,
// experience: 29,
// final: true
// }
// ]
// ],
// classes: [
// [
// {
// orphan: true,
// content: this.$t('classGearText'),
// final: true,
// state: 'options.inventory.equipment',
// element: '.equipment-tab',
// title: this.$t('classGear'),
// hideNavigation: true
// }
// /*, {
// state: 'options.profile.stats',
// element: '.allocate-stats',
// title: this.$t('stats'),
// content: this.$t('classStats')
// }, {
// state: 'options.profile.stats',
// element: '.auto-allocate',
// title: this.$t('autoAllocate'),
// placement: 'left',
// content: this.$t('autoAllocateText')
// }, {
// element: '.meter.mana',
// title: this.$t('spells'),
// content: this.$t('spellsText')
// }, {
// orphan: true,
// title: this.$t('readMore'),
// content: this.$t('moreClass'),
// final: true
// }*/
// ]
// ],
// stats: [[
// {
// orphan: true,
// content: this.$t('tourStatsPage'),
// final: true,
// proceed: this.$t('tourOkay'),
// hideNavigation: true
// }
// ]],
// tavern: [[
// {
// orphan: true,
// content: this.$t('tourTavernPage'),
// final: true,
// proceed: this.$t('tourAwesome'),
// hideNavigation: true
// }
// ]],
// party: [[
// {
// orphan: true,
// content: this.$t('tourPartyPage'),
// final: true,
// proceed: this.$t('tourSplendid'),
// hideNavigation: true
// }
// ]],
// guilds: [[
// {
// orphan: true,
// content: this.$t('tourGuildsPage'),
// final: true,
// proceed: this.$t('tourNifty'),
// hideNavigation: true
// }
// ]],
// challenges: [[
// {
// orphan: true,
// content: this.$t('tourChallengesPage'),
// final: true,
// proceed: this.$t('tourOkay'),
// hideNavigation: true
// }
// ]],
// market: [[
// {
// orphan: true,
// content: this.$t('tourMarketPage'),
// final: true,
// proceed: this.$t('tourAwesome'),
// hideNavigation: true
// }
// ]],
// hall: [[
// {
// orphan: true,
// content: this.$t('tourHallPage'),
// final: true,
// proceed: this.$t('tourSplendid'),
// hideNavigation: true
// }
// ]],
// pets: [[
// {
// orphan: true,
// content: this.$t('tourPetsPage'),
// final: true,
// proceed: this.$t('tourNifty'),
// hideNavigation: true
// }
// ]],
// mounts: [[
// {
// orphan: true,
// content: this.$t('tourMountsPage'),
// final: true,
// proceed: this.$t('tourOkay'),
// hideNavigation: true
// }
// ]],
// equipment: [[
// {
// orphan: true,
// content: this.$t('tourEquipmentPage'),
// final: true,
// proceed: this.$t('tourAwesome'),
// hideNavigation: true
// }
// ]]
// }
//
// _.each(chapters, function(chapter, k){
// _(chapter).flattenDeep().forEach(function(step, i) {
// step.content = '<div><div class='' + (env.worldDmg.guide ? 'npc_justin_broken' : 'npc_justin') + ' float-left'></div>' + step.content + '</div>';
// $(step.element).popover('destroy'); // destroy existing hover popovers so we can add our own
// step.onShow = function(){
// Analytics.track({'hitType':'event','eventCategory':'behavior','eventAction':'tutorial','eventLabel':k+'-web','eventValue':i+1,'complete':false});
// if (step.state && !$state.is(step.state)) {
// $state.go(step.state);
// return $timeout(function(){});
// }
// };
// step.onHide = function(){
// var ups = {};
// var lastKnownStep = User.user.flags.tour[k];
//
// // Return early if user has already completed this tutorial
// if (lastKnownStep === -2) {
// return;
// }
//
// if (i > lastKnownStep) {
// if (step.gold) ups['stats.gp'] = User.user.stats.gp + step.gold;
// if (step.experience) ups['stats.exp'] = User.user.stats.exp + step.experience;
// ups['flags.tour.'+k] = i;
// }
//
// if (step.final) { // -2 indicates complete
// if (k === 'intro') {
// // Manually show bunny scroll reward
// var rewardData = {
// reward: [Shared.content.quests.dustbunnies],
// rewardKey: ['inventory_quest_scroll_dustbunnies'],
// rewardText: Shared.content.quests.dustbunnies.text(),
// message: this.$t('checkinEarned'),
// nextRewardAt: 1,
// };
// Notification.showLoginIncentive(User.user, rewardData, Social.loadWidgets);
// }
// //Mark tour complete
// ups['flags.tour.'+k] = -2;
// Analytics.track({'hitType':'event','eventCategory':'behavior','eventAction':'tutorial','eventLabel':k+'-web','eventValue':i+1,'complete':true})
// }
//
// User.set(ups);
// // User.set() doesn't include a check for level changes, so manually check here.
// if (step.experience) {
// User.user.fns.updateStats(User.user.stats);
// }
// }
// });
// });
//
// var tour = {};
// _.each(chapters, function(v,k){
// tour[k] = new Tour({
// name: k,
// backdrop: true,
// template: function(i,step){
// var showFinish = step.final || k == 'classes';
// var showCounter = k=='intro' && !step.final;
//
// return '<div class='popover' role='tooltip'>' +
// '<div class='arrow'></div>' +
// '<h3 class='popover-title'></h3>' +
// '<div class='popover-content'></div>' +
// '<div class='popover-navigation'> ' +
// (showCounter ? '<span style='float:right;'>'+ (i+1 +' of '+ _.flattenDeep(chapters[k]).length) +'</span>' : '')+ // counter
// '<div class='btn-group'>' +
// (step.hideNavigation ? '' : '<button class='btn btn-sm btn-default' data-role='prev'>&laquo; Previous</button>') +
// (showFinish ? ('<button class='btn btn-sm btn-primary' data-role='end' style='float:none;'>' + (step.proceed ? step.proceed : 'Finish Tour') + '</button>') :
// (step.hideNavigation ? '' : ('<button class='btn btn-sm btn-primary' data-role='next'>' + (step.proceed ? step.proceed : 'Next') + ' &raquo;</button>'))) +
// '<button class='btn btn-sm btn-default' data-role='pause-resume' data-pause-text='Pause' data-resume-text='Resume'>Pause</button>' +
// '</div>' +
// '</div>' +
// '</div>';
// },
// storage: false
// });
// });
//
// var goto = function(chapter, page, force) {
// if (chapter == 'intro' && User.user.flags.welcomed != true) User.set({'flags.welcomed': true});
// if (chapter == 'classes' && User.user.flags.tour.classes === -2) return;
// if (page === -1) page = 0;
// var curr = User.user.flags.tour[chapter];
// if (page != curr+1 && !force) return;
// var chap = tour[chapter], opts = chap._options;
// opts.steps = [];
// _.times(page, function(p){
// opts.steps = opts.steps.concat(chapters[chapter][p]);
// })
//
// var end = opts.steps.length;
// opts.steps = opts.steps.concat(chapters[chapter][page]);
// chap._removeState('end');
//
// if (chap._inited) {
// chap.goTo(end);
// } else {
// chap.setCurrentStep(end);
// if (page > 0) {
// chap.init();
// chap.goTo(page);
// } else {
// chap.start();
// }
// }
// }
//
// //Init and show the welcome tour (only after user is pulled from server & wrapped).
// var watcher = $rootScope.$watch('User.user._wrapped', function(wrapped){
// if (!wrapped) return; // only run after user has been wrapped
// watcher(); // deregister watcher
// if (window.env.IS_MOBILE) return; // Don't show tour immediately on mobile devices
// if (User.user.flags.welcomed == false) {
// $rootScope.openModal('welcome', {size: 'lg', backdrop: 'static', keyboard: false});
// }
//
// var alreadyShown = function(before, after) { return !(!before && after === true) };
// //$rootScope.$watch('user.flags.dropsEnabled', _.flow(alreadyShown, function(already) { //FIXME requires lodash@~3.2.0
// $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){
// switch (toState.name) {
// // case 'options.profile.avatar': return goto('intro', 5);
// case 'options.profile.stats': return goto('stats', 0);
// case 'options.social.tavern': return goto('tavern', 0);
// case 'options.social.party': return goto('party', 0);
// case 'options.social.guilds.public': return goto('guilds', 0);
// case 'options.social.challenges': return goto('challenges', 0);
// case 'options.social.hall.heroes': return goto('hall', 0);
// case 'options.inventory.drops': return goto('market', 0);
// case 'options.inventory.pets': return goto('pets', 0);
// case 'options.inventory.mounts': return goto('mounts', 0);
// case 'options.inventory.equipment': return goto('equipment', 0);
// }
// });
// });
//
// export default {
// methods: {
// hoyo (user) {
// // @TODO: What is was the timeout for?
// window.amplitude.setUserId(user._id);
// window.ga('set', {userId: user._id});
// },
// },
// };
// import each from 'lodash/each';
// import flattenDeep from 'lodash/flattenDeep';
import times from 'lodash/times';
import Intro from 'intro.js/';
export default {
data () {
return {
TOUR_END: -2,
tour: {},
chapters: {},
loaded: false,
};
},
watch: {
$route () {
this.routeChange();
},
},
methods: {
load () {
// @TODO: this should be called after app is loaded
// Init and show the welcome tour (only after user is pulled from server & wrapped).
if (window.env.IS_MOBILE) return; // Don't show tour immediately on mobile devices
// let alreadyShown = (before, after) => {
// return Boolean(!before && after === true);
// };
// $rootScope.$watch('user.flags.dropsEnabled', _.flow(alreadyShown, function(already) { //FIXME requires lodash@~3.2.0
},
initTour () {
if (this.loaded) return;
this.chapters = {
intro: [
[
{
// state: 'options.profile.avatar',
element: '.member-details',
intro: this.$t('tourAvatar'),
// placement: 'top',
// proceed: this.$t('tourAvatarProceed'),
// backdrop: false,
// orphan: true,
// gold: 4,
// experience: 29,
},
{
// state: 'tasks',
element: '.todo',
intro: this.$t('tourToDosBrief'),
placement: 'top',
// proceed: this.$t('tourOkay'),
// gold: 4,
// experience: 29,
},
{
// state: 'tasks',
element: '.daily',
intro: this.$t('tourDailiesBrief'),
placement: 'top',
// proceed: this.$t('tourDailiesProceed'),
// gold: 4,
// experience: 29,
},
{
// state: 'tasks',
element: '.habit',
intro: this.$t('tourHabitsBrief'),
placement: 'top',
// proceed: this.$t('tourHabitsProceed'),
// gold: 4,
// experience: 29,
},
{
// state: 'tasks',
element: '.reward',
intro: this.user.flags.armoireEnabled ? this.$t('tourRewardsArmoire') : this.$t('tourRewardsBrief'),
placement: 'left',
// proceed: this.$t('tourRewardsProceed'),
// gold: 4,
// experience: 29,
// final: true,
},
],
],
classes: [
[
{
orphan: true,
intro: this.$t('classGearText'),
final: true,
state: 'options.inventory.equipment',
element: '.weapon',
title: this.$t('classGear'),
hideNavigation: true,
},
],
],
stats: [[
{
orphan: true,
intro: this.$t('tourStatsPage'),
final: true,
proceed: this.$t('tourOkay'),
hideNavigation: true,
},
]],
tavern: [[
{
orphan: true,
intro: this.$t('tourTavernPage'),
final: true,
proceed: this.$t('tourAwesome'),
hideNavigation: true,
},
]],
party: [[
{
orphan: true,
intro: this.$t('tourPartyPage'),
final: true,
proceed: this.$t('tourSplendid'),
hideNavigation: true,
},
]],
guilds: [[
{
// orphan: true,
intro: this.$t('tourGuildsPage'),
// final: true,
// proceed: this.$t('tourNifty'),
// hideNavigation: true,
},
]],
challenges: [[
{
orphan: true,
intro: this.$t('tourChallengesPage'),
final: true,
proceed: this.$t('tourOkay'),
hideNavigation: true,
},
]],
market: [[
{
orphan: true,
intro: this.$t('tourMarketPage'),
final: true,
proceed: this.$t('tourAwesome'),
hideNavigation: true,
},
]],
hall: [[
{
orphan: true,
intro: this.$t('tourHallPage'),
final: true,
proceed: this.$t('tourSplendid'),
hideNavigation: true,
},
]],
pets: [[
{
orphan: true,
intro: this.$t('tourPetsPage'),
final: true,
proceed: this.$t('tourNifty'),
hideNavigation: true,
},
]],
mounts: [[
{
orphan: true,
intro: this.$t('tourMountsPage'),
final: true,
proceed: this.$t('tourOkay'),
hideNavigation: true,
},
]],
equipment: [[
{
orphan: true,
intro: this.$t('tourEquipmentPage'),
final: true,
proceed: this.$t('tourAwesome'),
hideNavigation: true,
},
]],
};
// let chapters = this.chapters;
// each(chapters, (chapter, k) => {
// flattenDeep(chapter).forEach((step, i) => {
// // @TODO: (env.worldDmg.guide ? 'npc_justin_broken' : 'npc_justin')
// step.content = `<div><div class='npc_justin float-left'></div>${step.content}</div>`;
// // @TODO: $(step.element).popover('destroy'); // destroy existing hover popovers so we can add our own
//
// step.onShow = () => {
// // @TODO: Analytics.track({'hitType':'event','eventCategory':'behavior','eventAction':'tutorial','eventLabel':k+'-web','eventValue':i+1,'complete':false});
// // @TODO: Add Router if (!step.state || $state.is(step.state)) return;
// // @TODO: Add Router $state.go(step.state);
// // @TODO: Do we need this? return $timeout(() => {});
// };
// });
// });
// let tour = this.tour;
// each(chapters, (v, k) => {
// tour[k] = new Tour({
// name: k,
// backdrop: true,
// template: (i, step) => {
// let showFinish = step.final || k === 'classes';
// let showCounter = k === 'intro' && !step.final;
// // TODO: we can probably create a component for all this
//
// let counterSpan = '';
// if (showCounter) counterSpan = `<span style="float:right;">${i + 1} of ${flattenDeep(chapters[k]).length}</span>`;
//
// let prevButton = '';
// if (!step.hideNavigation) prevButton = '<button class="btn btn-sm btn-default" data-role="prev">&laquo; Previous</button>';
//
// let nextButton = '';
// let stepProceedText = 'Next';
// if (step.proceed) stepProceedText = step.proceed;
// if (!step.hideNavigation) nextButton = `<button class="btn btn-sm btn-primary" data-role="next">${stepProceedText} &raquo;</button>`;
// let stepFinishText = 'Finish Tour';
// if (step.proceed) stepFinishText = step.proceed;
// if (showFinish) nextButton = `<button class="btn btn-sm btn-primary" data-role="end" style="float:none;">${stepFinishText}</button>`;
//
// return `<div class="popover" role="tooltip"> \
// <div class="arrow"></div> \
// <h3 class="popover-title"></h3> \
// <div class="popover-content"></div> \
// <div class="popover-navigation"> \
// ${counterSpan} \
// <div class="btn-group"> \
// ${prevButton} \
// ${nextButton} \
// <button class="btn btn-sm btn-default" \
// data-role="pause-resume" data-pause-text="Pause" data-resume-text="Resume">Pause</button> \
// </div> \
// </div> \
// </div>`;
// },
// storage: false,
// });
// });
this.loaded = true;
},
routeChange () {
this.initTour();
switch (this.$route.name) {
// case 'options.profile.avatar': return goto('intro', 5);
case 'stats': return this.goto('stats', 0);
case 'tavern': return this.goto('tavern', 0);
case 'party': return this.goto('party', 0);
case 'guildsDiscovery': return this.goto('guilds', 0);
case 'challenges': return this.goto('challenges', 0);
case 'patrons': return this.goto('hall', 0);
case 'items': return this.goto('market', 0);
case 'stable': return this.goto('pets', 0);
// @TODO: same page now case 'stable': return this.goto('mounts', 0);
case 'equipment': return this.goto('equipment', 0);
}
},
hoyo (user) {
// @TODO: What is was the timeout for?
window.amplitude.setUserId(user._id);
window.ga('set', {userId: user._id});
},
goto (chapter, page, force) {
if (chapter === 'intro' && this.user.flags.welcomed !== true) {
// @TODO: Add dispatch User.set({'flags.welcomed': true});
}
if (chapter === 'classes' && this.user.flags.tour.classes === -2) return;
if (page === -1) page = 0;
let curr = this.user.flags.tour[chapter];
if (page !== curr + 1 && !force) return;
let chap = this.tour[chapter];
if (!chap) return;
let opts = chap._options;
opts.steps = [];
page += 1;
times(page, (p) => {
opts.steps = opts.steps.concat(this.chapters[chapter][p]);
});
// let end = opts.steps.length;
// opts.steps = opts.steps.concat(this.chapters[chapter][page]);
// chap._removeState('end');
// @TODO: Do we always need to initialize here?
let intro = Intro.introJs();
intro.setOptions({steps: opts.steps});
intro.start();
intro.oncomplete(() => {
this.markTourComplete(chapter);
});
// if (chap._inited) {
// chap.goTo(end);
// } else {
// chap.setCurrentStep(end);
// if (page > 0) {
// chap.init();
// chap.goTo(page);
// } else {
// chap.start();
// }
// }
},
markTourComplete (chapter) {
// @TODO: this is suppose to keep track of wher ethe left off. Do that later
let ups = {};
let lastKnownStep = this.user.flags.tour[chapter];
// Return early if user has already completed this tutorial
if (lastKnownStep === -2) {
return;
}
// if (i > lastKnownStep) {
// if (step.gold) ups['stats.gp'] = this.user.stats.gp + step.gold;
// if (step.experience) ups['stats.exp'] = this.user.stats.exp + step.experience;
// ups[`flags.tour.${k}`] = i;
// }
// step.final
// if (true) { // -2 indicates complete
// if (chapter === 'intro') {
// // Manually show bunny scroll reward
// // let rewardData = {
// // reward: [Shared.content.quests.dustbunnies],
// // rewardKey: ['inventory_quest_scroll_dustbunnies'],
// // rewardText: Shared.content.quests.dustbunnies.text(),
// // message: this.$t('checkinEarned'),
// // nextRewardAt: 1,
// // };
// // @TODO: Notification.showLoginIncentive(this.user, rewardData, Social.loadWidgets);
// }
// Mark tour complete
ups[`flags.tour.${chapter}`] = -2; // @TODO: Move magic numbers to enum
// @TODO: Analytics.track({'hitType':'event','eventCategory':'behavior','eventAction':'tutorial','eventLabel':k+'-web','eventValue':i+1,'complete':true})
// }
this.$store.dispatch('user:set', ups);
// User.set() doesn't include a check for level changes, so manually check here.
// @TODO:
// if (step.experience) {
// this.user.fns.updateStats(this.user.stats);
// }
},
},
};