const moveStepVr = 10;  // Шаг для перемещения
const zoomStepVr = 0.1;  // Шаг для увеличения-уменьшения
const MIN_SCALEVr = 0.05; // Минимальный масштаб
const MAX_SCALEVr = 5;   // Максимальный масштаб
const DEAD_ZONE = 0.1; // Мертвая зона для стиков

let translateVrXLeft = 0;
let translateVrYLeft = 0;
let scaleVrLeft = 0.05; // Начальный масштаб для левой части

let translateVrXRight = 0;
let translateVrYRight = 0;
let scaleVrRight = 0.05; // Начальный масштаб для правой части

function getInitialTransformValues(board) {
    const transform = board.style.transform || '';
    const translateMatch = transform.match(/translate\((-?\d*\.?\d*)px,\s*(-?\d*\.?\d*)px\)/);
    const scaleMatch = transform.match(/scale\((-?\d*\.?\d*)\)/);

    const translateX = translateMatch ? parseFloat(translateMatch[1]) : 0;
    const translateY = translateMatch ? parseFloat(translateMatch[2]) : 0;
    const scale = scaleMatch ? parseFloat(scaleMatch[1]) : 0.05;

    return { translateX, translateY, scale };
}

window.addEventListener('gamepadconnected', function(e) {
    console.log('Gamepad connected at index %d: %s. %d buttons, %d axes.',
        e.gamepad.index, e.gamepad.id,
        e.gamepad.buttons.length, e.gamepad.axes.length);
    requestAnimationFrame(handleGamepadInput);
});

function handleGamepadInput() {
    const gamepads = navigator.getGamepads();
    if (!gamepads) return;

    const gamepad = gamepads[0];
    if (!gamepad) return;

    const boardLeft = document.getElementById('board-left');
    const boardRight = document.getElementById('board-right');

    if (boardLeft && boardRight) {
        if (translateVrXLeft === 0 && translateVrYLeft === 0 && scaleVrLeft === 0.05) {
            const initialLeft = getInitialTransformValues(boardLeft);
            translateVrXLeft = initialLeft.translateX;
            translateVrYLeft = initialLeft.translateY;
            scaleVrLeft = initialLeft.scale;
        }

        if (translateVrXRight === 0 && translateVrYRight === 0 && scaleVrRight === 0.05) {
            const initialRight = getInitialTransformValues(boardRight);
            translateVrXRight = initialRight.translateX;
            translateVrYRight = initialRight.translateY;
            scaleVrRight = initialRight.scale;
        }

        // Проверьте кнопки увеличения/уменьшения масштаба
        // Обновите индексы кнопок, если они не соответствуют
        if (gamepad.buttons[5].pressed) { // Обновите индексы для своего геймпада
            scaleVrLeft = Math.max(MIN_SCALEVr, scaleVrLeft - zoomStepVr);
            scaleVrRight = Math.max(MIN_SCALEVr, scaleVrRight - zoomStepVr);
        }
        if (gamepad.buttons[3].pressed) {  // Обновите индексы для своего геймпада
            scaleVrLeft = Math.min(MAX_SCALEVr, scaleVrLeft + zoomStepVr);
            scaleVrRight = Math.min(MAX_SCALEVr, scaleVrRight + zoomStepVr);
        }

        // Проверка осей стиков для перемещения с учетом мертвой зоны
        const moveLeftX = Math.abs(gamepad.axes[0]) > DEAD_ZONE ? gamepad.axes[0] * moveStepVr : 0;
        const moveLeftY = Math.abs(gamepad.axes[1]) > DEAD_ZONE ? gamepad.axes[1] * moveStepVr : 0;
        const moveRightX = Math.abs(gamepad.axes[0]) > DEAD_ZONE ? gamepad.axes[0] * moveStepVr : 0;
        const moveRightY = Math.abs(gamepad.axes[1]) > DEAD_ZONE ? gamepad.axes[1] * moveStepVr : 0;

        translateVrXLeft -= moveLeftX;
        translateVrYLeft -= moveLeftY;
        translateVrXRight -= moveRightX;
        translateVrYRight -= moveRightY;

        updateVRTransform(boardLeft, translateVrXLeft, translateVrYLeft, scaleVrLeft);
        updateVRTransform(boardRight, translateVrXRight, translateVrYRight, scaleVrRight);
    }

    requestAnimationFrame(handleGamepadInput);
}

function updateVRTransform(board, translateX, translateY, scale) {
    board.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`;
    board.style.backgroundPosition = `${translateX}px ${translateY}px`;
}

У меня при увеличении доска смещается от центра видимой области. Как это исправить?