flksshk

проблема в том, что когда world уже увеличен или сдвинут, getBoundingClientRect() даёт тебе уже искажённые координаты, и ты по сути зумишь не туда, куда реально указывает курсор. типа ты рассчитываешь точку в искажённой системе координат, а надо брать реальную, до трансформации. решается это просто: нужно перевести координаты мыши из окна в локальные координаты world с учётом текущей трансформации, и для этого используется m.inverse()

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

короче тебе нужно сделать так, чтобы каждый таймер сохранялся в объекте с ключами это будут их ID. Так ты сможешь управлять каждым таймером отдельно. Когда фильтруешь список, можно просто чистить конкретные таймеры по их ID.
Храни ID каждого таймера в стейте
Когда таймер должен остановиться, вызываешь clearInterval с нужным ID, который хранится в стейте

В итоге у тебя будет что-то типа этого:
const [timers, setTimers] = useState({});

useEffect(() => {
if (time) {
const timerId = setInterval(() => onTick(id), 1000);
setTimers(prev => ({ ...prev, [id]: timerId }));
playTime(id, timerId);
} else {
clearInterval(timers[id]);
stopTimer(id);
}

return () => {
clearInterval(timers[id]);
};
}, [time, id]);
когда фильтруешь список, ты можешь остановить только тот таймер, который нужен, не сбивая остальные

Храни JWT в httpOnly и secure куке, так безопаснее всего. На сервере Next.js ты спокойно читаешь куку и подставляешь токен в fetch-запросы к Nest. Для Socket.IO сделай отдельный API-эндпоинт: он читает куку, проверяет токен и возвращает клиенту временный токен. Клиент получает его и подключается к сокету. Основной токен остаётся в куке, и в браузер напрямую не попадает. Хранить токен в localStorage или прокидывать в props не стоит

проблема в том что ты применяешь css модули ко всем файлам, включая react-loading-skeleton. эта библиотека ожидает типо того что классы останутся в исходном виде, но при использовании css модулей классы переименовываются и стили не работают. для решения просто свои стили обрабатывай через модули а которые импортишь - без.