Необходимо доработать лендинг
Заданы два списка:
-игры
-тэги
Элементы этих списков связаны между собой как многие ко многим, то есть у каждой игры может быть много тэгов и каждый тэг может быть у множества игр.
У игр есть приоритет – он используется при отображении отфильтрованного списка игр.
У тэгов есть
-значение(шутер, квест, для детей)
-описание(текст в несколько строк)
-признак menu (boolean) – показывает, отображать ли игры с этим тэгом как отдельную вкладку на сайте –
Пример описания тега:
<Div class="tag" data-desc="разные стрелялки" data-menu=true data-id="1" data-name="шутер"></div>
<Div class="tag" data-desc="Головоломки – игры в которых надо подумать..." data-menu=true data-id="2" data-name="квест"></div>
<Div class="tag" data-desc="Спортивные игргы" data-menu=false data-id="3" data-name="спорт"></div>
Пример описания игры
<div class="col-md-4 margin-30px-bottom sm-margin-20px-bottom game" data-priority="10">
<div class="border position-relative bg-white">
<div class="game-image"><img src="img/games/serious-sam-3-bfe.jpg"></div>
<div class="padding-15px-all">
<p class="width-95 xs-width-100">Легендарный Serious Sam</p>
<div class="price-label bg-theme text-white alt-font"><span>Serious Sam 3: BFE</span></div>
<ul class="no-margin text-uppercase font-size12">
<li><span class="font-weight-700 text-theme-color tag-link" data-tags=1,2><!-- выведет "шутер, квест" --></span></li>
</ul>
</div>
</div>
</div>
Определяет 3 тэга, игру и связь.
Необходимо реализовать
1) функцию фильтрации игр по тэгу – на вход тэг, на выходе игры, у которых есть указанный тэг с сортировкой по приоритету.
1.1) Есть тэг с признаком data-menu=true, то открывается соответсвующая вкладка меню(ей присваивается класс active)
1.2) Если тэг с data-menu=false то снимается active со всех вкладок и отрисовывается список игр по выбранному тегу
1.3) Список игр отрисовывается как на сайте – списком <div>. Элемент <div class=row> можно не учитвыать, те все игры будут подряд <div class="game">
2) По клику на тэг под игрой – вызывается метод фильтрации игр с тэгом, на который был клик.
3)По наведению на тэг отображается всплывающая подсказка с текстом из data-desc тэга
4)отрисовку главного меню – для каждого тэга с признаком menu=true рисуется вкладка меню, по клику на которую фильтруются соответствующие игры. Меню сохраняется при выборе любой из вкладок.