Customizations Shop WIP

website/client/src/assets/scss/button.scss

@@ -217,16 +217,13 @@
 
 .btn-show-more {
  display: block;
- width: 50%;
- max-width: 448px;
- margin: 0 auto;
- margin-top: 12px;
+ width: 100%;
  padding: 8px;
  font-size: 14px;
  line-height: 1.43;
  font-weight: bold;
  text-align: center;
- background: $gray-600;
+ background: $gray-500;
  color: $gray-200 !important; // Otherwise it gets ignored when used on an A element
  box-shadow: none;
 

website/client/src/assets/scss/item.scss

@@ -1,5 +1,11 @@
 // TODO move to item component?
 
+.item, .item-wrapper, .item > div > div {
+ &:focus-visible {
+ outline: none;
+ }
+}
+
 .items > div {
  display: inline-block;
  margin-right: 24px;
@@ -9,6 +15,15 @@
  position: relative;
  display: inline-block;
  margin-bottom: 12px;
+
+ &:focus {
+ outline: 2px solid $purple-400;
+ border-radius: 2px;
+ }
+
+ &:hover {
+ box-shadow: 0 3px 6px 0 rgba($black, 0.16), 0 3px 6px 0 rgba($black, 0.24);
+ }
 }
 
 .items-one-line .item-wrapper {
@@ -56,11 +71,6 @@
  background: $purple-500;
  }
 
- &:hover {
- box-shadow: 0 3px 6px 0 rgba($black, 0.16), 0 3px 6px 0 rgba($black, 0.24);
- border-color: $purple-400;
- }
-
  &.highlight {
  box-shadow: 0 0 8px 8px rgba($black, 0.16), 0 5px 10px 0 rgba($black, 0.12) !important;
  }

website/client/src/components/avatar.vue

@@ -35,7 +35,7 @@
  <span :class="[skinClass, specialMountClass]"></span>
  <!-- eslint-disable max-len-->
  <span
- :class="[member.preferences.size + '_shirt_' + member.preferences.shirt, specialMountClass]"
+ :class="[shirtClass, specialMountClass]"
  ></span>
  <!-- eslint-enable max-len-->
  <span :class="['head_0', specialMountClass]"></span>
@@ -46,12 +46,10 @@
  <template
  v-for="type in ['bangs', 'base', 'mustache', 'beard']"
  >
- <!-- eslint-disable max-len-->
  <span
  :key="type"
- :class="['hair_' + type + '_' + member.preferences.hair[type] + '_' + member.preferences.hair.color, specialMountClass]"
+ :class="[hairClass(type), specialMountClass]"
  ></span>
- <!-- eslint-enable max-len-->
  </template>
  <span :class="[getGearClass('body'), specialMountClass]"></span>
  <span :class="[getGearClass('eyewear'), specialMountClass]"></span>
@@ -156,7 +154,7 @@
  withBackground: {
  type: Boolean,
  },
  overrideAvatarGear: {
  type: Object,
  },
  width: {
@@ -171,7 +169,7 @@
  type: String,
  default: '0 auto 0 24px',
  },
  overrideTopPadding: {
  type: String,
  },
  showVisualBuffs: {
@@ -233,10 +231,20 @@
  },
  skinClass () {
  if (!this.member) return '';
+ if (this.overrideAvatarGear?.skin) {
+ return `skin_${this.overrideAvatarGear.skin}`;
+ }
  const baseClass = `skin_${this.member.preferences.skin}`;
 
  return `${baseClass}${this.member.preferences.sleep ? '_sleep' : ''}`;
  },
+ shirtClass () {
+ if (!this.member) return '';
+ if (this.overrideAvatarGear?.shirt) {
+ return `${this.member.preferences.size}_shirt_${this.overrideAvatarGear.shirt}`;
+ }
+ return `${this.member.preferences.size}_shirt_${this.member.preferences.shirt}`;
+ },
  costumeClass () {
  return this.member?.preferences.costume ? 'costume' : 'equipped';
  },
@@ -269,6 +277,17 @@
 
  return result;
  },
+ hairClass (slot) {
+ if (this.overrideAvatarGear?.hair) {
+ if (this.overrideAvatarGear.hair[slot]) {
+ return `hair_${slot}_${this.overrideAvatarGear.hair[slot]}_${this.member.preferences.hair.color}`;
+ }
+ if (this.overrideAvatarGear.hair.color) {
+ return `hair_${slot}_${this.member.preferences.hair[slot]}_${this.overrideAvatarGear.hair.color}`;
+ }
+ }
+ return `hair_${slot}_${this.member.preferences.hair[slot]}_${this.member.preferences.hair.color}`;
+ },
  hideGear (gearType) {
  if (!this.member) return true;
  if (gearType === 'weapon') {

website/client/src/components/avatarModal/body-settings.vue

@@ -35,7 +35,7 @@
 import appearance from '@/../../common/script/content/appearance';
 import { subPageMixin } from '../../mixins/subPage';
 import { userStateMixin } from '../../mixins/userState';
-import { avatarEditorUtilies } from '../../mixins/avatarEditUtilities';
+import { avatarEditorUtilities } from '../../mixins/avatarEditUtilities';
 import subMenu from './sub-menu';
 import customizeOptions from './customize-options';
 import gem from '@/assets/svg/gem.svg';
@@ -51,7 +51,7 @@ export default {
  mixins: [
  subPageMixin,
  userStateMixin,
- avatarEditorUtilies,
+ avatarEditorUtilities,
  ],
  props: [
  'editing',

website/client/src/components/avatarModal/customize-options.vue

@@ -67,11 +67,11 @@
 <script>
 import gem from '@/assets/svg/gem.svg';
 import gold from '@/assets/svg/gold.svg';
-import { avatarEditorUtilies } from '../../mixins/avatarEditUtilities';
+import { avatarEditorUtilities } from '../../mixins/avatarEditUtilities';
 
 export default {
  mixins: [
- avatarEditorUtilies,
+ avatarEditorUtilities,
  ],
  props: ['items', 'currentValue', 'fullSet'],
  data () {

website/client/src/components/avatarModal/extra-settings.vue

@@ -60,7 +60,7 @@
 import appearance from '@/../../common/script/content/appearance';
 import { subPageMixin } from '../../mixins/subPage';
 import { userStateMixin } from '../../mixins/userState';
-import { avatarEditorUtilies } from '../../mixins/avatarEditUtilities';
+import { avatarEditorUtilities } from '../../mixins/avatarEditUtilities';
 import subMenu from './sub-menu';
 import customizeOptions from './customize-options';
 import gem from '@/assets/svg/gem.svg';
@@ -76,7 +76,7 @@ export default {
  mixins: [
  subPageMixin,
  userStateMixin,
- avatarEditorUtilies,
+ avatarEditorUtilities,
  ],
  props: [
  'editing',

website/client/src/components/avatarModal/hair-settings.vue

@@ -81,7 +81,7 @@ import appearance from '@/../../common/script/content/appearance';
 import appearanceSets from '@/../../common/script/content/appearance/sets';
 import { subPageMixin } from '../../mixins/subPage';
 import { userStateMixin } from '../../mixins/userState';
-import { avatarEditorUtilies } from '../../mixins/avatarEditUtilities';
+import { avatarEditorUtilities } from '../../mixins/avatarEditUtilities';
 import subMenu from './sub-menu';
 import customizeOptions from './customize-options';
 import gem from '@/assets/svg/gem.svg';
@@ -97,7 +97,7 @@ export default {
  mixins: [
  subPageMixin,
  userStateMixin,
- avatarEditorUtilies,
+ avatarEditorUtilities,
  ],
  props: [
  'editing',

website/client/src/components/avatarModal/skin-settings.vue

@@ -36,7 +36,7 @@ import appearance from '@/../../common/script/content/appearance';
 import appearanceSets from '@/../../common/script/content/appearance/sets';
 import { subPageMixin } from '../../mixins/subPage';
 import { userStateMixin } from '../../mixins/userState';
-import { avatarEditorUtilies } from '../../mixins/avatarEditUtilities';
+import { avatarEditorUtilities } from '../../mixins/avatarEditUtilities';
 import subMenu from './sub-menu';
 import customizeOptions from './customize-options';
 import gem from '@/assets/svg/gem.svg';
@@ -56,7 +56,7 @@ export default {
  mixins: [
  subPageMixin,
  userStateMixin,
- avatarEditorUtilies,
+ avatarEditorUtilities,
  ],
  props: [
  'editing',

website/client/src/components/creatorIntro.vue

@@ -1187,7 +1187,7 @@ import gold from '@/assets/svg/gold.svg';
 import arrowRight from '@/assets/svg/arrow_right.svg';
 import arrowLeft from '@/assets/svg/arrow_left.svg';
 import svgClose from '@/assets/svg/close.svg';
-import { avatarEditorUtilies } from '../mixins/avatarEditUtilities';
+import { avatarEditorUtilities } from '../mixins/avatarEditUtilities';
 
 export default {
  components: {
@@ -1201,7 +1201,7 @@ export default {
  toggleSwitch,
  usernameForm,
  },
- mixins: [guide, notifications, avatarEditorUtilies],
+ mixins: [guide, notifications, avatarEditorUtilities],
  data () {
  const backgroundShopSets = shops.getBackgroundShopSets();
 

website/client/src/components/header/menu.vue

@@ -134,6 +134,12 @@
  >
  {{ $t('quests') }}
  </router-link>
+ <router-link
+ class="topbar-dropdown-item dropdown-item"
+ :to="{name: 'customizations'}"
+ >
+ {{ $t('customizations') }}
+ </router-link>
  <router-link
  class="topbar-dropdown-item dropdown-item"
  :to="{name: 'seasonal'}"