var v = getVisual();

var fieldLeft = gamefield.getBoundingClientRect().x;
var fieldTop = gamefield.getBoundingClientRect().y;
var fieldCenterX = gamefield.getBoundingClientRect().width / 2;
var fieldCenterY = gamefield.getBoundingClientRect().height / 2;

var currentDomino = getDomino(2,5);

moveTo(currentDomino, fieldCenterX, fieldCenterY);

// moveTo(v, 500, 500);





function getDomino(topValue, bottomValue) {
    let result = 0;
    topValue = topValue.toString();
    bottomValue = bottomValue.toString();
    document.querySelectorAll('.domino').forEach(el => {
        if (el.dataset.dominoValueTop === topValue
                && el.dataset.dominoValueBottom === bottomValue) {
            result = el;
        }
    });
    return result;
}

function moveTo(el, x, y) {
    if (el) {
        el.classList.remove('animatetohand');
        gamefield.append(el);
        el.classList.add('absolute');
        el.classList.add('vertical');
        el.style.transform = `translate(calc(${x}px - 50%), calc(${y}px - 50%))`;
    }
}

function getVisual() {
    if (!document.querySelector('#tmpposition')) {
        var tmp = document.createElement('div');
        tmp.id = '#tmpposition';
        tmp.style.position = 'absolute';
        tmp.style.top = '0';
        tmp.style.left = '0';
        tmp.style.color = 'red';
        tmp.style.transition = '1s';
        tmp.innerHTML = `H`;
        document.body.append(tmp);
        return tmp;
    } else {
        return document.querySelector('#tmpposition');
    }
}