feat: UNO-style table, social hub, cosmetics, speed mode, store IAB
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>
This commit is contained in:
soroush.asadi
@@ -201,3 +201,115 @@ body {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Game-table UNO animations ──────────────────────────────────────── */
|
||||
|
||||
/* Floating coin for win celebrations */
|
||||
@keyframes coin-rise {
|
||||
0% { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
|
||||
80% { opacity: 0.8; }
|
||||
100% { transform: translateY(-190px) rotate(520deg) scale(0.3); opacity: 0; }
|
||||
}
|
||||
|
||||
/* Playable card glow pulse */
|
||||
@keyframes playable-glow {
|
||||
0%, 100% {
|
||||
box-shadow:
|
||||
0 8px 18px rgba(0,0,0,0.4),
|
||||
0 0 0 2px rgba(212,175,55,0.7),
|
||||
0 0 14px rgba(212,175,55,0.3);
|
||||
}
|
||||
50% {
|
||||
box-shadow:
|
||||
0 10px 22px rgba(0,0,0,0.5),
|
||||
0 0 0 3px rgba(212,175,55,1),
|
||||
0 0 30px rgba(212,175,55,0.65);
|
||||
}
|
||||
}
|
||||
.card-playable {
|
||||
animation: playable-glow 1.15s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Active-player avatar ring pulse */
|
||||
@keyframes player-glow {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 0 3px rgba(212,175,55,0.9), 0 0 18px rgba(212,175,55,0.4);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 0 5px rgba(212,175,55,1), 0 0 40px rgba(212,175,55,0.75);
|
||||
}
|
||||
}
|
||||
.active-player-ring {
|
||||
animation: player-glow 1.4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Turn-indicator "YOUR TURN" pill bounce */
|
||||
@keyframes your-turn-bounce {
|
||||
0%, 100% { transform: translateX(-50%) scale(1); }
|
||||
50% { transform: translateX(-50%) scale(1.06); }
|
||||
}
|
||||
|
||||
/* Confetti fall */
|
||||
@keyframes confetti-fall {
|
||||
0% { transform: translateY(0) rotate(0deg); opacity: 1; }
|
||||
100% { transform: translateY(140px) rotate(400deg); opacity: 0; }
|
||||
}
|
||||
|
||||
/* XP bar fill */
|
||||
@keyframes xp-fill {
|
||||
from { width: 0%; }
|
||||
}
|
||||
.xp-bar-fill {
|
||||
animation: xp-fill 1.1s ease-out forwards;
|
||||
}
|
||||
|
||||
/* ── Accessibility / input ─────────────────────────────────────────── */
|
||||
|
||||
/*
|
||||
Visible focus ring for keyboard / controller / switch navigation. Only shows
|
||||
for keyboard-style focus (:focus-visible), never on mouse/touch tap — so it
|
||||
stays invisible during normal play but makes the app fully navigable without a
|
||||
pointer (game-ui-design: controller-first, no navigation dead-ends).
|
||||
*/
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--gold-400);
|
||||
outline-offset: 2px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
/* Inputs already show a gold ring on focus; avoid doubling it up. */
|
||||
input:focus-visible,
|
||||
textarea:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Minimum comfortable tap target (Apple 44pt / Google 48dp). Pair with a
|
||||
centering grid so a small icon still gets a big, reliable hit area. */
|
||||
.tap {
|
||||
min-width: 44px;
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
/*
|
||||
Honor the OS "reduce motion" setting across the whole app. Decorative game
|
||||
motion (coin rain, confetti, pulsing glows, count-ups) is neutralized to near-
|
||||
instant, and the always-pulsing HUD loops are stopped outright. Functional
|
||||
state changes still happen — they just snap instead of animating.
|
||||
(game-ui-design: motion-sickness-trigger is a high-severity accessibility issue.)
|
||||
*/
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.card-playable,
|
||||
.active-player-ring,
|
||||
.float-suit {
|
||||
animation: none !important;
|
||||
}
|
||||
.float-suit { display: none; }
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
+31
-2
@@ -1,6 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect } from "react";
|
||||
import { MotionConfig } from "framer-motion";
|
||||
import { HomeScreen } from "@/components/HomeScreen";
|
||||
import { GameScreen } from "@/components/screens/GameScreen";
|
||||
import { ProfileScreen } from "@/components/screens/ProfileScreen";
|
||||
@@ -19,12 +20,14 @@ import { DailyRewardModal } from "@/components/online/DailyRewardModal";
|
||||
import { NotificationToaster } from "@/components/online/NotificationToaster";
|
||||
import { ResumeGameBar } from "@/components/online/ResumeGameBar";
|
||||
import { CelebrationOverlay } from "@/components/online/CelebrationOverlay";
|
||||
import { PublicProfileModal } from "@/components/online/PublicProfileModal";
|
||||
import { CapacitorBack } from "@/components/CapacitorBack";
|
||||
import { useSessionStore } from "@/lib/session-store";
|
||||
import { useGameStore } from "@/lib/game-store";
|
||||
import { useOnlineStore } from "@/lib/online-store";
|
||||
import { useNotifStore, pushNotification } from "@/lib/notification-store";
|
||||
import { getService } from "@/lib/online/service";
|
||||
import { captureBazaarRedirect } from "@/lib/storeBilling";
|
||||
import { screenFromHash, useUIStore, type Screen } from "@/lib/ui-store";
|
||||
|
||||
/** Transient screens can't be restored without their state — fall back to home. */
|
||||
@@ -72,6 +75,29 @@ export default function Page() {
|
||||
window.history.replaceState({}, "", window.location.pathname);
|
||||
}
|
||||
|
||||
// Cafe Bazaar in-app purchase return (?purchaseToken=...) → verify + credit.
|
||||
const iab = captureBazaarRedirect();
|
||||
if (iab && iab.productId) {
|
||||
getService()
|
||||
.verifyIab(iab.store, iab.productId, iab.token)
|
||||
.then((v) => {
|
||||
if (v.ok) {
|
||||
if (v.profile) useSessionStore.setState({ profile: v.profile });
|
||||
pushNotification({
|
||||
kind: "system",
|
||||
titleFa: "پرداخت موفق",
|
||||
titleEn: "Payment successful",
|
||||
bodyFa: v.coins ? `${v.coins.toLocaleString()} سکه اضافه شد` : undefined,
|
||||
bodyEn: v.coins ? `${v.coins.toLocaleString()} coins added` : undefined,
|
||||
icon: "💰",
|
||||
});
|
||||
} else {
|
||||
pushNotification({ kind: "system", titleFa: "پرداخت ناموفق بود", titleEn: "Payment failed", icon: "⚠️" });
|
||||
}
|
||||
})
|
||||
.finally(() => window.history.replaceState({}, "", window.location.pathname));
|
||||
}
|
||||
|
||||
useUIStore.getState().initHistory();
|
||||
useNotifStore.getState().init();
|
||||
// surface a daily-reward notification if it's available
|
||||
@@ -137,15 +163,18 @@ export default function Page() {
|
||||
}, [init]);
|
||||
|
||||
return (
|
||||
<>
|
||||
// reducedMotion="user" makes every Framer Motion animation honor the OS
|
||||
// "reduce motion" accessibility setting (coin rain, confetti, count-ups…).
|
||||
<MotionConfig reducedMotion="user">
|
||||
{renderScreen(screen)}
|
||||
<DailyRewardModal />
|
||||
<NotificationToaster />
|
||||
<ResumeGameBar />
|
||||
<CelebrationOverlay />
|
||||
<PublicProfileModal />
|
||||
<CapacitorBack />
|
||||
{loading && null}
|
||||
</>
|
||||
</MotionConfig>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user