Vladislav Ivanov

Я не знаю как ты изучаешь технологию, я хоть и не пишу на валидном, но я за 10 минут прочитал об

MutationObserver

и понял что это просто наблюдатель за дом нодами и всё - он не смотрит за событиями дом нод, он не должен знать о том вызвался ли твой обработчик на форме или нет.

Если же сама дом нода изменилась - например если ты повесишь дата атрибут на форму - твой коллбэк в MutationObserver - будет вызван, так как дом нода изменилась, так же можно и за нодами потомков следить и т.д.

Вот я написал пример - Пример
Пусть сколько угодно будет раз вызвано событие submit - так как форма не изменилась - то и вызван коллбэк в MutationObserver не будет. Но если при submit - на форму повесить атрибут id рандомный - то коллбэк будет вызван. Вообще бы не советовал пользоваться этой штукой, от неё мне кажется проблем больше, где-то не углядишь и она будет вызывать в те моменты когда ты их и не ожидаешь.

Попробую расписать о том как работает z-index.

К примеру есть 2 дива c разным z-index, по умолчанию у них нет контекста стекирования потому что по умолчанию у них position: static; - а это позиционирование не создаёт контекст для z-index, и не важно сколько бы был z-index у .gg, нижний блок всегда будет его перекрывать, а если бы у них бы был контекст и одинаковый z-index то перекрывал бы нижний в иерархии html элемент

<div class="gg"></div>
<div class="tt"></div>

а вот и стили к ним

.gg{
  z-index: 999;
  width: 100px;
  height: 100px;
  background: red;
}

.tt{
  z-index: 2;
  width: 100px;
  height: 100px;
  background: blue;
  margin-top: -50px;
}

Из документации сказано в каких случаях создаётся контекст стекирования
1 - является корневым элементом (то есть HTML)
2 - позиционирован абсолютно (position:absolute) или относительно (position:relative) с z-index значением отличным от "auto"
3 - flex элемент с z-index отличным от "auto", чей родительский элемент имеет свойство display: flex или display: inline-flex;
4 - display: inline-flex;
5 - элементы с opacity меньше чем 1
6 - элементы с transform отличным от "none"
7 - элементы с mix-blend-mode значением отличным от "normal"
8 - элементы с filter значением отличным от "none"
9 - элементы с isolation установленным в "isolate"
10 - position: fixed;
11 - если мы указываем элементу атрибут will-change при этом не обязательно присваивать ему значения
12 - элементы с -webkit-overflow-scrolling (en-US) установленным в "touch"
13 - grid элемент с z-index отличным от "auto", чей родительский элемент имеет свойство display: grid

Если нужно что бы .gg - перекрывал нижний по иерархии html элемент, мы можем задать для .gg - один из перечисленных вариантов, например display: inline-flex; или position: relative; или же задать например родителю этих двух блоков display: flex; flex-direction: column; ( и блоки .gg .tt раз они станут флекс элементами то и z-index будет работать между ними, несмотря на то какой из них ниже а какой выше в иерархии html )

----------------------------------------------------------------------------------------------- -------------------------

Следующий пример который как раз таки возможно даст тебе понять о том как работает наконец таки z-index у детей.

Добавим потомка для дива с классом gg в данном случае это див с классом gg__children

<div class="gg">
  <div class="gg__children"></div> // потомок
</div>
<div class="tt"></div>

а вот и стили

.gg{
  width: 100px;
  height: 100px;
  background: red;
  z-index: 999;
}

.gg__children{
  width: 50px;
  height: 200px;
  background: green;
  z-index: 100;
}

.tt{
  width: 100px;
  height: 100px;
  background: blue;
  margin-top: -50px;
  z-index: 2;
}

так вот сколько угодно можно задавать потомку z-index , он всё равно выше z-index родителя прыгнуть не сможет,
а раз его родитель .gg - не имеет свой контекст и раз он находится выше в иерархии html то и соответственно .tt перекроет их всех

Советую как можно проще его использовать но зная основные принципы , или изучать от А до Я и проникнуть в саму суть его работы.

Документация

Пример

<canvas width="1000px" height="1000px"></canvas>

const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d');

const drawRect = (color, x, y, width, height) => {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, width, height);
  return {
    color, x, y, width, height
  }
}
   
drawRect('blue', 50, 50, 20, 20)
drawRect('black', 150, 150, 50, 150)

const drawLine = (x1,y1,x2,y2) => {
  ctx.lineWidth = '3';
  ctx.strokeStyle = 'violet';
  ctx.beginPath();
  ctx.moveTo(x1,y1);
  ctx.lineTo(x2,y2);
  ctx.closePath();
  ctx.stroke();
}


canvas.addEventListener('click', (e) => {
  canvas.width += 0;
   
  const npc = drawRect('blue', 50, 50, 20, 20)
  const house = drawRect('black', 150, 150, 50, 150)
  drawRect('green', e.clientX, e.clientY, 20, 20)
  
  const x1 = npc.x, y1 = npc.y, x2 = e.clientX, y2 = e.clientY;

  const points = [];
  for(let i = 0.0; i <= 1; i = i+0.01){
    const gg = getPositionAlongTheLine(x1,y1,x2,y2, i);
    drawRect('aqua' ,gg.x, gg.y, 2 , 2)
    points.push({x: gg.x, y: gg.y, width: 10, height: 10})
  }
  
  for(let i = 0; i < points.length; i++){
    if(collides({...points[i], width: 2, height: 2}, house)){
      console.log('есть препятствие')
      return;
    }
  }
  drawLine(x1, y1, x2, y2)
})
  
  // отдает координаты равные проценту расстояния: percentage максимум = 1 
  function getPositionAlongTheLine(x1, y1, x2, y2, percentage) {
    return {x : x1 * (1.0 - percentage) + x2 * percentage, y : y1 * (1.0 - percentage) + y2 * percentage};
  }
 

  function collides(a,b){
      return a.x < b.x + b.width &&
             a.x + a.width > b.x &&
             a.y < b.y + b.height &&
             a.y + a.height > b.y;
  }

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

Синий - нпс
Черный - препятствие
Зеленый - игрок

Если нпс видит игрока - появляется линия между нпс и игроком.

Игрок на карте появляется при нажатии на левую кнопку мыши.

не советую вообще забивать голову этим дерьмом, потому что разбивать серверную логику на 2 сервера - это самое ужасное что может быть, зачем вообще сделали разработчики эту возможность ? - для каких-то наверное нестандартных ситуаций, или где-то отключить кэширования и т.д, если кратко то, сделали скорее всего для гибкости и всё

максимум считаю нормой юзать middleware, для разделение роутов на защищённые и не защищённые

Проблема в том что машине недостаточно оперативной памяти для запуска процесса, решить это можно двумя способами на сколько я узнал:
1 - swapfile , гуглиться очень просто к примеру - "swapfile ubuntu"
2 - расширить оперативку сменой тарифа на хосте

надо убедиться что везде где используется useDispatch и useSelector - это клиентские компоненты

Как ты используешь этот RegisterService?
Чтоб он работал, как и написано в ошибке, он должен быть компонентом.
Т.е. <RegisterService ...> или React.createElement(RegisterService, ...) .

Второй вариант: он может быть не компонентом, а хуком. Тогда он должен вызываться внутри другого компонента, а также иметь префикс use - useRegisterService(отсутствие префикса не приведёт к ошибке, но это стандарт).

Если ты просто вызываешь его где-то вне компонента как функцию - ничего работать не будет.

Вот и напишите проект, который будет генерировать идеи проектов.