// static/js/vr.js

let translateVrX = 0;
let translateVrY = 0;
let scaleVr = 0.05;  // Начальный масштаб

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

document.addEventListener('keydown', (e) => {
    const vrWrapper = document.getElementById('vr-wrapper');
    if (vrWrapper) {
        switch (e.key) {
            case 'ArrowUp':
                translateVrY -= moveStepVr;
                break;
            case 'ArrowDown':
                translateVrY += moveStepVr;
                break;
            case 'ArrowLeft':
                translateVrX -= moveStepVr;
                break;
            case 'ArrowRight':
                translateVrX += moveStepVr;
                break;
            case '0':  // Уменьшить зум
                scaleVr = Math.max(MIN_SCALEVr, scaleVr - zoomStepVr);
                break;
            case '1':  // Увеличить зум
                scaleVr = Math.min(MAX_SCALEVr, scaleVr + zoomStepVr);
                break;
            default:
                return;  // Выход, чтобы позволить другим клавишам выполнять свои действия по умолчанию
        }

        updateVRTransform(vrWrapper);
        //e.preventDefault();
    }
});

function updateVRTransform(vrWrapper) {
    vrWrapper.style.transform = `translate(${translateVrX}px, ${translateVrY}px) scale(${scaleVr})`;
    vrWrapper.style.backgroundPosition = `${translateVrX}px ${translateVrY}px`;
}

document.getElementById('toggle-vr').addEventListener('click', () => {
    const vrWrapper = document.getElementById('vr-wrapper');

    if (vrWrapper) {
        vrWrapper.remove();
        boardWrapper.style.display = 'block'; // Показать оригинальную доску
        isVRMode = false;
    } else {
        isVRMode = true;
        // Создание контейнера VR
        const newVrWrapper = document.createElement('div');
        newVrWrapper.id = 'vr-wrapper';

        const leftHalf = document.createElement('div');
        leftHalf.className = 'half-screen';
        const rightHalf = document.createElement('div');
        rightHalf.className = 'half-screen';

        const boardWrapperCloneLeft = boardWrapper.cloneNode(true);
        const boardLeft = boardWrapperCloneLeft.firstElementChild;

        const boardWrapperCloneRight = boardWrapper.cloneNode(true);
        const boardRight = boardWrapperCloneRight.firstElementChild;

        // Функция для обновления трансформации
        const applyTransformShift = (element, shiftX) => {
            const currentTransform = element.style.transform || '';

            let newTransform;
            let translateXMatch = currentTransform.match(/translateX\(([-\d.]+)px\)/);
            let translateMatch = currentTransform.match(/translate\(([-\d.]+)px,\s*([-\d.]+)px\)/);

            if (translateXMatch) {
                const currentTranslateX = parseFloat(translateXMatch[1]);
                const newTranslateX = currentTranslateX + shiftX;
                newTransform = currentTransform.replace(/translateX\(([-\d.]+)px\)/, `translateX(${newTranslateX}px)`);
            } else if (translateMatch) {
                const currentTranslateX = parseFloat(translateMatch[1]);
                const currentTranslateY = parseFloat(translateMatch[2]);
                const newTranslateX = currentTranslateX + shiftX;
                newTransform = currentTransform.replace(/translate\(([-\d.]+)px,\s*([-\d.]+)px\)/, `translate(${newTranslateX}px, ${currentTranslateY}px)`);
            } else {
                newTransform = `translateX(${shiftX}px) ${currentTransform}`.trim();
            }

            element.style.transform = newTransform;
        };

        if (boardLeft) {
            boardLeft.id = 'board-left';
            applyTransformShift(boardLeft, 30); // Смещаем board-left на 30 пикселей вправо
        }

        if (boardRight) {
            boardRight.id = 'board-right';
            applyTransformShift(boardRight, -30); // Смещаем board-right на 30 пикселей влево
        }

        leftHalf.appendChild(boardWrapperCloneLeft);
        rightHalf.appendChild(boardWrapperCloneRight);

        newVrWrapper.appendChild(leftHalf);
        newVrWrapper.appendChild(rightHalf);
        document.body.appendChild(newVrWrapper);

        boardWrapper.style.display = 'none'; // Скрыть оригинальную доску
    }
});

Я ошибся мне надо применить обработчики не к vr-wrapper, а к boardLeft и boardRight