mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-06-21 11:40:42 +00:00
revert skin trials (#3293)
## Description: Skin trials has been a failure, very low fill rate and cause a major drop in sales. reverts https://github.com/openfrontio/OpenFrontIO/commit/97d0a05d58e926e3de4ba46d8dd14a04d60d6698 ## 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
This commit is contained in:
Evan
@@ -871,13 +871,6 @@
|
||||
"pattern": {
|
||||
"default": "Default"
|
||||
},
|
||||
"try_me": "Try me!",
|
||||
"trial_remaining": "remaining",
|
||||
"trial_granted": "Skin trial granted!",
|
||||
"trial_cooldown": "Only one trial per 24 hours. Please try again later.",
|
||||
"trial_login_required": "Must be logged in to trial a skin",
|
||||
"reward_countdown": "Reward in {seconds} seconds...",
|
||||
"steam_wishlist_prompt": "Support OpenFront by adding it to your Steam wishlist",
|
||||
"select_skin": "Select Skin",
|
||||
"selected": "selected"
|
||||
},
|
||||
|
||||
@@ -125,31 +125,6 @@ export async function createCheckoutSession(
|
||||
}
|
||||
}
|
||||
|
||||
export async function grantTemporaryFlare(flare: string): Promise<boolean> {
|
||||
try {
|
||||
const response = await fetch(`${getApiBase()}/flares_granted/temporary`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: await getAuthHeader(),
|
||||
},
|
||||
body: JSON.stringify({ flare }),
|
||||
});
|
||||
if (!response.ok) {
|
||||
console.error(
|
||||
"grantTemporaryFlare: request failed",
|
||||
response.status,
|
||||
response.statusText,
|
||||
);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
} catch (e) {
|
||||
console.error("grantTemporaryFlare: request failed", e);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
export function getApiBase() {
|
||||
const domainname = getAudience();
|
||||
|
||||
|
||||
+4
-29
@@ -85,19 +85,14 @@ export async function getCosmeticsHash(): Promise<string | null> {
|
||||
return __cosmeticsHash;
|
||||
}
|
||||
|
||||
// When a number is returned it signifies when the pattern expires.
|
||||
export function patternRelationship(
|
||||
pattern: Pattern,
|
||||
colorPalette: { name: string; isArchived?: boolean } | null,
|
||||
userMeResponse: UserMeResponse | false,
|
||||
affiliateCode: string | null,
|
||||
): "owned" | "purchasable" | "purchasable_no_trial" | "blocked" | number {
|
||||
): "owned" | "purchasable" | "blocked" {
|
||||
const flares =
|
||||
userMeResponse === false ? [] : (userMeResponse.player.flares ?? []);
|
||||
const expirations: Record<string, number> =
|
||||
userMeResponse === false
|
||||
? {}
|
||||
: (userMeResponse.player.flareExpiration ?? {});
|
||||
if (flares.includes("pattern:*")) {
|
||||
return "owned";
|
||||
}
|
||||
@@ -113,14 +108,6 @@ export function patternRelationship(
|
||||
const requiredFlare = `pattern:${pattern.name}:${colorPalette.name}`;
|
||||
|
||||
if (flares.includes(requiredFlare)) {
|
||||
const expiresAt = expirations[requiredFlare];
|
||||
if (expiresAt) {
|
||||
if (expiresAt - Date.now() <= TEMP_FLARE_OFFSET) {
|
||||
// Already expired or about to expire so just show it as purchasable.
|
||||
return "purchasable";
|
||||
}
|
||||
return expiresAt;
|
||||
}
|
||||
return "owned";
|
||||
}
|
||||
|
||||
@@ -139,12 +126,7 @@ export function patternRelationship(
|
||||
return "blocked";
|
||||
}
|
||||
|
||||
// --- Patterns is for sale, and it's the right store to show it on. ---
|
||||
|
||||
if (pattern.name === "custom") {
|
||||
// Don't allow trying a custom pattern.
|
||||
return "purchasable_no_trial";
|
||||
}
|
||||
// Patterns is for sale, and it's the right store to show it on.
|
||||
return "purchasable";
|
||||
}
|
||||
|
||||
@@ -162,16 +144,9 @@ export async function getPlayerCosmeticsRefs(): Promise<PlayerCosmeticRefs> {
|
||||
? `pattern:${pattern.name}`
|
||||
: `pattern:${pattern.name}:${pattern.colorPalette.name}`;
|
||||
const flares = userMe.player.flares ?? [];
|
||||
const expirations = userMe.player.flareExpiration ?? {};
|
||||
const hasWildcard = flares.includes("pattern:*");
|
||||
if (!hasWildcard) {
|
||||
if (!flares.includes(flareName)) {
|
||||
pattern = null;
|
||||
} else if (expirations[flareName]) {
|
||||
if (expirations[flareName]! - Date.now() <= TEMP_FLARE_OFFSET) {
|
||||
pattern = null;
|
||||
}
|
||||
}
|
||||
if (!hasWildcard && !flares.includes(flareName)) {
|
||||
pattern = null;
|
||||
}
|
||||
}
|
||||
if (pattern === null) {
|
||||
|
||||
@@ -182,12 +182,6 @@ declare global {
|
||||
onPlayerReady: (() => void) | null;
|
||||
addUnits: (units: Array<{ type: string }>) => Promise<void>;
|
||||
displayUnits: () => void;
|
||||
// Rewarded video ad methods
|
||||
manuallyCreateRewardUi?: (options: {
|
||||
skipConfirmation?: boolean;
|
||||
watchAdId?: string;
|
||||
closeId?: string;
|
||||
}) => Promise<void> | void;
|
||||
};
|
||||
Bolt: {
|
||||
on: (unitType: string, event: string, callback: () => void) => void;
|
||||
|
||||
@@ -1,179 +0,0 @@
|
||||
let rewardedUnitRegistered = false;
|
||||
let rewardedAdReady = false;
|
||||
|
||||
// Listen for when rewarded ad becomes available
|
||||
if (typeof window !== "undefined") {
|
||||
window.addEventListener("rewardedAdVideoRewardReady", () => {
|
||||
console.log("[RewardedVideoPromo] Rewarded ad is ready");
|
||||
rewardedAdReady = true;
|
||||
});
|
||||
}
|
||||
|
||||
const AD_READY_TIMEOUT_MS = 3000;
|
||||
|
||||
function ensureRewardedUnitRegistered(): Promise<void> {
|
||||
console.log("[ensureRewardedUnitRegistered] Called", {
|
||||
rewardedUnitRegistered,
|
||||
rewardedAdReady,
|
||||
hasSpaAddAds: !!window.ramp?.spaAddAds,
|
||||
});
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
// Check for real SDK (not just stub from index.html)
|
||||
if (!window.ramp?.spaAddAds) {
|
||||
console.log(
|
||||
"[ensureRewardedUnitRegistered] Rejecting: spaAddAds not available",
|
||||
);
|
||||
reject(new Error("Ramp SDK not available"));
|
||||
return;
|
||||
}
|
||||
|
||||
// If already registered and ready, resolve immediately
|
||||
if (rewardedUnitRegistered && rewardedAdReady) {
|
||||
console.log(
|
||||
"[ensureRewardedUnitRegistered] Already registered and ready",
|
||||
);
|
||||
resolve();
|
||||
return;
|
||||
}
|
||||
|
||||
// Register the unit if not already registered
|
||||
if (!rewardedUnitRegistered) {
|
||||
try {
|
||||
window.ramp.spaAddAds([{ type: "rewarded_ad_video", selectorId: "" }]);
|
||||
rewardedUnitRegistered = true;
|
||||
console.log("[RewardedVideoPromo] Rewarded unit registered");
|
||||
} catch (e) {
|
||||
reject(e);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// If ad is already ready, resolve
|
||||
if (rewardedAdReady) {
|
||||
console.log("[ensureRewardedUnitRegistered] Ad already ready");
|
||||
resolve();
|
||||
return;
|
||||
}
|
||||
|
||||
// Wait for the rewardedAdVideoRewardReady event or no-fill event
|
||||
console.log("[ensureRewardedUnitRegistered] Waiting for ad to be ready...");
|
||||
let timeoutId: ReturnType<typeof setTimeout> | null = null;
|
||||
|
||||
const cleanup = () => {
|
||||
if (timeoutId) clearTimeout(timeoutId);
|
||||
window.removeEventListener("rewardedAdVideoRewardReady", onReady);
|
||||
window.removeEventListener("rewardedVideoNoFill", onNoFill);
|
||||
window.removeEventListener("rewardedAdNoFill", onNoFill);
|
||||
window.removeEventListener("pwNoFillEvent", onNoFill);
|
||||
};
|
||||
|
||||
const onReady = () => {
|
||||
console.log("[ensureRewardedUnitRegistered] Ad is now ready");
|
||||
cleanup();
|
||||
resolve();
|
||||
};
|
||||
|
||||
const onNoFill = () => {
|
||||
console.log("[ensureRewardedUnitRegistered] No fill event received");
|
||||
cleanup();
|
||||
reject(new Error("No rewarded ad available"));
|
||||
};
|
||||
|
||||
timeoutId = setTimeout(() => {
|
||||
cleanup();
|
||||
console.log("[ensureRewardedUnitRegistered] Timeout waiting for ad");
|
||||
reject(new Error("Ad timeout"));
|
||||
}, AD_READY_TIMEOUT_MS);
|
||||
|
||||
window.addEventListener("rewardedAdVideoRewardReady", onReady);
|
||||
window.addEventListener("rewardedVideoNoFill", onNoFill);
|
||||
window.addEventListener("rewardedAdNoFill", onNoFill);
|
||||
window.addEventListener("pwNoFillEvent", onNoFill);
|
||||
});
|
||||
}
|
||||
|
||||
export function showRewardedAd(): Promise<void> {
|
||||
console.log("[showRewardedAd] Called", {
|
||||
rewardedUnitRegistered,
|
||||
});
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
console.log("[showRewardedAd] Calling ensureRewardedUnitRegistered...");
|
||||
ensureRewardedUnitRegistered()
|
||||
.then(() => {
|
||||
console.log("[showRewardedAd] ensureRewardedUnitRegistered resolved");
|
||||
if (!window.ramp?.manuallyCreateRewardUi) {
|
||||
reject(new Error("Ramp SDK manuallyCreateRewardUi not available"));
|
||||
return;
|
||||
}
|
||||
|
||||
// Set up event listeners before triggering the ad
|
||||
const cleanup = () => {
|
||||
window.removeEventListener(
|
||||
"rewardedAdRewardGranted",
|
||||
onRewardGranted,
|
||||
);
|
||||
window.removeEventListener("rewardedAdCompleted", onCompleted);
|
||||
window.removeEventListener("rewardedCloseButtonTriggered", onClosed);
|
||||
window.removeEventListener("rejectAdCloseCta", onRejected);
|
||||
// Destroy old unit and reset state so next ad attempt will re-register
|
||||
try {
|
||||
window.ramp?.destroyUnits?.("rewarded_ad_video");
|
||||
} catch (e) {
|
||||
console.error("[showRewardedAd] Failed to destroy unit:", e);
|
||||
}
|
||||
rewardedUnitRegistered = false;
|
||||
rewardedAdReady = false;
|
||||
};
|
||||
|
||||
const onRewardGranted = () => {
|
||||
console.log("[showRewardedAd] Reward granted");
|
||||
cleanup();
|
||||
resolve();
|
||||
};
|
||||
|
||||
const onCompleted = () => {
|
||||
console.log("[showRewardedAd] Ad completed without reward");
|
||||
// Don't resolve here - wait for rewardedAdRewardGranted
|
||||
};
|
||||
|
||||
const onClosed = () => {
|
||||
console.log("[showRewardedAd] User closed ad early");
|
||||
cleanup();
|
||||
reject(new Error("User closed ad early"));
|
||||
};
|
||||
|
||||
const onRejected = () => {
|
||||
console.log("[showRewardedAd] User rejected ad");
|
||||
cleanup();
|
||||
reject(new Error("User rejected ad"));
|
||||
};
|
||||
|
||||
window.addEventListener("rewardedAdRewardGranted", onRewardGranted);
|
||||
window.addEventListener("rewardedAdCompleted", onCompleted);
|
||||
window.addEventListener("rewardedCloseButtonTriggered", onClosed);
|
||||
window.addEventListener("rejectAdCloseCta", onRejected);
|
||||
|
||||
// Trigger the ad
|
||||
const result = window.ramp.manuallyCreateRewardUi({
|
||||
skipConfirmation: true,
|
||||
});
|
||||
|
||||
// If it returns a promise that rejects, handle that too
|
||||
if (result && typeof result.then === "function") {
|
||||
result.catch((error: unknown) => {
|
||||
cleanup();
|
||||
reject(error);
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(
|
||||
"[showRewardedAd] ensureRewardedUnitRegistered rejected:",
|
||||
err,
|
||||
);
|
||||
reject(err);
|
||||
});
|
||||
});
|
||||
}
|
||||
@@ -15,7 +15,6 @@ import {
|
||||
getPlayerCosmetics,
|
||||
handlePurchase,
|
||||
patternRelationship,
|
||||
TEMP_FLARE_OFFSET,
|
||||
} from "./Cosmetics";
|
||||
import { translateText } from "./Utils";
|
||||
|
||||
@@ -124,7 +123,7 @@ export class TerritoryPatternsModal extends BaseModal {
|
||||
? [...(pattern.colorPalettes ?? []), null]
|
||||
: [null];
|
||||
for (const colorPalette of colorPalettes) {
|
||||
let rel: string | number = "owned";
|
||||
let rel = "owned";
|
||||
if (pattern) {
|
||||
rel = patternRelationship(
|
||||
pattern,
|
||||
@@ -136,9 +135,8 @@ export class TerritoryPatternsModal extends BaseModal {
|
||||
if (rel === "blocked") {
|
||||
continue;
|
||||
}
|
||||
const isTrial = typeof rel === "number";
|
||||
if (this.showOnlyOwned) {
|
||||
if (rel !== "owned" && !isTrial) continue;
|
||||
if (rel !== "owned") continue;
|
||||
} else {
|
||||
// Store mode: hide owned items
|
||||
if (rel === "owned") continue;
|
||||
@@ -158,20 +156,7 @@ export class TerritoryPatternsModal extends BaseModal {
|
||||
.colorPalette=${this.cosmetics?.colorPalettes?.[
|
||||
colorPalette?.name ?? ""
|
||||
] ?? null}
|
||||
.requiresPurchase=${rel === "purchasable" ||
|
||||
rel === "purchasable_no_trial"}
|
||||
.allowTrial=${rel === "purchasable"}
|
||||
.hasLinkedAccount=${hasLinkedAccount(this.userMeResponse)}
|
||||
.trialCooldown=${this.userMeResponse !== false &&
|
||||
this.userMeResponse.player.tempFlaresCooldown}
|
||||
.trialTimeRemaining=${isTrial
|
||||
? Math.max(
|
||||
0,
|
||||
Math.floor(
|
||||
((rel as number) - TEMP_FLARE_OFFSET - Date.now()) / 1000,
|
||||
),
|
||||
)
|
||||
: 0}
|
||||
.requiresPurchase=${rel === "purchasable"}
|
||||
.selected=${isSelected}
|
||||
.onSelect=${(p: PlayerPattern | null) => this.selectPattern(p)}
|
||||
.onPurchase=${(p: Pattern, colorPalette: ColorPalette | null) =>
|
||||
|
||||
@@ -1,17 +1,14 @@
|
||||
import { Colord } from "colord";
|
||||
import { base64url } from "jose";
|
||||
import { html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators.js";
|
||||
import { customElement, property } from "lit/decorators.js";
|
||||
import {
|
||||
ColorPalette,
|
||||
DefaultPattern,
|
||||
Pattern,
|
||||
} from "../../core/CosmeticSchemas";
|
||||
import { UserSettings } from "../../core/game/UserSettings";
|
||||
import { PatternDecoder } from "../../core/PatternDecoder";
|
||||
import { PlayerPattern } from "../../core/Schemas";
|
||||
import { grantTemporaryFlare } from "../Api";
|
||||
import { showRewardedAd } from "../RewardedVideoPromo";
|
||||
import { translateText } from "../Utils";
|
||||
|
||||
export const BUTTON_WIDTH = 150;
|
||||
@@ -29,64 +26,16 @@ export class PatternButton extends LitElement {
|
||||
@property({ type: Boolean })
|
||||
requiresPurchase: boolean = false;
|
||||
|
||||
@property({ type: Number })
|
||||
trialTimeRemaining: number = 0;
|
||||
|
||||
@property({ type: Boolean })
|
||||
allowTrial: boolean = true;
|
||||
|
||||
@property({ type: Boolean })
|
||||
trialCooldown: boolean = false;
|
||||
|
||||
@property({ type: Boolean })
|
||||
hasLinkedAccount: boolean = false;
|
||||
|
||||
@property({ type: Function })
|
||||
onSelect?: (pattern: PlayerPattern | null) => void;
|
||||
|
||||
@property({ type: Function })
|
||||
onPurchase?: (pattern: Pattern, colorPalette: ColorPalette | null) => void;
|
||||
|
||||
private _countdownInterval: ReturnType<typeof setInterval> | null = null;
|
||||
|
||||
@state()
|
||||
private _adLoading: boolean = false;
|
||||
|
||||
createRenderRoot() {
|
||||
return this;
|
||||
}
|
||||
|
||||
updated(changedProperties: Map<string, unknown>) {
|
||||
if (changedProperties.has("trialTimeRemaining")) {
|
||||
this.setupCountdown();
|
||||
}
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
super.disconnectedCallback();
|
||||
this.clearCountdown();
|
||||
}
|
||||
|
||||
private setupCountdown() {
|
||||
this.clearCountdown();
|
||||
if (this.trialTimeRemaining > 0) {
|
||||
this._countdownInterval = setInterval(() => {
|
||||
this.trialTimeRemaining--;
|
||||
if (this.trialTimeRemaining <= 0) {
|
||||
this.trialTimeRemaining = 0;
|
||||
this.clearCountdown();
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
|
||||
private clearCountdown() {
|
||||
if (this._countdownInterval !== null) {
|
||||
clearInterval(this._countdownInterval);
|
||||
this._countdownInterval = null;
|
||||
}
|
||||
}
|
||||
|
||||
private translateCosmetic(prefix: string, patternName: string): string {
|
||||
const translation = translateText(`${prefix}.${patternName}`);
|
||||
if (translation.startsWith(prefix)) {
|
||||
@@ -111,104 +60,6 @@ export class PatternButton extends LitElement {
|
||||
} satisfies PlayerPattern);
|
||||
}
|
||||
|
||||
private async grantTrial() {
|
||||
const flare =
|
||||
this.colorPalette?.name === undefined
|
||||
? `pattern:${this.pattern!.name}`
|
||||
: `pattern:${this.pattern!.name}:${this.colorPalette.name}`;
|
||||
await grantTemporaryFlare(flare);
|
||||
new UserSettings().setSelectedPatternName(flare);
|
||||
alert(translateText("territory_patterns.trial_granted"));
|
||||
window.location.reload();
|
||||
}
|
||||
|
||||
private showSteamModal(): Promise<void> {
|
||||
return new Promise((resolve) => {
|
||||
const overlay = document.createElement("div");
|
||||
overlay.className =
|
||||
"fixed inset-0 bg-black/80 flex items-center justify-center z-[9999]";
|
||||
|
||||
let secondsLeft = 10;
|
||||
const updateContent = () => {
|
||||
overlay.innerHTML = `
|
||||
<div class="bg-slate-900 border border-white/20 rounded-xl p-8 max-w-md text-center">
|
||||
<h2 class="text-2xl font-bold text-white mb-4">Wishlist on Steam!</h2>
|
||||
<p class="text-white/70 mb-6">${translateText("territory_patterns.steam_wishlist_prompt")}</p>
|
||||
<a
|
||||
href="https://store.steampowered.com/app/3560670"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="inline-block px-6 py-3 bg-[#1b2838] hover:bg-[#2a475e] text-white font-bold rounded-lg mb-6 transition-colors"
|
||||
>
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="w-6 h-6" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M11.979 0C5.678 0 .511 4.86.022 11.037l6.432 2.658a3.387 3.387 0 0 1 1.912-.59c.064 0 .128.003.191.006l2.866-4.158v-.058c0-2.495 2.03-4.524 4.524-4.524 2.494 0 4.524 2.031 4.524 4.527s-2.03 4.525-4.524 4.525h-.105l-4.091 2.921c0 .054.003.108.003.163 0 1.871-1.523 3.393-3.394 3.393-1.646 0-3.02-1.179-3.33-2.74L.453 15.406C1.727 20.279 6.228 24 11.979 24 18.627 24 24 18.627 24 12S18.627 0 11.979 0zM7.54 18.21l-1.473-.61c.262.543.714.999 1.314 1.25 1.297.539 2.793-.076 3.332-1.375.263-.63.264-1.319.005-1.949s-.75-1.121-1.377-1.383c-.624-.26-1.29-.249-1.878-.03l1.523.63c.956.4 1.409 1.5 1.009 2.455-.397.957-1.497 1.41-2.454 1.012zm11.415-9.303a3.015 3.015 0 0 0-3.015-3.015 3.015 3.015 0 1 0 3.015 3.015zm-5.273-.005c0-1.248 1.013-2.26 2.262-2.26a2.26 2.26 0 1 1 0 4.52 2.261 2.261 0 0 1-2.262-2.26z"/>
|
||||
</svg>
|
||||
Wishlist on Steam
|
||||
</span>
|
||||
</a>
|
||||
<div class="text-white/50 text-sm">
|
||||
${translateText("territory_patterns.reward_countdown", { seconds: secondsLeft.toString() })}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
|
||||
updateContent();
|
||||
document.body.appendChild(overlay);
|
||||
|
||||
const interval = setInterval(() => {
|
||||
secondsLeft--;
|
||||
if (secondsLeft <= 0) {
|
||||
clearInterval(interval);
|
||||
overlay.remove();
|
||||
resolve();
|
||||
} else {
|
||||
updateContent();
|
||||
}
|
||||
}, 1000);
|
||||
});
|
||||
}
|
||||
|
||||
private async handleTryMe(e: Event) {
|
||||
e.stopPropagation();
|
||||
if (this.pattern === null || this._adLoading) return;
|
||||
|
||||
if (!this.hasLinkedAccount) {
|
||||
alert(translateText("territory_patterns.trial_login_required"));
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.trialCooldown) {
|
||||
alert(translateText("territory_patterns.trial_cooldown"));
|
||||
return;
|
||||
}
|
||||
|
||||
console.log("[PatternButton] handleTryMe called");
|
||||
this._adLoading = true;
|
||||
|
||||
try {
|
||||
console.log("[PatternButton] Calling showRewardedAd...");
|
||||
await showRewardedAd();
|
||||
console.log("[PatternButton] showRewardedAd resolved");
|
||||
await this.grantTrial();
|
||||
} catch (error) {
|
||||
console.error("[PatternButton] Rewarded ad failed:", error);
|
||||
// Show Steam wishlist modal with countdown
|
||||
await this.showSteamModal();
|
||||
await this.grantTrial();
|
||||
} finally {
|
||||
this._adLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
private formatTimeRemaining(seconds: number): string {
|
||||
const m = Math.floor(seconds / 60);
|
||||
const s = seconds % 60;
|
||||
if (m > 0) return `${m}m ${s}s`;
|
||||
return `${s}s`;
|
||||
}
|
||||
|
||||
private handlePurchase(e: Event) {
|
||||
e.stopPropagation();
|
||||
if (this.pattern?.product) {
|
||||
@@ -286,52 +137,9 @@ export class PatternButton extends LitElement {
|
||||
</div>
|
||||
</button>
|
||||
|
||||
${(this.requiresPurchase || this.trialTimeRemaining > 0) &&
|
||||
this.pattern?.product
|
||||
${this.requiresPurchase && this.pattern?.product
|
||||
? html`
|
||||
<div class="w-full mt-2 flex flex-col gap-2">
|
||||
${this.trialTimeRemaining > 0
|
||||
? html`
|
||||
<div
|
||||
class="w-full px-4 py-2 bg-yellow-500/20 text-yellow-400 border border-yellow-500/30 rounded-lg text-xs font-bold uppercase tracking-wider text-center"
|
||||
>
|
||||
${this.formatTimeRemaining(this.trialTimeRemaining)}
|
||||
${translateText("territory_patterns.trial_remaining")}
|
||||
</div>
|
||||
`
|
||||
: this.allowTrial
|
||||
? html`
|
||||
<button
|
||||
class="w-full px-4 py-2 bg-blue-500/20 text-blue-400 border border-blue-500/30 rounded-lg text-xs font-bold uppercase tracking-wider cursor-pointer transition-all duration-200
|
||||
hover:bg-blue-500/30 hover:shadow-[0_0_15px_rgba(59,130,246,0.2)] flex items-center justify-center gap-2"
|
||||
@click=${this.handleTryMe}
|
||||
?disabled=${this._adLoading}
|
||||
>
|
||||
${this._adLoading
|
||||
? html`<svg
|
||||
class="animate-spin h-4 w-4"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle
|
||||
class="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
stroke-width="4"
|
||||
></circle>
|
||||
<path
|
||||
class="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
></path>
|
||||
</svg>`
|
||||
: translateText("territory_patterns.try_me")}
|
||||
</button>
|
||||
`
|
||||
: null}
|
||||
<div class="w-full mt-2">
|
||||
<button
|
||||
class="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/30 hover:shadow-[0_0_15px_rgba(74,222,128,0.2)]"
|
||||
|
||||
@@ -204,7 +204,6 @@ export class WinModal extends LitElement implements Layer {
|
||||
.pattern=${pattern}
|
||||
.colorPalette=${colorPalette}
|
||||
.requiresPurchase=${true}
|
||||
.allowTrial=${false}
|
||||
.onSelect=${(p: Pattern | null) => {}}
|
||||
.onPurchase=${(p: Pattern, colorPalette: ColorPalette | null) =>
|
||||
handlePurchase(p, colorPalette)}
|
||||
|
||||
@@ -56,8 +56,6 @@ export const UserMeResponseSchema = z.object({
|
||||
publicId: z.string(),
|
||||
roles: z.string().array().optional(),
|
||||
flares: z.string().array().optional(),
|
||||
flareExpiration: z.record(z.string(), z.number()).optional(),
|
||||
tempFlaresCooldown: z.boolean(),
|
||||
achievements: z
|
||||
.array(
|
||||
z.object({
|
||||
|
||||
Reference in New Issue
Block a user