profesor08

https://scrollmagic.io/
https://scrollmagic.io/examples/advanced/section_w...

По сути горизонтальной прокрутки нет, и не должно быть, она не удобная. Но есть эффект перемещения блоков по горизонтали.

Есть несколько вариантов

• Получить ответ от апи, потом инициализировать redux, потом сам react.
  
• Инициализировать все данными по умолчанию. Организовать некоторый лоадер, чтоб показать заглушку. Инициализировать загрузку данных, потом через action обновить свое хранилище.
  

Есть несколько вариантов:

1. Взять эту svg и вставить в свой html, поправить номера и все. На этом вся верстка этого блока окончена. В svg должны быть и правильный пунктир, и тени и цвета.
   
2. Попытаться сверстать кривое подобие на html и css. Результат как на картинке - недостижим. Примеры выше и вот этот (https://codepen.io/Profesor08/pen/XWedbmj), это прекрасно демонстрируют.
   
   
   

Создаешь проект на реакте или solid, верстаешь себе. Когда нужен будет хтмл, то скриптом генерируешь его. Потом используешь где надо. Единственное неудобство в том, что если нужен какой-то интерактив, то не получится написать его в компонентах, а потом все это сбилдить в хтмл, а код отдельно. Придется заводить отдельный скрипт для всего интерактива.

P.S. Нет никакого смысла верстать хтмл, потом растаскивать его на куски на бэкенде. Поддерживать такое очень сложно и долго. Если есть возможность использовать бэкенд в качестве апи, то не надо этим пренебрегать.

В девтулзах, в стилях отображается конкретно то, что прописано в .css файле или в теге <style>. Это, в первую очередь, важно для разработчиков сайта, чтоб понимать что будет на выходе. Во вторых, так как разработчики используют некую тему, то они не заморачиваются над кодами цветов, они просто используют --btn-color, не заморачиваясь над тем, какой там цвет кода. И браузер всеми силами, в меру своих возможностей, помогает им, предоставляя доступ к отладочной информации.

Ты же, будучи посторонним и непричастным к разработке сайта, не имеешь доступа к исходникам и всей отладочной информации. Более того, тебе этого и не надо. И разработчикам это тоже не надо. А это значит, что придется пользовать тем, что есть:

• наводишь на переменную и смотришь ее значение
  
• кликаешь на переменную и переходишь к ее объявлению
  

Если же такой расклад не устраивает, то есть еще варианты:

• Связаться с разработчиками сайта и попросить их убрать css переменные и заменить их на коды цветов. Скорее всего будешь послан xD в том или ином виде, если вообще ответят.
  
• Написать свое расширение для девтулзов, которое поставить финальные значения на место переменных.
  
• Если написать не в силах, то заплати кому-то за разработку.
  
• Если денег на себя жалко, то попроси кого-то написать такое расширение, авось повезет.
  
• Еще можно попытаться упросить разработчиков браузера, но это не просто. Но если получится, то через пару лет xD добавится галочка.
  

Так как тут электрон, то при установке билдятся нативные компоненты, библиотеки, бинарники под твою операционку. Чтоб все это заработало, придется поставить еще и питон, с++ sdk и все что попросит в ошибках в консоли. Увы, но электрон это не только js. А сами Js модули можно спокойно обновлять, апи в них редко меняется.

Пример с анимацией по наведению курсора. Минусом будет тут то, что картинки надо объединить в одну длинную картинку, где все кадры следуют друг за другом по порядку. Онлайн сервисы по объединению картинок в спрайт есть.

Неплохо бы указать с каким типом объекта будет работать твой ref.

const selected = ref<HTMLInputElement[]>([])

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

Хранение истории/логов чего угодно. Их будет непросто подтасовать, при условии что у нас некая распределенная сеть и все друг друга перепроверяют. А если нет, то нет смысла усложнять себе жизнь.

https://getbootstrap.com/docs/5.1/forms/input-group/

Когда у меня не было роутера, то мне приходилось вписывать все необходимые адреса в настройках сетевого адаптера. Так что посмотри что прописано на старом компе, или посмотри какие данные прилагаются к контракту и впиши их.

На андроид или иос есть учетная запись. Авторизуй через нее. Если юзер так не хочет или учетки нет (пользоваться нормально телефоном будет не просто), то по емейлу и паролю, или по номеру телефона и паролю. При регистрации прислать смс/емейл с кодом подтверждения. Дальнейший вход будет осуществляться в зависимости от способа регистрации: в один клик по учетке, емейл/телефон + пароль.

Если полагаться на смс, то можно лишиться пользователей. СМС может идти пару секунд, минут, часов или просто не прийти, или прийти с опозданием сразу 10 раз в любом порядке, так как юзер будет тыкать кнопку снова и снова пока не надоест и не удалит приложение.

Именно тут await ждет когда отработает колбек, а не запрос. Если dispatch не промис, то await перед ним тоже не нужен. Так-же блок try/catch никак не отреагирует на исключения в промисе или колбеке. Грубо говоря код делает вовсе не то, что тебе от него хочется.

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

socket.on("exit", async () => {
  try {
    const response = await axios.post(
      process.env.REACT_APP_API_URL + "api/games/remove",
      {
        game: MATCH_ID,
        team,
      },
    );

    await dispatch({
      type: UPDATE_GAME,
      game: response.data.game,
      team_a: response.data.team_a,
      team_b: response.data.team_b,
    });

    await dispatch({
      type: ACCEPT,
      accepts: false,
    });
  } catch (err) {
    console.error(err);
  }
});