Avatarlar, maqomlar va presence

1) UXdagi avatar va maqom roli

• tan olinishini ta’minlaydi (ro’yxatlar, chatlar, jadvallarda);
• mavjudligi to’g "risida tezkor fikr-mulohazalar beradi (online/offline);
• interfeysning jonliligi hissi tug’diradi (ayniqsa real-time o’yinlar, PvP, chatlarda);
• o’yinchilar o’rtasidagi o’zaro munosabatlarga ishonch va jalb etishni oshiradi.

2) Tipologiya

3) O’lchamlari va shakli

32 px - eng kam o’lcham (ro’yxatlar, jadvallar, chatlar).
40-48 px - profillar, kartochkalar, navigatsiya paneli.
64-96 px - profilning katta bloklari, oqim xonalari.
Shakli: dumaloq - standart, kvadrat - brendlar/operatorlar uchun.
Radius:’50%’doira uchun yoki’8-12 px’yumshoq kvadrat uchun.

4) Yuklash va fallback

Qoʻllab-quvvatlanadigan formatlar: JPEG, PNG, WebP, SVG (2-3 MB gacha).
Resayz va server optimizatsiyasi (masalan, 128, 256, 512 px).
Mavjud bo’lmaganda - avatarning bosh harfi: ismning birinchi harflari, palitradagi fon.
Foydalanuvchi piktogrammasi bilan placeholder yozib olinmadi.

html
<img class="avatar" src="/u/123/avatar.jpg" alt="Аватар игрока Alex" onerror="this.src='/assets/avatar-fallback.png'">

5) Rangli palitralar va fon

Xesh nomi bo’yicha fonning avtogeneratsiyasi: barqaror, ammo noyob rang.
Orqa fon va bosh harflar orasidagi AA ≥ kontrast.
Qorong’i mavzu uchun - 15-20% qorayish.
Tasodifiy «zaharli» kombinatsiyalardan qoching; palitrani cheklang (6-10 tonna).

6) Presence-indikatsiya

6. 1. Bazaviy maqomlar

6. 2 Activity-level presence

• «Oʻynaydi»
• «Tikadi»
• «Turnirda»
• «Tanaffusda»

6. 3 Texnik realizatsiya qilish

’heartbeat’ ni har 30 soniyada WebSocket orqali joʻnatish.
Signal boʻlmaganda> 60 sek →’offline’.
Aktiv boʻlganda (scroll, klik, bet) → «online» maqomini yangilash.
Omborxonada: TTL 120 sek (Redis/Realtime API).

7) Aks ettirish patternlari

7. 1 Foydalanuvchilar roʻyxatida

Avatar + maqomi pastki oʻng burchakda (8-10 px).
Tooltip: «Onlayn »/« Oxirgi kirish 5 daqiqa oldin».

7. 2 Chatda

Avatar + nik + mini-presence (’online/offline’).
Oxirgi xabar va vaqt.
Socket event’user _ presence’orqali sinxronlashtirish.

7. 3 Yetakchilar jadvalida

Avatar + ism + daraja/daraja

Hover → mini-profil (oxirgi faoliyat, mamlakat, gʻalaba).

7. 4 Oʻyinchi kartochkasida (PvP/Live)

Katta avatar (64-80 px).
Jonli maqom: «O’yinda», «Pauzada», «Raqibni kutmoqda».
Konturning rangi = holat (’border-color’).

8) Foydalanish imkoniyati (A11y)

’alt’ nomi va maqomi bilan: «Alex o’yinchisining avatari - tarmoqda».
Maqom uchun - matn dublikatlari, nafaqat rangi.
’aria-live =’ polite’maqomi oʻzgarganda.
Fonda maqom uchun AA ≥ kontrast.
Yonayotgan koʻrsatkichlardan foydalanilmasin.

9) Yuklash holatlari va xatolar

Loading: kulrang doira/doirasiz skelet.
Error: fallback + «Avatar yuklanmagan».
Empty: bosh yoki tizim placeholder.

10) Maxfiylik

Foydalanuvchi presence (on/off) koʻrinishini nazorat qilishi kerak.
Moslamalar: «Onlayn holatni koʻrsatish »/« Oxirgi harakatni koʻrsatish».
Mehmon hisoblari uchun presence yashirin.
PvP - da faqat «mavjud/band» ni aniq vaqtsiz koʻrsatish mumkin.

11) Presence APIni amalga oshirish

json
{
"userId": "u123",
"presence": "online",
"activity": "playing",
"lastSeen": "2025-11-03T18:52:00Z"
}

• ’/presence/{ userId}’kanaliga obuna.
• Socket orqali davriy ping/pong.
• TTL holatini avtomatik yangilash.

js socket.on('presence:update', data => {
document.querySelector(`#u${data.userId}.status`).dataset.state = data.presence;
});

12) iGaming xususiyatlari

Live-o’yinlar: «12-xonada», «Dilerni kutmoqda», «Tarqatish davom etmoqda» maqomi.
Turnirlar: «Ishtirok etadi» nishoni, tugash taymeri.
Kooperativ PvP: «Raqib topildi/faol emas».
Ijtimoiy lentalar: mini-badge yoki VIP darajali avatar.
Stavkalar: «Stavka jarayonida» (busy) → «Tayyor» (online).

13) Metrika va spektakl

Presence latency: ≤ 1 sek.
Heartbeat success rate: ≥ 99%.
CPU yuklash: 1000 ta yangilanishda 5% ≤.
TTL accuracy: foydalanuvchilar chiqishdan keyin Internetda osib qoʻyilmaydi.
Memory leak tests: roʻyxatdan chiqarilgan tinglovchilarni tozalash.

14) Antipatternlar

Avatar’alt’yoki fonsiz - UI da «teshik».
Faqat maqom uchun rang (matnsiz/tooltip).
Miltillovchi nuqtalar/pulsatsiyali halqalar - bezovta qiladi.
Yangilanish chegarasi yo’q → WebSocket’ni ortiqcha yuklash.
«last seen» ni soniyagacha aniqlikda koʻrsatish (maxfiylikni buzish).
Bir toʻrdagi turli formatlar/nisbatlar.

15) Dizayn-tizim tokenlari (misol)

json
{
"avatar": {
"sizes": { "xs": 24, "sm": 32, "md": 40, "lg": 64 },
"radius": { "circle": "50%", "square": 8 },
"border": { "width": 2, "color": "var(--bg-elevated)" }
},
"presence": {
"dotSize": 10,
"gap": 2,
"colors": {
"online": "#00C853",
"idle": "#FFD600",
"busy": "#D32F2F",
"offline": "#9E9E9E"
}
},
"motion": {
"updateMs": 150,
"fadeMs": 120
},
"a11y": {
"contrastAA": true,
"textLabel": true
}
}

16) QA-chek-varaq

UI

• O’lchamlari va radiuslari konsistent; avatar markazlashgan.
• Kontrast ≥ AA; sof rang holatlari yoʻq.
• Folbek bosh harfini ko’ramiz va o’qiymiz.
• Tooltip yoki matn holati mavjud.

Presence

• Maqom voqeadan keyin 1 soniya ≤ yangilanadi.
• Offline → Online rekonnektda to’g’ri.
• Hech qanday shov-shuv bo’lmaydi.
• Harakatsizlik hisobga olinadi (idle> 5 min).

Maxfiylik

• Koʻrish moslamalari ishlamoqda.
• Last seen bir daqiqa/soatgacha yaxlitlanadi.
• Aktivlikning ortiqcha yoritilishi yo’q (masalan, stavkalar).

Performance

• Heartbeat barqaror, WebSocket auto-reconnect bilan backoff.
• 1000 ta yangilanishda xotira sizib chiqmaydi.
• TTFF ≤ koʻrsatilganda 100 ms.

17) Dizayn-tizimdagi hujjatlar

Компоненты: `Avatar`, `PresenceDot`, `UserCard`, `ActivityBadge`, `LiveStatus`.
Patternlar: «Fallback bilan avatar», «Nuqta maqomi», «Real-taym yangilash presence», «Shaxsiy rejim».
Tokenlar: o’lchamlari, ranglari, radiuslari, TTL yangilanishlari, kontrast.
Do/Don’t: matnsiz rang (don’t), bitta ro’yxatdagi dumaloq va kvadrat shakllar (don’t), barqaror o’lchamlar va aylanalar (do).

Qisqacha xulosa

Avatarlar va maqomlar shunchaki dekorativ elementlar emas, balki foydalanuvchilar va tizim o’rtasidagi muloqot tilidir. Ketma-ket ranglar, oʻqiladigan imzolar, toʻgʻri sinxronlashtirish va maxfiylikni hurmat qilish iGaming-da, ayniqsa, arenada, turnirda, jonli chatda yoki doʻstlar bilan bahs qilishda muhim boʻlgan «jonli» makon tuygʻusini shakllantiradi. Presence interfeysni dinamik va insoniy qiladi - faqat ma’lumot va sukunat muvozanatida.