diff --git a/packages/client/src/components/common/Modal/Modal.scss b/packages/client/src/components/common/Modal/Modal.scss index 033c48e..3ceff14 100644 --- 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 index b09a86c..78ba914 100644 --- 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 index 0ec947d..c8bd13d 100644 --- 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 index 80194ef..ec938be 100644 --- 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 (
loader
+ {showCloseButton && ( + + )}
) } diff --git a/packages/client/src/pages/Game/Game.scss b/packages/client/src/pages/Game/Game.scss index b2741fb..6f219dd 100644 --- 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 index 65ac6d4..a0c4834 100644 --- 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'