Переключение составов по «пятеркам» на сайте ХК «Динамо»

Всем привет! Мы открываем рубрику «процесс» (да, да, как у Лебедева), где будем писать об интересных задачах и нестандартных решениях. В прошлом году одной из наших самых серьезных работ стал официальный сайт хоккейного клуба «Динамо» (Москва). Обновления сразу же заметили болельщики, разбившись на два лагеря: «всё клево» и «всё клево, но цвета не нравятся». :) Заметили его и в жюри «Премии Рунета», объявив этот проект «Лучшим спортивным сайтом года». Центральными событиями в жизни любого спортивного клуба являются проводимые матчи, которые нужно освещать максимально подробно. В «Динамо» к этому подходят максимально серьезно: пишут анонсы и отчеты об играх, публикуют фотографии и снимают видеоролики, ведут текстовые трансляции с матчей. Но даже такой плотной работы, оказывается, недостаточно. Ребята из пресс-службы «Динамо» попросили нас реализовать интерактивный блок, позволяющий просматривать составы играющих команд, разбитые по «пятеркам». В хоккее на площадке одновременно находятся пять игроков от каждой команды, плюс по вратарю с каждой стороны. Каждая «пятерка», как правило, составляется из трех нападающих и двух защитников. Всего таких «пятерок» — четыре, причем первая, обычно, составляется из самых сильных и опытных игроков. С этой задачей мы пришли к нашему ведущему дизайнеру, который, поразмыслив некоторое время, предложил нам вот такой макет будущего блока «пятерок»:

Мы показали макет «динамовцам» и у них возникла еще одна идея: вместо условного деления на «синюю» и «красную» команды использовать реальные фирменные цвета клубов. И тут мы вспомнили про замечательный пост на Хабре Дениса из «Турбомилка», который рассказывал о создании иконок для «Автокадабры». Остальное было делом техники: нарисовали шаблон игрового свитера, подложили под него фон, в справочнике команд в «Битриксе» дали возможность для каждой команды задавать свои цвета. В итоге получился замечательный блок, который приносит пользу и радует глаз.