CEF UI Интерфейс выбора спавна через карту | React + Typescript

[dooj]

dooj добавил(а) новый ресурс:

Выбор спавна через карту | React + Typescript - Интерфейс выбора спавна при помощи карты

Всех приветствую! Предоставляю вашему вниманию, интерфейс выбора спавна.

Интерфейс написан с использованием стека: React TS, SaSS, ESlint

Если же ваш проект без использования React, то ничего страшного. При билде вам вернет index.html файл, с интерфейсом, который можно будет импортировать в проект.

В интерфейсе прописаны триггеры и ивенты, без названия. Для подключения - нужно зайти на проект и исправить "EVENT:NAME", на имя ивента и/или триггера...

Нажмите для раскрытия...

Узнать больше об этом ресурсе...

 

[Harland David Sanders]

Резервная ссылка - https://github.com/ragemp-pro/rage_spawn

 

[Alternant]

Браво, хорошее исполнение красивого дизайна.

 

[Alternant]

Прочитал код, не до конца понимаю зачем юзать стейты для отслеживания хавера и окрашивания в градиент. Это же проще сделать в css с :hover, к тому же транзишн накинуть

 

[dooj]

Alternant написал(а):

Прочитал код, не до конца понимаю зачем юзать стейты для отслеживания хавера и окрашивания в градиент. Это же проще сделать в css с :hover, к тому же транзишн накинуть

Нажмите для раскрытия...

Градиент с transition не работает, поэтому он используется как фильтр с opacity: 0/1. Ответ для понимания

 

[kirillzver]

dooj написал(а):

Градиент с transition не работает, поэтому он используется как фильтр с opacity: 0/1. Ответ для понимания

Нажмите для раскрытия...

Я думаю, что он имел ввиду то, что не обязательно вязать все эти события через реакт, можно было сделать псевдо элемент before для нужного блока, и отслеживать наведение на данный блок с помощью :hover, меняя его opacity. В таком случае transition будет работать адекватно и в обе стороны.

 

[Alternant]

kirillzver написал(а):

Я думаю, что он имел ввиду то, что не обязательно вязать все эти события через реакт, можно было сделать псевдо элемент before для нужного блока, и отслеживать наведение на данный блок с помощью :hover, меняя его opacity. В таком случае transition будет работать адекватно и в обе стороны.

Нажмите для раскрытия...

+++, просто весьма странно подвязывать подобное событие в реакт

 

[Vermilion]

Идея понравилась. Сделали вот такой вариант:
(http://imgur.com/a/p4GnJr4)

 

[Alternant]

Vermilion написал(а):

Идея понравилась. Сделали вот такой вариант:
(http://imgur.com/a/p4GnJr4)

Нажмите для раскрытия...

Сижу с открытым ртом, топ! Странно что лидирующие сервера вообще не уделяют этому внимания

 

[dooj]

kirillzver написал(а):

Я думаю, что он имел ввиду то, что не обязательно вязать все эти события через реакт, можно было сделать псевдо элемент before для нужного блока, и отслеживать наведение на данный блок с помощью :hover, меняя его opacity. В таком случае transition будет работать адекватно и в обе стороны.

Нажмите для раскрытия...

Твой посыл ясен и верен в некотором случае, за исключением того что это "компонент", к которому позволительно обращаться из любой точки кода. Из того что написал выше @Alternant, сложно предположить что он говорит о before.

Да и ничего странного априори в этом нет )

Если говорить о том как сделано, то можно было вообще вынести эти элементы кнопок с градиентом - в отдельный компонент, пере-используя их с :before, но зачем говорить о том как "можно было", если это уже работает и работает не хуже предложенного варианта. А главное - масштабируется, не нагружая при этом дополнительно css/sass, псевдо-элементами :before/:after.

Мелочь к деталям, стремление к идеалу, это точно не про free-resources )

 

[dooj]

Alternant написал(а):

+++, просто весьма странно подвязывать подобное событие в реакт

Нажмите для раскрытия...

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

На будущее: чуть опыта и подобные события будут встречаться намного чаще и даже в более банальных ситуациях. Чего стоит одна только ui-библиотека под проект, ух...

 

[Tomashino]

Кнопка Last Position соответсвует координатам последнего выхода? И другие точки так же соответсвуют? Типо кнопка дома на координатах дома.
Кнопка организации на координаиах организации.

 

[Vimper]

dooj написал(а):

Твой посыл ясен и верен в некотором случае, за исключением того что это "компонент", к которому позволительно обращаться из любой точки кода. Из того что написал выше @Alternant, сложно предположить что он говорит о before.

Да и ничего странного априори в этом нет )

Если говорить о том как сделано, то можно было вообще вынести эти элементы кнопок с градиентом - в отдельный компонент, пере-используя их с :before, но зачем говорить о том как "можно было", если это уже работает и работает не хуже предложенного варианта. А главное - масштабируется, не нагружая при этом дополнительно css/sass, псевдо-элементами :before/:after.

Мелочь к деталям, стремление к идеалу, это точно не про free-resources )

Нажмите для раскрытия...

Реализация хуже если использовать JS в тех местах, где можно обойтись без него.
А CSS позволяет решить эту проблему.

за исключением того что это "компонент" - Компонент это тот же JS который дозволительно переиспользовать

 

[Vermilion]

Tomashino написал(а):

Кнопка Last Position соответсвует координатам последнего выхода? И другие точки так же соответсвуют? Типо кнопка дома на координатах дома.
Кнопка организации на координаиах организации.

Нажмите для раскрытия...

Думаю, что нет