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

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;
        }

        // Check buttons (assuming button 6 and 7 are for zoom, may vary based on the gamepad)
        if (gamepad.buttons[6].pressed) {
            scaleVrLeft = Math.max(MIN_SCALEVr, scaleVrLeft - zoomStepVr);
            scaleVrRight = Math.max(MIN_SCALEVr, scaleVrRight - zoomStepVr);
        }
        if (gamepad.buttons[7].pressed) {
            scaleVrLeft = Math.min(MAX_SCALEVr, scaleVrLeft + zoomStepVr);
            scaleVrRight = Math.min(MAX_SCALEVr, scaleVrRight + zoomStepVr);
        }

        // Check axes for movement (assuming axes 0 and 1 are for left stick, may vary)
        translateVrXLeft -= gamepad.axes[0] * moveStepVr;
        translateVrYLeft -= gamepad.axes[1] * moveStepVr;
        translateVrXRight -= gamepad.axes[0] * moveStepVr;
        translateVrYRight -= gamepad.axes[1] * moveStepVr;

        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`;
}


У меня две проблемы - 
1) кнопки увеличения/ уменьшения не работают
2) доска сама куда то по немногу смещается, хотя кнопки не нажаты