feat: add music on start and background positions

src/pages/GameOver/index.tsx

@@ -10,7 +10,13 @@ const GameOver: React.FC = () => {
   const { state } = useLocation() as { state: { winner: boolean } };
 
   return (
-    <Styled.Container>
+    <Styled.Container
+      width="100vw"
+      backgroundImage="/room.png"
+      backgroundRepeat="no-repeat"
+      backgroundSize="cover"
+      backgroundPosition="center"
+    >
       <Styled.Title>
         {state?.winner ? "Você venceu" : "Você Perdeu"}
       </Styled.Title>

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`

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";
 

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;
 

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;
   }
 `;
 

src/pages/Room/index.tsx

@@ -56,6 +56,7 @@ const Room: React.FC = () => {
   const navigate = useNavigate();
 
   const skinAudioRef = React.createRef<any>();
+  const gameMusicRef = React.createRef<any>();
 
   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 ? (
-      <Styled.RoomBox>
+      <Styled.RoomBox
+        backgroundImage="/room.png"
+        backgroundRepeat="no-repeat"
+        backgroundSize="cover"
+        backgroundPosition="center"
+      >
+        <audio src="/music.mp3" ref={gameMusicRef} loop />
         <audio
           src={
             scored
@@ -189,12 +206,7 @@ const Room: React.FC = () => {
           }
           ref={skinAudioRef}
         />
-        <Styled.Room
-          height="100%"
-          backgroundImage="/room.png"
-          backgroundRepeat="no-repeat"
-          backgroundSize="cover"
-        >
+        <Styled.Room height="100%">
           <Styled.FirstColumn>
             <UserInfo userId={user.id} />
             <UserBoard board={getRoomData.getRoom.board} />