From 74fc543ef2f545cddffc280e7ccc772ff05a0925 Mon Sep 17 00:00:00 2001
From: Fiz <34069775+Hafizzle@users.noreply.github.com>
Date: Thu, 12 Mar 2026 14:51:48 -0500
Subject: [PATCH] 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
---
 test/common/ops/rebirth.js                    |  25 +-
 .../client/src/assets/images/rebirth-orb.png  | Bin 0 -> 375 bytes
 .../client/src/assets/svg/purple-waves.svg    |   5 +
 .../src/components/achievements/rebirth.vue   | 237 +++++++++++++++---
 .../achievements/rebirthEnabled.vue           | 185 ++++++++++++--
 .../client/src/components/notifications.vue   |  16 +-
 website/common/locales/en/rebirth.json        |  11 +-
 website/common/script/ops/rebirth.js          |   5 +-
 8 files changed, 412 insertions(+), 72 deletions(-)
 create mode 100644 website/client/src/assets/images/rebirth-orb.png
 create mode 100644 website/client/src/assets/svg/purple-waves.svg

diff --git a/test/common/ops/rebirth.js b/test/common/ops/rebirth.js
index 5193126c6a..d7accbfd43 100644
--- a/test/common/ops/rebirth.js
+++ b/test/common/ops/rebirth.js
@@ -211,22 +211,32 @@ describe('shared.ops.rebirth', () => {
     expect(user.achievements.rebirthLevel).to.equal(2);
   });
 
-  it('does not increment rebirth achievements when level is lower than previous', async () => {
+  it('increments rebirth achievements even when level is lower than previous', async () => {
     user.stats.lvl = 2;
     user.achievements.rebirths = 1;
     user.achievements.rebirthLevel = 3;
 
     await rebirth(user);
 
-    expect(user.achievements.rebirths).to.equal(1);
+    expect(user.achievements.rebirths).to.equal(2);
     expect(user.achievements.rebirthLevel).to.equal(3);
   });
 
-  it('always increments rebirth achievements when level is MAX_LEVEL', async () => {
+  it('updates rebirthLevel when current level is higher than previous', async () => {
+    user.stats.lvl = 5;
+    user.achievements.rebirths = 1;
+    user.achievements.rebirthLevel = 3;
+
+    await rebirth(user);
+
+    expect(user.achievements.rebirths).to.equal(2);
+    expect(user.achievements.rebirthLevel).to.equal(5);
+  });
+
+  it('increments rebirth achievements when level is MAX_LEVEL', async () => {
     user.stats.lvl = MAX_LEVEL;
     user.achievements.rebirths = 1;
-    // this value is not actually possible (actually capped at MAX_LEVEL) but makes a good test
-    user.achievements.rebirthLevel = MAX_LEVEL + 1;
+    user.achievements.rebirthLevel = MAX_LEVEL;
 
     await rebirth(user);
 
@@ -234,11 +244,10 @@ describe('shared.ops.rebirth', () => {
     expect(user.achievements.rebirthLevel).to.equal(MAX_LEVEL);
   });
 
-  it('always increments rebirth achievements when level is greater than MAX_LEVEL', async () => {
+  it('increments rebirth achievements when level is greater than MAX_LEVEL', async () => {
     user.stats.lvl = MAX_LEVEL + 1;
     user.achievements.rebirths = 1;
-    // this value is not actually possible (actually capped at MAX_LEVEL) but makes a good test
-    user.achievements.rebirthLevel = MAX_LEVEL + 2;
+    user.achievements.rebirthLevel = MAX_LEVEL;
 
     await rebirth(user);
 
diff --git a/website/client/src/assets/images/rebirth-orb.png b/website/client/src/assets/images/rebirth-orb.png
new file mode 100644
index 0000000000000000000000000000000000000000..daf89541bf0cbea55c76fe9e8dcb334755fa2191
GIT binary patch
literal 375
zcmeAS@N?(olHy`uVBq!ia0vp^4j|0J3?w7mbKU|e-2k5uS0G)e!29(O2axf#LB2D|
z{g6NRnHgFC|NsB_c7wgT!s{cv+Z6fkd9r@J&9O30^CM6le@T#EFauBp5_sA>Zy8YP
zm8XkiNX4AJlX(RX8Su2;SIH6TYEfM1!N9$_fko#Glg9#~87-kqn;kyw%4=wt9$WSE
zXVG`Pw^A3Pbbf4&%5-r!UGg*YdKcRZU5*(u=AD&isY+3jIxxAR#Ut~dYT8U^t_52*
z@0{*X*q0Kf&KYn`WR0k#YB764u6t=iv_ey;Qbz_uyzl9)cM4+U&v1u_iN#N0nPC|5
z>qz47TqU<TJQ8b{F**c377u8PF;Q{YvU;Yj#19Xp^Gd=pfefay1@7(JE#K_fFsY?M
zSs~yI<C;aL4uWF;8@3#iS`ZiL`fXdkR>O{y2g^cb%Y+%^IeP4EW;f=?0DaBi>FVdQ
I&MBb@0N~Y^kN^Mx

literal 0
HcmV?d00001

diff --git a/website/client/src/assets/svg/purple-waves.svg b/website/client/src/assets/svg/purple-waves.svg
new file mode 100644
index 0000000000..737de7058a
--- /dev/null
+++ b/website/client/src/assets/svg/purple-waves.svg
@@ -0,0 +1,5 @@
+<svg width="330" height="80" viewBox="0 0 330 80" preserveAspectRatio="none" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M159.797 60.5502C165.534 61.8466 171.631 62.7536 178.221 63.1767C208.94 65.1492 233.733 56.6838 260.68 47.483C282.33 40.091 305.37 32.2243 333.99 28.9144L336 16.3018C260.81 7.08865 233.373 23.1672 205.362 39.5825C192.037 47.3908 178.583 55.2753 159.797 60.5502Z" fill="#BDA8FF"/>
+<path d="M0 80L331.948 79.9998V29.1594C268.976 36.9871 233.03 66.6959 178.221 63.1767C112.951 58.9858 95.9516 7.31934 0.000104656 0L0 80Z" fill="#925CF3"/>
+<path d="M203.54 40.6496C166.339 36.8525 141.531 39.6251 122.334 45.4666C133.94 51.8989 145.792 57.3851 159.797 60.5502C177.727 55.5155 190.801 48.1036 203.54 40.6496Z" fill="#D5C8FF"/>
+</svg>
diff --git a/website/client/src/components/achievements/rebirth.vue b/website/client/src/components/achievements/rebirth.vue
index 174b5cd4c3..4bb514c9c9 100644
--- a/website/client/src/components/achievements/rebirth.vue
+++ b/website/client/src/components/achievements/rebirth.vue
@@ -1,53 +1,228 @@
 <template>
   <b-modal
     id="rebirth"
-    :title="$t('modalAchievement')"
-    size="md"
-    :hide-footer="true"
+    size="sm"
+    :hide-header="true"
   >
-    <div class="modal-body">
-      <div class="col-12">
-        <!-- @TODO: +achievementAvatar('sun',0)--><achievement-avatar class="avatar" />
-      </div><div class="col-6 offset-3 text-center">
-        <div v-if="user.achievements.rebirthLevel < 100">
-          {{ $t('rebirthAchievement', {
-            number: user.achievements.rebirths,
-            level: user.achievements.rebirthLevel}) }}
-        </div><div v-if="user.achievements.rebirthLevel >= 100">
-          {{ $t('rebirthAchievement100', {number: user.achievements.rebirths}) }}
-        </div><br><button
-          class="btn btn-primary"
-          @click="close()"
-        >
-          {{ $t('huzzah') }}
-        </button>
+    <div
+      class="close-x"
+      @click.stop="close()"
+    >
+      <div
+        class="svg-icon svg-close"
+        v-html="icons.close"
+      ></div>
+    </div>
+    <div class="content text-center">
+      <h2
+        v-once
+        class="header"
+      >
+        {{ $t('rebirthNewAchievement') }}
+      </h2>
+      <div class="d-flex align-items-center justify-content-center icon-area">
+        <div
+          v-once
+          class="svg-icon sparkles mirror"
+          v-html="icons.starGroup"
+        ></div>
+        <Sprite
+          class="achievement-icon"
+          image-name="achievement-sun2x"
+        />
+        <div
+          v-once
+          class="svg-icon sparkles"
+          v-html="icons.starGroup"
+        ></div>
       </div>
-    </div><achievement-footer />
+      <p class="subtitle">
+        {{ $t('rebirthNewAdventure') }}
+      </p>
+      <p
+        class="description"
+        v-html="achievementText"
+      ></p>
+      <p
+        v-once
+        class="stack-info"
+      >
+        {{ $t('rebirthStackInfo') }}
+      </p>
+      <button
+        v-once
+        class="btn btn-primary"
+        @click="close()"
+      >
+        {{ $t('onwards') }}
+      </button>
+    </div>
+    <div
+      slot="modal-footer"
+      class="footer-wave"
+      v-html="icons.purpleWaves"
+    ></div>
   </b-modal>
 </template>
 
-<style scoped>
-  .avatar {
-    width: 140px;
-    margin: 0 auto;
-    margin-bottom: 1.5em;
-    margin-top: 1.5em;
+<style lang="scss">
+  @import '@/assets/scss/colors.scss';
+
+  #rebirth {
+    .modal-dialog {
+      width: 330px;
+    }
+
+    .modal-content {
+      border: none;
+      border-radius: 8px;
+      overflow: hidden;
+      box-shadow: 0 14px 28px 0 rgba($black, 0.24), 0 10px 10px 0 rgba($black, 0.28);
+    }
+
+    .modal-body {
+      padding: 0;
+    }
+
+    .modal-footer {
+      padding: 0;
+      border-top: none;
+      border-radius: 0;
+      margin: 0;
+      line-height: 0;
+    }
+  }
+</style>
+
+<style lang="scss" scoped>
+  @import '@/assets/scss/colors.scss';
+
+  .content {
+    padding: 24px 24px 0;
+  }
+
+  .header {
+    font-size: 1.25rem;
+    line-height: 1.4;
+    color: $purple-200;
+    margin-top: 8px;
+    margin-bottom: 16px;
+  }
+
+  .icon-area {
+    margin-bottom: 16px;
+  }
+
+  .sparkles {
+    width: 40px;
+    height: 64px;
+
+    &.mirror {
+      transform: scaleX(-1);
+    }
+  }
+
+  .close-x {
+    position: absolute;
+    right: 16px;
+    top: 16px;
+    cursor: pointer;
+    z-index: 2;
+
+    &:hover .svg-close {
+      opacity: 0.75;
+    }
+
+    .svg-close {
+      width: 16px;
+      height: 16px;
+      opacity: 0.5;
+      transition: opacity 0.2s ease;
+      pointer-events: none;
+    }
+  }
+
+  .achievement-icon {
+    margin: 0 24px;
+  }
+
+  .subtitle {
+    font-family: 'Roboto', sans-serif;
+    font-weight: 700;
+    font-style: normal;
+    font-size: 14px;
+    line-height: 24px;
+    letter-spacing: 0;
+    margin-bottom: 12px;
+    color: $gray-10;
+  }
+
+  .description {
+    font-size: 0.875rem;
+    line-height: 1.71;
+    margin-bottom: 12px;
+    color: $gray-50;
+  }
+
+  .stack-info {
+    font-size: 0.875rem;
+    line-height: 1.71;
+    color: $gray-50;
+    margin-bottom: 24px;
+  }
+
+  .btn-primary {
+    margin-bottom: 8px;
+  }
+
+  .footer-wave {
+    width: 100%;
+
+    ::v-deep svg {
+      display: block;
+      width: calc(100% + 8px);
+      height: auto;
+      margin: 0 -4px -4px;
+    }
   }
 </style>
 
 <script>
-import achievementFooter from './achievementFooter';
-import achievementAvatar from './achievementAvatar';
-
+import closeIcon from '@/assets/svg/close.svg?raw';
+import Sprite from '@/components/ui/sprite';
+import starGroup from '@/assets/svg/star-group.svg?raw';
+import purpleWaves from '@/assets/svg/purple-waves.svg?raw';
 import { mapState } from '@/libs/store';
 
 export default {
   components: {
-    achievementFooter,
-    achievementAvatar,
+    Sprite,
+  },
+  data () {
+    return {
+      icons: Object.freeze({
+        starGroup,
+        purpleWaves,
+        close: closeIcon,
+      }),
+    };
   },
   computed: {
     ...mapState({ user: 'user.data' }),
+    achievementText () {
+      const rebirths = this.user.achievements.rebirths || 0;
+      const level = this.user.achievements.rebirthLevel || 0;
+
+      if (level >= 100) {
+        return this.$t('rebirthAchievement100', { number: rebirths, level });
+      }
+
+      if (rebirths === 1) {
+        return this.$t('rebirthAchievement', { number: rebirths, level });
+      }
+
+      return this.$t('rebirthAchievementPlural', { number: rebirths, level });
+    },
   },
   methods: {
     close () {
diff --git a/website/client/src/components/achievements/rebirthEnabled.vue b/website/client/src/components/achievements/rebirthEnabled.vue
index f0fc338fc8..93344a28b7 100644
--- a/website/client/src/components/achievements/rebirthEnabled.vue
+++ b/website/client/src/components/achievements/rebirthEnabled.vue
@@ -1,41 +1,186 @@
 <template>
   <b-modal
     id="rebirth-enabled"
-    :title="$t('rebirthNew')"
-    size="md"
-    :hide-footer="true"
+    size="sm"
+    :hide-header="true"
   >
-    <div class="modal-body">
-      <div class="col-12">
-        <div class="rebirth_orb"></div>
-        <p>
-          <span>{{ $t('rebirthUnlock') }}</span>
-        </p>
-      </div>
+    <div
+      class="close-x"
+      @click.stop="close()"
+    >
+      <div
+        class="svg-icon svg-close"
+        v-html="icons.close"
+      ></div>
     </div>
-    <div class="modal-footer">
-      <div class="col-12 text-center">
-        <button
-          class="btn btn-primary"
-          @click="close()"
+    <div class="content text-center">
+      <h2
+        v-once
+        class="header"
+      >
+        {{ $t('rebirthUnlockedNewItem') }}
+      </h2>
+      <div class="d-flex align-items-center justify-content-center icon-area">
+        <div
+          v-once
+          class="svg-icon sparkles mirror"
+          v-html="icons.starGroup"
+        ></div>
+        <img
+          class="orb-icon"
+          src="@/assets/images/rebirth-orb.png"
+          alt="Orb of Rebirth"
         >
-          {{ $t('close') }}
-        </button>
+        <div
+          v-once
+          class="svg-icon sparkles"
+          v-html="icons.starGroup"
+        ></div>
       </div>
+      <p
+        v-once
+        class="subtitle"
+      >
+        {{ $t('rebirthUnlockedOrb') }}
+      </p>
+      <p
+        v-once
+        class="description"
+      >
+        {{ $t('rebirthUnlockedDesc') }}
+      </p>
+      <button
+        v-once
+        class="btn btn-primary"
+        @click="close()"
+      >
+        {{ $t('onwards') }}
+      </button>
     </div>
+    <div
+      slot="modal-footer"
+      class="clearfix"
+    ></div>
   </b-modal>
 </template>
 
-<style scoped>
-  .rebirth_orb {
-    margin: 0 auto;
+<style lang="scss">
+  @import '@/assets/scss/colors.scss';
+
+  #rebirth-enabled {
+    .modal-dialog {
+      width: 330px;
+    }
+
+    .modal-content {
+      border-radius: 8px;
+      overflow: hidden;
+      box-shadow: 0 14px 28px 0 rgba($black, 0.24), 0 10px 10px 0 rgba($black, 0.28);
+    }
+
+    .modal-body {
+      padding: 0;
+    }
+
+    .modal-footer {
+      padding: 0;
+      border-top: none;
+    }
+  }
+</style>
+
+<style lang="scss" scoped>
+  @import '@/assets/scss/colors.scss';
+
+  .content {
+    padding: 24px 24px 0;
+  }
+
+  .header {
+    font-size: 1.25rem;
+    line-height: 1.4;
+    color: $purple-200;
+    margin-top: 8px;
+    margin-bottom: 12px;
+  }
+
+  .icon-area {
+    margin-bottom: 12px;
+  }
+
+  .sparkles {
+    width: 40px;
+    height: 64px;
+
+    &.mirror {
+      transform: scaleX(-1);
+    }
+  }
+
+  .close-x {
+    position: absolute;
+    right: 16px;
+    top: 16px;
+    cursor: pointer;
+    z-index: 2;
+
+    &:hover .svg-close {
+      opacity: 0.75;
+    }
+
+    .svg-close {
+      width: 16px;
+      height: 16px;
+      opacity: 0.5;
+      transition: opacity 0.2s ease;
+      pointer-events: none;
+    }
+  }
+
+  .orb-icon {
+    width: 62px;
+    height: 62px;
+    margin: 0 24px;
+    image-rendering: pixelated;
+  }
+
+  .subtitle {
+    font-family: 'Roboto', sans-serif;
+    font-weight: 700;
+    font-style: normal;
+    font-size: 14px;
+    line-height: 24px;
+    letter-spacing: 0;
+    margin-bottom: 12px;
+    color: $gray-50;
+  }
+
+  .description {
+    font-size: 0.875rem;
+    line-height: 1.71;
+    margin-bottom: 24px;
+    color: $gray-100;
+  }
+
+  .btn-primary {
+    margin-bottom: 24px;
   }
 </style>
 
 <script>
+import closeIcon from '@/assets/svg/close.svg?raw';
+import starGroup from '@/assets/svg/star-group.svg?raw';
 import { mapState } from '@/libs/store';
 
 export default {
+  data () {
+    return {
+      icons: Object.freeze({
+        starGroup,
+        close: closeIcon,
+      }),
+    };
+  },
   computed: {
     ...mapState({ user: 'user.data' }),
   },
diff --git a/website/client/src/components/notifications.vue b/website/client/src/components/notifications.vue
index 27d90d502a..74691cf55a 100644
--- a/website/client/src/components/notifications.vue
+++ b/website/client/src/components/notifications.vue
@@ -727,14 +727,14 @@ export default {
             this.$root.$emit('habitica:won-challenge', notification);
             break;
           case 'REBIRTH_ACHIEVEMENT':
-            if (localStorage.getItem('show-rebirth-confirmation') === 'true') {
-              markAsRead = false;
-            } else if (!this.isInitialLoadComplete) {
-              this.pendingRebirthNotification = notification;
-              markAsRead = false;
-            } else {
-              this.playSound('Achievement_Unlocked');
-              this.$root.$emit('bv::show::modal', 'rebirth');
+            if (localStorage.getItem('show-rebirth-confirmation') !== 'true') {
+              if (!this.isInitialLoadComplete) {
+                this.pendingRebirthNotification = notification;
+                markAsRead = false;
+              } else {
+                this.playSound('Achievement_Unlocked');
+                this.$root.$emit('bv::show::modal', 'rebirth');
+              }
             }
             break;
           case 'STREAK_ACHIEVEMENT':
diff --git a/website/common/locales/en/rebirth.json b/website/common/locales/en/rebirth.json
index 906d8b4627..77f42fdd9f 100644
--- a/website/common/locales/en/rebirth.json
+++ b/website/common/locales/en/rebirth.json
@@ -1,8 +1,15 @@
 {
     "rebirthNew": "Rebirth: New Adventure Available!",
     "rebirthUnlock": "You've unlocked Rebirth! This special Market item allows you to begin a new game at level 1 while keeping your tasks, achievements, pets, and more. Use it to breathe new life into Habitica if you feel you've achieved it all, or to experience new features with the fresh eyes of a beginning character!",
-    "rebirthAchievement": "You've begun a new adventure! This is Rebirth <%= number %> for you, and the highest Level you've attained is <%= level %>. To stack this Achievement, begin your next new adventure when you've reached an even higher Level!",
-    "rebirthAchievement100": "You've begun a new adventure! This is Rebirth <%= number %> for you, and the highest Level you've attained is 100 or higher. To stack this Achievement, begin your next new adventure when you've reached at least 100!",
+    "rebirthUnlockedNewItem": "Orb of Rebirth Unlocked",
+    "rebirthUnlockedOrb": "A new adventure is available!",
+    "rebirthUnlockedDesc": "Use the Orb of Rebirth to breathe new life into your Habitica adventure once you feel you've achieved it all! Begin again at level 1 while keeping your tasks, Achievements, and Pets with this special item found in the Market.",
+    "rebirthNewAchievement": "New Achievement",
+    "rebirthNewAdventure": "A new adventure begins now!",
+    "rebirthAchievement": "You've used the Orb of Rebirth <strong><%= number %></strong> time, and your highest level reached is <strong><%= level %></strong>.",
+    "rebirthAchievementPlural": "You've used the Orb of Rebirth <strong><%= number %></strong> times, and your highest level reached is <strong><%= level %></strong>.",
+    "rebirthAchievement100": "You've used the Orb of Rebirth <strong><%= number %></strong> times, and your highest level reached is <strong>100</strong> or higher.",
+    "rebirthStackInfo": "This achievement will stack each time you use the Orb of Rebirth.",
     "rebirthBegan": "Began a New Adventure",
     "rebirthText": "Began <%= rebirths %> New Adventures",
     "rebirthOrb": "Used an Orb of Rebirth to start over after attaining Level <%= level %>.",
diff --git a/website/common/script/ops/rebirth.js b/website/common/script/ops/rebirth.js
index c3064505e6..a726748e23 100644
--- a/website/common/script/ops/rebirth.js
+++ b/website/common/script/ops/rebirth.js
@@ -2,7 +2,6 @@ import each from 'lodash/each';
 import pick from 'lodash/pick';
 import i18n from '../i18n';
 import { capByLevel } from '../statHelpers';
-import { MAX_LEVEL } from '../constants';
 import {
   NotAuthorized,
 } from '../libs/errors';
@@ -103,9 +102,9 @@ export default async function rebirth (user, tasks = [], req = {}, analytics) {
   if (!user.achievements.rebirths) {
     user.achievements.rebirths = 1;
     user.achievements.rebirthLevel = lvl;
-  } else if (lvl > user.achievements.rebirthLevel || lvl === MAX_LEVEL) {
+  } else {
     user.achievements.rebirths += 1;
-    user.achievements.rebirthLevel = lvl;
+    user.achievements.rebirthLevel = Math.max(user.achievements.rebirthLevel || 0, lvl);
   }
 
   if (!notFree) {