Feature/tea 58 web api

packages/client/src/App.css

@@ -2,3 +2,10 @@ body {
   margin: 0;
   padding: 0;
 }
+
+#tableGame:fullscreen {
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

packages/client/src/components/ModalPassword/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from 'react'
+import { useEffect } from 'react'
 import * as RB from '@mui/material'
 import { useForm, FormProvider } from 'react-hook-form'
 import { passwordType } from '../../pages/profile/types'
@@ -11,7 +11,7 @@ const ModalPassword = (props: any) => {
     },
     mode: 'onBlur',
   })
-  const { register, handleSubmit, reset } = methods
+  const { register, handleSubmit } = methods
 
   useEffect(() => {
     methods.reset({

packages/client/src/pages/LoginPage/Login.test.tsx

@@ -1,36 +1,36 @@
 import { render, screen, fireEvent } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import { BrowserRouter } from 'react-router-dom'
+import { Provider } from 'react-redux'
+import { setupStore } from '@store/index'
 
 import Login from './Login'
 
-describe('Login component', () => {
-  it('Login component renders', () => {
-    render(
+const store = setupStore()
+
+const renderLoginComponent = () =>
+  render(
+    <Provider store={store}>
       <BrowserRouter>
         <Login />
       </BrowserRouter>
-    )
+    </Provider>
+  )
 
+describe('Login component', () => {
+  it('Login component renders', () => {
+    renderLoginComponent()
     expect(screen.getByText(/вход/i)).toBeInTheDocument()
   })
 
   it('login input in dom', () => {
-    render(
-      <BrowserRouter>
-        <Login />
-      </BrowserRouter>
-    )
+    renderLoginComponent()
 
     expect(screen.getByLabelText(/логин/i)).toBeInTheDocument()
   })
 
   it('login onChange works', () => {
-    render(
-      <BrowserRouter>
-        <Login />
-      </BrowserRouter>
-    )
+    renderLoginComponent()
 
     const input = screen.getByLabelText(/логин/i) as HTMLInputElement
 
@@ -39,11 +39,7 @@ describe('Login component', () => {
   })
 
   it('password onChange works', () => {
-    render(
-      <BrowserRouter>
-        <Login />
-      </BrowserRouter>
-    )
+    renderLoginComponent()
 
     const input = screen.getByLabelText(/Пароль/i) as HTMLInputElement
 

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

@@ -47,24 +47,37 @@ const Game = (): ReactElement => {
     }
   }, [playerShips])
 
+  const toggleFullScreen = () => {
+    const tableGame = document.getElementById('tableGame')
+    if (tableGame !== null) {
+      if (tableGame.requestFullscreen) {
+        tableGame.requestFullscreen()
+      }
+    } else if (document.exitFullscreen) {
+      document.exitFullscreen()
+    }
+  }
+
   return (
     <>
       <Container sx={{ ...game }}>
         <Box sx={{ ...gameBoard }}>
-          <Board
-            name="computer"
-            nameBoard="поиск кораблей противника"
-            compShips={compShips}
-            gameIsFinished={gameIsFinished}
-            coords={coords}
-          />
-          <Board
-            name="player"
-            nameBoard="расположение моих кораблей"
-            playerShips={playerShips}
-            gameIsFinished={gameIsFinished}
-            coords={coords}
-          />
+          <Box id="tableGame">
+            <Board
+              name="computer"
+              nameBoard="поиск кораблей противника"
+              compShips={compShips}
+              gameIsFinished={gameIsFinished}
+              coords={coords}
+            />
+            <Board
+              name="player"
+              nameBoard="расположение моих кораблей"
+              playerShips={playerShips}
+              gameIsFinished={gameIsFinished}
+              coords={coords}
+            />
+          </Box>
           <Box sx={{ ...wrapButton }}>
             <Button
               onClick={restartGame}
@@ -73,6 +86,12 @@ const Game = (): ReactElement => {
               sx={{ ...buttonStyles, marginTop: '3rem' }}>
               Играть снова
             </Button>
+            <Button
+              variant="contained"
+              onClick={toggleFullScreen}
+              sx={{ ...buttonStyles, marginTop: '1rem' }}>
+              Полноэкранный режим
+            </Button>
             <Button
               variant="contained"
               href="/profile"
@@ -86,7 +105,7 @@ const Game = (): ReactElement => {
               Рейтинг
             </Button>
             <Box sx={{ ...wrapShip }}>
-              <Box sx={{ display: 'flex', margin: '1rem 0' }}>
+              <Box sx={{ display: 'flex', marginTop: '1rem' }}>
                 <Box
                   component="img"
                   src={cell1}
@@ -97,12 +116,11 @@ const Game = (): ReactElement => {
                   component="p"
                   sx={{
                     textAlign: 'center',
-                    marginBottom: '1rem',
                   }}>
                   одноклеточных по 3 штуки
                 </Typography>
               </Box>
-              <Box sx={{ display: 'flex', marginBottom: '1rem' }}>
+              <Box sx={{ display: 'flex' }}>
                 <Box
                   component="img"
                   src={cell2}
@@ -113,7 +131,6 @@ const Game = (): ReactElement => {
                   component="p"
                   sx={{
                     textAlign: 'center',
-                    marginBottom: '1rem',
                   }}>
                   двухклеточных по 2 штуки
                 </Typography>
@@ -129,7 +146,6 @@ const Game = (): ReactElement => {
                   component="p"
                   sx={{
                     textAlign: 'center',
-                    marginBottom: '1rem',
                   }}>
                   трехклеточных по 1 штуки
                 </Typography>