Skip to content

Commit 74fc543

Browse files
HafizzleHafizzle
authored
Orb of Rebirth Updates (Count usage) (#15629)
* Update orb of rebirth to count every usage * Orb of rebirth modal UI updates * Fix rebirth modal showing again after page refresh * remove unused MAX_LEVEL * scale orb of rebirth on modal * UI & wording updates for Orb of Rebirth * UI & wording updates for Orb of Rebirth cont. * Orb of rebirth UI tweaks * Orb of rebirth UI tweaks * Orb of Rebirth modal UI tweak * Extend modal waves * Continued Orb of Rebirth UI Updates * Orb of rebirth margin tweak * rebirth-orb asset
1 parent 8c90e54 commit 74fc543

File tree

8 files changed

+412
-72
lines changed

8 files changed

+412
-72
lines changed

‎test/common/ops/rebirth.js‎

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -211,34 +211,43 @@ describe('shared.ops.rebirth', () => {
211211
expect(user.achievements.rebirthLevel).to.equal(2);
212212
});
213213

214-
it('does not increment rebirth achievements when level is lower than previous', async () => {
214+
it('increments rebirth achievements even when level is lower than previous', async () => {
215215
user.stats.lvl = 2;
216216
user.achievements.rebirths = 1;
217217
user.achievements.rebirthLevel = 3;
218218

219219
await rebirth(user);
220220

221-
expect(user.achievements.rebirths).to.equal(1);
221+
expect(user.achievements.rebirths).to.equal(2);
222222
expect(user.achievements.rebirthLevel).to.equal(3);
223223
});
224224

225-
it('always increments rebirth achievements when level is MAX_LEVEL', async () => {
225+
it('updates rebirthLevel when current level is higher than previous', async () => {
226+
user.stats.lvl = 5;
227+
user.achievements.rebirths = 1;
228+
user.achievements.rebirthLevel = 3;
229+
230+
await rebirth(user);
231+
232+
expect(user.achievements.rebirths).to.equal(2);
233+
expect(user.achievements.rebirthLevel).to.equal(5);
234+
});
235+
236+
it('increments rebirth achievements when level is MAX_LEVEL', async () => {
226237
user.stats.lvl = MAX_LEVEL;
227238
user.achievements.rebirths = 1;
228-
// this value is not actually possible (actually capped at MAX_LEVEL) but makes a good test
229-
user.achievements.rebirthLevel = MAX_LEVEL + 1;
239+
user.achievements.rebirthLevel = MAX_LEVEL;
230240

231241
await rebirth(user);
232242

233243
expect(user.achievements.rebirths).to.equal(2);
234244
expect(user.achievements.rebirthLevel).to.equal(MAX_LEVEL);
235245
});
236246

237-
it('always increments rebirth achievements when level is greater than MAX_LEVEL', async () => {
247+
it('increments rebirth achievements when level is greater than MAX_LEVEL', async () => {
238248
user.stats.lvl = MAX_LEVEL + 1;
239249
user.achievements.rebirths = 1;
240-
// this value is not actually possible (actually capped at MAX_LEVEL) but makes a good test
241-
user.achievements.rebirthLevel = MAX_LEVEL + 2;
250+
user.achievements.rebirthLevel = MAX_LEVEL;
242251

243252
await rebirth(user);
244253

‎website/client/src/assets/images/rebirth-orb.png‎

375 Bytes
Loading

‎website/client/src/assets/svg/purple-waves.svg‎

Lines changed: 5 additions & 0 deletions
Loading

‎website/client/src/components/achievements/rebirth.vue‎

Lines changed: 206 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,228 @@
11
<template>
22
<b-modal
33
id="rebirth"
4-
:title="$t('modalAchievement')"
5-
size="md"
6-
:hide-footer="true"
4+
size="sm"
5+
:hide-header="true"
76
>
8-
<div class="modal-body">
9-
<div class="col-12">
10-
<!-- @TODO: +achievementAvatar('sun',0)--><achievement-avatar class="avatar" />
11-
</div><div class="col-6 offset-3 text-center">
12-
<div v-if="user.achievements.rebirthLevel < 100">
13-
{{ $t('rebirthAchievement', {
14-
number: user.achievements.rebirths,
15-
level: user.achievements.rebirthLevel}) }}
16-
</div><div v-if="user.achievements.rebirthLevel >= 100">
17-
{{ $t('rebirthAchievement100', {number: user.achievements.rebirths}) }}
18-
</div><br><button
19-
class="btn btn-primary"
20-
@click="close()"
21-
>
22-
{{ $t('huzzah') }}
23-
</button>
7+
<div
8+
class="close-x"
9+
@click.stop="close()"
10+
>
11+
<div
12+
class="svg-icon svg-close"
13+
v-html="icons.close"
14+
></div>
15+
</div>
16+
<div class="content text-center">
17+
<h2
18+
v-once
19+
class="header"
20+
>
21+
{{ $t('rebirthNewAchievement') }}
22+
</h2>
23+
<div class="d-flex align-items-center justify-content-center icon-area">
24+
<div
25+
v-once
26+
class="svg-icon sparkles mirror"
27+
v-html="icons.starGroup"
28+
></div>
29+
<Sprite
30+
class="achievement-icon"
31+
image-name="achievement-sun2x"
32+
/>
33+
<div
34+
v-once
35+
class="svg-icon sparkles"
36+
v-html="icons.starGroup"
37+
></div>
2438
</div>
25-
</div><achievement-footer />
39+
<p class="subtitle">
40+
{{ $t('rebirthNewAdventure') }}
41+
</p>
42+
<p
43+
class="description"
44+
v-html="achievementText"
45+
></p>
46+
<p
47+
v-once
48+
class="stack-info"
49+
>
50+
{{ $t('rebirthStackInfo') }}
51+
</p>
52+
<button
53+
v-once
54+
class="btn btn-primary"
55+
@click="close()"
56+
>
57+
{{ $t('onwards') }}
58+
</button>
59+
</div>
60+
<div
61+
slot="modal-footer"
62+
class="footer-wave"
63+
v-html="icons.purpleWaves"
64+
></div>
2665
</b-modal>
2766
</template>
2867

29-
<style scoped>
30-
.avatar {
31-
width: 140px;
32-
margin: 0 auto;
33-
margin-bottom: 1.5em;
34-
margin-top: 1.5em;
68+
<style lang="scss">
69+
@import '@/assets/scss/colors.scss';
70+
71+
#rebirth {
72+
.modal-dialog {
73+
width: 330px;
74+
}
75+
76+
.modal-content {
77+
border: none;
78+
border-radius: 8px;
79+
overflow: hidden;
80+
box-shadow: 0 14px 28px 0 rgba($black, 0.24), 0 10px 10px 0 rgba($black, 0.28);
81+
}
82+
83+
.modal-body {
84+
padding: 0;
85+
}
86+
87+
.modal-footer {
88+
padding: 0;
89+
border-top: none;
90+
border-radius: 0;
91+
margin: 0;
92+
line-height: 0;
93+
}
3594
}
3695
</style>
3796

38-
<script>
39-
import achievementFooter from './achievementFooter';
40-
import achievementAvatar from './achievementAvatar';
97+
<style lang="scss" scoped>
98+
@import '@/assets/scss/colors.scss';
99+
100+
.content {
101+
padding: 24px 24px 0;
102+
}
103+
104+
.header {
105+
font-size: 1.25rem;
106+
line-height: 1.4;
107+
color: $purple-200;
108+
margin-top: 8px;
109+
margin-bottom: 16px;
110+
}
111+
112+
.icon-area {
113+
margin-bottom: 16px;
114+
}
115+
116+
.sparkles {
117+
width: 40px;
118+
height: 64px;
119+
120+
&.mirror {
121+
transform: scaleX(-1);
122+
}
123+
}
124+
125+
.close-x {
126+
position: absolute;
127+
right: 16px;
128+
top: 16px;
129+
cursor: pointer;
130+
z-index: 2;
131+
132+
&:hover .svg-close {
133+
opacity: 0.75;
134+
}
135+
136+
.svg-close {
137+
width: 16px;
138+
height: 16px;
139+
opacity: 0.5;
140+
transition: opacity 0.2s ease;
141+
pointer-events: none;
142+
}
143+
}
144+
145+
.achievement-icon {
146+
margin: 0 24px;
147+
}
148+
149+
.subtitle {
150+
font-family: 'Roboto', sans-serif;
151+
font-weight: 700;
152+
font-style: normal;
153+
font-size: 14px;
154+
line-height: 24px;
155+
letter-spacing: 0;
156+
margin-bottom: 12px;
157+
color: $gray-10;
158+
}
159+
160+
.description {
161+
font-size: 0.875rem;
162+
line-height: 1.71;
163+
margin-bottom: 12px;
164+
color: $gray-50;
165+
}
166+
167+
.stack-info {
168+
font-size: 0.875rem;
169+
line-height: 1.71;
170+
color: $gray-50;
171+
margin-bottom: 24px;
172+
}
173+
174+
.btn-primary {
175+
margin-bottom: 8px;
176+
}
177+
178+
.footer-wave {
179+
width: 100%;
41180
181+
::v-deep svg {
182+
display: block;
183+
width: calc(100% + 8px);
184+
height: auto;
185+
margin: 0 -4px -4px;
186+
}
187+
}
188+
</style>
189+
190+
<script>
191+
import closeIcon from '@/assets/svg/close.svg?raw';
192+
import Sprite from '@/components/ui/sprite';
193+
import starGroup from '@/assets/svg/star-group.svg?raw';
194+
import purpleWaves from '@/assets/svg/purple-waves.svg?raw';
42195
import { mapState } from '@/libs/store';
43196
44197
export default {
45198
components: {
46-
achievementFooter,
47-
achievementAvatar,
199+
Sprite,
200+
},
201+
data () {
202+
return {
203+
icons: Object.freeze({
204+
starGroup,
205+
purpleWaves,
206+
close: closeIcon,
207+
}),
208+
};
48209
},
49210
computed: {
50211
...mapState({ user: 'user.data' }),
212+
achievementText () {
213+
const rebirths = this.user.achievements.rebirths || 0;
214+
const level = this.user.achievements.rebirthLevel || 0;
215+
216+
if (level >= 100) {
217+
return this.$t('rebirthAchievement100', { number: rebirths, level });
218+
}
219+
220+
if (rebirths === 1) {
221+
return this.$t('rebirthAchievement', { number: rebirths, level });
222+
}
223+
224+
return this.$t('rebirthAchievementPlural', { number: rebirths, level });
225+
},
51226
},
52227
methods: {
53228
close () {

0 commit comments

Comments
 (0)