diff --git a/src/views/Game/components/Header.tsx b/src/views/Game/components/Header.tsx index e28bb6a..17ef25d 100644 --- a/src/views/Game/components/Header.tsx +++ b/src/views/Game/components/Header.tsx @@ -7,9 +7,11 @@ import { Typography, useTheme, } from "@mui/material"; -import { FunctionComponent, useEffect, useState } from "react"; +import { FunctionComponent, useEffect, useRef, useState } from "react"; +import { AiOutlineFullscreen, AiOutlineFullscreenExit } from "react-icons/ai"; import { IoExitOutline } from "react-icons/io5"; import { useNavigate } from "react-router-dom"; +import { useFullscreen, useToggle } from "react-use"; import { useSounds } from "../../../hooks/sounds"; import useGame from "../../../stores/game"; import { useGameMetrics } from "../../../stores/metrics"; @@ -23,6 +25,15 @@ const Header: FunctionComponent = () => { const theme = useTheme(); const navigate = useNavigate(); + const [fullscreen, toggleFullscreen] = useToggle(false); + const isFullscreen = useFullscreen( + useRef(document.documentElement), + fullscreen, + { + onClose: () => toggleFullscreen(false), + }, + ); + const sound = useSounds(); const game = useGame((state) => ({ @@ -208,7 +219,25 @@ const Header: FunctionComponent = () => { */} - + + + {isFullscreen ? ( + + ) : ( + + )} + + + +