[SOK-21] start game page #11

Timur233 · 2024-09-29T00:27:45Z

### Какую задачу решаем

Добавил компонент Loader
Добавил компонент Modal
Добавил компонент Icon
Добавил favicon

Если нужно добавить иконку добавляйте в /public/sprite.symbol.svg

Скриншоты/видяшка (если есть)

TBD (если есть)

…/falcon-tanks into SOK-21_start-game-page

- стрелки

…to SOK-21_start-game-page

k0ndratov

Крутая работа.

Лоадер выглядит круто!
Система спрайтов тоже выглядит удобно.
Компоненты для иконок тоже классно смотрятся.

Возможно только чуть пугает система инпут контролла. Так как ее явно стоит согласовать с прототипом игры.

k0ndratov · 2024-09-29T09:48:04Z

packages/client/src/pages/Game/Game.tsx

+    const handleKey = (event: KeyboardEvent) => {
+      const isKeydown = event.type === 'keydown'
+
+      switch (event.key) {


Выглядит так, что начинаем жестко зависить от нажатых кнопок. Подобную проблему вижу так же с PR с прототипом игры: https://github.com/Timur233/falcon-tanks/pull/9/files/ab6292a0ce91ace230faa7b4238b6a4a7d31c813#diff-dddbaaf61c004c44b0c8710b18b527e19ddc2fdc04759c5d1037e6e53627a491

Возможно нам стоит придумать единый механизм отслеживания нажатий кнопок и систему подписок событий на это (аля эвентбас как из первого модуля, но в реалиях реакта).

Плюс тут обрабатываются не все способы управления. Потенциально wasd тоже ожидаемое поведение.

Ты прав.
Тут добавил отслеживание кнопок только для примера, в итоге буду использовать то решение которое будет финальное в игре.

В таком случае возможно стоит это поменить TODO: или типо того, чтобы не смушать при резолве конфликтов.

Сделал

k0ndratov · 2024-09-29T09:49:36Z

packages/client/src/pages/Game/Game.tsx

+
+  useEffect(() => {
+    const handleKey = (event: KeyboardEvent) => {
+      const isKeydown = event.type === 'keydown'


Может быть лучше event.preventDefault() лучше сразу тут делать? Чтобы не пробрасывать event в toggleButton()?

Мне не нужно сбрасывать событие на все кнопки, а так как функция только для примера, не стал раздувать case.))

k0ndratov · 2024-09-29T10:09:53Z

packages/client/src/components/common/Modal/Modal.tsx

+import './Modal.scss'
+
+type ModalPropsType = {
+  show?: boolean


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

Исправил

k0ndratov · 2024-09-29T10:16:45Z

packages/client/src/components/common/Modal/Modal.tsx

+  children: React.ReactNode
+}
+
+export const Modal = (props: ModalPropsType) => {


Я слышал про вроде как уже доступный API для поповеров.

https://doka.guide/html/popover/

Может быть лучше обернуть это в него? Вроде как это становится стандартом.

Пока не буду это делать, может быть позже реализуем.

k0ndratov · 2024-09-29T10:28:56Z

packages/client/src/components/common/Modal/Modal.scss

+    inset: 0;
+    z-index: -1;
+
+    &::before {


Мб быть тут тоже в миксин засунуть, как ты это раньше делал?

Сделал.

k0ndratov · 2024-09-29T10:40:31Z

packages/client/src/components/ui/Loader/Loader.scss

+  align-items: center;
+  justify-content: center;
+  inset: 0;
+  z-index: 10;


Я вот думаю, не может ли стать проблемой, что при лоадере перекрывается возможность клацать в меню?

Нет, но вот кнопку аварийного закрытия можно сделать. Сегодня сделаю

Кнопка "закрыть" будет появляться через 5 секунд после отрытия лоадера.

k0ndratov · 2024-09-29T10:44:45Z

packages/client/src/components/ui/Loader/Loader.tsx

@@ -0,0 +1,18 @@
+import './Loader.scss'
+import LoaderGif from '@/assets/images/loader.png'


Не было опыта, а нормально что расширение png?

Да вполне норм. В поддержке только нет старых ie

VladToby

Отличная работа! В основном никаких замечаний и пожеланий нет, немного смутил один момент со svg-спрайтом.

packages/client/src/components/ui/SvgSprite/SvgSprite.tsx

shamemask

Мне нравится, я в целом не очень опытный в ревью, а во фронте вообще, по-моему здорово!

gloginov

Четко, классно!

gloginov · 2024-10-02T08:25:50Z

packages/client/src/scss/vars.scss

@@ -38,6 +41,7 @@ $red-ligth-gradient: radial-gradient(#fc2204 -40%, transparent 70%);
 $main-text-shadow: 1px 0 $c_black, -1px 0 $c_black, 0 1px $c_black,
  0 -1px $c_black, 1px 1px $c_black, -1px -1px $c_black, 1px -1px $c_black,
  -1px 1px $c_black;
+$overlay-color: #000000bd;


Опечатка? Или фича?

VladToby

Отличная работа! Выглядит круто! Замечаний по сути нет, только одно предложение

VladToby · 2024-10-02T22:37:45Z

packages/client/src/pages/Game/components/Arrows/Arrows.tsx

+export const Arrows = (props: ArrowsPropsType) => {
+  const { className, buttonsState, clickHandler } = props
+
+  return (


Можно немного улучшить типизацию и убрать дублирование
, пример в файле
Arrows.tsx.zip

kyzinatra · 2024-10-03T07:53:30Z

packages/client/src/components/common/Modal/Modal.scss

+      inset: 0;
+      border-radius: $border-radius;
+      background: linear-gradient(to left, #5e5e5e, #414243);
+      z-index: -1;


Можно лучше: цвета лучше вынести в константу

Поправил

kyzinatra · 2024-10-03T07:56:54Z

packages/client/src/components/common/Modal/Modal.tsx

+
+  return (
+    <div className={`modal ${show ? 'modal_show' : ''}`} onClick={onClose}>
+      <div


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

@kyzinatra
Не использовал раньше порталов, спасибо за подсказку.

kyzinatra · 2024-10-03T07:58:14Z

packages/client/src/components/ui/Loader/Loader.tsx

+    if (show) {
+      timer = setTimeout(() => {
+        setShowCloseButton(true)
+      }, 5000)


Почему выбрано время именно 5 секунд? Почему не показать кнопку сразу если я, к примеру, случайно открыл

@kyzinatra
Пришлось потратить немного времени, на принятие того что эта задержка и правда не нужна 😅

kyzinatra · 2024-10-03T07:58:59Z

packages/client/src/components/ui/SvgSprite/SvgSprite.tsx

+  useEffect(() => {
+    if (isLoaded === false) {
+      fetch('/sprite.symbol.svg')
+        .then(res => res.text())


Можно лучше: мне кажетяс url для svg стоит передавать как пропс

Сделал

kyzinatra

Отличная работа! В целом верстка сделана хорошо. Я оставил несколько комментариев в моментах, которые вызвали у меня вопросы. Если захотите ответить, то не забудьте тэгнуть меня @kyzinatra. И я обязательно приду. В остальном мне все нравится, так что ваша работа принята!

- Отрендерил модалку через портал - Убрал задержку появления кнопки закрытия лоадера - SvgSprite Передал url спрайта через пропсы - Фиксы по стилям

…to SOK-21_start-game-page

k0ndratov and others added 18 commits September 27, 2024 16:57

wip

417a413

refact: small css changes

191d8fa

feat: text-color-muted variable

d9b6f53

feat: use border for player img

1103036

Merge branch 'SOK-20_leaderboard-page' of https://github.com/Timur233…

1f3961f

…/falcon-tanks into SOK-21_start-game-page

Кнопки управления танком:

13e4a69

- стрелки

Кнопки управления танком:

cc9e83d

- стрелки

Merge branch 'develop' of https://github.com/Timur233/falcon-tanks in…

88891ef

…to SOK-21_start-game-page

Добавил Favicon

b48468b

Добавил чуть переменных

cd7f210

Добавил Favicon

f73667e

Добавил компонент Icon

538af89

Добавил компонент модалки

8244591

Добавил компонент Прелоадер

c22b302

В кнопке сделал prop className не обязательным

0d777d0

Компонент CustomPageTitle исправил ошибку в стилях

742d9ad

Сврерстал страницу игры и окно начала игры

95411b0

Сврерстал страницу игры и окно начала игры

0768737

Timur233 requested review from gloginov, VladToby, shamemask and k0ndratov September 29, 2024 00:27

k0ndratov approved these changes Sep 29, 2024

View reviewed changes

Правки ревью k0ndratov

9daba7e

VladToby reviewed Sep 30, 2024

View reviewed changes

packages/client/src/components/ui/SvgSprite/SvgSprite.tsx Outdated Show resolved Hide resolved

k0ndratov mentioned this pull request Sep 30, 2024

[WIP] [SOK-17] forum #10

Closed

Добавил состояние для загрузки спрайта иконок

0fbd8c9

shamemask approved these changes Oct 1, 2024

View reviewed changes

VladToby approved these changes Oct 1, 2024

View reviewed changes

Timur233 changed the title ~~[SOK-17] start game page~~ [SOK-21] start game page Oct 2, 2024

gloginov approved these changes Oct 2, 2024

View reviewed changes

VladToby approved these changes Oct 2, 2024

View reviewed changes

kyzinatra reviewed Oct 3, 2024

View reviewed changes

kyzinatra approved these changes Oct 3, 2024

View reviewed changes

Timur233 added 3 commits October 3, 2024 18:45

Правки:

e745411

- Отрендерил модалку через портал - Убрал задержку появления кнопки закрытия лоадера - SvgSprite Передал url спрайта через пропсы - Фиксы по стилям

Merge branch 'develop' of https://github.com/Timur233/falcon-tanks in…

98289b3

…to SOK-21_start-game-page

Linter Format

1ea0f72

Timur233 merged commit 2b4debc into develop Oct 3, 2024
1 check passed

k0ndratov mentioned this pull request Oct 5, 2024

[SOK-17] forum #16

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[SOK-21] start game page #11

[SOK-21] start game page #11

Timur233 commented Sep 29, 2024

k0ndratov left a comment

k0ndratov Sep 29, 2024

Timur233 Sep 29, 2024

k0ndratov Sep 29, 2024

Timur233 Sep 30, 2024

k0ndratov Sep 29, 2024

Timur233 Sep 29, 2024

k0ndratov Sep 29, 2024

Timur233 Sep 29, 2024

k0ndratov Sep 29, 2024

Timur233 Sep 30, 2024

k0ndratov Sep 29, 2024

Timur233 Sep 30, 2024

k0ndratov Sep 29, 2024

Timur233 Sep 30, 2024

Timur233 Sep 30, 2024

k0ndratov Sep 29, 2024

Timur233 Sep 30, 2024

VladToby left a comment

shamemask left a comment

gloginov left a comment

gloginov Oct 2, 2024

VladToby left a comment

VladToby Oct 2, 2024

kyzinatra Oct 3, 2024

Timur233 Oct 3, 2024

kyzinatra Oct 3, 2024

Timur233 Oct 3, 2024

kyzinatra Oct 3, 2024

Timur233 Oct 3, 2024

kyzinatra Oct 3, 2024

Timur233 Oct 3, 2024

kyzinatra left a comment •

edited

Loading

		@@ -0,0 +1,18 @@
		import './Loader.scss'
		import LoaderGif from '@/assets/images/loader.png'

[SOK-21] start game page #11

[SOK-21] start game page #11

Conversation

Timur233 commented Sep 29, 2024

Скриншоты/видяшка (если есть)

TBD (если есть)

k0ndratov left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

VladToby left a comment

Choose a reason for hiding this comment

shamemask left a comment

Choose a reason for hiding this comment

gloginov left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

VladToby left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kyzinatra left a comment • edited Loading

Choose a reason for hiding this comment

kyzinatra left a comment •

edited

Loading