Merge pull request #186 from eficode/feature/dashboard-image

feat(app-general): add temporary dashboard image and game name

Author: Alb93

packages/game-app/public/index.html

@@ -81,7 +81,7 @@
     </style>
     <div id="root"></div>
     <div id="initial-loading-overlay">
-      <img src="eficode-logo.svg">
+      <img src="/eficode-logo.svg">
     </div>
     <!--
       This HTML file is a template.

packages/game-app/src/assets/icons/dashboard-floating-cards-reference.svg renamed to packages/game-app/src/assets/images/dashboard-floating-cards-reference.svg

@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { Box } from '@pipeline/components';
 
 export const DashboardContainer = styled.div`
   display: flex;
@@ -15,10 +16,44 @@ export const DashboardHeader = styled.div`
   align-items: center;
   height: 10vh;
   padding: 0 10vw 0 0;
+`;
+
+DashboardHeader.displayName = 'DashboardHeader';
+
+export const CardsIllustration = styled(Box)`
   position: absolute;
-  left: 0;
   right: 0;
-  top: 0;
+  top: 10vh;
+  bottom: 0;
+  width: 50vw;
+  z-index: -1;
+  background: #eeeeee;
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
 `;
 
-DashboardHeader.displayName = 'DashboardHeader';
+CardsIllustration.displayName = 'CardsIllustration';
+
+export const DashboardLeftSide = styled(Box)`
+  max-width: 40vw;
+  padding-bottom: 10vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background: white;
+`;
+
+DashboardLeftSide.displayName = 'DashboardLeftSide';
+
+export const Triangle = styled(Box)`
+  width: 0;
+  height: 0;
+  border-top: 90vh solid white;
+  border-right: 15vw solid transparent;
+  filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.5));
+`;
+
+Triangle.displayName = 'Triangle';

packages/game-app/src/dashboard/components/Dashboard/Dashboard.styled.tsx

@@ -4,7 +4,14 @@ import { useLogout } from '@pipeline/auth';
 import { RoutingPath, useNavigateTo } from '@pipeline/routing';
 import { Box, Button, Link, TextLogo, Typography } from '@pipeline/components';
 import JoinGameButton from '../JoinGameButton';
-import { DashboardContainer, DashboardHeader } from './Dashboard.styled';
+import {
+  CardsIllustration,
+  DashboardContainer,
+  DashboardHeader,
+  DashboardLeftSide,
+  Triangle,
+} from './Dashboard.styled';
+import { ReactComponent as FloatingCardsImg } from '@assets/images/dashboard-floating-cards-reference.svg';
 
 type Props = {};
 
@@ -26,17 +33,23 @@ const Dashboard: React.FC<Props> = () => {
             <Button label={t('dashboard.contactUs')} onClick={() => ({})} />
           </Box>
         </DashboardHeader>
-        <Box maxWidth="40vw">
-          <Typography variant="title" fontFamily="Merriweather">
-            {t('dashboard.title')}
-          </Typography>
-          <Typography mt={3} variant="dialogHead" fontWeight="normal">
-            {t('dashboard.message')}
-          </Typography>
-          <Box mt={4} display="flex" flexDirection="row">
-            <Button id="go-to-create-game-button" onClick={goToCreateGame} label={t('dashboard.newGameLabel')} />
-            <JoinGameButton />
-          </Box>
+        <Box flex={1} display="flex" flexDirection="row">
+          <DashboardLeftSide>
+            <Typography variant="title" fontFamily="Merriweather">
+              {t('dashboard.title')}
+            </Typography>
+            <Typography mt={3} variant="dialogHead" fontWeight="normal">
+              {t('dashboard.message')}
+            </Typography>
+            <Box mt={4} display="flex" flexDirection="row">
+              <Button id="go-to-create-game-button" onClick={goToCreateGame} label={t('dashboard.newGameLabel')} />
+              <JoinGameButton />
+            </Box>
+          </DashboardLeftSide>
+          <Triangle />
+          <CardsIllustration flex={1}>
+            <FloatingCardsImg />
+          </CardsIllustration>
         </Box>
       </Box>
     </DashboardContainer>

packages/game-app/src/dashboard/components/Dashboard/Dashboard.tsx

@@ -1,23 +1,23 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { useDroppable } from '@dnd-kit/core';
 import { BoardContainer } from './Board.styled';
+import { ZoomPanValuesContext } from '../ZoomPanContext/ZoomPanContext';
 
-type Props = {
-  scale: number;
-};
+type Props = {};
 
 /**
  * Game board where the pipeline will be created placing the cards.
  * It's a droppable area so you can drag the cards in it coming from the panel
  * or moving cards inside the board directly
  */
-const Board: React.FC<Props> = ({ children, scale }) => {
+const Board: React.FC<Props> = ({ children }) => {
   const { setNodeRef } = useDroppable({
     id: 'board',
   });
+  const { scale } = useContext(ZoomPanValuesContext);
 
   return (
-    <BoardContainer scale={scale} ref={setNodeRef}>
+    <BoardContainer id="board" scale={scale} ref={setNodeRef}>
       {children}
     </BoardContainer>
   );

packages/game-app/src/gameView/components/Board/Board.tsx

@@ -51,13 +51,13 @@ const ToggleWrapper = styled.div`
 
 export const ArrowIconDiv = styled.div<{ collapsed: boolean }>`
   position: absolute;
-  right: 4px;
+  right: 16px;
   transition: transform 0.3s ease-in;
   transform: rotate(180deg);
 
   svg {
-    width: 36px;
-    height: 36px;
+    width: 24px;
+    height: 24px;
   }
 
   ${({ collapsed }) =>

packages/game-app/src/gameView/components/DroppablePanelArea/DroppablePanelArea.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef, useState } from 'react';
+import React, { useRef } from 'react';
 import CardsGameListeners from '../CardsGameListeners';
 import Board from '../Board';
 import DraggableCard from '../DraggableCard';
@@ -39,21 +39,15 @@ const GameView: React.FC<GameProps> = ({ zoomIn, zoomOut }) => {
 
   const panelModeRef = useRef<PanelMode>('stacked');
 
-  const [background, setBackGround] = useState(true);
-
-  const toggleBackground = useCallback(() => {
-    setBackGround(s => !s);
-  }, []);
-
   useStopListenOnRtdb();
 
   return (
     <ZoomPanContext initialPan={initialPan}>
       <CardsGameListeners panelModeRef={panelModeRef} onEvent={onCardEvent} currentGameState={state}>
         <div className="board-wrapper">
-          <TopWidgetsRow toggleBackGround={toggleBackground} />
+          <TopWidgetsRow />
           <ZoomPanContainer>
-            <Board scale={background ? 3 : -1}>
+            <Board>
               {placedCardsIds.map(id => (
                 <DraggableCard key={id} id={id} />
               ))}