feat(event): turn on G1G1 2019

This commit is contained in:
Sabe Jones
2019-12-17 14:04:55 -06:00
parent e223311aac
commit 34983f1221
22 changed files with 273 additions and 107 deletions
+70 -10
View File
@@ -64,6 +64,30 @@
></span>
</div>
</div>
<div
class="g1g1-banner d-flex justify-content-center align-items-center"
v-if="!giftingHidden">
<div
class="svg-icon svg-gifts left-gift"
v-html="icons.gifts">
</div>
<router-link class="g1g1-link" to="/user/settings/subscription">
{{ $t('g1g1Announcement') }}
</router-link>
<div
class="svg-icon svg-gifts right-gift"
v-html="icons.gifts">
</div>
<div
class="closepadding"
@click="hideGiftingBanner()">
<span
class="svg-icon inline-icon icon-10"
aria-hidden="true"
v-html="icons.close">
</span>
</div>
</div>
<notifications-display />
<app-menu />
<div class="container-fluid">
@@ -135,10 +159,43 @@
cursor: crosshair;
}
.closepadding {
margin: 11px 24px;
display: inline-block;
position: relative;
right: 0;
top: 0;
cursor: pointer;
}
.container-fluid {
flex: 1 0 auto;
}
.g1g1-banner {
width: 100%;
min-height: 2.5rem;
background-color: $teal-50;
}
.g1g1-link {
color: $white;
}
.left-gift {
margin: auto 1rem auto auto;
}
.right-gift {
margin: auto auto auto 1rem;
filter: flipH;
transform: scaleX(-1);
}
.svg-gifts {
width: 4.6rem;
}
.notification {
border-radius: 1000px;
background-color: $green-10;
@@ -165,15 +222,6 @@
margin: auto;
}
.closepadding {
margin: 11px 24px;
display: inline-block;
position: relative;
right: 0;
top: 0;
cursor: pointer;
}
@media only screen and (max-width: 768px) {
.content {
font-size: 12px;
@@ -239,8 +287,14 @@ import subCancelModalConfirm from '@/components/payments/cancelModalConfirm';
import subCanceledModal from '@/components/payments/canceledModal';
import spellsMixin from '@/mixins/spells';
import { CONSTANTS, getLocalSetting, removeLocalSetting } from '@/libs/userlocalManager';
import {
CONSTANTS,
getLocalSetting,
removeLocalSetting,
setLocalSetting,
} from '@/libs/userlocalManager';
import gifts from '@/assets/svg/gifts.svg';
import svgClose from '@/assets/svg/close.svg';
import bannedAccountModal from '@/components/bannedAccountModal';
@@ -267,6 +321,7 @@ export default {
return {
icons: Object.freeze({
close: svgClose,
gifts,
}),
selectedItemToBuy: null,
selectedSpellToBuy: null,
@@ -277,6 +332,7 @@ export default {
loading: true,
currentTipNumber: 0,
bannerHidden: false,
giftingHidden: getLocalSetting(CONSTANTS.keyConstants.GIFTING_BANNER_DISPLAY) === 'dismissed',
};
},
computed: {
@@ -670,6 +726,10 @@ export default {
hideBanner () {
this.bannerHidden = true;
},
hideGiftingBanner () {
setLocalSetting(CONSTANTS.keyConstants.GIFTING_BANNER_DISPLAY, 'dismissed');
this.giftingHidden = true;
},
resumeDamage () {
this.$store.dispatch('user:sleep');
},
@@ -1,72 +1,36 @@
.promo_achievement_white {
background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
background-position: -928px -465px;
background-position: -283px -293px;
width: 204px;
height: 102px;
}
.promo_armoire_backgrounds_201912 {
background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
background-position: -928px 0px;
background-position: 0px 0px;
width: 423px;
height: 147px;
}
.promo_costume_achievement {
.promo_g1g1_2019 {
background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
background-position: -1175px -296px;
width: 144px;
height: 156px;
}
.promo_delightful_dinos {
background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
background-position: 0px -752px;
width: 423px;
height: 147px;
}
.promo_ember_thunderstorm_potions {
background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
background-position: -424px -752px;
width: 423px;
height: 147px;
}
.promo_harvest_feast {
background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
background-position: -928px -296px;
width: 246px;
height: 168px;
background-position: 0px -148px;
width: 357px;
height: 144px;
}
.promo_mystery_201912 {
background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
background-position: -928px -148px;
background-position: 0px -293px;
width: 282px;
height: 147px;
}
.promo_take_this {
background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
background-position: -1211px -148px;
background-position: -424px -196px;
width: 96px;
height: 69px;
}
.scene_habitica_map {
.scene_todos {
background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
background-position: 0px 0px;
width: 450px;
height: 450px;
}
.scene_office {
background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
background-position: -421px -451px;
width: 360px;
height: 240px;
}
.scene_seaserpent {
background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
background-position: -451px 0px;
width: 476px;
height: 364px;
}
.scene_yarn_boss {
background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
background-position: 0px -451px;
width: 420px;
height: 300px;
background-position: -424px 0px;
width: 240px;
height: 195px;
}
Binary file not shown.

Before

Width:  |  Height:  |  Size: 93 KiB

After

Width:  |  Height:  |  Size: 28 KiB

@@ -76,7 +76,7 @@
</h3>
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<div class="col-md-4">
<div class="form-group">
<!-- eslint-disable vue/no-use-v-if-with-v-for -->
<div
@@ -98,6 +98,11 @@
</div>
</div>
</div>
<div class="col-md-8">
<h4 v-once> {{ $t('winterPromoGiftHeader') }} </h4>
<p v-once> {{ $t('winterPromoGiftDetails1') }} </p>
<p v-once> {{ $t('winterPromoGiftDetails2') }} </p>
</div>
</div>
</div>
</div>
@@ -237,6 +237,11 @@
{{ $t('giftSubscriptionText4') }}
</h4>
</div>
<div class="col-6">
<h2 v-once> {{ $t('winterPromoGiftHeader') }} </h2>
<p v-once> {{ $t('winterPromoGiftDetails1') }} </p>
<p v-once> {{ $t('winterPromoGiftDetails2') }} </p>
</div>
</div>
</div>
</template>
@@ -20,6 +20,10 @@
z-index: 1400; // 1400 is above modal backgrounds
&-top-pos {
&-double {
top: 145px;
}
&-normal {
top: 65px;
}
@@ -34,6 +38,7 @@
<script>
import { mapState } from '@/libs/store';
import notification from './notification';
import { CONSTANTS, getLocalSetting } from '@/libs/userlocalManager';
export default {
components: {
@@ -47,7 +52,9 @@ export default {
notificationsTopPos () {
const base = 'notifications-top-pos-';
let modifier = '';
if (this.userSleeping) {
if (this.userSleeping && this.giftingShown) {
modifier = 'double';
} else if (this.userSleeping || this.giftingShown) {
modifier = 'sleeping';
} else {
modifier = 'normal';
@@ -55,5 +62,10 @@ export default {
return `${base}${modifier}`;
},
},
data () {
return {
giftingShown: getLocalSetting(CONSTANTS.keyConstants.GIFTING_BANNER_DISPLAY) !== 'dismissed',
};
},
};
</script>
@@ -5,6 +5,7 @@ const CONSTANTS = {
EQUIPMENT_DRAWER_STATE: 'equipment-drawer-state',
CURRENT_EQUIPMENT_DRAWER_TAB: 'current-equipment-drawer-tab',
STABLE_SORT_STATE: 'stable-sort-state',
GIFTING_BANNER_DISPLAY: 'gifting-banner-display',
},
drawerStateValues: {
DRAWER_CLOSED: 'drawer-closed',