sudoxreboot/habitica-self-host
1
0
Fork 0
mirror of https://github.com/sudoxnym/habitica-self-host.git synced 2026-07-15 10:42:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 57 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
website/client/src/assets/scss/shops.scss
View file

@ -46,13 +46,11 @@
.background {
background-repeat: repeat-x;
height:216px;
width: 100%;
position: absolute;
top: 0;
left: 0;
display: flex;
flex-direction: column;
justify-content: center;
@ -67,6 +65,13 @@
flex-direction: column;
}
.shop-message {
position: relative;
height: 76px;
margin: 71px auto;
width: 240px;
}
.npc {
position: absolute;
left: 0;

66
website/client/src/components/shops/timeTravelers/index.vue
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)`;

2
website/common/locales/en/subscriber.json
View file

@ -32,7 +32,7 @@
"subGemName": "Subscriber Gems",
"maxBuyGems": "You have bought all the Gems you can this month. More become available within the first three days of each month. Thanks for subscribing!",
"timeTravelers": "Time Travelers",
"timeTravelersPopoverNoSubMobile": "Looks like you’ll need a Mystic Hourglass to open the time portal and summon the Mysterious Time Travelers.",
"timeTravelersPopoverNoSubMobile": "Subscribers receive a rare Mystic Hourglass every month to use in the Time Travelers Shop!",
"timeTravelersPopover": "Your Mystic Hourglass has opened our time portal! Choose what you’d like us to fetch from the past or future.",
"mysticHourglassNeededNoSub": "This item requires a Mystic Hourglass. You earn Mystic Hourglasses by being a Habitica subscriber.",
"mysterySetNotFound": "Mystery set not found, or set already owned.",