arcomage mobile css and drag

draggable.js

// ==UserScript==
// @name         Improvements for arcomage.net
// @namespace    http://arcomage.net
// @version      0.3
// @description  edit some css to fit game on one screen on mobile phones and add draggable for cards
// @author       nik.parotikov@gmail.com
// @match        arcomage.net/?location=Game*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=arcomage.net
// @grant        none
// @require      https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js
// @require      https://raw.githubusercontent.com/heyman/jquery-draggable-touch/master/jquery.draggableTouch.js
// ==/UserScript==

(function() {
    'use strict';
    var $ = window.jQuery;
    $('header').insertAfter('.game'); //blue menu
    $('.information-line').insertBefore('.game__board > .row > .col-md-6> .game__card-list:first'); //round count move above cards
    $('.avatar-image').hide();
    $('.game__board > .row:first').insertAfter('.game__board');
    $('.container').css('width', '100%');
    $('.card').css('margin','0px');
    $('.game__board > .row:eq(1) > div:first').addClass('col-xs-3');
    $('.game__board > .row:eq(1) > div:eq(1)').addClass('col-xs-6');
    $('.game__board > .row:eq(1) > div:eq(2)').addClass('col-xs-3');

    $('.game__castle-display').remove();
    $('.game__stock-info').css('display','inline-block');
    $('.info-label .game__empire-changes:contains(-)').parent().css('color', 'red');
    $('.info-label .game__empire-changes:contains(+)').parent().css('color', 'green');
    $('.my-hand').insertBefore('.game__hand:last');

    //карты
    $('.card').css('border-radius', '2px').css('border', '0px').css('width', '76px');
    $('.card__image>img').css('width', '76px');
    $('.img-rounded').css('border-radius', '0px').css('border', '0px');

    $('.my-hand select').css('padding', '0px');
    $('.my-hand button').css('border', 'none').css('border-radius', '0px');


    $('.game__card-modes').css('margin', '0px');
    $('.hidden-card').css('margin', '0px').css('width', '76px').css('border-radius', '2px').css('border', '0px');
    //$('.hidden-card').css('height', '150px');

    $('.game__stock-info').css('width', '50px').css('height', '45px');
    $('.game__facility').css('height', '28px').css('line-height', '28px')
    $('.game__stock-info').css('background-image', 'none');
    $('.game__stock-info--bricks').css('background-color', '#d76161');
    $('.game__stock-info--gems').css('background-color', '#7aa9d7');
    $('.game__stock-info--recruits').css('background-color', '#7aaa7a');
    $('.token-counter, .info-label, .card-flag').css('border-radius', '0px').css('border-style', 'none');
    $('.container').css('margin-top', '-10px');
    $('.game').css('margin', '0px');

    var left_offset = function (index) {
        return (index / 4 - 1) * 150;
    }
    var rotate_offset = function(index) {
        return (index / 4 - 1 ) * 20;
    }
    $('.my-hand').css('position','absolute').css('left','45%').css('bottom', '10px');
    $('.my-hand .card').each(function(index) {
        $(this).css('transform','rotate(' + rotate_offset(index) + 'deg)').css('position', 'absolute').css('left', left_offset(index) + 'px').css('z-index', '1').css('top', 0 + 'px');
    })

    $('.my-hand').css('position','absolute').css('left','45%').css('bottom', '10px');
    $('.my-hand .card').each(function(index) {
        $(this).css('transform','rotate(' + rotate_offset(index) + 'deg)').css('position', 'absolute').css('left', left_offset(index) + 'px').css('z-index', '1').css('top', 0 + 'px');
    })
//     $('.game__hand').not('.my-hand').css('position','absolute').css('left','45%').css('bottom', '300px');

//     $('.game__hand').not('.my-hand').find('.card,.hidden-card').each(function(index) {
//         $(this).css('transform','rotate(' + rotate_offset(index) + 'deg)').css('position', 'absolute').css('left', left_offset(index) + 'px').css('z-index', '1').css('top', 0 + 'px');
//     })

    //draggable
    $('.my-hand > div > div').not('.unplayable').draggableTouch().bind("dragstart", function(event, pos) {
        $(this).css('position','absolute').css('z-index', '9999');
        //console.log("drag started on:", this, "at position:", pos);
    })
    .bind("dragend", function(event, pos) {
        console.log("drag ended on  position:", pos);
        // console.log("drag event:", event);
        $(this).css('position','static');
        //console.log($(this).siblings('select'));
        var isMode = false;
        if ($(this).siblings('select').length) {
            console.log('есть выбор');
            isMode = true;
        }
        //console.log(pos.top > 40);
        var isZone = false;
        if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
            console.log('мобила');
            isZone = pos.top > 20 & pos.top < 100 & pos.left > 250 & pos.left < 400;
        }
        else {
            isZone = pos.top > 30 & pos.left > 510 & pos.top < 115 & pos.left < 550;
        }
        var isDiscard = pos.top > -700 & pos.top < -500 || false;
        isZone = pos.top > -500 & pos.top < -150 || false;

        if(isDiscard) {
            console.log('сброс')
            console.log($(this).siblings("input[name='selected_card']").first())
            $(this).siblings("input[name='selected_card']").first().prop("checked", true);
            $("button[name='discard_card']").click();
        }
        if(isZone) {

            console.log('попал');

            if(isMode) {
                return false;
            }
            $(this).siblings("button[name='play_card']").click();
            // console.log(button);
            console.log($(this).parents('form'))
                // .submit();
            // $(button).click(function(event) {
            //     console.log(event);
            // });
            //console.log($(this).siblings()[1]);
        }
        if(window.innerWidth > window.innerHeight){
            //landscape
        }

    });

})();