Kai/habitica
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: update time travelers shop to display seasonal backgrounds (#15445)

Browse Source 
* chore: update time travelers shop to display seasonal backgrounds

* chore: update time travelers banner (note CSS borken rn)

* chore: fix borken CSS and update logic in shop

* chore: added isSubscribed function, not working

* chore: isSubscribed working but no bg for subscribers

* chore: logic and css updates

* chore: add check for trinket

* chore: more time traveler shop logicking

* chore(git): heckin habitica-images

* refactor(style): indents/readability

* refactor(style): one more line break

* refactor(style): still more indents

* refactor(style): I wonder if lint can help with this stuff

* refactor(style): tighten up

---------

Co-authored-by: Kalista Payne <sabrecat@gmail.com>
This commit is contained in:
Natalie
2025-06-25 16:12:23 -04:00
committed by GitHub
parent f8a3e4d673
commit ba6940eb81
3 changed files with 57 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/client/src/components/shops/timeTravelers/index.vue
+48 -18
View File
@@ -41,30 +41,58 @@
<div class="standard-page">
<div class="featuredItems">
<div
v-if="isSubscribed || (hasTrinket && !isSubscribed)"
class="background"
:class="{'background-closed': closed, 'background-open': !closed }"
:style="{'background-image': imageURLs.background}"
>
<div
class="npc"
:class="{'closed': closed }"
:style="{'background-image': imageURLs.npc}"
>
<div class="featured-label">
<span class="rectangle"></span><span
<span class="rectangle"></span>
<span
v-once
class="text"
>{{ $t('timeTravelers') }}</span><span class="rectangle"></span>
>
{{ $t('timeTravelers') }}
</span>
<span class="rectangle"></span>
</div>
</div><div
v-if="closed"
class="content"
</div>
</div>
<div class="content">
<div
class="background"
:style="{'background-image': imageURLs.background}"
>
<div class="featured-label with-border closed">
<span class="rectangle"></span><span
<div
class="npc"
:style="{'background-image': imageURLs.npc}"
>
<div class="featured-label">
<span class="rectangle"></span>
<span
v-once
class="text"
>
{{ $t('timeTravelers') }}
</span>
<span class="rectangle"></span>
</div>
</div>
<div
v-if="!isSubscribed && !hasTrinket"
class="shop-message featured-label with-border closed"
>
<span class="rectangle"></span>
<span
v-once
class="text"
>{{ $t('timeTravelersPopoverNoSubMobile') }}</span><span class="rectangle"></span>
>
{{ $t('timeTravelersPopoverNoSubMobile') }}
</span>
<span class="rectangle"></span>
</div>
</div>
</div>
@@ -163,6 +191,7 @@ import _throttle from 'lodash/throttle';
import _groupBy from 'lodash/groupBy';
import _map from 'lodash/map';
import _find from 'lodash/find';
import moment from 'moment';
import isPinned from '@/../../common/script/libs/isPinned';
import shops from '@/../../common/script/libs/shops';
import { mapState } from '@/libs/store';
@@ -233,15 +262,18 @@ export default {
userItems: 'user.data.items',
currentEventList: 'worldState.data.currentEventList',
}),
closed () {
return this.user.purchased.plan.consecutive.trinkets === 0;
isSubscribed () {
const now = new Date();
const { plan } = this.user.purchased;
return plan && plan.customerId
&& (!plan.dateTerminated || moment(plan.dateTerminated).isAfter(now));
},
hasTrinket () {
return this.user.purchased.plan.consecutive.trinkets > 0;
},
shop () {
return shops.getTimeTravelersShop(this.user);
},
categories () {
const apiCategories = this.shop.categories;
@@ -302,10 +334,8 @@ export default {
}
});
this.currentEvent = _find(this.currentEventList, event => Boolean(['winter', 'spring', 'summer', 'fall'].includes(event.season)));
if (!this.currentEvent || !this.currentEvent.season || this.currentEvent.season === 'thanksgiving' || this.closed) {
if (!this.currentEvent || !this.currentEvent.season || this.currentEvent.season === 'thanksgiving') {
this.imageURLs.background = 'url(/static/npc/normal/time_travelers_background.png)';
this.imageURLs.npc = this.closed ? 'url(/static/npc/normal/time_travelers_closed_banner.png)'
: 'url(/static/npc/normal/time_travelers_open_banner.png)';
} else {
this.imageURLs.background = `url(/static/npc/${this.currentEvent.season}/time_travelers_background.png)`;
this.imageURLs.npc = `url(/static/npc/${this.currentEvent.season}/time_travelers_open_banner.png)`;