From e293e454a93b2f7ba01b38f98e7ca7c68c261b9e Mon Sep 17 00:00:00 2001 From: Andrei Kondratov Date: Tue, 8 Oct 2024 20:59:15 +0500 Subject: [PATCH 1/3] feat: add fullscrean mode for game page --- packages/client/src/pages/Game/Game.tsx | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/packages/client/src/pages/Game/Game.tsx b/packages/client/src/pages/Game/Game.tsx index 5b7b940..1fc7344 100644 --- a/packages/client/src/pages/Game/Game.tsx +++ b/packages/client/src/pages/Game/Game.tsx @@ -1,6 +1,6 @@ import GameInfo from '@/assets/images/game-info.jpg' -import { Game as GamePrototype } from '@/components/Game/Game' import { Modal } from '@/components/common/Modal/Modal' +import { Game as GamePrototype } from '@/components/Game/Game' import { Button } from '@/components/ui/Button/Button' import { CustomPageTitle } from '@/components/ui/CustomPageTitle/CustomPageTitle' import { useEffect, useState } from 'react' @@ -74,6 +74,16 @@ export const Game = () => { } }) + const toggleFullscrean = () => { + const isFullscreanMode = document.fullscreenElement + + if (isFullscreanMode) { + document.exitFullscreen() + } else { + document.documentElement.requestFullscreen() + } + } + return (
setIsInfoModalOpen(false)}> @@ -119,6 +129,8 @@ export const Game = () => { helpHandler={helpHandler} /> + + Date: Tue, 15 Oct 2024 17:37:32 +0400 Subject: [PATCH 2/3] redesigned the fullscreen button to fit the overall design --- packages/client/public/sprite.symbol.svg | 4 +- .../svg/pause-help-fullscreen-controll-bg.svg | 200 ++++++++++++++++++ packages/client/src/pages/Game/Game.tsx | 16 +- ...auseHelp.scss => PauseHelpFullscreen.scss} | 6 +- ...{PauseHelp.tsx => PauseHelpFullscreen.tsx} | 20 +- 5 files changed, 226 insertions(+), 20 deletions(-) create mode 100644 packages/client/src/assets/images/svg/pause-help-fullscreen-controll-bg.svg rename packages/client/src/pages/Game/components/PauseHelp/{PauseHelp.scss => PauseHelpFullscreen.scss} (72%) rename packages/client/src/pages/Game/components/PauseHelp/{PauseHelp.tsx => PauseHelpFullscreen.tsx} (59%) diff --git a/packages/client/public/sprite.symbol.svg b/packages/client/public/sprite.symbol.svg index e1635f5..cecf697 100644 --- a/packages/client/public/sprite.symbol.svg +++ b/packages/client/public/sprite.symbol.svg @@ -88,5 +88,7 @@ - + + + \ No newline at end of file diff --git a/packages/client/src/assets/images/svg/pause-help-fullscreen-controll-bg.svg b/packages/client/src/assets/images/svg/pause-help-fullscreen-controll-bg.svg new file mode 100644 index 0000000..667c9f4 --- /dev/null +++ b/packages/client/src/assets/images/svg/pause-help-fullscreen-controll-bg.svg @@ -0,0 +1,200 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/client/src/pages/Game/Game.tsx b/packages/client/src/pages/Game/Game.tsx index 1fc7344..1fc7b0e 100644 --- a/packages/client/src/pages/Game/Game.tsx +++ b/packages/client/src/pages/Game/Game.tsx @@ -7,7 +7,7 @@ import { useEffect, useState } from 'react' import { Arrows } from './components/Arrows/Arrows' import { FireControll } from './components/FireControll/FireControll' import { KillsCounter } from './components/KillsCounter/KillsCounter' -import { PauseHelp } from './components/PauseHelp/PauseHelp' +import { PauseHelpFullscreen } from './components/PauseHelp/PauseHelpFullscreen' import './Game.scss' export const Game = () => { @@ -74,16 +74,6 @@ export const Game = () => { } }) - const toggleFullscrean = () => { - const isFullscreanMode = document.fullscreenElement - - if (isFullscreanMode) { - document.exitFullscreen() - } else { - document.documentElement.requestFullscreen() - } - } - return (
setIsInfoModalOpen(false)}> @@ -123,14 +113,12 @@ export const Game = () => { tagName="span" /> - - - void } -export const PauseHelp = (props: PauseHelpPropsType) => { +export const PauseHelpFullscreen = (props: PauseHelpPropsType) => { const { pauseHandler, helpHandler, className = '' } = props + const toggleFullscreen = () => { + const isFullscreenMode = document.fullscreenElement + + if (isFullscreenMode) { + document.exitFullscreen() + } else { + document.documentElement.requestFullscreen() + } + } + return (
@@ -25,6 +35,12 @@ export const PauseHelp = (props: PauseHelpPropsType) => { onClick={pauseHandler}> + + + +
) From aadc114a40b1e8961532a961b75a315709db76d5 Mon Sep 17 00:00:00 2001 From: Toby Date: Tue, 15 Oct 2024 17:40:32 +0400 Subject: [PATCH 3/3] fix buttons padding --- .../pages/Game/components/PauseHelp/PauseHelpFullscreen.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/client/src/pages/Game/components/PauseHelp/PauseHelpFullscreen.scss b/packages/client/src/pages/Game/components/PauseHelp/PauseHelpFullscreen.scss index 55b1e84..09f3128 100644 --- a/packages/client/src/pages/Game/components/PauseHelp/PauseHelpFullscreen.scss +++ b/packages/client/src/pages/Game/components/PauseHelp/PauseHelpFullscreen.scss @@ -13,7 +13,7 @@ &__buttons { width: 100%; - padding: 0 62.5px; + padding: 0 62px; display: flex; align-items: center; justify-content: space-between;