mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-07-10 10:54:37 +00:00
Evan Pelle
43d07ca85f
Tighten the package model around the determinism invariant: everything the
engine imports must itself be deterministic.
- Rename core-public -> engine-public (package, dir, `engine-public/*` alias,
all 118 import sites). It is the deterministic public surface the engine
depends on and that client/server also use.
- Move the pure formatting helpers (renderNumber/renderTroops) from shared
into engine-public/format — the engine uses them and they're deterministic.
- Drop the now-empty shared package (and its alias). `shared` was intended for
client/server-shared, engine-forbidden code; there is none yet, so it is
removed and can be re-added when such code appears.
Final graph: engine-public (leaf) <- engine <- {client, server};
client/server also -> engine-public.
Verified: tsc clean; 1364 + 65 tests pass; prod build succeeds; engine-public
is a leaf; engine has no client/server imports. Lockfile regenerated.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
304 lines
14 KiB
TypeScript
304 lines
14 KiB
TypeScript
import { html, LitElement, nothing } from "lit";
|
|
import { customElement, property } from "lit/decorators.js";
|
|
import { Product } from "engine-public/CosmeticSchemas";
|
|
import { translateText } from "../Utils";
|
|
import "./CapIcon";
|
|
import "./PlutoniumIcon";
|
|
|
|
export const DEFAULT_DOLLAR_LABEL_KEY = "territory_patterns.purchase";
|
|
|
|
const PURCHASE_STYLE_ID = "purchase-button-styles";
|
|
if (!document.getElementById(PURCHASE_STYLE_ID)) {
|
|
const style = document.createElement("style");
|
|
style.id = PURCHASE_STYLE_ID;
|
|
style.textContent = `
|
|
@keyframes purchase-streak {
|
|
0% { left: -60%; opacity: 0; }
|
|
10% { opacity: 1; }
|
|
90% { opacity: 1; }
|
|
100% { left: 160%; opacity: 0; }
|
|
}
|
|
.purchase-sparkle-streak {
|
|
pointer-events: none;
|
|
position: absolute;
|
|
top: 0;
|
|
left: -60%;
|
|
width: 40%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent 0%, rgba(134,239,172,0.5) 50%, transparent 100%);
|
|
transform: skewX(-15deg);
|
|
opacity: 0;
|
|
}
|
|
cosmetic-container:hover .purchase-sparkle-streak {
|
|
animation: purchase-streak 0.7s ease-in-out;
|
|
}
|
|
cosmetic-container:hover .purchase-sparkle-btn {
|
|
background: rgb(34,197,94);
|
|
border-color: rgb(74,222,128);
|
|
color: white;
|
|
box-shadow: 0 0 20px rgba(74,222,128,0.6);
|
|
}
|
|
cosmetic-container:hover .purchase-sparkle-btn-hard {
|
|
background: rgb(22,163,74);
|
|
border-color: rgb(74,222,128);
|
|
color: white;
|
|
box-shadow: 0 0 20px rgba(74,222,128,0.6);
|
|
}
|
|
cosmetic-container:hover .purchase-sparkle-btn-soft {
|
|
background: rgb(180,83,9);
|
|
border-color: rgb(217,119,6);
|
|
color: white;
|
|
box-shadow: 0 0 20px rgba(217,119,6,0.6);
|
|
}
|
|
@keyframes purchase-pulse {
|
|
0% { box-shadow: 0 0 15px rgba(74,222,128,0.6), 0 0 30px rgba(34,197,94,0.3); }
|
|
50% { box-shadow: 0 0 25px rgba(74,222,128,0.9), 0 0 50px rgba(34,197,94,0.5); }
|
|
100% { box-shadow: 0 0 15px rgba(74,222,128,0.6), 0 0 30px rgba(34,197,94,0.3); }
|
|
}
|
|
.purchase-sparkle-btn:hover {
|
|
background: rgb(22,163,74) !important;
|
|
border-color: rgb(74,222,128) !important;
|
|
color: white !important;
|
|
animation: purchase-pulse 1.2s ease-in-out infinite !important;
|
|
}
|
|
.purchase-sparkle-btn-hard:hover {
|
|
background: rgb(22,163,74) !important;
|
|
border-color: rgb(74,222,128) !important;
|
|
color: white !important;
|
|
animation: purchase-pulse 1.2s ease-in-out infinite !important;
|
|
}
|
|
@keyframes purchase-pulse-soft {
|
|
0% { box-shadow: 0 0 15px rgba(217,119,6,0.6), 0 0 30px rgba(180,83,9,0.3); }
|
|
50% { box-shadow: 0 0 25px rgba(217,119,6,0.9), 0 0 50px rgba(180,83,9,0.5); }
|
|
100% { box-shadow: 0 0 15px rgba(217,119,6,0.6), 0 0 30px rgba(180,83,9,0.3); }
|
|
}
|
|
.purchase-sparkle-btn-soft:hover {
|
|
background: rgb(180,83,9) !important;
|
|
border-color: rgb(217,119,6) !important;
|
|
color: white !important;
|
|
animation: purchase-pulse-soft 1.2s ease-in-out infinite !important;
|
|
}
|
|
@keyframes purchase-ember-0 {
|
|
0% { transform: translateY(0) translateX(0) scale(1); opacity: 0.9; }
|
|
100% { transform: translateY(-35px) translateX(5px) scale(0.2); opacity: 0; }
|
|
}
|
|
@keyframes purchase-ember-1 {
|
|
0% { transform: translateY(0) translateX(0) scale(1); opacity: 0.9; }
|
|
100% { transform: translateY(-30px) translateX(-6px) scale(0.3); opacity: 0; }
|
|
}
|
|
@keyframes purchase-ember-2 {
|
|
0% { transform: translateY(0) translateX(0) scale(1); opacity: 0.9; }
|
|
100% { transform: translateY(-40px) translateX(3px) scale(0.2); opacity: 0; }
|
|
}
|
|
@keyframes purchase-ember-3 {
|
|
0% { transform: translateY(0) translateX(0) scale(1); opacity: 0.9; }
|
|
100% { transform: translateY(-28px) translateX(-4px) scale(0.3); opacity: 0; }
|
|
}
|
|
.purchase-ember {
|
|
pointer-events: none;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 3px;
|
|
height: 3px;
|
|
border-radius: 50%;
|
|
background: rgba(74,222,128,0.9);
|
|
box-shadow: 0 0 4px rgba(74,222,128,0.8);
|
|
opacity: 0;
|
|
display: none;
|
|
}
|
|
.purchase-ember-0 { left: 20%; animation: purchase-ember-0 1.2s ease-out infinite; }
|
|
.purchase-ember-1 { left: 40%; animation: purchase-ember-1 1.5s ease-out infinite 0.25s; }
|
|
.purchase-ember-2 { left: 60%; animation: purchase-ember-2 1.3s ease-out infinite 0.5s; }
|
|
.purchase-ember-3 { left: 80%; animation: purchase-ember-3 1.6s ease-out infinite 0.15s; }
|
|
cosmetic-container:hover .purchase-ember {
|
|
display: block;
|
|
}
|
|
@keyframes purchase-burst-a { 0% { transform: translateY(0) translateX(0) scale(1.2); opacity:1; } 100% { transform: translateY(-70px) translateX(14px) scale(0); opacity:0; } }
|
|
@keyframes purchase-burst-b { 0% { transform: translateY(0) translateX(0) scale(1.2); opacity:1; } 100% { transform: translateY(-60px) translateX(-12px) scale(0); opacity:0; } }
|
|
@keyframes purchase-burst-c { 0% { transform: translateY(0) translateX(0) scale(1.2); opacity:1; } 100% { transform: translateY(-80px) translateX(8px) scale(0); opacity:0; } }
|
|
@keyframes purchase-burst-d { 0% { transform: translateY(0) translateX(0) scale(1.2); opacity:1; } 100% { transform: translateY(-55px) translateX(-16px) scale(0); opacity:0; } }
|
|
@keyframes purchase-burst-e { 0% { transform: translateY(0) translateX(0) scale(1.2); opacity:1; } 100% { transform: translateY(-75px) translateX(18px) scale(0); opacity:0; } }
|
|
@keyframes purchase-burst-f { 0% { transform: translateY(0) translateX(0) scale(1.2); opacity:1; } 100% { transform: translateY(-65px) translateX(-6px) scale(0); opacity:0; } }
|
|
.purchase-burst {
|
|
pointer-events: none;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 4px;
|
|
height: 4px;
|
|
border-radius: 50%;
|
|
background: rgba(74,222,128,1);
|
|
box-shadow: 0 0 6px rgba(74,222,128,0.9), 0 0 2px rgba(255,255,255,0.5);
|
|
opacity: 0;
|
|
display: none;
|
|
}
|
|
.purchase-burst-0 { left: 3%; animation: purchase-burst-a 0.9s ease-out infinite 0.00s; }
|
|
.purchase-burst-1 { left: 8%; animation: purchase-burst-d 1.1s ease-out infinite 0.73s; }
|
|
.purchase-burst-2 { left: 12%; animation: purchase-burst-c 0.95s ease-out infinite 0.41s; }
|
|
.purchase-burst-3 { left: 16%; animation: purchase-burst-f 1.05s ease-out infinite 0.17s; }
|
|
.purchase-burst-4 { left: 20%; animation: purchase-burst-b 0.85s ease-out infinite 0.89s; }
|
|
.purchase-burst-5 { left: 24%; animation: purchase-burst-e 1.0s ease-out infinite 0.53s; }
|
|
.purchase-burst-6 { left: 28%; animation: purchase-burst-a 1.1s ease-out infinite 0.29s; }
|
|
.purchase-burst-7 { left: 32%; animation: purchase-burst-c 0.9s ease-out infinite 0.97s; }
|
|
.purchase-burst-8 { left: 36%; animation: purchase-burst-f 1.05s ease-out infinite 0.61s; }
|
|
.purchase-burst-9 { left: 40%; animation: purchase-burst-d 0.95s ease-out infinite 0.07s; }
|
|
.purchase-burst-10 { left: 44%; animation: purchase-burst-b 1.0s ease-out infinite 0.83s; }
|
|
.purchase-burst-11 { left: 48%; animation: purchase-burst-e 0.85s ease-out infinite 0.37s; }
|
|
.purchase-burst-12 { left: 52%; animation: purchase-burst-a 1.1s ease-out infinite 0.67s; }
|
|
.purchase-burst-13 { left: 56%; animation: purchase-burst-f 0.9s ease-out infinite 0.11s; }
|
|
.purchase-burst-14 { left: 60%; animation: purchase-burst-c 1.05s ease-out infinite 0.79s; }
|
|
.purchase-burst-15 { left: 64%; animation: purchase-burst-d 0.95s ease-out infinite 0.47s; }
|
|
.purchase-burst-16 { left: 68%; animation: purchase-burst-b 1.0s ease-out infinite 0.23s; }
|
|
.purchase-burst-17 { left: 72%; animation: purchase-burst-e 0.85s ease-out infinite 1.03s; }
|
|
.purchase-burst-18 { left: 76%; animation: purchase-burst-a 1.1s ease-out infinite 0.57s; }
|
|
.purchase-burst-19 { left: 80%; animation: purchase-burst-f 0.95s ease-out infinite 0.31s; }
|
|
.purchase-burst-20 { left: 6%; animation: purchase-burst-b 0.92s ease-out infinite 0.15s; }
|
|
.purchase-burst-21 { left: 14%; animation: purchase-burst-e 1.08s ease-out infinite 0.86s; }
|
|
.purchase-burst-22 { left: 22%; animation: purchase-burst-a 0.88s ease-out infinite 0.44s; }
|
|
.purchase-burst-23 { left: 30%; animation: purchase-burst-d 1.02s ease-out infinite 0.71s; }
|
|
.purchase-burst-24 { left: 38%; animation: purchase-burst-f 0.93s ease-out infinite 0.03s; }
|
|
.purchase-burst-25 { left: 46%; animation: purchase-burst-c 1.07s ease-out infinite 0.59s; }
|
|
.purchase-burst-26 { left: 54%; animation: purchase-burst-b 0.87s ease-out infinite 0.92s; }
|
|
.purchase-burst-27 { left: 62%; animation: purchase-burst-e 0.98s ease-out infinite 0.26s; }
|
|
.purchase-burst-28 { left: 70%; animation: purchase-burst-a 1.12s ease-out infinite 0.64s; }
|
|
.purchase-burst-29 { left: 78%; animation: purchase-burst-d 0.91s ease-out infinite 0.38s; }
|
|
.purchase-burst-30 { left: 84%; animation: purchase-burst-c 1.03s ease-out infinite 0.77s; }
|
|
.purchase-burst-31 { left: 88%; animation: purchase-burst-f 0.86s ease-out infinite 0.09s; }
|
|
.purchase-burst-32 { left: 92%; animation: purchase-burst-b 1.06s ease-out infinite 0.52s; }
|
|
.purchase-burst-33 { left: 96%; animation: purchase-burst-e 0.94s ease-out infinite 0.81s; }
|
|
.purchase-burst-34 { left: 10%; animation: purchase-burst-d 0.89s ease-out infinite 0.34s; }
|
|
.purchase-burst-35 { left: 26%; animation: purchase-burst-a 1.04s ease-out infinite 0.96s; }
|
|
.purchase-burst-36 { left: 42%; animation: purchase-burst-f 0.91s ease-out infinite 0.19s; }
|
|
.purchase-burst-37 { left: 58%; animation: purchase-burst-c 1.09s ease-out infinite 0.69s; }
|
|
.purchase-burst-38 { left: 74%; animation: purchase-burst-b 0.87s ease-out infinite 0.46s; }
|
|
.purchase-burst-39 { left: 90%; animation: purchase-burst-e 1.01s ease-out infinite 0.13s; }
|
|
.purchase-btn-wrap:hover .purchase-burst {
|
|
display: block;
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|
|
}
|
|
|
|
@customElement("purchase-button")
|
|
export class PurchaseButton extends LitElement {
|
|
@property({ type: Object })
|
|
product: Product | null = null;
|
|
|
|
@property({ type: Number })
|
|
priceHard: number | null = null;
|
|
|
|
@property({ type: Number })
|
|
priceSoft: number | null = null;
|
|
|
|
@property({ type: String })
|
|
rarity: string = "common";
|
|
|
|
/** Override the dollar-button label key. */
|
|
@property({ type: String })
|
|
dollarLabelKey: string = DEFAULT_DOLLAR_LABEL_KEY;
|
|
|
|
/** Optional suffix appended to the displayed price, e.g. "/mo". Not translated here. */
|
|
@property({ type: String })
|
|
priceSuffix: string = "";
|
|
|
|
@property({ type: Function })
|
|
onPurchaseDollar?: () => void;
|
|
|
|
@property({ type: Function })
|
|
onPurchaseHard?: () => void;
|
|
|
|
@property({ type: Function })
|
|
onPurchaseSoft?: () => void;
|
|
|
|
createRenderRoot() {
|
|
return this;
|
|
}
|
|
|
|
private handleClick(e: Event, handler?: () => void) {
|
|
e.stopPropagation();
|
|
if (!handler) return;
|
|
const container = this.closest("cosmetic-container") as HTMLElement | null;
|
|
if (container && !container.querySelector(".cosmetic-loading-overlay")) {
|
|
const overlay = document.createElement("div");
|
|
overlay.className = "cosmetic-loading-overlay";
|
|
overlay.innerHTML = `<div class="cosmetic-loading-spinner"></div>`;
|
|
container.appendChild(overlay);
|
|
}
|
|
Promise.resolve(handler()).finally(() => {
|
|
container?.querySelector(".cosmetic-loading-overlay")?.remove();
|
|
});
|
|
}
|
|
|
|
private renderDollarButton() {
|
|
return html`
|
|
<button
|
|
class="purchase-sparkle-btn relative overflow-hidden w-full px-4 py-2 bg-green-500/20 text-green-400 border border-green-500/30 rounded-lg text-xs font-bold uppercase tracking-wider cursor-pointer transition-all duration-200
|
|
hover:bg-green-500 hover:border-green-400 hover:text-white hover:shadow-[0_0_20px_rgba(74,222,128,0.6)]"
|
|
@click=${(e: Event) => this.handleClick(e, this.onPurchaseDollar)}
|
|
>
|
|
<span class="purchase-sparkle-streak"></span>
|
|
${translateText(this.dollarLabelKey)}
|
|
<span class="ml-1 text-white/50"
|
|
>(${this.product!.price}${this.priceSuffix})</span
|
|
>
|
|
</button>
|
|
`;
|
|
}
|
|
|
|
private renderHardButton() {
|
|
return html`
|
|
<button
|
|
class="purchase-sparkle-btn-hard relative overflow-hidden w-full px-2 py-1.5 bg-green-500/20 text-green-400 border border-green-500/30 rounded-lg text-base font-bold cursor-pointer transition-all duration-200 flex items-center justify-center gap-2
|
|
hover:bg-green-500 hover:border-green-400 hover:text-white hover:shadow-[0_0_20px_rgba(74,222,128,0.6)]"
|
|
@click=${(e: Event) => this.handleClick(e, this.onPurchaseHard)}
|
|
>
|
|
<plutonium-icon .size=${20} style="margin-top:3px"></plutonium-icon>
|
|
${this.priceHard!.toLocaleString()}
|
|
</button>
|
|
`;
|
|
}
|
|
|
|
private renderSoftButton() {
|
|
return html`
|
|
<button
|
|
class="purchase-sparkle-btn-soft relative overflow-hidden w-full px-2 py-1.5 bg-amber-700/20 text-amber-600 border border-amber-700/30 rounded-lg text-base font-bold cursor-pointer transition-all duration-200 flex items-center justify-center gap-2
|
|
hover:bg-amber-700 hover:border-amber-600 hover:text-white hover:shadow-[0_0_20px_rgba(217,119,6,0.6)]"
|
|
@click=${(e: Event) => this.handleClick(e, this.onPurchaseSoft)}
|
|
>
|
|
<cap-icon .size=${22} style="margin-top:3px"></cap-icon>
|
|
${this.priceSoft!.toLocaleString()}
|
|
</button>
|
|
`;
|
|
}
|
|
|
|
render() {
|
|
const hasDollar = this.product && this.onPurchaseDollar;
|
|
const hasHard = this.priceHard !== null && this.onPurchaseHard;
|
|
const hasSoft = this.priceSoft !== null && this.onPurchaseSoft;
|
|
|
|
if (!hasDollar && !hasHard && !hasSoft) return nothing;
|
|
|
|
return html`
|
|
<div class="no-crazygames w-full mt-2 relative purchase-btn-wrap">
|
|
${this.rarity !== "common"
|
|
? html`<span class="purchase-ember purchase-ember-0"></span>
|
|
<span class="purchase-ember purchase-ember-1"></span>
|
|
<span class="purchase-ember purchase-ember-2"></span>
|
|
<span class="purchase-ember purchase-ember-3"></span>
|
|
${Array.from(
|
|
{ length: 40 },
|
|
(_, i) =>
|
|
html`<span
|
|
class="purchase-burst purchase-burst-${i}"
|
|
></span>`,
|
|
)}`
|
|
: null}
|
|
<div class="flex flex-col gap-1 w-full">
|
|
${hasDollar ? this.renderDollarButton() : null}
|
|
${hasHard ? this.renderHardButton() : null}
|
|
${hasSoft ? this.renderSoftButton() : null}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|