trading.js

$(init);

var tradeID = '';
var userID = 0;
var value = 0;
var max_value = 0;
var other_value = 0;

function init() {
    // Load values
    userID = $('#trading_panel').data('userid');
    tradeID = $('#trading_panel').data('tradeid');
    other_value = parseFloat($('#other_trade_value_gold').data('gold'));

    // Stack items in all wrappers
    stackItems("#main-items-wrapper");
    stackItems("#my-items-wrapper-table");
    stackItems("#other-items-wrapper-table");

    items = document.getElementsByClassName('items-wrapper');
    Array.prototype.forEach.call(items, function (elem) {
        Ps.initialize(elem);
    });

    // Mark all my non-equippable items which are in others items to prevent them from putting to the right panel
    $("#other-items-wrapper-table .item").each(function () {
        if ($(this).data('id') == 0) {
            $("#main-items-wrapper .item[data-item='" + $(this).data('item') + "']").addClass("exists-in-others-items");
        }
    });

    // Make items draggable
    makeItemDraggable($(".draggable_item"));

    // Make items double clickable for quick move
    makeItemDoubleClickable($(".draggable_item"));

    $(".items-wrapper:not(#other-items-wrapper-table)").disableSelection();

    makePanelDroppable("#main-items-wrapper", "#my-items-wrapper-table");
    makePanelDroppable("#my-items-wrapper-table", "#main-items-wrapper");

    // Gold add/subtract buttons
    $('#gold_trade_add').click(function () {
        var curGold = parseFloat($('#my_gold_trade_amount').val());
        var newGold = curGold + 100;
        if (newGold > max_value) {
            newGold = parseFloat(max_value);
        }
        $('#my_gold_trade_amount').val(newGold.toFixed(2));
        calcValue();
        return false;
    });

    $('#gold_trade_subtract').click(function () {
        var curGold = parseFloat($('#my_gold_trade_amount').val());
        var newGold = curGold - 100;
        if (newGold < 0) {
            newGold = 0;
        }
        $('#my_gold_trade_amount').val(newGold.toFixed(2));
        calcValue();
        return false;
    });

    $('#my_gold_trade_amount').bind('keyup mouseup mousewheel', function () {
        if (parseInt($(this).val()) < 0) {
            $(this).val(0);
        } else {
            var gold = parseFloat($(this).val());
            calcValue();
        }
        return false;
    });

    calcValue();

    // Search listener
    $('#search_query').on('input', function () {
        filterItems();
    });
}

function getItemCount(item) {
    let elem = item.find('.item_count');
    if (!elem.length) {
        return 1;
    }
    return Number(elem.text());
}

function setItemCount(item, count) {
    let elem = item.find('.item_count');
    if (!elem.length) {
        elem = $('<span class="item_count"></span>').appendTo(item);
    }
    elem.text(count);
    if (count > 1) {
        elem.removeClass('hidden');
    } else {
        elem.addClass('hidden');
    }
}

function joinItem(baseItem, joinedItem) {
    setItemCount(baseItem, getItemCount(baseItem) + getItemCount(joinedItem));
    joinedItem.remove();
    return baseItem;
}

function splitItem(baseItem, count) {
    let newItem = baseItem.clone();
    setItemCount(baseItem, getItemCount(baseItem) - count);
    setItemCount(newItem, count);
    return newItem;
}

function stackItems(container) {
    let uniqueItems = {};
    $(container).find('.item').each(function () {
        // Do not stack equippable items
        if ($(this).data('id') == 0) {
            let id = $(this).data('item');
            if (id in uniqueItems) {
                joinItem(uniqueItems[id], $(this));
            } else {
                uniqueItems[id] = $(this);
            }
        }
    });
}

function makeItemDraggable(item) {
    item.draggable({
        containment: "document",
        cursor: "move",
        helper: function () {
            let helper = $(this).clone();
            setItemCount(helper, 1);
            return helper;
        },
        appendTo: "#trading_panel",
        revert: "invalid"
    });
}

function makeItemDoubleClickable(item) {
    item.off("dblclick").dblclick(function() {
        if (!$(this).hasClass("exists-in-others-items")) {
            let dstPanel = $(this).parent("#my-items-wrapper-table").length ? "#main-items-wrapper" : "#my-items-wrapper-table";
            moveItem($(this), 1, dstPanel, true);
        }
    });
}

function makePanelDroppable(panel, srcPanel) {
    $(panel).droppable({
        // Only accept items from the source panel which are not in others items
        accept: srcPanel + " .item:not(.exists-in-others-items)",
        activeClass: "custom-state-active",
        drop: function (event, ui) {
            moveItem(ui.draggable, getItemCount(ui.helper), this);
        }
    });
}

function moveItem(item, count, dstPanel, fast) {
    let fadeDuration = fast ? 0 : 400;

    item.fadeOut(fadeDuration, function () {
        // If not all quantity of the item is moved, split it into two items
        if (count < getItemCount(item)) {
            let newItem = splitItem(item, count);
            item.show();
            item = newItem;
        }

        let existingItem = $(dstPanel).find(".item[data-item='" + item.data('item') + "']");

        if (existingItem.length && existingItem.data('id') == 0) {
            // Item with the same ID already exists in the destination panel, join two items together
            existingItem.hide();
            joinItem(existingItem, item);
            existingItem.fadeIn(fadeDuration);
        } else {
            // Item with such ID doesn't exist in the destination panel, put the dropped item at the end
            item.appendTo(dstPanel);
            makeItemDraggable(item);
            makeItemDoubleClickable(item);
            item.fadeIn(fadeDuration);
        }

        calcValue(true);
    });
}

function calcValue(moved = false) {
    var tempVal = 0;

    $('#my-items-wrapper-table li').each(function (i) {
        // Add cost of all items. No need to check others items here because we do it when putting our items on the table.
        tempVal += $(this).data('cost') * getItemCount($(this));
    });
    value = tempVal;
    max_value = (value * 0.15);
    $('#gold_trade_max_amount').text(max_value.toLocaleString('en-US', {minimumFractionDigits: 2}));

    if (parseFloat($('#my_gold_trade_amount').val()) > max_value) {
        $('#my_gold_trade_amount').val(parseFloat(max_value).toFixed(2));
    }

    var table_gold = parseFloat($('#my_gold_trade_amount').val());
    var showVal = value + table_gold;
    $('#my_trade_value_gold').text(showVal.toLocaleString('en-US'));

    if (moved && (value + table_gold) > 0) {
        $('#propose_trade').prop('disabled', false);
    }

    calcValuePercents();
}

function calcValuePercents() {
    var myPercent = 0;
    var otherPercent = 0;

    if (value > 0 && other_value === 0) {
        myPercent = 100;
    } else if (other_value > 0 && value === 0) {
        otherPercent = 100;
    } else if (value > 0 && other_value > 0) {
        myPercent = value / (value + other_value) * 100;
        myPercent = myPercent.toFixed(2);
        otherPercent = 100 - myPercent;
        otherPercent = otherPercent.toFixed(2);
        $('#accept_trade').css('visibility', 'visible');
    }

    $('#my_trade_value_percent').text(myPercent + '%');
    $('#other_trade_value_percent').text(otherPercent + '%');

    var difference = myPercent - otherPercent;
    if (difference <= 20 && difference >= -20) {
        $('#my_trade_value_percent').css('color', '#3B7E1A');
        $('#other_trade_value_percent').css('color', '#3B7E1A');
        $('#accept_trade').prop('disabled', false);
    } else if (difference <= 30 && difference >= -30) {
        $('#my_trade_value_percent').css('color', '#DDA82A');
        $('#other_trade_value_percent').css('color', '#DDA82A');
        $('#accept_trade').prop('disabled', true);
    } else {
        $('#my_trade_value_percent').css('color', '#B10000');
        $('#other_trade_value_percent').css('color', '#B10000');
        $('#accept_trade').prop('disabled', true);
    }
}

// Ajax functions / main buttons
function cancelTrade() {
    $.alertable.confirm('Are you sure you want to cancel this trade?').then(function () {
        $('#cancel_trade').text('Cancelling...').prop('disabled', true);
        $.get('user.php',
            {action: 'ajax_trade', type: 'cancel', tradeid: tradeID},
            function (response) {
                if (response == 'true') {
                    location.replace('user.php?action=all_trades');
                } else {
                    noty({
                        text: 'An error occurred and the trade could not be cancelled.',
                        type: 'error',
                        timeout: 2500
                    });
                    $('#cancel_trade').text('Cancel Trade').prop('disabled', false);
                }
            });
    });
}

function proposeTrade() {
    if (tradeID == '') {
        var message = "Are you sure you want to propose this new trade?";
    } else {
        var message = "Are you sure you want to propose a change to this trade?";
    }

    $.alertable.confirm(message).then(function () {
        var table_items = tableItems();
        var gold = $('#my_gold_trade_amount').val();
        var message = $('#message_body').val();

        console.log("table_items: " + JSON.stringify(table_items));

        var propose_text = $('#propose_trade').text();
        $('#propose_trade').text('Sending...').prop('disabled', true);
        $.get('user.php',
            {
                action: 'ajax_trade',
                type: 'propose',
                userid: userID,
                tradeid: tradeID,
                gold: gold,
                items: JSON.stringify(table_items),
                message: message
            },
            function (response) {
                if (response != false) {
                    location.replace('user.php?action=trade&tradeid=' + response);
                } else {
                    $('#propose_trade').text(propose_text).prop('disabled', false);
                    noty({
                        text: 'Something went wrong and your trade proposal could not be sent.',
                        type: 'error',
                        timeout: 2500
                    });
                }
            });
    });
}

function acceptTrade() {
    $.alertable.confirm('Are you sure you want to accept this trade?').then(function () {
        var table_items = tableItems();
        var gold = $('#my_gold_trade_amount').val();
        var message = $('#message_body').val();

        $('#accept_trade').text('Accepting...').prop('disabled', true);
        $.get('user.php',
            {
                action: 'ajax_trade',
                type: 'accept',
                userid: userID,
                tradeid: tradeID,
                gold: gold,
                items: JSON.stringify(table_items),
                message: message,
                auth: authkey
            },
            function (response) {
                if (response != false) {
                    location.replace('user.php?action=all_trades');
                } else {
                    $('#accept_trade').text('Accept Trade').prop('disabled', false);
                    noty({
                        text: 'Something went wrong and your trade acceptance could not be sent.',
                        type: 'error',
                        timeout: 2500
                    });
                }
            });
    });
}

function sendPM() {
    var message = $('#message_body').val();
    var convid = $('.message_section').data('convid');

    if (convid > 0 && userID > 0 && message.length > 0) {
        $('#send_message').val('Sending...').prop('disabled', true);
        $.get('user.php',
            {action: 'ajax_trade', type: 'send_pm', userid: userID, convid: convid, message: message},
            function (response) {
                if (response == 'true') {
                    noty({
                        text: 'PM sent!',
                        timeout: 3000
                    });
                    $('#message_body').val('');
                    $('.message_replies').prepend($('<div class="message_reply message_reply_self"><span></span></div>').text(message));
                    $('#send_message').val('Send message').prop('disabled', false);
                } else {
                    $('#send_message').val('Send message').prop('disabled', false);
                    noty({
                        text: 'Something went wrong and your pm could not be sent.',
                        type: 'error',
                        timeout: 2500
                    });
                }
            });
    } else {
        noty({
            text: 'Something went wrong and your pm could not be sent.',
            type: 'error',
            timeout: 2500
        });
    }
}

// Returns all items on your table
function tableItems() {
    var table_items = [];

    $('#my-items-wrapper-table li').each(function (i) {
        var item = {
            itemid: $(this).data('item'),
            equipid: $(this).data('id'),
            amount: getItemCount($(this))
        };
        console.log("item: " + JSON.stringify(item));
        table_items.push(item);
    });

    return table_items;
}

// Filter items in panel
function filterItems() {
    var query = $('#search_query').val();
    if (query) {
        // Hide all
        $('#items li.item').each(function () {
            $(this).addClass('hidden').removeAttr('style');
        });

        // Get items to display
        query.split('+').forEach(function (q) {
            if (q) {
                q = encodeURIComponent(q).toLowerCase();
                $('#items li.item').each(function () {
                    if ($(this).data("item-name").toLowerCase().indexOf(q) !== -1) {
                        $(this).removeClass('hidden');
                    }
                });
            }
        });
    } else {
        // Show all
        $('#items li.item').each(function () {
            $(this).removeClass('hidden').removeAttr('style');
        });
    }

    // Scroll to the top
    $('#main-items-wrapper').scrollTop(0);
}