diff --git a/public/music.mp3 b/public/music.mp3 new file mode 100644 index 0000000..df7f16c Binary files /dev/null and b/public/music.mp3 differ diff --git a/src/pages/GameOver/index.tsx b/src/pages/GameOver/index.tsx index 825f523..ca2c3d4 100644 --- a/src/pages/GameOver/index.tsx +++ b/src/pages/GameOver/index.tsx @@ -10,7 +10,13 @@ const GameOver: React.FC = () => { const { state } = useLocation() as { state: { winner: boolean } }; return ( - + {state?.winner ? "VocĂȘ venceu" : "VocĂȘ Perdeu"} diff --git a/src/pages/GameOver/styled.ts b/src/pages/GameOver/styled.ts index 0fa5c41..78a3253 100644 --- a/src/pages/GameOver/styled.ts +++ b/src/pages/GameOver/styled.ts @@ -1,15 +1,15 @@ +import { Container as CContainer } from "@chakra-ui/react"; import styled from "styled-components"; -const Container = styled.div` - background-color: black; +const Container = styled(CContainer)` display: flex; flex-direction: column; align-items: center; justify-content: center; - width: 100vw; height: 100vh; + max-width: 100vw !important; `; const Title = styled.div` diff --git a/src/pages/Room/components/DoneBoard/index.tsx b/src/pages/Room/components/DoneBoard/index.tsx index 33b3806..02098f6 100644 --- a/src/pages/Room/components/DoneBoard/index.tsx +++ b/src/pages/Room/components/DoneBoard/index.tsx @@ -1,6 +1,6 @@ import { useMutation } from "@apollo/client"; import { gql } from "apollo-boost"; -import React from "react"; +import React, { useEffect } from "react"; import Tiles from "../Tiles"; diff --git a/src/pages/Room/components/Tiles/styled.ts b/src/pages/Room/components/Tiles/styled.ts index 2ce4bae..168c980 100644 --- a/src/pages/Room/components/Tiles/styled.ts +++ b/src/pages/Room/components/Tiles/styled.ts @@ -22,8 +22,8 @@ const Tile = styled.div<{ size: number; disabled?: boolean; }>` - height: ${({ size }) => size * 30}px; - width: ${({ size }) => size * 30}px; + height: ${({ size }) => size * window.innerHeight * 0.03}px; + width: ${({ size }) => size * window.innerHeight * 0.03}px; padding: 2px; margin: 1px; diff --git a/src/pages/Room/components/UserInfo/styled.ts b/src/pages/Room/components/UserInfo/styled.ts index 46f976f..678c798 100644 --- a/src/pages/Room/components/UserInfo/styled.ts +++ b/src/pages/Room/components/UserInfo/styled.ts @@ -15,7 +15,7 @@ const Container = styled.div` img { width: fit-content; - height: 250px; + height: ${window.innerHeight * 0.25}px; } `; diff --git a/src/pages/Room/index.tsx b/src/pages/Room/index.tsx index a482367..43fc769 100644 --- a/src/pages/Room/index.tsx +++ b/src/pages/Room/index.tsx @@ -56,6 +56,7 @@ const Room: React.FC = () => { const navigate = useNavigate(); const skinAudioRef = React.createRef(); + const gameMusicRef = React.createRef(); const { socket } = useContext(SocketContext); const { setLoading: setFullscreenLoading } = useContext( @@ -85,6 +86,16 @@ const Room: React.FC = () => { }, }); + useEffect(() => { + if (gameMusicRef.current) { + gameMusicRef.current.play(); + } + + return () => { + gameMusicRef.current?.stop(); + }; + }, [gameMusicRef]); + useEffect(() => { socket.on( "client:room:update", @@ -178,7 +189,13 @@ const Room: React.FC = () => { return params.roomId ? ( getRoomData && user ? ( - + +