Javascript+jQuery+CSS+Bootstrap: Движок для отрисовки турнирной сетки

Необходимо разработать движок на javascript+jQuery+CSS+Bootstrap, отрисовывающий турнирную сетку для соревнований по вольной борьбе по следующей модели данных:

TournamentGroup = {

Rounds: [{

 Name:"Финал",

 RoundType:"Main", // or "Additional" для сетки утешения

 Matches: [{

  Number: 1,

  WrestlerInRed: {

   LastName: "Петров"

  },

  WrestlerInBlue: {

   LastName: "Иванов"

  },

  PointsRed: 4,

  PointsBlue: 8,

  IsRedWon: false

 }]

}]

}

Т.е. общая схема данных описывается так - в турнире есть весовые категории (группы), для каждой группы есть своя турнирная сетка с раундами (1/16, 1/8, 1/4, Получинал, Финал), каждый раунд состоит из схваток (матчей).

Поддерживаемые модели отрисовки: Олимпийская система с матчем за 3-е место, Олимпийская система с утешением от финалистов, Круговая система. Разбираться в генерации самой сетки не нужно. Модель данных описывает сетку полностью, она уже сгенерирована вместе с результатами. Надо только уметь отрисовать эту сетку. Сетка уже отбалансирована, т.е. количество матчей в раунде - это строго степень двойки.

В прикрепленных файлах примеры отрисовки подобной сетки для .NET WPF. Нужно сделать тоже самое для веб сайта.

По сути, задача состоит в том, чтобы сначала сверстать разметку для отдельного матча, в которой будет:

слева - номер матча, далее фамилии борцов, затем баллы и, наконец, кнопка для навигации на другую страницу;

Далее нужно написать javascript/jQuery компонент, который будет бегать по модели данных и генерировать необходимую разметку с расстановкой отступов, margin'ов и отрисовкой коннекторов таким образом чтобы получить желаемый внешний вид.

Разметка матча может быть такой:



1/16 финала



 

  

1

  

   

Петров Иван

   

Сидоров Петр

  

  

   

4

   

6

  

  

   

   

  

  

   

  

 



Начать можно с RoundRobin (круговой) сетки, т.к. она самая простая. По сути - потребуется просто сгенерировать div'раундов, которые будут идти один за другим по горизонтали и добавть туда матчи данного раунда без всяких коннекторов, т.к. в круговой сетке нет понятия перехода в следующий тур.

Олимпийка с матчем за 3-е место уже посложнее. Нужно рассчитывать необходимые отступы так чтобы правильно размещать матчи в каждом следующем раунде и соединять их коннекторами с матчами из предыдущего раунда вплоть до финала. В модели данных раунд с матчем за 3-е место имеет RoundType="Additional". Сам матч необходимо отрисовать справа от финального матча с теми же отступами.

Олимпийка с утешением от финалистов отличается тем, что тут уже не 1 матч за 3-е место, а может быть от 1 до нескольких дополнительных раундов, в которых будет определяться 2 третьих места. Пример есть в скриншоте.

Требования к результату:

1. js файл, в котором определен es6 класс с методом отрисовки турнирной сетки:

export default class {

constructor() {

}

drawBracket(group, container) {

 // group - модель даннх раундов и матчей для данной группы, описанная выше

 // container - div, в котором требуется отрисовать турнирную сетку

}

}

Код должен быть кросс-браузерным. Для самого es6 будет использован babel для транспиляции в es5.

2. css файл с необходимыми стилями, совместимыми с bootstrap 3.3.7 и изолированными в рамках css класса bracket

Стили должны давать удобную возможность менять размеры компонентов разметки.

3. html файл с примерами использования компонента для отрисовки всех 3-х заявленных видов сеток (олимпийка обычная отличается от олимпийки с утешением только дополнительными раундами утешения).

Необходимо продумать варианты отображения сетки на разных экранах.