diff --git a/src/components/online/Avatar.tsx b/src/components/online/Avatar.tsx
index 3195690..d70d001 100644
--- a/src/components/online/Avatar.tsx
+++ b/src/components/online/Avatar.tsx
@@ -1,6 +1,7 @@
"use client";
import { avatarEmoji } from "@/lib/online/types";
+import { AvatarArtSvg, hasAvatarArt } from "./avatarArt";
import { cn } from "@/lib/cn";
export function Avatar({
@@ -27,6 +28,14 @@ export function Avatar({
/>
);
}
+ // Custom god/legend medallion art when available; emoji fallback otherwise.
+ if (hasAvatarArt(id)) {
+ return (
+
+
+
+ );
+ }
return (
= {
+ crown: (
+
+ ),
+ trident: (
+ <>
+
+
+
+
+
+ ),
+ bolt: ,
+ sun: (
+ <>
+
+
+
+
+
+ ),
+ eye: (
+ <>
+
+
+
+
+ ),
+ ankh: (
+ <>
+
+
+
+
+ ),
+ lion: (
+ <>
+
+
+
+
+
+
+
+
+ ),
+ eagle: (
+ <>
+
+
+
+ ),
+ owl: (
+ <>
+
+
+
+
+
+
+ ),
+ helmet: (
+ <>
+
+
+
+
+ ),
+ phoenix: (
+ <>
+
+
+ ),
+ laurel: (
+ <>
+
+
+
+
+
+
+
+
+
+ ),
+ star8: (
+
+ ),
+ flame: ,
+ moon: (
+ <>
+
+
+
+ ),
+ dragon: (
+ <>
+
+
+
+ ),
+ wings: (
+ <>
+
+
+
+ ),
+ skull: (
+ <>
+
+
+
+
+
+ ),
+ gem: (
+ <>
+
+
+
+ ),
+ lyre: (
+ <>
+
+
+
+
+
+ ),
+};
+
+/* --------------- pantheon: id → god/legend + palette ----------------- */
+const PANTHEON: [string, AvatarArt][] = [
+ ["a-fox", { nameFa: "آتنا", nameEn: "Athena", c1: "#1f7a6e", c2: "#0c2e2a", ring: "#f4d27a", em: "owl", emColor: "#f6e7b6" }],
+ ["a-lion", { nameFa: "شیردل", nameEn: "Leonidas", c1: "#b5701c", c2: "#3a2207", ring: "#ffd98a", em: "lion", emColor: "#ffe9b0" }],
+ ["a-owl", { nameFa: "هرمس", nameEn: "Hermes", c1: "#2f6fb0", c2: "#0e2240", ring: "#cfe2ff", em: "wings", emColor: "#eaf3ff" }],
+ ["a-cat", { nameFa: "باستت", nameEn: "Bastet", c1: "#1d8f86", c2: "#0a2b29", ring: "#ffd98a", em: "ankh", emColor: "#ffe9b0" }],
+ ["a-tiger", { nameFa: "آرش", nameEn: "Arash", c1: "#a8431f", c2: "#34110a", ring: "#ffb27a", em: "eagle", emColor: "#ffe0c2" }],
+ ["a-panda", { nameFa: "تور", nameEn: "Thor", c1: "#566b86", c2: "#161f2e", ring: "#bcd0ff", em: "bolt", emColor: "#eef4ff" }],
+ ["a-bear", { nameFa: "اودین", nameEn: "Odin", c1: "#475569", c2: "#13151b", ring: "#cbd5e1", em: "helmet", emColor: "#eef2f7" }],
+ ["a-eagle", { nameFa: "هوروس", nameEn: "Horus", c1: "#2f7d7a", c2: "#0b2a2c", ring: "#ffd98a", em: "eagle", emColor: "#ffe9b0" }],
+ ["a-wolf", { nameFa: "فِنریر", nameEn: "Fenrir", c1: "#3b4a63", c2: "#11151f", ring: "#9fb4d6", em: "lion", emColor: "#cfd9ec" }],
+ ["a-shark", { nameFa: "پوزایدون", nameEn: "Poseidon", c1: "#1565a8", c2: "#08203a", ring: "#7fd4ff", em: "trident", emColor: "#e6f6ff" }],
+ ["a-dragon", { nameFa: "اژدها", nameEn: "Drakon", c1: "#157a3e", c2: "#082416", ring: "#9af0b0", em: "dragon", emColor: "#dcffe6" }],
+ ["a-unicorn", { nameFa: "سیمرغ", nameEn: "Simorgh", c1: "#b23a6a", c2: "#34101f", ring: "#ffc6dd", em: "phoenix", emColor: "#ffe3ee" }],
+ ["a-peacock", { nameFa: "هرا", nameEn: "Hera", c1: "#136f86", c2: "#07232b", ring: "#7fe0d6", em: "eye", emColor: "#e6fffb" }],
+ ["a-swan", { nameFa: "آفرودیت", nameEn: "Aphrodite", c1: "#9c5bd6", c2: "#2a1340", ring: "#e9c8ff", em: "wings", emColor: "#f6ecff" }],
+ ["a-tophat", { nameFa: "مرلین", nameEn: "Merlin", c1: "#3b3170", c2: "#140e2c", ring: "#c9b6ff", em: "moon", emColor: "#ece2ff" }],
+ ["a-diamond", { nameFa: "ایشتار", nameEn: "Ishtar", c1: "#1f6fae", c2: "#0a1f3a", ring: "#bfe6ff", em: "star8", emColor: "#eaf6ff" }],
+ ["a-moneybag", { nameFa: "پلوتوس", nameEn: "Plutus", c1: "#b58a16", c2: "#3a2a06", ring: "#ffe28a", em: "gem", emColor: "#fff2c2" }],
+ ["a-trophy", { nameFa: "نیکه", nameEn: "Nike", c1: "#b5901c", c2: "#3a2c07", ring: "#ffe9a0", em: "laurel", emColor: "#fff4c8" }],
+ ["a-robot", { nameFa: "تالوس", nameEn: "Talos", c1: "#4a7c8c", c2: "#11242a", ring: "#a8e0ee", em: "gem", emColor: "#e6fbff" }],
+ ["a-wizard", { nameFa: "زئوس", nameEn: "Zeus", c1: "#9a7b2a", c2: "#2e2208", ring: "#ffe79a", em: "bolt", emColor: "#fff6cf" }],
+ ["a-ninja", { nameFa: "شینوبی", nameEn: "Shinobi", c1: "#2b3340", c2: "#0c0f14", ring: "#8f9bb0", em: "skull", emColor: "#dfe5ee" }],
+ ["a-king", { nameFa: "کوروش", nameEn: "Cyrus", c1: "#9a6b1f", c2: "#2f2008", ring: "#ffd98a", em: "wings", emColor: "#ffefc2" }],
+ ["a-genie", { nameFa: "دیو", nameEn: "Djinn", c1: "#7a2ea8", c2: "#260a3a", ring: "#d6a8ff", em: "flame", emColor: "#f1ddff" }],
+ ["a-crown", { nameFa: "شاهنشاه", nameEn: "Shahanshah", c1: "#b58a16", c2: "#3a2a06", ring: "#ffe28a", em: "crown", emColor: "#fff4c8" }],
+ ["a-gem", { nameFa: "اهورا", nameEn: "Ahura", c1: "#1f8fae", c2: "#082a3a", ring: "#9fe8ff", em: "sun", emColor: "#eafbff" }],
+];
+export const AVATAR_ART: Record = Object.fromEntries(PANTHEON);
+
+export function hasAvatarArt(id: string): boolean {
+ return !!AVATAR_ART[id];
+}
+export function avatarArtName(id: string, locale: "fa" | "en"): string | null {
+ const a = AVATAR_ART[id];
+ return a ? (locale === "fa" ? a.nameFa : a.nameEn) : null;
+}
+
+/** Render a god/legend medallion for the given avatar id (returns null if none). */
+export function AvatarArtSvg({ id, size }: { id: string; size: number }) {
+ const a = AVATAR_ART[id];
+ if (!a) return null;
+ const gid = `avg-${id}`;
+ return (
+
+ );
+}
diff --git a/src/components/screens/ShopScreen.tsx b/src/components/screens/ShopScreen.tsx
index 6b8eab5..c53f081 100644
--- a/src/components/screens/ShopScreen.tsx
+++ b/src/components/screens/ShopScreen.tsx
@@ -5,6 +5,7 @@ import { Check, Coins, Lock, Sparkles, X } from "lucide-react";
import { useEffect, useState } from "react";
import { ScreenHeader, ScreenShell } from "@/components/online/ScreenHeader";
import { Sticker } from "@/components/online/Sticker";
+import { Avatar } from "@/components/online/Avatar";
import { CoinsPill } from "@/components/online/CoinsPill";
import { useSessionStore } from "@/lib/session-store";
import { useI18n } from "@/lib/i18n";
@@ -63,7 +64,9 @@ function Preview({ item, size }: { item: ShopItem; size: number }) {
🏷️
);
- default: // avatar, reactionpack, xp → emoji glyph
+ case "avatar":
+ return ;
+ default: // reactionpack, xp → emoji glyph
return {item.kind === "xp" ? "⚡" : item.preview};
}
}
diff --git a/src/lib/online/mock-service.ts b/src/lib/online/mock-service.ts
index 7070dd7..916ae7b 100644
--- a/src/lib/online/mock-service.ts
+++ b/src/lib/online/mock-service.ts
@@ -24,6 +24,7 @@ import {
OnlineService,
Unsubscribe,
} from "./service";
+import { AVATAR_ART } from "@/components/online/avatarArt";
import {
AVATARS,
AppNotification,
@@ -1022,18 +1023,21 @@ export class MockOnlineService implements OnlineService {
}
async getShopItems(): Promise {
- const avatarItems: ShopItem[] = AVATARS.filter((a) => (a.price ?? 0) > 0).map((a) => ({
- id: a.id,
- kind: "avatar",
- nameFa: "آواتار",
- nameEn: "Avatar",
- price: a.price!,
- preview: a.emoji,
- descFa: "آواتار نمایه شما در بازی و جدول",
- descEn: "Your profile avatar in games & leaderboard",
- reqLevel: a.reqLevel,
- reqRating: a.reqRating,
- }));
+ const avatarItems: ShopItem[] = AVATARS.filter((a) => (a.price ?? 0) > 0).map((a) => {
+ const art = AVATAR_ART[a.id];
+ return {
+ id: a.id,
+ kind: "avatar" as const,
+ nameFa: art?.nameFa ?? "آواتار",
+ nameEn: art?.nameEn ?? "Avatar",
+ price: a.price!,
+ preview: a.emoji,
+ descFa: "آواتار افسانهای نمایه شما در بازی و جدول",
+ descEn: "A legendary profile avatar shown in games & the leaderboard",
+ reqLevel: a.reqLevel,
+ reqRating: a.reqRating,
+ };
+ });
const backItems: ShopItem[] = CARD_BACKS.filter((c) => c.price > 0).map((c) => ({
id: c.id,
kind: "cardback",