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

Timur233 · Sep 30, 2024 · 9daba7e · 9daba7e
1 parent 0768737
commit 9daba7e
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 16 deletions.
diff --git a/packages/client/src/components/common/Modal/Modal.scss b/packages/client/src/components/common/Modal/Modal.scss
@@ -61,30 +61,27 @@ $border-color: #70842f;
     inset: 0;
     z-index: -1;
 
-    &::before {
+    @mixin borderDecorSettings($top, $bottom) {
       content: '';
       position: absolute;
-      height: 8px;
+      top: $top;
+      bottom: $bottom;
       left: 0;
-      top: 0;
       right: 0;
+      height: 8px;
 
       background: url('@/assets/images/svg/title-decor.svg') no-repeat center
         center;
       background-size: contain;
     }
 
+    &::before {
+      @include borderDecorSettings(0, auto);
+    }
+
     &::after {
-      content: '';
-      position: absolute;
-      height: 8px;
-      left: 0;
-      bottom: 0;
-      right: 0;
+      @include borderDecorSettings(auto, 0);
 
-      background: url('@/assets/images/svg/title-decor.svg') no-repeat center
-        center;
-      background-size: contain;
       transform: rotate(180deg);
     }
   }

diff --git a/packages/client/src/components/common/Modal/Modal.tsx b/packages/client/src/components/common/Modal/Modal.tsx
@@ -2,7 +2,7 @@ import { Icon } from '@/components/ui/Icon/Icon'
 import './Modal.scss'
 
 type ModalPropsType = {
-  show?: boolean
+  show: boolean
   onClose: () => void
   width?: number | null
   height?: number | null

diff --git a/packages/client/src/components/ui/Loader/Loader.scss b/packages/client/src/components/ui/Loader/Loader.scss
@@ -34,6 +34,25 @@ $road-color: #2c414c;
   &__image {
     width: 60px;
   }
+
+  &__close-btn {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, 100px);
+    cursor: pointer;
+
+    background: none;
+    border: none;
+    outline: none;
+
+    color: $text-color;
+    font-size: 14px;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
 }
 
 @keyframes moveRoad {

diff --git a/packages/client/src/components/ui/Loader/Loader.tsx b/packages/client/src/components/ui/Loader/Loader.tsx
@@ -1,18 +1,40 @@
 import './Loader.scss'
+import { useEffect, useState } from 'react'
 import LoaderGif from '@/assets/images/loader.png'
 
 type LoaderPropsType = {
-  show?: boolean
+  show: boolean
+  onClose?: () => void
 }
 
 export const Loader = (props: LoaderPropsType) => {
-  const { show } = props
+  const { show, onClose } = props
+  const [showCloseButton, setShowCloseButton] = useState(false)
+
+  useEffect(() => {
+    let timer: NodeJS.Timeout
+
+    if (show) {
+      timer = setTimeout(() => {
+        setShowCloseButton(true)
+      }, 5000)
+    } else {
+      setShowCloseButton(false)
+    }
+
+    return () => clearTimeout(timer)
+  }, [show])
 
   return (
     <div className={`preloader ${show ? 'preloader_show' : ''}`}>
       <div className="preloader__road">
         <img className="preloader__image" src={LoaderGif} alt="loader" />
       </div>
+      {showCloseButton && (
+        <button className="preloader__close-btn" onClick={onClose}>
+          Закрыть
+        </button>
+      )}
     </div>
   )
 }
diff --git a/packages/client/src/pages/Game/Game.scss b/packages/client/src/pages/Game/Game.scss
@@ -66,7 +66,7 @@ $border-color: #70842f;
       position: absolute;
       height: 8px;
 
-      @include customPosition(auto, 0, 0, 0);
+      @include customPosition(0, auto, 0, 0);
 
       background: url('@/assets/images/svg/title-decor.svg') no-repeat center
         center;

diff --git a/packages/client/src/pages/Game/Game.tsx b/packages/client/src/pages/Game/Game.tsx
@@ -8,6 +8,7 @@ import { useEffect, useState } from 'react'
 import { Modal } from '@/components/common/Modal/Modal'
 import GameInfo from '@/assets/images/game-info.jpg'
 import { Button } from '@/components/ui/Button/Button'
+import { Loader } from '@/components/ui/Loader/Loader'
 
 export const Game = () => {
   const [isInfoModalOpen, setIsInfoModalOpen] = useState(false)
@@ -37,6 +38,7 @@ export const Game = () => {
     setButtonsState({ ...buttonsState, [buttonName]: state })
   }
 
+  // TODO: Заменить на финальное решение для отслеживания кнопок
   useEffect(() => {
     const handleKey = (event: KeyboardEvent) => {
       const isKeydown = event.type === 'keydown'