Китобхонаи компоненти Gamble Hub UI

1) Ҳадафҳо ва принсипҳо

Чаро: Таҳвили хусусиятро суръат бахшед, UX-и мувофиқро таъмин кунед ва дастгирӣро содда кунед.

• Семантика ва бетарафӣ. Компонент мушкилоти UI-ро бидуни дӯзандагӣ дар мантиқи тиҷорат ҳал мекунад.
• A11y-by-default. Нақшҳо, ҳалқаҳои фокусӣ, хусусиятҳои ария ва контраст ба ҷузъҳо дӯхта мешаванд.
• i18n-аввал. Дарозии хат, форматҳои рақамӣ, RTL - аз қуттӣ ба назар гирифта мешаванд.
• Темизатсия. Мавзӯъҳои сабук/торик ва аксенти бренди тавассути токенҳо.
• Миқёс. API-ҳои ягона, устувории релизҳои хурд, муҳоҷират дар сатҳи асосӣ.

2) Асосҳо: нишонаҳои тарроҳӣ (таҳкурсӣ)

Сохтори намунавӣ (сарчашмаи JSON/YAML → дар тағирёбандаҳои CSS/Android/i

json
{
"color": {
"text": { "default": "{palette. neutral. 900}", "muted": "{palette. neutral. 600}", "inverse": "{palette. neutral. 0}" },
"surface": { "default": "{palette. neutral. 0}", "elevated": "{palette. neutral. 50}", "brand": "{palette. brand. 50}" },
"accent": { "primary": "{palette. brand. 600}", "success": "{palette. green. 600}", "warning": "{palette. amber. 600}", "error": "{palette. red. 600}" }
},
"space": { "xs": 4, "sm": 8, "md": 12, "lg": 16, "xl": 24 },
"radius": { "sm": 8, "md": 12, "lg": 16, "full": 999 },
"elevation": { "0": "none", "1": "0 1px 2px rgba(0,0,0,.08)", "2": "0 4px 12px rgba(0,0,0,.12)" },
"motion": { "fast": "120ms", "base": "200ms" },
"opacity": { "disabled": 0. 45, "muted": 0. 7 }
}

Қоидаҳо: аломатҳои семантикӣ (масалан, 'колор. аксент. муваффақият ') аз ҷузъҳо истифода мешавад; палитра - дохилӣ.

3) Категорияи компонентҳо

1. Базовые (Примитивҳо): Тугма, нишона, типография, пайванд, нишона, тақсимкунанда, аватар.
2. Формы: Вуруд, Гузарвожаи вуруд, Рақамгузорӣ, Интихоб, Комбобокс, Сана, Пикер, Чекбокс, Радио, Гузариш, Слайдер, Textarea, Файли Upload.
3. Навигатсия: App-Bar, Tabs, Breadcrumbs, Pagination, Drawer/Sidebar, Stepper.

4. Фидбек: Ҳушдор, Хатои Inline, Tooltip, Toast, Snackbar, Modal, Popover, Skeleton, Progress, Status

5. Маълумот ва ҷадвалҳо: Ҷадвал, Рӯйхати маълумот, Корт, Аккордеон, Теги, Ҳолати холӣ.

• Бозии сафолӣ (корти бозӣ)
• Провайдери Badge
• Ҷакпот Тикер
• LIVE Badge (ҷадвали зинда/намоиш)
• Filters Lobby (провайдер/жанр/маҳдудият)
• Бонус Баннер/Bonuscard
• Рисолат/Пешрафт
• Мусобиқаи Leaderboard
• Виҷети ҳамён/тавозун
• Корти пардохтӣ
• Шакли амонатӣ/бозхондан
• Рӯйхати KYCS/Badge/KYCC
• Идоракунии масъулиятнок
• Синну сол/Сеанс/Вақтсанҷ/Хавф
• Ҳолати система/нигоҳдории баннер

4) Саҳифаи компонент: Мундариҷаи зарурӣ

Мақсад ва кай истифода бурдан/истифода накардан.
Таркиб ва вариантҳо. Андозаҳо, ҳолатҳо, тағирдиҳандаҳо.
API. Тарафҳо, рӯйдодҳо, ҷойҳо, режими идорашаванда/идоранашаванда.
A11y. Нақшҳо, фокус, пайвастагиҳои ария, минтақаҳои зинда.
i18n. Дарозӣ, форматҳо, имзоҳои маҳаллӣ.
Микрокопия. Матнҳои тавсияшуда (CTA, маслиҳатҳо, хатогиҳо).
Намунаҳои рамзӣ. Ҳолатҳои маъмулӣ, ҳолатҳои канорӣ (хатогиҳо, боркунӣ, холӣ).
Санҷишҳо. matrix/unit/interaction/A11y визуалӣ.
Анти-намунаҳо. Хатогиҳои зуд-зуд истифодашаванда.

5) Компонентҳои асосӣ: Хусусиятҳои зуд

5. Тугмаи 1

Вариантҳо: 'ибтидоӣ | дуввум | арвоҳ | харобиовар' Андозаҳо: 'sm | md | lg'

Ҳолатҳо: муқаррарӣ, hover, фокус намоён, фаъол, боркунӣ, маъюбон

A11y: ҳалқаи намоёни фокус, 'aria-банд' барои 'боркунӣ', 'aria-pressed' барои гузариш

Микрокопия: амал + объект (Тағиротро захира кунед, тафтиш кунед)

Анти-намуна: "Хуб"

5. 2 Вуруд/Майдон

Компонентҳо: нишона, майдон, ёвар, хато, префикс/суффикс

A11y: 'aria-беэътибор', 'aria-describedby', связка 'барои/id'

Намунаи хатогӣ: чӣ нодуруст аст + чӣ гуна ислоҳ кардан ("Рақамро ба формати + 380 ворид кунед"..)

Слотҳо: 'префикс' (нишона), 'суффикс' (тугмаи "нишон додани парол")

5. 3 Интихоб/Combobox

Хусусиятҳо: ҷустуҷӯи рӯйхат, клавиатура, виртуализатсияи рӯйхати дароз

A11y: 'нақш = "combobox"', 'aria-васеъшуда', 'aria-activedescendant'

Натиҷаҳои холӣ: "Ҳеҷ чиз ёфт нашуд. Дархостро тағир диҳед"

5. 4 Модул/Кашолакунанда

Қоидаҳо: фокуси дом, ESC/пӯшиши пӯшида, баргардонидани фокус ба ташаббускор

Истифода: Тасдиқи пардохт, Бекор кардани қоидаҳо, Қадамҳои KYC

5. 5 Toast/Snackbar

Вақт: 2-4 с, бастани ҷараён

Минтақаҳои зинда: 'aria-live = "хушмуомила"' барои муваффақият, '"тасдиқ"' барои хатогиҳо

Намунаҳо: "Пардохт қабул карда шуд. Тавозун нав карда шуд"

5. 6 Ҳолати холӣ

Қолиб: контекст + арзиш + CTA + CTA дуюмдараҷа

Мисол: "Бозиҳои интихобшуда ҳангоми илова кардани бозиҳои аввал дар ин ҷо пайдо мешаванд. [Илова ба мунтахаб]"

6) ҷузъҳои IGaming: мушаххасот ва API

6. 1 Бозии Сафол

Мақсад: корти бозӣ дар даромадгоҳ/каталог.
Таркиб: сарпӯш, провайдер, барчаспҳо (New/Hot/Jackpot/Live), RTP (яклухт), амали зуд.

ts
<GameTile title="Lightning Roulette"
provider="Evolution"
tags={["Live","Popular"]}
isJackpot={true}
onPlay={...}
onFavToggle={...}
/>

Давлатҳо: hover (оғози зуд), скелет, дастнорас (минтақа/вақт).
A11y: alt-text, оғози клавиатура, 'aria-label = "Play Lightning Roulette"'.

6. 2 Филтрҳои Lobby

Мақсад: филтрҳои фойе (жанр, провайдер, маҳдудиятҳо, ноустуворӣ).
Хусусиятҳо: пешнамоишҳои захирашуда, филтрҳои барқароркунӣ, ҳисобкунаки натиҷа.
Микрокопия: "Филтрҳо", "Филтрҳои дубора", "Ёфт: 128".

6. 3 Бонус Баннер/Bonuscard

Вариантҳо: хуш омадед, аз нав бор кунед, cashback, freespins, мусобиқа.
Майдонҳо: сарлавҳа, шартҳо, мӯҳлати эътибор, CTA ("Фаъолсозии бонус").
A11y: истинод ба шартҳо қобили хондан аст, 'aria-describby' → тафсилоти шароит.
Анти-намуна: Маҳдудиятҳои калидиро пинҳон кунед.

6. 4 Ҷакпот Тикер

Мақсад: Маблағи давиши jackpot худкор-тароватбахш.
API: манбаи маълумот, давраи навсозӣ, формати асъор.
A11y: 'reg = "status"', хониши хонандаи экранро вайрон накунед.

6. 5 Мусобиқаи Leaderboard

Таркиб: ҷадвали мавқеъ, нуқтаҳо, тӯҳфаҳо, вақтсанҷ, мавқеи худ.
Хусусият: пагинатсия/виртуализатсия, ислоҳи хатти худ.
A11y: 'th '/' миқёс', сутунҳои хондан, паймоиши тир.

6. 6 Виҷети ҳамён/тавозун

Майдонҳо: тавозун, маблағҳои басташуда, тавозуни бонус, асъор.
Амалҳо: "Top up", "Display", "History".
Амният: пинҳон/нишон додани миқдор, ниқоб дар минтақаҳои умумӣ.

6. 7 Корти пардохтӣ

Соҳаҳо: логотипи провайдер, маҳдудиятҳо, комиссияҳо, ETA, дастрасии минтақавӣ.
Давлатҳо: дастрас нестанд (минтақа/ҳолат), дар ҷараён, огоҳиро маҳдуд мекунад.

Микрокопия: "1. 5% комиссия аз ҷониби провайдер нигоҳ дошта мешавад," "Пардохт - то 15 дақиқа"

6. 8 Пасандоз/шакли бозхонд

Намунаҳо: тасдиқи дохилӣ, маҳдудиятҳои маблағ, қоидаҳои якхела.
A11y: эълон кардани хатогиҳо ('эътимоднок'), табдил додани диққат ба хатои аввал.
Соҳаҳои хизматрасонӣ: "Манбаи маблағ", "Мақсад", агар AML талаб карда шавад.

6. 9 KYCS badge/KYCC heclist

Дар он гуфта мешавад: "Ҳеҷ як асосӣ дароз карда нашудааст интизор шуданро рад кард".
Матнҳо: "Ин 2 дақиқа тӯл мекашад", "Аксҳо бе дурахшон, кунҷҳо ва матн намоёнанд".
CTA: "Тафтиш кунед", дуввум: "Чаро ин муҳим аст? ».

6. 10 Маҳдудиятҳои назоратӣ/масъулиятнок

Мақсад: ҳудуди пасандозҳо/меъёрҳо/вақт, танаффус, канорагирӣ.
А11у/Tone: бетараф, ҳеҷ гуна фишор, бо истинод ба кӯмак.

7) Шакли тарҳ (меъ-)

Бақайдгирӣ/ACC: Stepper + Form + Inline

Депозит: Пардохти Методи Корт + Маблағи вуруд + Лимитҳо

Лобби: Ҷустуҷӯ Бари + Филтрҳои лобби + Бозӣ Grid (iz Game .Tile) + Пагинатсия + Ҳолати холӣ.
Турнир: Мусобиқаи Leaderboard + Mission .Progress + Bonusbanner.
Масъул: Масъулини Gaming .Banner + Маҳдудиятҳои контрол + FAQ-пайванд.

8) Дастрасӣ (A11y)

Фокуси намоён ҳамеша (аз ҷумла дар мавзӯи торик).
Паймоиши клавиатура тавассути ҳамаи унсурҳои интерактивӣ.
'aria-live = "хушмуомила/эътимодбахш"' барои тостҳо/статусҳо.
Муқоисаҳо аз WCAG 2 камтар нестанд. 1 АА.
Матн дар нишонаҳо ягона интиқолдиҳандаи маъно нест.
Усулҳои RTL, санҷиши 320 px ва хондан бо овози баланд.

9) Маҳаллисозӣ ва форматҳо

Ҳама сатрҳои корбар тавассути калидҳои i18n мебошанд.

ui. button. save = Save wallet. deposit. success = Payment accepted. Balance updated.
kyc. photo. hint = Photo without glare, corners and text are visible.
filters. reset = Reset filters

Форматкунии санаҳо/асъорҳо - бо хизматрасониҳои коммуналӣ, на сатрҳо.
Оҳанг бо забонҳо - тавассути харитаи оҳанг (бетараф/дастгирӣ/расмӣ).

10) Иҷро ва сифат

Рӯйхати виртуализатсия (бозиҳо, ҷадвалҳо).
Боркунии танбалии тасвирҳо, паҳн кардани код тавассути саҳифаҳо.
Андозаи бастаҳо: Буҷаи бастаи UI, вобастагии вазнин нест.
Скелет барои дарки суръат, spinners - ҳадди аққал.
Санҷишҳо: воҳид, аксҳои визуалӣ, ҳамкорӣ, A11y, E2E барои ҷараёни интиқодӣ.

11) Версия ва релизҳо

Semver: ячейка - иштибоҳҳо; ноболиғ - вайроннашаванда; асосӣ - бо муҳоҷират.
Эзоҳҳо: нишонаҳо/API/рафтор, пеш аз/баъд аз скриншотҳо.
Амортизатсия: Аломатҳои док, модулҳои рамзӣ ва қоидаҳои линтер.
Китоби ҳикояҳо/Майдонча: намунаҳои зинда, панели дастрасӣ, гузариши RTL.

12) Саҳм гузоштан

RFC оид ба компоненти нав: проблема → опсияҳо → қарори интихобшуда → A11y → i18n → API → хавфҳо.
Рӯйхати назорати PR: докҳо, ҳикояҳо, озмоишҳо, лаҳзаҳои визуалӣ, муқоисаҳо, i18n, торик/RTL.
Таърифи иҷро: компонент + ҳуҷҷатгузорӣ + санҷишҳо + намунаҳои намуна.

13) Маҷмӯи MVP ва харитаи роҳ

• Тугма, вуруд, интихоб, қуттии чек, радио, гузариш, модал, тост, асбоб, пешрафт, скелет, корт, холӣ, ҷадвалҳо, пагоҳирӯзӣ, нонрезаҳо, ҷадвал, Game Wallet.

Dalee: Мусобиқаи Leaderboard, JackpOT Ticker, Mission-Progress, Limits

14) Намунаҳои микрокопӣ (замимаҳои тайёр)

CTA: "Тағиротро захира кунед", "Тафтиш кунед", "Усули пардохтро илова кунед".

Хатогиҳо: "Формати санаи нодуруст. ДД-ро истифода баред. MM. YYYY. ""Файл хеле калон аст (макс. 10 МБ)"

Муваффақият: "Пардохт қабул карда шуд. Тавозун нав карда шуд. , "Иҷро шуд! Ҳуҷҷатҳои тасдиқшуда"

Ҳолати холӣ: "Бо "{дархост}" ҳеҷ чиз ёфт нашуд. Филтрҳоро аз нав барқарор кунед ё дархостро тоза кунед"

15) Анти-намунаҳо

Мантиқи тиҷорат дар ҷузъҳои UI (аз ҳад зиёд истифода мешавад).
Тамаркузи ноаён ё вобастагии маъно танҳо аз ранг.
Сатрҳо ба рамзи компонент дохил карда шудаанд (бе i18n).
Вайрон кардани семантика (тугмаи 'div', рӯйхатҳо бе 'ul/ol/li').
Вариантҳо бе қоидаҳои возеҳ (зарбкунии 'Button' Primarial 'Blue' Big2 ').

16) Рӯйхати санҷишҳо

• Мақсад, вариантҳо, API тавсиф карда шудаанд.
• A11y: нақш, фокус, хусусиятҳои ария, контраст.
• i18n: ҳамаи сатрҳо тарҷума карда мешаванд, забонҳои дароз ва RTL тафтиш карда мешаванд.
• Ҳикоя/Намоиш: Муқаррарӣ, зеркашӣ, хато, холӣ.
• Санҷишҳо: воҳиди + визуалӣ + ҳамкорӣ + A11y.
• Мантиқи тиҷорат нест, танҳо UI/рафтор.

• Нақшаи ҷузъҳо ва фармоиши фокус мавҷуд аст.
• Матнҳои микрокопӣ ва хатогӣ/муваффақият муайян карда шудаанд.
• Андозагирии калид чен карда шудааст (табдили қадам, суръати хатогӣ, вақт ба анҷом).

17) Скелети ҳуҷҷат барои компонент (қолаб)

Ном ва мақсад

Ҳангоми истифода бурдан/истифода накардан

Опсияҳо ва давлатҳо

API (танбаҳо, рӯйдодҳо, ҷойҳо)

Дастрасӣ (нақш, клавиатура, ария, контраст)

i18n (калидҳо, форматҳо, дарозӣ, RTL)

Микрокопия (намунаҳо)

Намунаҳои рамз (маъмулӣ ва канорӣ)

Матритсаи санҷишӣ

Анти-мисолҳо

Ҷамъ

Gamble Hub UI на танҳо маҷмӯи блокҳо, балки интизом аст: токенҳо → ҷузъҳо → намунаҳо → ҳуҷҷатҳо → ченакҳо. Пас аз ин дастур, дастаҳо хусусиятҳоро тезтар мерасонанд, корбарон интерфейси пешгӯишаванда ва дастрасро мегиранд ва миқёси маҳсулот бидуни қарзи визуалӣ. Дар ҳолати зарурӣ, ман саҳифаҳои аввали бандарро аз ҷониби MVP-set бо намунаҳо ва калидҳои i18n ҷамъ мекунам.