Files
habitica/website/client/router.js
negue 187a9f5f19 [WIP] client/inventory/stable (#8737)
* Stable: basic layout (based on equipment)

* extract item popover-content as component

# Conflicts:
#	website/client/components/inventory/item.vue

* extract item-content as slot - list standard pets with image

* dynamic list petGroups in sidebar / content - with selected / open filter

* itemContentClass for pets

* fix filter - extract filter labels

* Filter: Hide Missing

* fix position of pets

* sort by: A-Z, Color, Hatchable

* refactor animalList - created the list once per type and cache it - sort now works before viewing one or all pets

* custom petItem to show the progress

* list specialPets - rename petGroup to animalGroup (more generic)

* equip a pet

* filter animals by input

* count pets

* list mounts

* hatchable pet popover

* hatchable pet popover #2

* PixelPaw Opacity for not owned and not hatchable pets - change item background for unowned pets

* Hold to hatch the pet - cleanup

* add food drawer + countBadge - special mounts - hide un-owned special animals - fixes

* Sliding Drawer: Buttons to scroll left/right

* Drag&Drop: food on pets

* fix hold to hatch - use mouseleave event

* 'Show All' / 'Show Less' - Animals

* Matts Image + Popover + use image width as sidebar width (removed col-2 / col-10)

* fixes: colors, v-once, drawer-errorMessage, strings

* drawerSlider - split items to pages / add divider / add first item of the next page - ResizeDirective

* ResizeDirective - throttle emits by `v-resize="value"` - fix drawer left padding

* show animals by available content width

* change sortBy button / label

* fix pet colors / backgrounds

* DragDropDirective - grabbing cursor

* remove browser specific prefixes

* fix lint issues

* show welcome dialog

* change translationkey (noFood, already exists)
2017-06-23 13:24:10 +02:00

111 lines
3.9 KiB
JavaScript

import Vue from 'vue';
import VueRouter from 'vue-router';
import EmptyView from './components/emptyView';
// TODO Dummy elements used as placeholder until real components are implemented
import ParentPage from './components/parentPage';
import Page from './components/page';
// Tasks
import UserTasks from './components/userTasks';
// Except for tasks that are always loaded all the other main level
// components are loaded in separate webpack chunks.
// See https://webpack.js.org/guides/code-splitting-async/
// for docs
// Inventory
const InventoryContainer = () => import(/* webpackChunkName: "inventory" */'./components/inventory/index');
const ItemsPage = () => import(/* webpackChunkName: "inventory" */'./components/inventory/items/index');
const EquipmentPage = () => import(/* webpackChunkName: "inventory" */'./components/inventory/equipment/index');
const StablePage = () => import(/* webpackChunkName: "inventory" */'./components/inventory/stable/index');
// Social
const InboxPage = () => import(/* webpackChunkName: "inbox" */ './components/social/inbox/index');
const InboxConversationPage = () => import(/* webpackChunkName: "inbox" */ './components/social/inbox/conversationPage');
// Guilds
const GuildIndex = () => import(/* webpackChunkName: "guilds" */ './components/guilds/index');
const TavernPage = () => import(/* webpackChunkName: "guilds" */ './components/guilds/tavern');
const MyGuilds = () => import(/* webpackChunkName: "guilds" */ './components/guilds/myGuilds');
const GuildsDiscoveryPage = () => import(/* webpackChunkName: "guilds" */ './components/guilds/discovery');
const GuildPage = () => import(/* webpackChunkName: "guilds" */ './components/guilds/guild');
Vue.use(VueRouter);
export default new VueRouter({
mode: 'history',
base: process.env.NODE_ENV === 'production' ? '/new-app' : __dirname, // eslint-disable-line no-process-env
linkActiveClass: 'active',
// When navigating to another route always scroll to the top
// To customize the behavior see https://router.vuejs.org/en/advanced/scroll-behavior.html
scrollBehavior () {
return { x: 0, y: 0 };
},
routes: [
{ name: 'tasks', path: '/', component: UserTasks },
{
path: '/inventory',
component: InventoryContainer,
children: [
{ name: 'items', path: 'items', component: ItemsPage },
{ name: 'equipment', path: 'equipment', component: EquipmentPage },
{ name: 'stable', path: 'stable', component: StablePage },
],
},
{ name: 'shops', path: '/shops', component: Page },
{
path: '/guilds',
component: GuildIndex,
children: [
{ name: 'tavern', path: 'tavern', component: TavernPage },
{
name: 'myGuilds',
path: 'myGuilds',
component: MyGuilds,
},
{
name: 'guildsDiscovery',
path: 'discovery',
component: GuildsDiscoveryPage,
},
{
name: 'guild',
path: 'guild/:guildId',
component: GuildPage,
props: true,
},
],
},
{ name: 'challenges', path: 'challenges', component: Page },
{ name: 'party', path: 'party', component: Page },
{
path: '/user',
component: ParentPage,
children: [
{ name: 'avatar', path: 'avatar', component: Page },
{
path: 'inbox',
component: EmptyView,
children: [
{
name: 'inbox',
path: '',
component: InboxPage,
},
{
name: 'conversation',
path: 'conversation/:id',
component: InboxConversationPage,
},
],
},
{ name: 'stats', path: 'stats', component: Page },
{ name: 'achievements', path: 'achievements', component: Page },
{ name: 'settings', path: 'settings', component: Page },
],
},
],
});