// static/js/vr.js

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; // Значение по умолчанию, если scale не установлен

    return { translateX, translateY, scale };
}

document.addEventListener('keydown', (e) => {
    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;
        }

        switch (e.key) {
            case 'ArrowDown':
                translateVrYLeft -= moveStepVr;
                translateVrYRight -= moveStepVr;
                break;
            case 'ArrowUp':
                translateVrYLeft += moveStepVr;
                translateVrYRight += moveStepVr;
                break;
            case 'ArrowRight':
                translateVrXLeft -= moveStepVr;
                translateVrXRight -= moveStepVr;
                break;
            case 'ArrowLeft':
                translateVrXLeft += moveStepVr;
                translateVrXRight += moveStepVr;
                break;
            case '0':  // Уменьшить зум
                scaleVrLeft = Math.max(MIN_SCALEVr, scaleVrLeft - zoomStepVr);
                scaleVrRight = Math.max(MIN_SCALEVr, scaleVrRight - zoomStepVr);
                break;
            case '1':  // Увеличить зум
                scaleVrLeft = Math.min(MAX_SCALEVr, scaleVrLeft + zoomStepVr);
                scaleVrRight = Math.min(MAX_SCALEVr, scaleVrRight + zoomStepVr);
                break;
            default:
                return;  // Выход, чтобы позволить другим клавишам выполнять свои действия по умолчанию
        }

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

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

Мне надо сделать чтобы зум был всегда к центру видимой области