New Client: working navigation (#8131)
* initial work * new client: working navigation and tasks showing up * finish header menu and add avatar component * fix sprites in new client * initial header version * initial styling for top menu * more progress on the header menu * almost complete menu and avatar * correctly apply active class for /social and /help * fix header colors and simplify css * switch from Roboto to native fonts * remove small avatar and add viewport * fixes * fix user menu with and progress bars * fix avatar rendeting * move bars colors to theme * add site overrides * fix tests * shrinkwrap * fix sprites path * another try at fixing the sprites path * another try at fixing the sprites path
This commit is contained in:
Matteo Pagliazzi
@@ -1,24 +1,127 @@
|
||||
<template lang="pug">
|
||||
#app-header
|
||||
h1 {{title}}
|
||||
ul
|
||||
li
|
||||
router-link(to='/') Home
|
||||
li
|
||||
router-link(to='/page') Another Page
|
||||
#app-header.row
|
||||
avatar#header-avatar(:user="$store.state.user")
|
||||
.eight.wide.column
|
||||
span.character-name {{user.profile.name}}
|
||||
span.character-level Lvl {{user.stats.lvl}}
|
||||
.progress-container
|
||||
img.icon(src="~assets/header/png/health@3x.png")
|
||||
.ui.progress.red
|
||||
.bar(:style="{width: `${percent(user.stats.hp, maxHealth)}%`}")
|
||||
span {{user.stats.hp | round}} / {{maxHealth}}
|
||||
.progress-container
|
||||
img.icon(src="~assets/header/png/experience@3x.png")
|
||||
.ui.progress.yellow
|
||||
.bar(:style="{width: `${percent(user.stats.exp, toNextLevel)}%`}")
|
||||
span {{user.stats.exp | round}} / {{toNextLevel}}
|
||||
.progress-container(ng-if="user.flags.classSelected && !user.preferences.disableClasses")
|
||||
img.icon(src="~assets/header/png/magic@3x.png")
|
||||
.ui.progress.blue
|
||||
.bar(:style="{width: `${percent(user.stats.mp, maxMP)}%`}")
|
||||
span {{user.stats.mp | round}} / {{maxMP}}
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from '../store';
|
||||
|
||||
export default {
|
||||
computed: mapState(['title']),
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
h1 {
|
||||
color: #42b983;
|
||||
#app-header {
|
||||
padding: 0px 0px 0px 20px;
|
||||
margin-top: 56px;
|
||||
background: #36205d;
|
||||
margin-left: 1rem;
|
||||
height: 192px;
|
||||
color: #d5c8ff;
|
||||
}
|
||||
|
||||
.character-name {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
margin-top: 32px;
|
||||
line-height: 1.5;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.character-level {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
margin-top: 4px;
|
||||
margin-bottom: 20px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
#header-avatar {
|
||||
margin-top: 24px;
|
||||
box-shadow: 0 2px 4px 0 rgba(53, 32, 93, 0.4);
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.progress-container > span {
|
||||
font-size: 12px;
|
||||
margin-left: 10px;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.progress-container > .icon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.progress-container > .ui.progress {
|
||||
width: 203px;
|
||||
margin: 0px;
|
||||
border-radius: 0px;
|
||||
height: 12px;
|
||||
background-color: rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
.progress-container > .ui.progress > .bar {
|
||||
border-radius: 0px;
|
||||
height: 12px;
|
||||
min-width: 0px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import Avatar from './avatar';
|
||||
import { mapState } from '../store';
|
||||
|
||||
import { toNextLevel } from '../../common/script/statHelpers';
|
||||
import { MAX_HEALTH as maxHealth } from '../../common/script/constants';
|
||||
import statsComputed from '../../common/script/libs/statsComputed';
|
||||
import percent from '../../common/script/libs/percent';
|
||||
|
||||
export default {
|
||||
name: 'header',
|
||||
components: {
|
||||
Avatar,
|
||||
},
|
||||
filters: {
|
||||
percent,
|
||||
round (val) {
|
||||
return Math.round(val * 100) / 100;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
percent,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
maxHealth,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
maxMP () {
|
||||
return statsComputed(this.user).maxMP;
|
||||
},
|
||||
toNextLevel () { // Exp to next level
|
||||
return toNextLevel(this.user.stats.lvl);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,220 @@
|
||||
<template lang="pug">
|
||||
// TODO srcset / svg images
|
||||
#app-menu.ui.top.fixed.menu
|
||||
.header.item
|
||||
img(src="~assets/header/png/logo@3x.png")
|
||||
router-link.item(to="/", exact) Tasks
|
||||
// .simple makes it possible to have a dropdown without JS
|
||||
.ui.simple.dropdown
|
||||
router-link.item(to="/inventory", :class="{'router-link-active': $route.path.startsWith('/inventory')}") Inventory
|
||||
.menu
|
||||
router-link.item(to="/inventory") Inventory
|
||||
router-link.item(to="/inventory/stable") Stable
|
||||
router-link.item(to="/inventory/equipment") Equipment
|
||||
router-link.item(to="/market") Market
|
||||
.ui.simple.dropdown
|
||||
router-link.item(to="/social/tavern", :class="{'router-link-active': $route.path.startsWith('/social')}") Social
|
||||
.menu
|
||||
router-link.item(to="/social/tavern") Tavern
|
||||
router-link.item(to="/social/inbox") Inbox
|
||||
router-link.item(to="/social/challenges") Challenges
|
||||
router-link.item(to="/social/party") Party
|
||||
router-link.item(to="/social/guilds") Guilds
|
||||
.ui.simple.dropdown
|
||||
router-link.item(to="/help", :class="{'router-link-active': $route.path.startsWith('/help')}") Help
|
||||
.menu
|
||||
router-link.item(to="/help/faq") Faq
|
||||
router-link.item(to="/help/report-bug") Report a bug
|
||||
router-link.item(to="/help/request-feature") Request a feature
|
||||
.right.menu
|
||||
.item.with-img
|
||||
img(src="~assets/header/png/gem@3x.png")
|
||||
span {{userGems}}
|
||||
.item.with-img.gp-icon
|
||||
img(src="~assets/header/png/gold@3x.png")
|
||||
span {{Math.floor(user.stats.gp * 100) / 100}}
|
||||
a.item.with-img.notifications-dropdown
|
||||
img(src="~assets/header/png/notifications@3x.png")
|
||||
.ui.simple.dropdown.pointing
|
||||
router-link.item.with-img.user-dropdown(to="/user/avatar")
|
||||
// TODO icons should be white when active
|
||||
img(src="~assets/header/png/user@3x.png")
|
||||
.menu
|
||||
.item.user-edit-avatar
|
||||
strong {{user.profile.name}}
|
||||
a Edit avatar
|
||||
.divider
|
||||
router-link.item(to="/user/stats") Stats
|
||||
router-link.item(to="/user/achievements") Achievements
|
||||
.divider
|
||||
router-link.item(to="/user/settings") Settings
|
||||
.divider
|
||||
router-link.item(to="/logout") Logout
|
||||
</template>
|
||||
|
||||
<style lang="less">
|
||||
#app-menu {
|
||||
background: #432874 url(~assets/header/png/bits.png) right no-repeat;
|
||||
border-bottom: 0px;
|
||||
|
||||
.item {
|
||||
font-size: 16px !important;
|
||||
line-height: 1.5;
|
||||
|
||||
&.header {
|
||||
width: 256px;
|
||||
padding-left: 20px;
|
||||
|
||||
img {
|
||||
width: 128px;
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#app-menu .item:not(.header) img {
|
||||
vertical-align: middle;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#app-menu .right.menu .item.with-img {
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
#app-menu .right.menu .item.with-img.user-dropdown, #app-menu .right.menu .item.with-img.notifications-dropdown{
|
||||
width: 56px;
|
||||
}
|
||||
|
||||
#app-menu .right.menu .item.with-img.user-dropdown, #app-menu .right.menu .item.with-img.notifications-dropdown {
|
||||
width: 56px;
|
||||
}
|
||||
|
||||
#app-menu .right.menu .item.with-img.notifications-dropdown {
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
#app-menu .right.menu .item.with-img.gp-icon {
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
#app-menu .right.menu .item.with-img img + span {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.ui.menu .right.menu .ui.simple.dropdown > .item::before {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#app-menu > .item, #app-menu > .right.menu > .item, #app-menu .dropdown > .item {
|
||||
height: 56px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
padding: 16px 20px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#app-menu > .item::before, #app-menu > .right.menu > .item::before, #app-menu .dropdown > .item::before {
|
||||
width: 0px;
|
||||
}
|
||||
|
||||
#app-menu > .item:not(.header):hover, #app-menu > .dropdown:hover {
|
||||
background-color: #6133b4;
|
||||
}
|
||||
|
||||
#app-menu > .item.router-link-active, #app-menu > .dropdown > .item.router-link-active {
|
||||
box-shadow: 0px -4px 0px #6133b4 inset;
|
||||
}
|
||||
|
||||
#app-menu > .dropdown > .menu {
|
||||
border: none;
|
||||
background-color:rgba(0, 0, 0, 0.5); // transparent
|
||||
}
|
||||
|
||||
#app-menu > .dropdown > .menu > .item:last-child {
|
||||
border-radius: 0px 0px 4px 4px !important;
|
||||
}
|
||||
|
||||
#app-menu > .dropdown .menu > .item {
|
||||
/* !important to override Semantic UI's !important */
|
||||
width: 217px;
|
||||
background: #6133b4 !important;
|
||||
color: #fff !important;
|
||||
padding: 6px 0px 6px 20px !important;
|
||||
}
|
||||
|
||||
#app-menu > .dropdown .menu > .item:hover {
|
||||
background: #4f2a93 !important; /* to override Semantic UI's !important */
|
||||
}
|
||||
|
||||
#app-menu .ui.pointing.dropdown .menu .item {
|
||||
padding-top: 12px !important;
|
||||
padding-bottom: 12px !important;
|
||||
color: #616162 !important;
|
||||
}
|
||||
|
||||
#app-menu .ui.pointing.dropdown .menu .item {
|
||||
padding-top: 12px !important;
|
||||
padding-bottom: 12px !important;
|
||||
color: #616162 !important;
|
||||
}
|
||||
|
||||
#app-menu .ui.pointing.dropdown .menu .item:nth-child(3) {
|
||||
padding-bottom: 8px !important;
|
||||
}
|
||||
|
||||
#app-menu .ui.pointing.dropdown .menu .item:nth-child(4) {
|
||||
padding-top: 8px !important;
|
||||
}
|
||||
|
||||
#app-menu .ui.pointing.dropdown .menu {
|
||||
width: 200px;
|
||||
margin-right: 20px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
#app-menu .ui.pointing.dropdown .menu .item:hover {
|
||||
background: #fff !important;
|
||||
color: #6133b4 !important;
|
||||
}
|
||||
|
||||
#app-menu .ui.pointing.dropdown > .menu::after {
|
||||
top: -0.50em;
|
||||
left: 85.3%;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
#app-menu .ui.pointing.dropdown .divider {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
#app-menu .user-edit-avatar strong, #app-menu .user-edit-avatar strong:hover {
|
||||
color: #313131;
|
||||
margin-top: -3px;
|
||||
flex-grow: 1;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#app-menu .user-edit-avatar a, #app-menu .user-edit-avatar a:hover {
|
||||
font-size: 13px;
|
||||
line-height: 1.23;
|
||||
color: #6133b4;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { mapState, mapGetters } from '../store';
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
...mapGetters(['userGems']),
|
||||
...mapState(['user']),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,133 @@
|
||||
<template lang="pug">
|
||||
.avatar(:style="{width, height, paddingTop}", :class="backgroundClass")
|
||||
// TODO
|
||||
// addthis
|
||||
// cast spell (on click)
|
||||
// buffs
|
||||
// user level and username, rebirth icon, ...
|
||||
|
||||
.character-sprites
|
||||
template(v-if="!avatarOnly" v-once)
|
||||
// Mount
|
||||
span(v-if="user.items.currentMount", :class="'Mount_Body_' + user.items.currentMount")
|
||||
|
||||
// Buffs that cause visual changes to avatar: Snowman, Ghost, Flower, etc
|
||||
template(v-for="(klass, item) in visualBuffs")
|
||||
span(v-if="user.stats.buffs[item]", :class="klass")
|
||||
|
||||
// Show flower ALL THE TIME!!!
|
||||
// See https://github.com/HabitRPG/habitrpg/issues/7133
|
||||
span(:class="'hair_flower_' + user.preferences.hair.flower")
|
||||
|
||||
// Show avatar only if not currently affected by visual buff
|
||||
template(v-if!="!user.stats.buffs.snowball && !user.stats.buffs.spookySparkles && !user.stats.buffs.shinySeed && !user.stats.buffs.seafoam")
|
||||
span(:class="'chair_' + user.preferences.chair")
|
||||
span(:class="user.items.gear[costumeClass].back")
|
||||
span(:class="skinClass")
|
||||
span(:class="user.preferences.size + '_shirt_' + user.preferences.shirt")
|
||||
span(:class="user.preferences.size + '_' + user.items.gear[costumeClass].armor")
|
||||
span(:class="user.items.gear[costumeClass].back_collar")
|
||||
span(:class="user.items.gear[costumeClass].body")
|
||||
span.head_0
|
||||
template(v-for="type in ['base', 'bangs', 'mustache', 'beard']")
|
||||
span(:class="'hair_' + type + '_' + user.preferences.hair[type] + '_' + user.preferences.hair.color")
|
||||
span(:class="user.items.gear[costumeClass].eyewear")
|
||||
span(:class="user.items.gear[costumeClass].head")
|
||||
span(:class="user.items.gear[costumeClass].headAccessory")
|
||||
span(:class="'hair_flower_' + user.preferences.hair.flower")
|
||||
span(:class="user.items.gear[costumeClass].shield")
|
||||
span(:class="user.items.gear[costumeClass].weapon")
|
||||
|
||||
// Resting
|
||||
span.zzz(v-if="user.preferences.sleep")
|
||||
|
||||
template(v-if="!avatarOnly" v-once)
|
||||
// Mount Head
|
||||
span(v-if="user.items.currentMount", :class="'Mount_Head_' + user.items.currentMount")
|
||||
// Pet
|
||||
span.current-pet(v-if="user.items.currentPet", :class="'Pet-' + user.items.currentPet")
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.avatar {
|
||||
max-width: 140px;
|
||||
max-height: 147px;
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
.character-sprites {
|
||||
margin: 0 auto;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
}
|
||||
|
||||
.character-sprites span {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.current-pet {
|
||||
bottom: 21px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'avatar',
|
||||
props: {
|
||||
user: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
avatarOnly: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
width: {
|
||||
type: Number,
|
||||
default: 140,
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 147,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
paddingTop () {
|
||||
let val = '28px';
|
||||
|
||||
if (!this.avatarOnly) {
|
||||
if (this.user.items.currentPet) val = '24.5px';
|
||||
if (this.user.items.currentMount) val = '0px';
|
||||
}
|
||||
|
||||
return val;
|
||||
},
|
||||
backgroundClass () {
|
||||
let background = this.user.preferences.background;
|
||||
|
||||
if (background && !this.avatarOnly) {
|
||||
return `background_${this.user.preferences.background}`;
|
||||
}
|
||||
|
||||
return '';
|
||||
},
|
||||
visualBuffs () {
|
||||
return {
|
||||
snowball: 'snowman',
|
||||
spookySparkles: 'ghost',
|
||||
shinySeed: `avatar_floral_${this.user.stats.class}`,
|
||||
seafoam: 'seafoam_star',
|
||||
};
|
||||
},
|
||||
skinClass () {
|
||||
let baseClass = `skin_${this.user.preferences.skin}`;
|
||||
|
||||
return `${baseClass}${this.user.preferences.sleep ? '_sleep' : ''}`;
|
||||
},
|
||||
costumeClass () {
|
||||
return this.user.preferences.costume ? 'costume' : 'equipped';
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -1,24 +0,0 @@
|
||||
<template lang="pug">
|
||||
div
|
||||
p {{ msg }}
|
||||
p Welcome back {{profileName}}!
|
||||
p You have {{tasksCount}} tasks!
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapGetters } from '../store';
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
msg: 'You\'re on the Home page!',
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
tasksCount: (state) => state.tasks.length,
|
||||
}),
|
||||
...mapGetters(['profileName']),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -1,13 +1,11 @@
|
||||
<template lang="pug">
|
||||
p {{ msg }}
|
||||
.row
|
||||
.sixteen.wide.column
|
||||
h2 Page
|
||||
p {{ $route.path }}
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
msg: 'You\'re on Another Page!',
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,11 @@
|
||||
<template lang="pug">
|
||||
.row
|
||||
.sixteen.wide.column
|
||||
h2 Parent Page
|
||||
router-view.row
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,28 @@
|
||||
<template lang="pug">
|
||||
.row
|
||||
.sixteen.wide.column
|
||||
p You have {{tasksCount}} tasks!
|
||||
.four.wide.column(v-for="taskType in tasksTypes")
|
||||
h3 {{taskType}}s ()
|
||||
ul
|
||||
li(v-for="task in tasks", v-if="task.type === taskType", :key="task.id")
|
||||
span {{task.text}}
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from '../store';
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
tasksTypes: ['habit', 'daily', 'todo', 'reward'],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(['tasks']),
|
||||
...mapState({
|
||||
tasksCount: (state) => state.tasks.length,
|
||||
}),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user