mirror of
https://github.com/HabitRPG/habitica.git
synced 2025-12-17 14:47:53 +01:00
0b076311df
* Added markdown * Added styles and option for debug menu * Added sm icons * Began styling autocomplete * Added autocomplete styles * Added more challenge categories * Updated challenge participants modal * Fixed challenge list updating without reload * Added close and delete challenge * Fixed form placeholder, adjusted desc style and fixed create button style * Fixed faq collapsing and style * Fixed repeating ending * Fixed delete account * Fixed party fetch issue * Fixed scope issue * Added member count filters * Fixed create button style * Fixed badge color display * Updated tavern styles * Fixed some party styles * Updated login styles * Fixed login redirect * Fixed initial login process * Added done local
357 lines
12 KiB
JavaScript
357 lines
12 KiB
JavaScript
// 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'),
|
|
// position: 'top',
|
|
// proceed: this.$t('tourAvatarProceed'),
|
|
// backdrop: false,
|
|
// orphan: true,
|
|
// gold: 4,
|
|
// experience: 29,
|
|
},
|
|
{
|
|
// state: 'tasks',
|
|
element: '.todo',
|
|
intro: this.$t('tourToDosBrief'),
|
|
position: 'left',
|
|
// proceed: this.$t('tourOkay'),
|
|
// gold: 4,
|
|
// experience: 29,
|
|
},
|
|
{
|
|
// state: 'tasks',
|
|
element: '.daily',
|
|
intro: this.$t('tourDailiesBrief'),
|
|
position: 'right',
|
|
// proceed: this.$t('tourDailiesProceed'),
|
|
// gold: 4,
|
|
// experience: 29,
|
|
},
|
|
{
|
|
// state: 'tasks',
|
|
element: '.habit',
|
|
intro: this.$t('tourHabitsBrief'),
|
|
position: 'right',
|
|
// proceed: this.$t('tourHabitsProceed'),
|
|
// gold: 4,
|
|
// experience: 29,
|
|
},
|
|
{
|
|
// state: 'tasks',
|
|
element: '.reward',
|
|
intro: this.user.flags.armoireEnabled ? this.$t('tourRewardsArmoire') : this.$t('tourRewardsBrief'),
|
|
position: '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">« 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} »</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 = {}; // @TODO: 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);
|
|
// }
|
|
},
|
|
},
|
|
};
|