Турниры

Первый подход. Расставляем турниры на таймлайне.

Красим официальные рейтинговые турниры ФИДЕ золотым, а просто рейтинговые — серым. Берём пока иконки Чикина для обозначения тайм‑контроля турнира:

Жёлтенький столбик в каждой карточке показывает, сколько людей уже набралось из необходимого количества для проведения турнира. Снизу — список турниров, в которых «я» уже зарегистрировался, и тех, в которых уже сыграл. Турниры, в которых я зарегистрирован, ещё отмечаются моей фоточкой на плашке.

А вот ещё вариант. Пробуем не тянуть карточки на всю длину турнира, а делать стопочки по времени начала:

Не очень понятно, всё‑таки продолжительность турнира важна.

Улучшаем вёрстку и детали в плашках турниров. Превращаем жёлтые столбики в мини‑диаграммки рядом с количеством участников:

Добавляем навигацию для переключения между одиночными играми и турнирами. Турниры, в которых участвую «я», ставим наверх. Придумываем весёлые формы плашек для разных тайм‑контролей:

Переходим к странице турнира. Показываем зарегистрировавшихся участников, параметры вроде ограничения по рейтингу и географии, условия турнира:

Получается скукота, а вроде показывать больше и нечего.

Находим, что у турниров обычно есть какая‑то графика от организаторов. Примеряем её наверху в качестве обложки. Верстаем под ней параметры турнира более весёлой строчкой. Добавляем незаполненную турнирную таблицу. Показываем более крупные фотографии игроков:

Обложки выглядят чаще всего жутко, мы на них не всегда влияем, так что выводить её так крупно — плохая идея. Ещё оказалось, что турниров навылет на сайте сначала не будет, будут только круговые и по швейцарской системе, а значит, такого дерева рисовать не придётся, будет просто подсчёт очков.

Снова всё перевёрстываем: находим обложке скромное место справа, ставим игроков на первый план, добавляем наверх таймлайн турнира. Также по просьбе клиента примеряем чатик:

Рисуем состояние, когда турнир уже идёт. Сверху ставим доски первых столов — это где играют самые крутаны. Остальные пары игроков компактно показываем снизу, причём с последним сделанным ходом, чтобы чувствовалась жизнь:

Турнирная таблица с очками появляется справа под чатиком.

При наведении на любую пару снизу даём подсмотреть за игрой на доске и заодно подсвечиваем игроков в турнирной таблице.

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

На основе интерфейса начала игры, созданного в прошлой итерации, делаем форму создания турнира:

Как и в случае с одиночной игрой, нужно выбрать тайм‑контроль и диапазон рейтинга игроков. Но тут ещё появляются описание, регион, число игроков и время. Внизу ещё рисуем переключалку для создания турниров по приглашению, но сам интерфейс приглашения откладываем на потом.

Идём обсуждать получившиеся макеты с клиентом:

Клиент просит выделить особо важные турниры и подумать, где будут какие‑нибудь фильтры, если турниров станет слишком много.

Чтобы не усложнять расписание, ставим важные турниры отдельным этажом Promoted tournaments сверху. Схематично примеряем фильтры. Начинаем работу над мобильной версией всего:

Показываем, как закрепляется верх при прокрутке расписания турниров:

Рисуем шапку свежесозданного турнира, когда ещё ни один участник не записался:

Возвращаемся к той части страницы, где мы показывали результаты раундов и турнирную таблицу справа. Напомним, что пока на макетах это было так:

Клиент просит расширить турнирную таблицу, добавив подробную информацию об игроках (страну, рейтинг, возраст) и результаты каждого раунда. Ну и в будущем появятся турниры навылет, так что в правой колонке турнирной таблице не выжить.

Переносим турнирную таблицу вниз, отдельным этажом. Чтобы она не уехала слишком уж далеко вниз, решаем не показывать простыню результатов каждого раунда, а ограничиться только текущим. Добавляем переключалку раундов:

Ловко используем в мобильной версии мини‑досочки, которые мы сначала придумали для наведения. Широкие таблицы на мобиле пока просто прокручиваются по горизонтали.

Зелёненькая‑то таблица выглядит бодрее!

Вспоминаем, что у игроков без ФИДЕ‑рейтинга могут быть вообще не загружены фотки. Рисуем кружки с инициалами для неофициальных турниров:

Когда «я» участвую в турнире и вот‑вот начнётся моя партия, придумываем показывать доску с обратным отсчётом, а рядом — краткую информацию об оппоненте:

Информация о других парах и раундах уезжает в переключалку Standings / Rounds ниже (это окажется ошибкой). В турнирной таблице подсвечиваем «меня» и оппонента.

При переключении в раунды показываем их листалку, добавляем скачиванием ПГН‑файлов с нотациями всех прошедших игр, добавляем сбоку ссылку на похожий турнир, чтобы игрок продолжал играть:

Идём снова обсуждать макеты с клиентом:

Таймлайн турнира обзаводится разметкой раундов и переезжает пониже. После обсуждения с клиентом возвращаем доски текущего раунда и переключалку между раундами обратно на видное место. Если «я» играю за первым или вторым столом, то он и так там будет, и значит на нём можно показать обратный отсчёт. Если я играю за другим столом (на макете — за пятым), то в качестве правого стола ставим мой:

Экраны самой игры мы нарисовали давно.

Немного адаптируем их для турнирных игр. Добавляем слева название турнира, а к игрокам кроме страны и рейтинга дописываем их очки и место в этом турнире. Показываем обратный отсчёт до начала партии, если игрок уже перешёл на страницу игры, а когда партия кончилась сразу показываем наверху следующего оппонента:

Архив моих турниров становится покраше:

Придумываем специальное обозначение с #номером стола в рамочке:

Показываем, как что тянется на широком экране:

Чтобы участвовать в турнире, нужно соответствовать его требованиям: ограничениям по стране, рейтингу. А чтобы участвовать в официальном рейтинговом турнире ФИДЕ, нужно самому быть игроком ФИДЕ.

Не упускаем шанса предложить апгрейд:

При нажатии на кнопку открывается интерфейс апгрейда, который мы сделали ранее.

Допиливаем навигацию, вёрстку шапки страницы турниров. В лобби добавляем мои ближайшие турниры и ссылку на страницу турниров, а со страницы турниров, наоборот, ведём на одиночные игры:

Возвращаемся к форме создания турниров, продумываем разные состояния. В том числе рисуем приглашение участников в закрытый турнир:

В интерфейсе турнирной игры делаем название турнира крупнее. В конце показываем, как партия отразилась на положении в турнире. Рассматриваем разные случае, адаптируем всё это к мобиле:

Позже понимаем, что наш таймлайн раундов сам может быть сразу и переключалкой между раундами. Превращаем во вкладки, перекрашиваем в зелёный цвет, убираем листалки влево‑вправо:

Пришло время получше разобраться с турнирными таблицами. Там бывают тайбрейки с разными хитрыми правилами и коэфициентами, их хорошо бы тоже показывать:

Адаптируем под мобилу то, что ещё не адаптировали:

Клиент просит адаптировать новый дизайн страницы турнира так, чтобы его же можно было использовать для классических трансляций живых турниров — сервиса Ворлд Чесса, который появился ещё до того, как нас позвали помогать с геймингом. Находим место для видеопотока, новостей и спонсоров турнира:

Спонсоры, кстати, в будущем могут пригодиться и в онлайн‑турнирах.

Приходится всё‑таки придумать дизайн для турнирных таблиц с сеткой навылет:

Помогаем с запуском первой версии. Дозапускаем отдельные фичи по мере готовности бэкенда в режиме поддержки.