Подружил игру и страницу игры

Timur233 · Oct 8, 2024 · 0168aa7 · 0168aa7
1 parent 5bcb231
commit 0168aa7
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 51 deletions.
diff --git a/packages/client/src/app/App.tsx b/packages/client/src/app/App.tsx
@@ -3,19 +3,14 @@ import RootLayout from '@/layouts/RootLayout/RootLayout'
 import PrivateLayout from '@/layouts/PrivateLayout/PrivateLayout'
 import AuthLayout from '@/layouts/AuthLayout/AuthLayout'
 import PublicLayout from '@/layouts/PublicLayout/PublicLayout'
-import RootLayout from '@/layouts/RootLayout/RootLayout'
 import { Error } from '@/pages/Error/Error'
 import { Forum } from '@/pages/Forum/Forum'
-import { GamePage } from '@/pages/Game/Game'
 import { Leaderboard } from '@/pages/Leaderboard/Leaderboard'
 import { Main } from '@/pages/Main/Main'
 import { SignIn } from '@/pages/SignIn/SignIn'
 import { SignUp } from '@/pages/SignUp/SignUp'
 import { Game } from '@/pages/Game/Game'
-import { Forum } from '@/pages/Forum/Forum'
-import { Error } from '@/pages/Error/Error'
 import { Thread } from '@/pages/Thread/Thread'
-import { Leaderboard } from '@/pages/Leaderboard/Leaderboard'
 import { Profile } from '@/pages/Profile/Profile'
 import { ChangePassword } from '@/pages/Profile/ChangePassword'
 import { SvgSprite } from '@/components/ui/SvgSprite/SvgSprite'
@@ -39,7 +34,7 @@ const routerConfig = createBrowserRouter([
         children: [
           {
             path: '/game',
-            element: <GamePage />,
+            element: <Game />,
           },
           {
             path: '/forum',

diff --git a/packages/client/src/components/Game/Game.scss b/packages/client/src/components/Game/Game.scss
@@ -11,31 +11,6 @@
   position: relative;
 }
 
-.modal {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background-color: rgba(0, 0, 0, 0.8);
-  color: white;
-  padding: 20px;
-  border-radius: 8px;
-  text-align: center;
-}
-
-button {
-  margin-top: 10px;
-  padding: 10px 20px;
-  border: none;
-  background-color: $c_button;
-  color: white;
-  border-radius: 8px;
-  cursor: pointer;
-}
-
-button:hover {
-  background-color: $c_button-bottom;
-}
 canvas {
   border-radius: $border-radius--default;
   box-shadow: 0 4px 8px rgba($c_black, 0.5);

diff --git a/packages/client/src/components/Game/Game.tsx b/packages/client/src/components/Game/Game.tsx
@@ -10,6 +10,7 @@ import {
 } from '@/components/Game/controls'
 import { ControlsProps, Obstacle } from '@/components/Game/gameTypes'
 import { initializeObstacle } from '@/components/Game/obstacle'
+import { Modal } from '../common/Modal/Modal'
 
 const livesUse = 3
 
@@ -103,13 +104,10 @@ export const Game: React.FC = () => {
         </button>
       )}
 
-      {/* Модальное окно при проигрыше */}
-      {isGameOver && (
-        <div className="modal">
-          <h2>Игра окончена</h2>
-          <button onClick={startGame}>Заново</button>
-        </div>
-      )}
+      <Modal show={isGameOver} onClose={() => setIsGameOver(false)}>
+        <h2>Игра окончена</h2>
+        <button onClick={startGame}>Заново</button>
+      </Modal>
     </div>
   )
 }
diff --git a/packages/client/src/pages/Game/Game.scss b/packages/client/src/pages/Game/Game.scss
@@ -19,7 +19,7 @@ $border-color: #70842f;
 .game-wrapper {
   position: relative;
   width: 800px;
-  height: 600px;
+  height: auto;
   background-color: $c_black;
   border-radius: 8px;
   overflow: hidden;
@@ -150,6 +150,10 @@ $border-color: #70842f;
   position: absolute;
   inset: 12px;
   background-color: $overlay-color;
+
+  &_hide {
+    display: none;
+  }
 }
 
 .game-over-screen {

diff --git a/packages/client/src/pages/Game/Game.tsx b/packages/client/src/pages/Game/Game.tsx
@@ -1,13 +1,14 @@
+import './Game.scss'
 import { CustomPageTitle } from '@/components/ui/CustomPageTitle/CustomPageTitle'
 import { Arrows } from './components/Arrows/Arrows'
 import { KillsCounter } from './components/KillsCounter/KillsCounter'
-import './Game.scss'
 import { PauseHelp } from './components/PauseHelp/PauseHelp'
 import { FireControll } from './components/FireControll/FireControll'
 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 { Game as GamePrototype } from '@/components/Game/Game'
 
 export const Game = () => {
   const [isInfoModalOpen, setIsInfoModalOpen] = useState(false)
@@ -18,6 +19,7 @@ export const Game = () => {
     rightButton: false,
     fireButton: false,
   })
+  const [isStartedGame, setIsStartedGame] = useState(false)
 
   const pauseHandler = () => {
     console.log('pauseHandler')
@@ -83,11 +85,19 @@ export const Game = () => {
             <div className="game-page__wrapper game-wrapper">
               <div className="game-wrapper__decor-hr"></div>
               <div className="game-wrapper__decor-vr"></div>
-              Воот тут игра
-              <div className="start-screen" style={{ display: 'none' }}>
-                <Button text="Начать игру" useFixWidth />
+              <GamePrototype />
+              <div
+                style={{ display: 'none' }}
+                className={`start-screen${
+                  isStartedGame ? ' start-screen_hide' : ''
+                }`}>
+                <Button
+                  text="Начать игру"
+                  onClick={() => setIsStartedGame(true)}
+                  useFixWidth
+                />
               </div>
-              <div className="game-over-screen">
+              <div className="game-over-screen" style={{ display: 'none' }}>
                 <span className="game-over-screen__title">Game Over</span>
                 <Button text="Начать заново" useFixWidth />
               </div>

diff --git a/packages/client/src/pages/Game/GamePage.scss b/packages/client/src/pages/Game/GamePage.scss