mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-06-25 20:54:36 +00:00
Evan
696e727a39
## Description: Adds a currency pack system to the store. Players can purchase packs of in-game currency (Plutonium and Caps) via Stripe checkout. What's new: * Pack schema (PackSchema) — new cosmetic type with currency (hard/soft), amount, and displayName * "Packs" tab in the Store — renders purchasable currency packs using existing CosmeticButton infrastructure * Stripe checkout flow — new createCurrencyPackCheckout API call and handlePackPurchase handler * Currency display in Account modal — shows Plutonium and Caps balances when logged in I* con components — <plutonium-icon> (animated green glow + rotate) and <cap-icon> with new SVG assets * Currency in UserMeResponse — player.currency.hard / player.currency.soft added to the API schema ## 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
44 lines
1.1 KiB
TypeScript
44 lines
1.1 KiB
TypeScript
import { html, LitElement } from "lit";
|
|
import { customElement, property } from "lit/decorators.js";
|
|
import { translateText } from "../Utils";
|
|
import "./CapIcon";
|
|
import "./PlutoniumIcon";
|
|
|
|
@customElement("currency-display")
|
|
export class CurrencyDisplay extends LitElement {
|
|
@property({ type: Number })
|
|
hard: number = 0;
|
|
|
|
@property({ type: Number })
|
|
soft: number = 0;
|
|
|
|
createRenderRoot() {
|
|
return this;
|
|
}
|
|
|
|
render() {
|
|
return html`
|
|
<div class="flex gap-3 justify-center">
|
|
<div
|
|
class="flex items-center gap-1.5"
|
|
title=${translateText("cosmetics.hard")}
|
|
>
|
|
<plutonium-icon .size=${16}></plutonium-icon>
|
|
<span class="text-sm font-bold text-green-400"
|
|
>${this.hard.toLocaleString()}</span
|
|
>
|
|
</div>
|
|
<div
|
|
class="flex items-center gap-1.5"
|
|
title=${translateText("cosmetics.soft")}
|
|
>
|
|
<cap-icon .size=${20} style="margin-top:3px"></cap-icon>
|
|
<span class="text-sm font-bold text-amber-700"
|
|
>${this.soft.toLocaleString()}</span
|
|
>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|