Вопрос Уведомления CEF и форматы экрана (16:9 / 4:3)

[Yara_Amon]

В примере выше у тебя там солянка, и адаптивные единицы и нет.

я сделал все правильно но все равно оно не подстраивается под формат

 

[enotit]

я сделал все правильно но все равно оно не подстраивается под формат
Посмотреть вложение 20328

Возьми скрипт с редаги. у тебя же карта не статичная, может расширение экрана, может карта в трёх положениях. Может её не быть.

 

[Yara_Amon]

все равно почему-то не работает

Возьми скрипт с редаги. у тебя же карта не статичная, может расширение экрана, может карта в трёх положениях. Может её не быть.

 

[Yara_Amon]

Я по итогу вот так сделал js =

const container = document.createElement('div');
container.id = 'notification-container';
document.body.appendChild(container);

const maxNotifications = 5;
const visibleTime = 2000;
const fadeTime = 300;

if ('alt' in window) {
    alt.on('showHUDNotify', (data) => {
        const notif = document.createElement('div');
        notif.classList.add('notify', 'show');

        const img = document.createElement('img');
        img.src = data.iconSrc || 'hud/icon-green.png';
        img.style.width = data.width || '1.1vw';
        img.style.height = data.height || '1.1vw';
        notif.appendChild(img);

        const text = document.createElement('span');
        text.innerHTML = `
            ${data.textPrefix || ''}
            <strong style="color: ${data.actionColor || '#00BC38'}">${data.actionText || 'зашли'}</strong>
            ${data.zoneText || ''}
        `;
        notif.appendChild(text);

        container.appendChild(notif);

        // Удаление при переполнении
        if (container.children.length > maxNotifications) {
            const first = container.firstChild;
            first.classList.remove('show');
            first.classList.add('hide-down');
            setTimeout(() => first.remove(), fadeTime);
        }

        setTimeout(() => {
            notif.classList.remove('show');
            notif.classList.add('hide-down');
        }, visibleTime - fadeTime);

        setTimeout(() => {
            notif.remove();
        }, visibleTime);
    });
}

function getFormatSize(aspectRatio, status) {
    let width = 0;
    let height = 0;

    if (status === 3) return { width: 0, height: 0 }; // Скрыть

    // Форматы
    if (aspectRatio >= 1.49 && aspectRatio <= 1.51) {         // 3:2
        width = status === 2 ? 380 : 310;
        height = 55;
    } else if (aspectRatio >= 1.32 && aspectRatio <= 1.34) {  // 4:3
        width = status === 2 ? 430 : 360;
        height = 55;
    } else if (aspectRatio >= 1.65 && aspectRatio <= 1.67) {  // 5:3
        width = status === 2 ? 400 : 330;
        height = 55;
    } else if (aspectRatio >= 1.24 && aspectRatio <= 1.26) {  // 5:4
        width = status === 2 ? 450 : 380;
        height = 55;
    } else if (aspectRatio >= 1.77 && aspectRatio <= 1.79) {  // 16:9
        width = status === 2 ? 370 : 300;
        height = 55;
    } else if (aspectRatio >= 1.59 && aspectRatio <= 1.61) {  // 16:10
        width = status === 2 ? 390 : 320;
        height = 55;
    } else {
        width = status === 2 ? 360 : 300; // default fallback
        height = 55;
    }

    return { width, height };
}

function updateNotifySize(status) {
    const notifies = document.querySelectorAll('.notify');
    const aspectRatio = window.innerWidth / window.innerHeight;

    const { width, height } = getFormatSize(aspectRatio, status);

    notifies.forEach(notif => {
        notif.style.width = `${width}px`;
        notif.style.height = `${height}px`;
    });
}

// Автообновление при изменении экрана
window.addEventListener('resize', () => {
    updateNotifySize(lastStatus || 1);
});

// Alt:V подключение
let lastStatus = 1;
if ('alt' in window) {
    alt.on('updateNotifySize', (status) => {
        lastStatus = status;
        updateNotifySize(status);
    });
}

 

[Yara_Amon]

И он не работает, уведомления просто появляются в верхнем левом углу. Принимая width и height от текста в уведомлении, например 1 текст это = вы зашли в зеленую зону. И данное уведомление маленькое, а когда появляется выше 2 текст = вы пристегнули ремень безопасности, то блок со 2 текстом больше чем 1. Из-за этого 1 блок делается как 2, а точнее они одинаковые

 

[nafanya100]

верстай ваще на vw а не на пикселях, для рыги самое то, и ниче адаптивить вручную не надо

 

[Yara_Amon]

верстай ваще на vw а не на пикселях, для рыги самое то, и ниче адаптивить вручную не надо

У меня не редага, у меня самопис

 

[Stefan_]

У меня не редага, у меня самопис

Он имел в веду не редагу а rage

 

[Yara_Amon]

Он имел в веду не редагу а rage

А понял, но я делаю на alt-v. А сюда обращаюсь тобишь нету нормальных форумов для alt-v

 

[Yara_Amon]

Ну так как сделать? Помоги пожалуйста

Возьми скрипт с редаги. у тебя же карта не статичная, может расширение экрана, может карта в трёх положениях. Может её не быть.

 

[nafanya100]

А понял, но я делаю на alt-v. А сюда обращаюсь тобишь нету нормальных форумов для alt-v

какие форумы) я тебе говорю про верстку, ты можешь верстать через пиксели (px) и верстка не будет адаптивна под другие экраны, если ты у себя сверстаешь худ на 2к монике, он будет норм, но стоит включить 1080x1080 рес, то худ будет огромный. а верстка через vw это фиксит, оно будет адаптировано под экран и нормально выглядеть

p.s: никто не запрещает адаптивно верстать на пикселях и мб на флексах + медиа запросы, но я лично юзаю vw

 

[Yara_Amon]

какие форумы) я тебе говорю про верстку, ты можешь верстать через пиксели (px) и верстка не будет адаптивна под другие экраны, если ты у себя сверстаешь худ на 2к монике, он будет норм, но стоит включить 1080x1080 рес, то худ будет огромный. а верстка через vw это фиксит, оно будет адаптировано под экран и нормально выглядеть

p.s: никто не запрещает адаптивно верстать на пикселях и мб на флексах + медиа запросы, но я лично юзаю vw

Я это понял, но как сделать чтобы худ подстраивался под формат внутри игры?

 

[Stefan_]

Я это понял, но как сделать чтобы худ подстраивался под формат внутри игры?

Он же ответил на твой вопрос, использование vw

 

[nafanya100]

Я это понял, но как сделать чтобы худ подстраивался под формат внутри игры?

если ты хочешь сделать нотифи в центре экрана (я просто тебя не понял до конца что ты имеешь ввиду), можешь использовать дисплей грид/или:

// сделаешь элементы в центре экрана (то бишь твой контейнер в котором нотифи упадет в центр):
html {
    display: flex;
    justify-content: center;
    align-items: end;

    width: 100%;
    height: 100%;
}

//или так (вообще не советую прикасаться к этим абсолютам, я в свое время все на них верстал, каждый элемент когда начинал верстать)):
.дивКонтейнераНотифи {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 90%;
    left: 50%;
}