Архив: Javascript+jQuery+CSS+Bootstrap: Движок для отрисовки турнирной сетки
Бюджет
По договоренности
Создан: 7 лет назад
Закрыт
- Описание
- Необходимо разработать движок на 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'ов и отрисовкой коннекторов таким образом чтобы получить желаемый внешний вид.
Разметка матча может быть такой:
<div class="bracket">
<div class="round">
<div class="round-name">1/16 финала</div>
<div class="matches">
<div class="match">
<div class="match-number">1</div>
<div class="wrestlers">
<div class="wrestler-red">Петров Иван</div>
<div class="wrestler-blue">Сидоров Петр</div>
</div>
<div class="points">
<div class="points-red">4</div>
<div class="points-blue">6</div>
</div>
<div class="results">
<div class="winner"></div>
<div class="looser"></div>
</div>
<div class="navigation">
<button></button>
</div>
</div>
</div>
</div>
</div>
Требования к результату:
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-х заявленных видов сеток (олимпийка обычная отличается от олимпийки с утешением только дополнительными раундами утешения).
Необходимо продумать варианты отображения сетки на разных экранах.
- Категория
Похожие проекты
0
4
Сайт arg2028t. beget. tech/. Нужно сделать вот такой калькулятор. airprint. by/outdoor/wide-format. и еще некоторые доработки....
9 месяцев назад
0
4
Требуется создать скрипт для premiere pro. Данная суть скрипта: в выделеном бине нужно что бы автоматически проставлялся in out ровно по серидине файла так что бы выделенная область была длиной 3 секунды. И требуется кнопка что бы работало через окно expressions. Проблема текущего в том что он не работает......
1 год назад
$714
0
3
Описание задачи: Необходимо разработать serverless функцию на базе NestJS и TypeScript для автоматизированной обработки видеофайлов, загружаемых в Yandex Cloud Storage. Функция должна выполнять конвертацию видео в формат, поддерживаемый основными веб-браузерами, с последующим сжатием до оптимального......
1 год назад
44
14
Необходимо разработать бек и фронт мини-сервиса таким образом, чтоб его можно было развернуть внутри другого проекта....
1 год назад
$1111
23
0
Стоит на Бизнесе для своих нужд на простеньком базовом шаблоне, складываю туда контент потихоньку. Нужно начинать приводить в соответствие что бы публика сразу не убегала, а как то цеплялась, да и продвигать не торопясь. Шаблон где порвался от вставки баннеров подправить, для мобилок может сверстать.......
1 год назад
105
9
117
5
Очень простой криптообменник в виде веб-сайта. Без смарт-контрактов и т. Все платежи вручную....
1 год назад
73
2
Исправление и доработки php и js в воде. Платформа на joomla....
1 год назад
$20
136
1
384
6
Привет! Рад, что тебя заинтересовала наша стажировка! Мы являемся аккредитованной ИТ-компанией, . при наличии высшего образования сможем предоставить бронь . от мобилизации или отсрочку от призыва на срочную службу. надоело работать за 1000$ в месяц? понимаешь что такое Active Directory и как оно работает?......
1 год назад
152
1
Нужно написать чекер аккаунтов на Валид по базе login:password, сайта http://southwest. com с парсингом количества поинтов , на пост гет запросах, использование прокси, много поток, перечек аккаунтов которые не прошли чек из за прокси. Сложность в том что токен при авторизации приходит с js запросов......
1 год назад
80
0
Необходимо проводить работы по технической поддержке и сопровождению сайта банка работающего на CRM 1-C bitrix через GIT. Прошу СТРОГО (! ) указывать окончательную цену нормо-часа в отклике, без неё не смотрю, предпочтение будет оказываться разработчикам из Ярославля и окрестностей (области и из Костромской......
1 год назад
87
1
Необходим специалист, который настроит шлюз Power BI на Windows Server 2012 R2. Проблема: при настройке шлюза Power BI возникает проблема с подключением БД mySQL к шлюзу по причине отсутствия драйвера БД. Попытки установки не привели к успеху. Пожалуйста, прикрепите к отклику кейсы. Также укажите приблизительную......
1 год назад
131
4
редактировать код сайта на Wordpress исходя из тз 2. оперативно добавлять и редактировать информацию на сайте (новые страницы, разделы, блоки) 3. поддерживать стабильный уровень загрузки согласно google speed 4. оптимизировать «тяжелые» страницы сайта 5. быть на связи в рабочее время и решать задачи......
1 год назад
217
1
Предоставляю в Аренду аккаунт Upwork для работы с своего ПК. Установленой зп нет, так как все зависит от вас....
1 год назад
337
4
(Для диплома). Разработать сервис для организации проекта "IT для людей" ЗАО "Тандер". Функции веб сервиса:. пользователь может подать заявку на установку ПО, ремонт оборудования, консультацию. обучение сотрудников, курсы(бесплатные в рамках нац. проекта "образование"). обучение сторонних людей(бесплатно)......
1 год назад
81
0
https://github. com/ant-media/Ant-Media-Server используя antmedia собрать простой сайт с авторизацией/регистрацией + главная страница вывод активных стримов ( название/превью) страница добавления стрима, поля: название стрима / описание стрима / превью стрима страница стрима с плеером/названием/описанием/логином......
1 год назад
$13
94
5
Оплата сдельная Необходимо сверстать карту проектов на основе сервиса mapbox....
1 год назад
217
7
$875
324
4
Нужно доработать действующий сайт маркет плейс на опен карт 3 и исправить баги сайта на Yii2. Тех задание представим. Оплата от 70 000 руб и выше, сроки до 1 месяца + высокие премиальные....
1 год назад
$775
95
0
Нужен шаблон регистрации аккаунтов и рассылки линкидин. Есть готовый шаблон - можете либо доработать либо сделать новый. Работа в первый месяц строго через гарант сервис а в последуюшем возможны варианты. Напишите на те ле гр zakaz021 для получения Тех Задания....
1 год назад
Похожая удалённая работа
- Удаленная работа для веб-программиста
- Удаленная работа для разработчика баз данных
- Удаленная работа для прикладного программиста
- Удаленная работа для системного программиста
- Удаленная работа для разработчика игр
- Удаленная работа для разработчика мобильных приложений
- Удаленная работа для тестировщика ПО
- Удаленная работа для 1С программиста
- Удаленная работа для разработчика встраиваемых систем
- Удаленная работа для разработчика CRM и ERP
Перетащите