From ead260162352049eff997f199d5d1480f39db937 Mon Sep 17 00:00:00 2001
From: Evan <evanpelle@gmail.com>
Date: Tue, 12 May 2026 07:44:44 -0700
Subject: [PATCH] Show bonus amount on currency packs (#3907)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description:

Show bonus amount on currency packs

- Add `bonusAmount` field to `PackSchema` (non-negative int)
- Render a rotated green corner ribbon (`+X FREE!`) on pack tiles when
`bonusAmount > 0`
- Add `cosmetics.free` translation key with `numFree` param

<img width="720" height="359" alt="Screenshot 2026-05-12 at 7 40 12 AM"
src="https://github.com/user-attachments/assets/3dd70fc4-c922-47f4-aee6-055047b58563"
/>

Describe the PR.

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

evan
---
 resources/lang/en.json                  |  3 ++-
 src/client/components/CosmeticButton.ts | 11 ++++++++++-
 src/core/CosmeticSchemas.ts             |  1 +
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/resources/lang/en.json b/resources/lang/en.json
index 26eb27c29..5135cc399 100644
--- a/resources/lang/en.json
+++ b/resources/lang/en.json
@@ -1116,7 +1116,8 @@
     "legendary": "Legendary",
     "adfree": "ad-free for life!",
     "hard": "Plutonium",
-    "soft": "Caps"
+    "soft": "Caps",
+    "free": "+{numFree} BONUS!"
   },
   "flag_input": {
     "title": "Select Flag",
diff --git a/src/client/components/CosmeticButton.ts b/src/client/components/CosmeticButton.ts
index 8799aaef8..33467c0cc 100644
--- a/src/client/components/CosmeticButton.ts
+++ b/src/client/components/CosmeticButton.ts
@@ -79,7 +79,7 @@ export class CosmeticButton extends LitElement {
       const colorClass = isHard ? "text-green-400" : "text-amber-700";
       const currencyKey = isHard ? "cosmetics.hard" : "cosmetics.soft";
       return html`<div
-        class="flex flex-col items-center justify-end h-full w-full text-center gap-1 pb-1"
+        class="relative flex flex-col items-center justify-end h-full w-full text-center gap-1 pb-1"
       >
         ${icon}
         <span class="text-lg font-black ${colorClass}"
@@ -88,6 +88,15 @@ export class CosmeticButton extends LitElement {
         <span class="text-[10px] font-bold text-white/50 uppercase"
           >${translateText(currencyKey)}</span
         >
+        ${pack.bonusAmount > 0
+          ? html`<div
+              class="absolute top-3 -right-8 bg-green-500 text-white text-[10px] font-black px-8 py-0.5 rotate-45 shadow-md uppercase tracking-wide pointer-events-none"
+            >
+              ${translateText("cosmetics.free", {
+                numFree: pack.bonusAmount.toLocaleString(),
+              })}
+            </div>`
+          : nothing}
       </div>`;
     }
 
diff --git a/src/core/CosmeticSchemas.ts b/src/core/CosmeticSchemas.ts
index ae6196294..031a1d9ca 100644
--- a/src/core/CosmeticSchemas.ts
+++ b/src/core/CosmeticSchemas.ts
@@ -83,6 +83,7 @@ export const PackSchema = CosmeticSchema.extend({
   displayName: z.string(),
   currency: z.enum(["hard", "soft"]),
   amount: z.number().int().positive(),
+  bonusAmount: z.number().int().nonnegative(),
 });
 
 // Schema for resources/cosmetics/cosmetics.json