soroush.asadi
cb27a16dc1
Game table & play - UNO-style restyle: suit-aware bolder cards (+xl size), pulsing playable glow, big "YOUR TURN" pill, active-seat ring, trick-win particle burst, round confetti, match coin-rain. - Per-league turn time via turnMsForStake: 15s starter/AI, 10s pro, 7s expert; mirrored server-side in GameRoom.TurnMs. - Speed (Blitz) mode for vs-AI/private: 5s turns, race to 5, ~halved pacing. - Matchmaking waits ~15s (randomized 12-18s) then fills bots; elapsed timer + hint. Rewards / gifts - Richer post-match modal (floating coins, XP bar), celebration overlay reveals the unlocked sticker pack, boosted daily rewards (client+server synced), themed 7-day daily with special day-7. Social - Public profile modal (identity, stats, achievement board) from leaderboard / friends / discover / end-of-game roster; rate-limited add-friend (10/hour). - Social hub: Friends / Discover (player search + suggestions) / Messages inbox. - Profile gender (shown in finder/profile) + social links with public/friends/ hidden visibility, enforced server-side. Cosmetics - Distinct card backs: per-design pattern families (stripes/argyle/grid/dots/ rays/scales/crosshatch/royal/filigree/gem) + luxury motifs (lib/cardBack.ts), consistent on table/shop/profile; +Peacock/Rose-Gold backs. - Purchasable titles (shop Titles section); title shown under the seat on the table and in discover/public profile. - 10 new sticker packs (banter/kol-kol, Persian trends, court cards, moods). - Persistent level+XP bar on Home and every inner screen. Payments - Buy-coins gateway opens in a new tab (no SPA dead-end) + focus refresh. - Store IAB scaffolding: Cafe Bazaar deep-link purchase + redirect-token capture, Myket native-bridge contract, server-side IabService.Verify for both stores, config-driven via Iab__* env. POST /api/coins/iab/verify (JWT). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
88 lines
3.2 KiB
TypeScript
88 lines
3.2 KiB
TypeScript
import { CardBackDef, CardBackPattern } from "./online/types";
|
|
|
|
export interface BackVisual {
|
|
background: string;
|
|
backgroundSize?: string;
|
|
}
|
|
|
|
/**
|
|
* Build the CSS background for a card back. Each pattern family looks visibly
|
|
* different (not just recoloured) — luxury backs use the fancier ones.
|
|
*/
|
|
export function cardBackVisual(
|
|
c1: string,
|
|
c2: string,
|
|
accent: string,
|
|
pattern: CardBackPattern = "stripes"
|
|
): BackVisual {
|
|
const base = `linear-gradient(160deg, ${c1}, ${c2})`;
|
|
switch (pattern) {
|
|
case "argyle":
|
|
return {
|
|
background:
|
|
`repeating-linear-gradient(45deg, ${accent}3a 0 9px, transparent 9px 18px),` +
|
|
`repeating-linear-gradient(-45deg, ${accent}3a 0 9px, transparent 9px 18px), ${base}`,
|
|
};
|
|
case "grid":
|
|
return {
|
|
background:
|
|
`repeating-linear-gradient(0deg, ${accent}38 0 1.5px, transparent 1.5px 11px),` +
|
|
`repeating-linear-gradient(90deg, ${accent}38 0 1.5px, transparent 1.5px 11px), ${base}`,
|
|
};
|
|
case "dots":
|
|
return {
|
|
background: `radial-gradient(${accent}66 1.6px, transparent 2px), ${base}`,
|
|
backgroundSize: "10px 10px, 100% 100%",
|
|
};
|
|
case "rays":
|
|
return {
|
|
background: `repeating-conic-gradient(from 0deg at 50% 50%, ${accent}26 0deg 9deg, transparent 9deg 18deg), ${base}`,
|
|
};
|
|
case "scales":
|
|
return {
|
|
background:
|
|
`radial-gradient(circle at 50% 100%, transparent 5px, ${accent}40 5.5px 6.5px, transparent 7px), ${base}`,
|
|
backgroundSize: "13px 9px, 100% 100%",
|
|
};
|
|
case "crosshatch":
|
|
return {
|
|
background:
|
|
`repeating-linear-gradient(45deg, ${accent}30 0 2px, transparent 2px 7px),` +
|
|
`repeating-linear-gradient(-45deg, ${accent}30 0 2px, transparent 2px 7px), ${base}`,
|
|
};
|
|
case "royal":
|
|
return {
|
|
background:
|
|
`repeating-linear-gradient(0deg, ${accent}22 0 1px, transparent 1px 9px),` +
|
|
`repeating-linear-gradient(90deg, ${accent}22 0 1px, transparent 1px 9px),` +
|
|
`radial-gradient(circle at 50% 42%, ${accent}38, transparent 58%), ${base}`,
|
|
};
|
|
case "filigree":
|
|
return {
|
|
background:
|
|
`repeating-linear-gradient(45deg, ${accent}26 0 4px, transparent 4px 10px),` +
|
|
`radial-gradient(circle at 50% 50%, ${accent}30, transparent 62%), ${base}`,
|
|
};
|
|
case "gem":
|
|
return {
|
|
background:
|
|
`repeating-linear-gradient(60deg, ${accent}33 0 6px, transparent 6px 13px),` +
|
|
`repeating-linear-gradient(-60deg, ${accent}33 0 6px, transparent 6px 13px), ${base}`,
|
|
};
|
|
case "stripes":
|
|
default:
|
|
return { background: `repeating-linear-gradient(45deg, ${accent}44 0 6px, transparent 6px 12px), ${base}` };
|
|
}
|
|
}
|
|
|
|
/** Centered emblem glyph for a back (only the fancy ones carry one). */
|
|
export function cardBackMotif(pattern: CardBackPattern | undefined, motif: string | undefined): string {
|
|
if (motif) return motif;
|
|
return pattern == null || pattern === "stripes" ? "✦" : "";
|
|
}
|
|
|
|
/** Convenience: full visual from a CardBackDef. */
|
|
export function backVisualFromDef(b: CardBackDef): BackVisual {
|
|
return cardBackVisual(b.c1, b.c2, b.accent, b.pattern);
|
|
}
|