Awatarlar, statuslar we presence

1) UX-daky awataryň we statusyň roly

• tanalmagy üpjün edýär (sanawlarda, söhbetdeşliklerde, tablisalarda);
• barlygy barada derrew seslenme berýär (online/offline);
• interfeýsiň janly duýgusyny döredýär (esasanam real-time oýunlarynda, PvP, söhbetdeşliklerde);
• oýunçylaryň arasyndaky özara gatnaşyklara bolan ynamy we gatnaşygy artdyrýar.

2) Tipologiýa

3) Ölçegleri we görnüşi

32 px - iň pes ululyk (sanawlar, tablisalar, söhbetdeşlikler).
40-48 px - profiller, kartoçkalar, nawigasiýa paneli.
64-96 px - uly profil bloklary, akym otaglary.
Görnüşi: tegelek - standart, inedördül - markalar/operatorlar üçin.
Radius: tegelek üçin '50%' ýa-da ýumşak inedördül üçin '8-12 px'.

4) Ýüklemek we fallback

Goldanýan formatlar: JPEG, PNG, WebP, SVG (2-3 MB çenli).
Serwerde gaýtadan işlemek we optimizasiýa (mysal üçin 128, 256, 512 px).
Ýok bolsa - avataryň baş harpy: adyň ilkinji harplary, palitradan fon.
Ulanyjy nyşany bilen → placeholder ýükleneninde ýalňyşlyk bar.

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

5) Reňk palitralary we fon

Adyň heşi boýunça fon awtogenerasiýasy: durnukly, ýöne özboluşly reňk.
AA ≥ fon bilen baş harplaryň arasyndaky tapawut.
Garaňky tema üçin - 15-20% garaňkylyk.
Tötänleýin "zäherli" birleşmelerden gaça duruň; palitrany çäklendiriň (6-10 tonna).

6) Presence-görkezme

6. 1 Esasy statuslar

6. 2 Activity-level presence

• "Oýnaýar"
• "Jedel edýär"
• "Ýaryşda"
• "Arakesmede"

6. 3 Tehniki taýdan ýerine ýetirmek

'heartbeat' her 30 sekuntda WebSocket arkaly iberilýär.
Signal ýok bolsa> 60 sek → 'offline'.
Işjeňleşende (scroll, click, bet) → 'online' statusyny täzelemek.
Ammarda: TTL 120 sek (Redis/Realtime API).

7) Görkeziş nusgalary

7. 1 Ulanyjy sanawynda

Awatar + status sag aşaky burçda (8-10 px).
Tooltip: "Onlaýn "/" Iň soňky giriş 5 minut öň".

7. 2 Söhbetdeşlik

Awatar + nik + mini-presence ('online/offline').
Iň soňky habar we wagt.
socket event 'user _ presence' arkaly sinhronlamak.

7. 3 Liderler tablisasynda

Awatar + at + dereje/dereje.
Hover → kiçi profil (iň soňky işjeňlik, ýurt, ýeňiş).

7. 4 Oýunçynyň kartoçkasynda (PvP/Live)

Uly awatar (64-80 px).
Durmuş ýagdaýy: "Oýunda", "Arakesmede", "Garşydaşyna garaşýar".
Kontur reňki = ýagdaýy ('border-color' var).

8) Elýeterlilik (A11y)

'alt' ady we statusy bilen: "Alex oýunçysynyň awatary - torda".
Statuslar üçin - diňe bir reňk däl, tekstli dublikatlar.
'aria-live =' polite 'status üýtgese.
AA ≥ fon statusy üçin kontrast.
Yşyk çyralaryny ulanma.

9) Ýüklemek we ýalňyşlyk ýagdaýlary

Ýüklemek: çarçuwasyz çal tegelek/skelet.
Error: fallback nyşany + "Avatar ýüklenmedi" maslahaty.
Empty: başlangyç ýa-da ulgam placeholder.

10) Gizlinlik

Ulanyjy presence (on/off) görnüşine gözegçilik etmeli.
Sazlamalar: "Onlaýn ýagdaýy görkez "/" Iň soňky işjeňligi görkez".
Myhman hasaplary üçin presence gizlenýär.
PvP-de diňe "elýeterli/meşgul" görkezilip bilner, takyk wagt ýok.

11) Prezence API-ni durmuşa geçirmek

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

• '/presence/{ userId} 'kanalyna ýazylmak.
• Socket arkaly ping/pong.
• TTL boýunça ýagdaýy awtomatiki täzelemek.

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

12) iGaming aýratynlyklary

Live-oýunlar: "12-nji otagda", "Dilere garaşýar", "Paýlamak dowam edýär" statusy.
Ýaryşlar: "Gatnaşýar" nyşany, gutarýan taýmer.
Kooperatiw PvP: "Garşydaş tapyldy/hereketsiz" işjeňligi.
Sosial lentalar: mini-badge ýaryşy ýa-da VIP derejesi bolan awatar.
Nyrhlar: "Stawka prosesinde" (busy) → "Taýýar" (online).

13) Metrika we çykyş

Presence latency: ≤ 1 sek.
Heartbeat success rate: ≥ 99%.
Müşderide CPU ýüklemek: 1000 täzelenmede 5% -den ≤.
TTL accuracy: Ulanyjylar çykandan soň onlaýn "asylmaýarlar".
Memory leak tests: Abonent däl diňleýjileri arassalamak.

14) Antipatternler

"Alt" ýa-da fon ýok awatar - UI-de "deşik".
Diňe status üçin reňk (tekstsiz/tooltip).
Ýalpyldawuk nokatlar/titremeli halkalar - bizar edýär.
Täzelenmelere çäklendirmäniň ýoklugy → WebSocket-i artykmaç ýüklemek.
"last seen" -iň sekuntda görkezilmegi (gizlinligiň bozulmagy).
Bir torda dürli formatlar/proporsiýalar.

15) Dizaýn-ulgamyň bellikleri (mysal)

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-çek-sanawy

UI

• Ölçegler we radiuslar yzygiderlidir; awatar merkezleşdirildi.
• Kontrast ≥ AA; diňe reňk statuslary ýok.
• Folbek baş harpy görüp okaýarys.
• Gural ýa-da tekst ýagdaýy bar.

Presence

• Status wakadan soň 1 sekunt ≤ täzelenýär.
• Offline → Online täzelenende dogry.
• Bökdençlikler ýok (wakalaryň duplikasiýasy).
• Hereketsizlik göz öňünde tutulýar (idle> 5 min).

Gizlilik

• Prezence görünmek sazlamalary işleýär.
• Last seen minutlara/sagatlara çenli tegeleklenýär.
• Artykmaç açyş ýok (mysal üçin, nyrhlar).

Performans

• Heartbeat durnukly, WebSocket auto-reconnect with backoff.
• 1000 täzelenmede ýat syzmaz.
• TTFF ≤ görkezilende 100 ms.

17) Dizaýn-ulgamdaky resminamalar

Компоненты: `Avatar`, `PresenceDot`, `UserCard`, `ActivityBadge`, `LiveStatus`.
Pattern: "Fallback bilen Avatar", "Nokat ýagdaýy", "Real-time täzelenme presence", "Hususy re regimeim".
Bellikler: ölçegler, reňkler, radiuslar, TTL täzelenmeler, kontrast.
Do/Don 't: tekstsiz reňk (don' t), bir sanawda tegelek we inedördül görnüşler (don 't), durnukly ölçegler we çyzyklar (do).

Gysgaça gysgaça

Awatarlar we statuslar diňe bir bezeg elementleri däl, eýsem ulanyjylar bilen ulgamyň arasyndaky aragatnaşyk dilidir. Yzygiderli reňkler, okalýan gollar, dogry sinhronizasiýa we gizlinlige hormat goýmak "janly" giňişlik duýgusyny emele getirýär, esasanam iGaming-de: arenada, ýaryşda, göni aragatnaşykda ýa-da dostlar bilen jedellerde. Presence interfeýsi dinamiki we adamkärçilikli edýär - ýöne diňe maglumat we dymmak deňagramlylygy bilen.