Слайдер аватарок пользователей в зависимости от процентов

Форум для тех кто начинает осваивать язык php.
Domeenor
Сообщения: 10

Слайдер аватарок пользователей в зависимости от процентов

Сообщение Domeenor » Чт апр 28, 2016 9:14 am

Добрый день самые светлые умы!) Проблема такая. Представьте слайдер с аватарками участников розыгрыша...
У каждого участника свой процент на победу. Например 3 участника. У первого 70%, второго 20%, третьего 10%.
В общем 100%. Так вот. В слайдере аватарок к сожалению поровну. Хотелось бы сделать чтобы количество их аватарок зависело от их % на победу. Помогите пожалуйста. Вот код отвечающий за слайдер и показ победителя

Код: Выделить всё

.on('slider', function (data) {
 
    
// Таймер
    $('#newGameTimer .countSeconds').text(lpad(data.time - Math.floor(data.time / 60) * 60, 2));
 
    if 
(ngtimerStatus) {
        ngtimerStatus = false;
        var users = data.users;
 
        users 
= mulAndShuffle(users, Math.ceil(130 / users.length));
        users[112] = data.winner;
        html = '';
        users.forEach(function (i) {
            html += '<li><img src="' + i.avatar + '"></li>';
        });
        $('#usersCarousel').html(html);
 
        
$('#barContainer').hide();
        $('#usersCarouselConatiner').show();
 
        if 
(data.showCarousel) {
            $('#depositButtonsBlock').slideUp();
        }
        else {
            $('#depositButtonsBlock').hide();
        }
 
        
$('#winnerInfo').show();
 
        fillWinnerInfo
(data);
 
        
$('#roundFinishBlock .number').text(data.round_number);
        $('#roundFinishBlock .date').html(data.date + '<span>' + data.date_hours + '</span>');
 
 
        
$('#usersCarousel').css('margin-left', -41);
        if (data.showSlider) {
            $('#usersCarousel').animate(
                {marginLeft: -7917}, 1000 * 10,
                function () {
                    $('#winnerInfo .winner-info-holder').slideDown();
                    $('#roundFinishBlock').slideDown();
            });
        }
 
        function fillWinnerInfo
(data) {
            data = data || {winner: {}};
 
            var obj 
= {
                totalPrice: data.game.price || 0,
                number: data.game.price ? ('#' + Math.floor(data.round_number * data.game.price)) : '???',
                tickets: data.tickets || 0,
                winner: {
                    image: data.winner.avatar || '???',
                    login: data.winner.username || '???',
                    id: data.winner.steamid64 || '#',
                    chance: data.chance || 0,
                    winTicket: data.ticket || '???'
                }
            };
            $('#winnerInfo #winTicket').text('#' + obj.winner.winTicket);
            $('#winnerInfo #totalTickets').text(obj.tickets);
            $('#winnerInfo img').attr('src', obj.winner.image);
            $('#winnerInfo #winnerLink').text(replaceLogin(obj.winner.login));
            $('#winnerInfo #winnerLink').attr('href', '/user/' + obj.winner.id);
            $('#winnerInfo #winnerChance').text('(ШАНС: ' + obj.winner.chance.toFixed(2) + '%)');
            $('#winnerInfo #winnerSum').text(obj.totalPrice);
        }
    }
})
Реклама
Аватара пользователя
Slash
Администратор
Сообщения: 2029
Поблагодарили: 62 раза

Re: Слайдер аватарок пользователей в зависимости от процентов

Сообщение Slash » Чт апр 28, 2016 9:29 am

Здравствуйте.
Вам надо написать код на PHP? Код, что Вы представили написан на jQuery и он (если я не ошибаюсь) только прокручивает картинки. Верно? Сюда попадает сгенерированный список аватарок, и происходит перебор этого списка. Я тут не нашёл, где определяется процент пользователя...

Чтобы сделать вывод аватарок ровно столько, сколько процентов у пользователя, предлагаю делать расчет на сервере (PHP), составлять список и подавать его в эту "карусель"...

Если покажите часть кода, которая генерирует список для этого слайдера, постараюсь помочь.
Domeenor
Сообщения: 10

Re: Слайдер аватарок пользователей в зависимости от процентов

Сообщение Domeenor » Чт апр 28, 2016 4:14 pm

Добрый день. Я сейчас на работе и не имею возможности предоставить весь код. Но. Почти в конце кода заполняется див с победителем. И там указывается процент. Это не поможет ни как?

Отправлено спустя 7 минут 24 секунды:
var users = data.users; есть data.chance перемножить, прокатит?
Аватара пользователя
Slash
Администратор
Сообщения: 2029
Поблагодарили: 62 раза

Re: Слайдер аватарок пользователей в зависимости от процентов

Сообщение Slash » Чт апр 28, 2016 5:17 pm

Попробуйте заменить эту часть кода:

Код: Выделить всё

        users.forEach(function (i) {
            html += '<li><img src="' + i.avatar + '"></li>';
        });

На эту:

Код: Выделить всё

        users.forEach(function (i) {
            if (i.chance > 0) {
                for (var a = 0; a < i.chance; a++) {
                    html += '<li><img src="' + i.avatar + '"></li>';
                }
            }
        });

Что получается?
Domeenor
Сообщения: 10

Re: Слайдер аватарок пользователей в зависимости от процентов

Сообщение Domeenor » Чт апр 28, 2016 5:43 pm

Проверить есть ли в масиве юсерс переменная шанс?
Аватара пользователя
Slash
Администратор
Сообщения: 2029
Поблагодарили: 62 раза

Re: Слайдер аватарок пользователей в зависимости от процентов

Сообщение Slash » Чт апр 28, 2016 5:48 pm

Не понял вопроса. Зачем проверять переменную шанс в массиве? Её там разве нет?
В переменной chance, как проценты сохранены? Как просто число или число со знаком процента? Например так: 100 или так: 100%.
Domeenor
Сообщения: 10

Re: Слайдер аватарок пользователей в зависимости от процентов

Сообщение Domeenor » Чт апр 28, 2016 7:21 pm

В общем. Аватарки вообще пропали.

Вот еще что нашел в этом же скрипте:

Код: Выделить всё

function sortByChance(arrayPtr) {
    var temp = [],
        item = 0;
    for (var counter = 0; counter < arrayPtr.length; counter++) {
        temp = arrayPtr[counter];
        item = counter - 1;
        while (item >= 0 && arrayPtr[item].chance < temp.chance) {
            arrayPtr[item + 1] = arrayPtr[item];
            arrayPtr[item] = temp;
            item--;
        }
    }
    return arrayPtr;
}

$(
document).on('click', '#showUsers, #showItems', function () {
    if ($(this).is('.active')) return;

    $('#showUsers, #showItems').removeClass('active');
    $(this).addClass('active');

    $('#usersChances .users').toggle();
    $('#usersChances .items').toggle();
    updateScrollbar();
});


$(
'#usersChances').hover(function () {
    var block = $('#showUsers').is('.active') ? $('.current-chance-block.users') : $('.current-chance-block.items');
    var min = $('#showUsers').is('.active') ? 10 : 9;

    if (block.find('.current-chance-wrap').children().length > min) $('.arrowscroll').show();
},
 function () {
    $('.arrowscroll').hide();
});



$(
'.arrowscroll').click(function () {
    var block = $('#showUsers').is('.active') ? $('.current-chance-block.users') : $('.current-chance-block.items');
    var direction = $(this).is('.left') ? '-' : '+';

    block
        
.stop(true, false)
        .animate({scrollLeft: direction + "=250"});
}); 

Логи идут от: data.chances

Код: Выделить всё

html_chances = '';

                data.chances = sortByChance(data.chances);
                data.chances.forEach(function (info) {
                    if (USER_ID == info.steamid64) {
                        $('#myItemsCount').html(info.items + '<span style="font-size: 12px;">' + n2w(info.items, [' предмет', ' предмета', ' предметов']) + '</span>');
                        $('#myChance').text(info.chance + '%');
                    }
                    $('.id-' + info.steamid64).text(info.chance + '%');
                    html_chances += '<div class="current-user" title="' + replaceLogin(info.username) + '"><a class="img-wrap" href="/user/' + info.steamid64 + '" target="_blank"><img src="' + info.avatar + '" /></a><div class="chance">' + info.chance + '%</div></div>';
                });



$(
'#usersChances .users .current-chance-wrap').html(html_chances);
                $('#usersChances').show();



.
on('newGame', function (data) {
                updateBackground();
                $('#usersChances .users .current-chance-wrap').html('');
                $('#usersChances .items .current-chance-wrap').html('');
                $('#usersChances').hide();
                $('#deposits').html('');
                $('#myItemsCount').html('0 <span style="font-size: 12px;"> предметов</span>');
                $('#myChance').text('0%');
                $('#roundId').text(data.id);
                $('#roundBank').html('0 <span class="money" style="color: #b3e5ff;">руб</span>');
                $('#hash').text(data.hash);
                $('.item-bar-text').html('<span>0</span> предметов');
                $('.item-bar').css('width', '0%');
                $('#roundFinishBlock').hide();
                $('#barContainer').show();
                $('#usersCarouselConatiner').hide();
                $('#depositButtonsBlock').slideDown();
                $('#winnerInfo').hide();
                $('#gameTimer .countMinutes').text('02');
                $('#gameTimer .countSeconds').text('00');
                $('title').text('0 руб - 13Bets.Ru');
                $('#roundStartBlock #date').html(formatDate(data.created_at));
                setTimeout(updateBackground, 1000);
                ngtimerStatus = true;
            })
Аватара пользователя
Slash
Администратор
Сообщения: 2029
Поблагодарили: 62 раза

Re: Слайдер аватарок пользователей в зависимости от процентов

Сообщение Slash » Чт апр 28, 2016 8:21 pm

Если заменить код так:

Код: Выделить всё

        users.forEach(function (i) {
            if (i.chance)
            {
                alert(i.chance);
            }

            html += '<li><img src="' + i.avatar + '"></li>';
        }); 

Появится какое ни будь сообщение? Что там написано?
Domeenor
Сообщения: 10

Re: Слайдер аватарок пользователей в зависимости от процентов

Сообщение Domeenor » Чт апр 28, 2016 9:11 pm

Аватарки пошли но поделеные поровну
Аватара пользователя
Slash
Администратор
Сообщения: 2029
Поблагодарили: 62 раза

Re: Слайдер аватарок пользователей в зависимости от процентов

Сообщение Slash » Чт апр 28, 2016 9:22 pm

Получается, что переменная chance в цикле не определенна, по этому при замене кода, аватарки не отображаются...
Domeenor
Сообщения: 10

Re: Слайдер аватарок пользователей в зависимости от процентов

Сообщение Domeenor » Чт апр 28, 2016 9:26 pm

Slash писал(а):Получается, что переменная chance в цикле не определенна, по этому при замене кода, аватарки не отображаются...

Определить сможем?
Аватара пользователя
Scorpion
Сообщения: 35
Благодарил (а): 6 раз
Поблагодарили: 3 раза

Re: Слайдер аватарок пользователей в зависимости от процентов

Сообщение Scorpion » Чт апр 28, 2016 9:55 pm

Высчитывать такое лучше на стороне сервера, то есть на php. Зачем загружать кучу информации клиенту и у него же определять, что выводить, а что нет.
Так было бы лучше и проще:
Slash писал(а):Чтобы сделать вывод аватарок ровно столько, сколько процентов у пользователя, предлагаю делать расчет на сервере (PHP), составлять список и подавать его в эту "карусель"...

Что касается JS, нужно создавать массив, где будет информация о аватаре и процентах, что-то типа:

Код: Выделить всё

user = [
    [
'ava'20]
    [
'ava'50]
]; 

Но по моему это бред, вариант с php - рулит.

Вернуться в «PHP»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость