diff --git a/resources/lang/en.json b/resources/lang/en.json index ec2d35af2..aefb0e8c3 100644 --- a/resources/lang/en.json +++ b/resources/lang/en.json @@ -398,7 +398,8 @@ "per_day": "/day", "rare": "Rare", "soft": "Caps", - "uncommon": "Uncommon" + "uncommon": "Uncommon", + "usd_value": "Value: {usd}" }, "difficulty": { "difficulty": "Nation difficulty", diff --git a/src/client/components/CosmeticButton.ts b/src/client/components/CosmeticButton.ts index 8084b3395..8f04104ff 100644 --- a/src/client/components/CosmeticButton.ts +++ b/src/client/components/CosmeticButton.ts @@ -306,6 +306,10 @@ export class CosmeticButton extends LitElement { const isSkin = type === "skin"; const isOwnedSubscription = type === "subscription" && active.relationship === "owned"; + // Equivalent USD value at 20 plutonium = $1.00, shown only for items that + // can't be bought directly with money but can be bought with plutonium. + const usdValue = + !c?.product && priceHard !== undefined ? priceHard / 20 : undefined; // Switching tiers shows "Switch"; a first-time subscribe shows price only. const dollarLabelKey = type === "subscription" && this.userHasSubscription @@ -357,6 +361,7 @@ export class CosmeticButton extends LitElement { .rarity=${c!.rarity} .colorPalette=${active.colorPalette?.name} .showAdFree=${isPurchasable} + .usdValue=${usdValue} >` : nothing} diff --git a/src/client/components/CosmeticInfo.ts b/src/client/components/CosmeticInfo.ts index 88a9aba6d..edd07f5ea 100644 --- a/src/client/components/CosmeticInfo.ts +++ b/src/client/components/CosmeticInfo.ts @@ -25,6 +25,10 @@ export class CosmeticInfo extends LitElement { @property({ type: Boolean }) showAdFree: boolean = false; + /** Equivalent USD value; only set for plutonium-only items. */ + @property({ type: Number }) + usdValue?: number; + createRenderRoot() { return this; } @@ -61,6 +65,13 @@ export class CosmeticInfo extends LitElement { ${translateText("cosmetics.adfree")} ` : nothing} + ${this.usdValue !== undefined + ? html`