Как реализовать интерактивное добавление элементов на стороне Front-end?
Доброго времени суток!
Необходимо реализовать интерактивные выбор, добавление, удаление элементов. Что имеется в виду. При нажатии на кнопку пользователь попадает в режим редактирования, в котором он может добавлять элементы на сетку (еще нужно реализовать эту сетку), причем должен быть заранее подготовленный набор этих элементов (блоки с картинками). Эти элементы можно перемещать, изменять, удалять. После сохранения - выход из режима редактирования. На эти элементы можно кликать, чтобы менять их состояние (активный/неактивный, всего 2 состояния). Размер сетки неограничен, а элементы должны быть привязаны друг к другу (всегда один из элементов должен касаться другого). Выглядеть это все должно как квадраты на шахматной доске, только у ячеек больше цветов и размер поля может быть произвольный.
С DOM может и можно что-то сделать (и возможно даже проще), но как он будет вести себя с полем 1000х1000, например. С canvas или webgl (а также их библиотеками) не работал. Еще хочу это дело связать через socket.io.
Если кто-то делал похожее или знает ссылки, где хотя бы частично раскрываются эти вопросы - поделитесь, пожалуйста. Источники можно на английском.
вы очень сумбурно описали задачу, извините.
Вам нужен канвас или webgl?
или вам интересен DOM тоже?
если через dom - подойдет любой фреймворк (React, Vue, Angular).
У вас какая-то игра планируется?
если так - поделитесь подробностями, так будет намного легче подсказать.
Афанасий Захаров, Приветствую.
Это не то, что бы игра, это прототип, в дальнейшем хочу использовать для игры (она должа интегрироваться с существующим react приложением). В общем, есть комната, к которой присоединены юзеры. Юзеры в реальном времени видят изменения на карте (кто-то из нах кликнул на элемент - остальные увидели, что элемент стал активным или неактивным). В этой комнате есть карта, на которой располагаются эти элементы, на который можно кликать (карта в виде сетки, на которой расположены квадраты одинакового размера). Если у юзера есть права на изменение элементов на карте (этот юзер находится в списке админов комнаты), то он может попасть в отельный режим редактирования (этой карты - не знаю, как точно выразиться.). Если комната только что создана, то ее карта пуста.
Как хочу сделать, чтобы добавлялись элементы? Например, я как админ зашел в режим редактирования. У меня на карте есть один элемент в виде квадрата, на котором нарисован знак "+". При клике на этом элементе появляется панель, на которой можно выбрать элемент (они заранее заготовлены). Когда я выбрал, что мне нужно, то на поле вместо элемента в виде квадрата с изображение "+" появляется элемент в виде квадрата с тем изображением, которое я выбрал в во всплывающей панели. Кроме того рядом появляется еще 8 квадратов с изображением "+" (то есть поле становится размером 3x3, где в центе него только что созданный элемент). Эти элементы с плюсами должны как бы обтекать созданные элементы. А дальше, кликая дальше на эти квадраты с плюсами, я могу выбирать и добавлять новые элементы на карту. При сохранении эти квадраты с плюсами не будут видны на итоговой карте. В обычном режиме доступен только просмотр карты и клики на нее, чтобы менять состояние (активный элемент/неактивный элемент).
Из того, что хотелось бы еще сделать: масштабирование, перемещение камеры (вертикальный/горизонтальный скроллы).
Мне просто кажется, что если делать это на DOM, то будет тормозить при больших размера поля. Да и если разберусь получше, естественно буду развивать дальше, а это значит, что со временем возможностей дома может не хватить.
Не знаю, насколько это подробно, но как мог описал.
Артем, если у вас не подразумевается больших перерисовок этих клеток ежесекундно, то я бы использовал react. (DOM)
Но, я с вероятностью в 90% могу сказать, что если будет огромное количество перерисовок - лагать все равно будет (в зависимости от мощности компьютера), чтобы вы не выбрали - DOM, или, например Canvas.
