Всем доброго времени. Задача такая.

Дано:

1. Ёлка с фиксированными размерами.

2. Некоторое количество круглых "игрушек" семи разных размеров в случайном порядке.

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

а) не было четких "длинных рядов" из кругов одинакового размера

б) круги были равномерно распределены по ёлке и не выходили бы за ее контур

в) сейчас круги представлены как div-ы, у которых можно менять классы, стили, обрабатывать onclick и т.д., желательно, чтобы все эти возможности сохранились.

4. Супер-новые технологии не использовать, т.к. нужна поддержка всего этого чуда на обычных офисных компах и мобильных браузерах.

5. На главной странице присутствует навигация по "высоте" ёлки - кнопки "вверх-вниз". Изначально при загрузке страницы отображены самые последние по времени добавления шары, которые заполняют всю ёлку. При нажатии кнопки "вниз" отображается та же ёлка, но с шарами, добавленными позже и так далее. Навигация привязана к реальной "высоте", которая рассчитывается исходя из площади шара (каждый шар добавляет n*площадь шара мм).
Для простоты обозначим 1 заполненную ёлку на конкретной метке высоты как 1 страницу.

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

7. Есть функция "показать шар на ёлке". Из GET-запроса мы получаем id шара, загружаем "страницу" с этим шаром и "подсвечиваем" его.

П.С. Пункты 5, 6, 7 - можно предлагать альтернативные технические и визуальные решения, сохраняя суть функций."

Итак:

Требуется доработка существующего проекта.

Тут ссылка на старое ТЗ.

Бэкенд на CMF MODX ( pdoTools, Collections, Login, HybridAuth, Lingua), фронтенд на Bootstrap3 + JQuery.

В качестве шаров используются стандарные ресурсы modx c доп. полями собранные в коллекцию. Логика сделана через сниппеты, + есть один большой сниппет для различных ajax запросов с главной страницы. В нём прописаны фильтры, логика для шаров и т.д.
Юзеры реализованы стандартно для modx c доп. полями и кастомным полем nickname.
Авторизация через Login + HybridAuth
Мультиязычность через Lingua
открытки и добавление шара - canvas, ajax, процессоры и API MODX.

Есть возможность пообщаться с разработчиком и получить объяснение, как и что сделано.
Фокус сразу нужно взять на разработку механизма визуализации шаров, навигации, фильтров, т.к. это наиболее спорная часть. Идеи по решению проблемы лучше озвучивать заранее, потому что есть наработки по проблемам, которые возникают в ходе разработки некоторых вариантов.