Вывод лидеров рейтинга по шкале достижений на странице тренинга

Задача: на главной странице тренинга вывести несколько пользователей, набравших наибольшее количество баллов по шкале рейтинга.

Логика скрипта

Скрипт переходит на страницу с таблицей рейтинга тренинга, там проходит по всем страницам в поисках людей с максимальным количеством баллов по шкале. Затем выводит на странице тренинга аватар, имя и количество баллов.

* Скрипт написан с помощью ChatGPT

async function getLeaders() {
    const baseUrl = "ссылка на страницу рейтинга по шкале";
    let leaders = [];

    async function fetchPage(url) {
        const response = await fetch(url);
        const text = await response.text();
        const parser = new DOMParser();
        const doc = parser.parseFromString(text, 'text/html');

        // Найти все строки таблицы с классом "w0"
        const rows = doc.querySelectorAll("tr.w0");
        rows.forEach(row => {
            const userIconDiv = row.querySelector(".user-icon");
            const name = userIconDiv.textContent.trim();
            const avatarUrl = userIconDiv.querySelector("img").src;
            const pointsText = row.querySelector("td[data-col-seq='1']").textContent.trim();
            const points = parseInt(pointsText.replace(" баллов", "").replace(/\s/g, ""));

            leaders.push({ name, avatar: avatarUrl, points });
        });

        // Поиск ссылки на следующую страницу
        const nextPageLink = doc.querySelector("ul.pagination li.next a");
        return nextPageLink ? nextPageLink.href : null;
    }

    // Начинаем с первой страницы
    let nextPage = await fetchPage(baseUrl);

    // Проходим по всем страницам, пока есть следующая
    while (nextPage) {
        nextPage = await fetchPage(nextPage);
    }

    // Сортировка по количеству баллов в порядке убывания
    leaders = leaders.sort((a, b) => b.points - a.points).slice(0, 5);

    // Формирование HTML-кода
    let html = '<h3>🏆 Лидеры рейтинга</h3><div class="leaders">';
    leaders.forEach(leader => {
        html += `
            <div class="leader">
                <span class="userpic"><img src="${leader.avatar}" alt="${leader.name}"></span>
                <span class="username">${leader.name}</span>
                <span class="userpoints">${leader.points} баллов</span>
            </div>
        `;
    });
    html += '</div>';

    return html;
}

getLeaders().then(html => {
    // Выводим HTML-код на страницу
    document.querySelector('.top-rated').innerHTML = html;
});

Изменить количество выводимых пользователей вы можете в строке сортировки. За это отвечает последняя цифра:

// Сортировка по количеству баллов в порядке убывания
leaders = leaders.sort((a, b) => b.points - a.points).slice(0, 5);

При стандартной ширине основной колонки GetCourse не выводите больше пяти пользователей, иначе им будет тесно. Либо включите перенос во flex-контейнере.

HTML-код блока для вывода

Добавьте в любом месте страницы тренинга HTML-блок. Включите опцию «Отключить WYSIWYG» и добавьте код:

<div class="top-rated"></div>

CSS для блока рейтинга

ВНИМАНИЕ! Стили я писал с учётом настроек моего набора стилей для GetCourse. Обязательно адаптируйте их под свой проект. В частности, замените переменные для скруглений углов и цвета.

Плитка адаптивная, но карточки с пользователями не переносятся на новую строку. Вместо этого используется горизонтальный скролл.

.leaders {
    display: flex;
    margin-bottom: 2rem;
    gap: .5rem;
    margin-left: -15px;
    margin-right: -15px;
	padding: 0 15px;
}
.leaders .leader {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    flex-grow: 1;
    flex-basis: calc( 100% / 6 );
    padding: 1rem;
    border-radius: var(--r2);
    border: 1px solid var(--light-gray);
}
@media (max-width: 768px) {
    .leaders {
    	flex-wrap: nowrap;
    	overflow-x: scroll;
    }
    .leaders .leader {
    	min-width: 175px;
    }
}
.leaders .leader .userpic img {
    border-radius: var(--r1);
}
.leaders .leader .username {
    font-weight: bold;
}
.leaders .leader .userpoints {
    margin-top: auto;
    color: var(--primary-color);
}