Арена LiveArena Live

Арену я проектировал как кабинет спортивной школы. Хотел проверить две вещи: выдержит ли её дизайн-система совсем другой продукт и как макет переживёт настоящие данные. Беттинг-виджет — самый требовательный вариант: счёт меняется каждую минуту, коэффициенты двигаются, лиги отваливаются, а названия команд бывают любой длины.

I designed Arena as a web app for a sports school. I wanted to test two things: whether its design system holds up in a very different product, and how a layout survives real data. A betting widget is the hardest case: scores change every minute, odds move, leagues drop out and team names come in any length.

Переменные Арены выгружены из Figma: 43 примитива, 27 семантических токенов в двух режимах, 18 размеров и 12 текстовых стилей. Скрипт превращает их в CSS-переменные и JSON в формате W3C. В стилях виджета нет ни одного цвета или отступа вне токенов, а тёмная тема — это второй режим той же коллекции, как и в Figma.

Arena's variables are exported from Figma: 43 primitives, 27 semantic tokens in two modes, 18 sizes and 12 text styles. A script turns them into CSS variables and W3C-format JSON. The widget's styles contain no colour or spacing outside the tokens, and the dark theme is the second mode of the same collection, exactly as in Figma.

• Виды спорта, три дня, фильтр Live / Скоро / Завершены и поиск по командам и лигам.Sports, three days, a Live / Upcoming / Finished filter and search by team or league.
• Лиги с live-матчами поднимаются наверх, внутри — сначала идущие игры.Leagues with live games move to the top, and live games lead inside each league.
• Купон: ординар или экспресс, сумма, возможный выигрыш. Ставки ненастоящие, это демо.Bet slip: single or accumulator, stake, potential return. No real bets, it's a demo.
• Автообновление каждые 30 секунд, пока идут матчи, и пауза, когда вкладка скрыта.Auto-refresh every 30 seconds while games are live, paused when the tab is hidden.

Ради этого всё и делалось. Каждый пункт — то, чего не было видно в статичном макете.

This is why I built it. Each item is something a static mockup didn't show.

Стрелки на каждой кнопкеArrows on every button

API отдаёт линию открытия многодневной давности, и почти все коэффициенты «двигались». Теперь движение считается от того, что пользователь уже видел, и гаснет через 15 секунд.The API's opening line is days old, so almost every price looked like it was moving. Movement is now measured against what the user has already seen, and fades after 15 seconds.

Сегодняшний матч во вчераToday's game listed as yesterday

API делит дни по времени Нью-Йорка: игра НХЛ в 00:00 по Калининграду числилась за прошлую дату. Виджет запрашивает две даты и раскладывает матчи по местному дню.The API splits days by New York time: an NHL game at 00:00 in Kaliningrad belonged to the previous date. The widget requests two dates and sorts games by the local day.

Коэффициенты исчезают в игреOdds vanish in play

У всех live-матчей НХЛ коэффициенты пропали разом. Появилось состояние «приём приостановлен»: замок в той же ячейке, строки не прыгают.Every live NHL game lost its odds at once. I added a suspended state: a lock in the same cell, so rows don't jump.

Тёмные логотипыDark logos

Эмблемы Washington Capitals и Tampa Bay Lightning пропадали на тёмном фоне. Для тёмной темы подгружается отдельная версия логотипа, а без логотипа — кружок с аббревиатурой цвета клуба.Washington Capitals and Tampa Bay Lightning crests disappeared on the dark background. The dark theme loads a dark-background version, and a missing logo becomes a circle with the abbreviation in the club colour.

Американские коэффициентыAmerican odds

+150 и −115 переводятся в привычные 2.50 и 1.87.+150 and −115 are converted to the familiar 2.50 and 1.87.

Пустые виды спортаEmpty sports

В международную паузу футбольных лиг нет. Пустые разделы приглушаются, а не исчезают, чтобы навигация не менялась от дня к дню.During the international break football leagues are empty. Empty sections are dimmed rather than hidden, so navigation doesn't change from day to day.

Кнопка «Состояния» подменяет ответы API, чтобы показать нештатные ситуации на живом виджете: загрузка, медленная сеть, падение части лиг, нет связи, пустой день, длинные названия, нет логотипов, движение линии.

The States switch replaces API responses to show the edge cases on the live widget: loading, slow network, some leagues down, no connection, an empty day, long names, missing logos and a moving line.

Не стирать то, что видноDon't wipe what's on screen

Если обновление не удалось, данные остаются, а индикатор источника становится жёлтым и показывает время последнего успешного обновления.If a refresh fails, the data stays and the source indicator turns amber with the time of the last good update.

Частичная ошибкаPartial failure

Упала одна лига — показываем остальные и называем ту, которой нет. Полная ошибка — экран с повтором и сохранёнными данными.One league down: show the rest and name the missing one. Full failure: a screen with retry and saved data.

Коэффициент изменилсяOdds changed

Кнопка «Сделать ставку» превращается в «Принять изменения». Ставка по старому коэффициенту без согласия пользователя невозможна.Place bet turns into Accept changes. A bet at the old price can't go through without the user's consent.

Сценарии, состояния, интерфейс и правила — мои. Код собран с AI-ассистентом: я ставил задачи, проверял каждый экран в браузере на живых данных и возвращал на доработку то, что ломалось.

The flows, states, UI and rules are mine. The code is AI-assisted: I set the tasks, checked every screen in the browser on live data and sent back whatever broke.