fix(app-board): improve widget position and background

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

@@ -3,7 +3,7 @@ import { useTranslate } from '@pipeline/i18n';
 import { useLogout } from '@pipeline/auth';
 import { useHistory } from 'react-router-dom';
 import { RoutingPath } from '@pipeline/routing';
-import { Link } from '@pipeline/components';
+import { Box, Button, Link } from '@pipeline/components';
 
 type Props = {};
 
@@ -21,12 +21,9 @@ const Dashboard: React.FC<Props> = () => {
       <h1>{t('dashboard.title')}</h1>
       <h2>{t('dashboard.subtitle')}</h2>
       <p>{t('dashboard.message')}</p>
-      <button type="button" className="primary test-game" onClick={() => history.push(RoutingPath.CreateGame)}>
-        {t('dashboard.newGameLabel')}
-      </button>
-      <button type="button" className="link test-game" onClick={() => history.push(`${RoutingPath.Game}/test-id`)}>
-        Game board test
-      </button>
+      <Box mt={4}>
+        <Button onClick={() => history.push(RoutingPath.CreateGame)} label={t('dashboard.newGameLabel')} />
+      </Box>
     </div>
   );
 };

packages/game-app/src/dimensions.ts

@@ -1,8 +1,8 @@
 export const DEFAULT_CARD_SIZE = { width: 280, height: 200 };
 
-export const PANEL_CARD_SCALE = 1.5 / window.devicePixelRatio;
+export const PANEL_CARD_SCALE = Math.max(1.5 / window.devicePixelRatio, 1.2);
 export const PANEL_CARD_SIZE = {
-  width: DEFAULT_CARD_SIZE.width * PANEL_CARD_SCALE,
+  width: DEFAULT_CARD_SIZE.width * PANEL_CARD_SCALE + 4,
   height: DEFAULT_CARD_SIZE.height * PANEL_CARD_SCALE,
 };
 

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

@@ -0,0 +1,45 @@
+import styled, { css } from 'styled-components';
+
+export const BoardContainer = styled.div<{ scale: number }>`
+  background-color: #eeeeee;
+  width: 3840px;
+  height: 2160px;
+  padding: 16px;
+  position: relative;
+
+  ${({ scale }) =>
+    scale > 0 &&
+    css`
+      background-image: linear-gradient(
+          0deg,
+          transparent 24%,
+          rgba(0, 0, 0, 0.05) 25%,
+          rgba(0, 0, 0, 0.05) 26%,
+          transparent 27%,
+          transparent 74%,
+          rgba(0, 0, 0, 0.05) 75%,
+          rgba(0, 0, 0, 0.05) 76%,
+          transparent 77%,
+          transparent
+        ),
+        linear-gradient(
+          90deg,
+          transparent 24%,
+          rgba(0, 0, 0, 0.05) 25%,
+          rgba(0, 0, 0, 0.05) 26%,
+          transparent 27%,
+          transparent 74%,
+          rgba(0, 0, 0, 0.05) 75%,
+          rgba(0, 0, 0, 0.05) 76%,
+          transparent 77%,
+          transparent
+        );
+    `}
+
+  ${({ scale }) => scale >= 4 && 'background-size:15px 15px;'}
+  ${({ scale }) => scale >= 2 && scale < 4 && 'background-size:30px 30px;'}
+  ${({ scale }) => scale >= 1 && scale < 2 && 'background-size:60px 60px;'}
+  ${({ scale }) => scale > 0 && scale < 1 && 'background-size:120px 120px;'}
+`;
+
+BoardContainer.displayName = 'BoardContainer';

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

@@ -1,22 +1,25 @@
 import React from 'react';
 import { useDroppable } from '@dnd-kit/core';
+import { BoardContainer } from './Board.styled';
 
-type Props = {};
+type Props = {
+  scale: number;
+};
 
 /**
  * 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 }) => {
+const Board: React.FC<Props> = ({ children, scale }) => {
   const { setNodeRef } = useDroppable({
     id: 'board',
   });
 
   return (
-    <div className="board" ref={setNodeRef}>
+    <BoardContainer scale={scale} ref={setNodeRef}>
       {children}
-    </div>
+    </BoardContainer>
   );
 };
 

packages/game-app/src/gameView/components/BottomWidgetsRow/BottomWidgetsRow.styled.tsx

@@ -2,12 +2,12 @@ import styled from 'styled-components';
 
 export const BottomWidgetsRowContainer = styled.div`
   position: absolute;
-  left: 40px;
-  bottom: 40px;
+  left: 16px;
+  bottom: 16px;
   display: flex;
   flex-direction: row;
   align-items: flex-end;
-  & > * {
+  & > *:not(:first-child) {
     margin-left: 50px;
   }
 `;

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useRef } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import CardsGameListeners from '../CardsGameListeners';
 import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch';
 import Board from '../Board';
@@ -32,6 +32,8 @@ const Game: React.FC<GameProps> = React.memo(({ pan, scale, gameId, fitWindow, z
 
   const panelModeRef = useRef<PanelMode>('stacked');
 
+  const [background, setBackGround] = useState(true);
+
   return (
     <CardsGameListeners
       panelModeRef={panelModeRef}
@@ -41,9 +43,9 @@ const Game: React.FC<GameProps> = React.memo(({ pan, scale, gameId, fitWindow, z
       currentGameState={state}
     >
       <div className="board-wrapper">
-        <TopWidgetsRow />
+        <TopWidgetsRow toggleBackGround={() => setBackGround(s => !s)} />
         <TransformComponent>
-          <Board>
+          <Board scale={background ? scale : -1}>
             {placedCardsIds.map(id => (
               <DraggableCard key={id} id={id} />
             ))}
@@ -59,12 +61,11 @@ const Game: React.FC<GameProps> = React.memo(({ pan, scale, gameId, fitWindow, z
 
 const wheelConfig = { step: 70 };
 const transformOptions: React.ComponentProps<typeof TransformWrapper>['options'] = {
-  minScale: 0.5,
+  minScale: Math.max(window.innerWidth / (1920 * 2), window.innerHeight / (1080 * 2)),
   contentClass: 'zooming-panning-board',
 } as any;
 
 const GameWrapper = ({ gameId, transformProps }: { transformProps: TansformRenderProps; gameId: string }) => {
-  console.debug(transformProps);
   const { scale, zoomIn, zoomOut, positionX, positionY, setScale } = transformProps;
   const pan = useMemo(() => ({ x: positionX, y: positionY }), [positionX, positionY]);
   const fitWindow = useCallback(() => {

packages/game-app/src/gameView/components/TopWidgetsRow/TopWidgetsRow.styled.tsx

@@ -3,8 +3,8 @@ import { Box } from '@pipeline/components';
 
 export const TopRowContainer = styled(Box)`
   position: absolute;
-  left: 40px;
-  top: 40px;
+  left: 16px;
+  top: 16px;
   z-index: 1;
   display: flex;
   flex-direction: row;

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

@@ -11,9 +11,11 @@ import { RoutingPath } from '@pipeline/routing';
 import { useTranslate } from '@pipeline/i18n';
 import ShareGameDialog from '../ShareGameDialog';
 
-type Props = {};
+type Props = {
+  toggleBackGround: () => void;
+};
 
-const TopWidgetsRow: React.FC<Props> = () => {
+const TopWidgetsRow: React.FC<Props> = ({ toggleBackGround }) => {
   const history = useHistory();
 
   const shareDialog = useDialog();
@@ -25,7 +27,7 @@ const TopWidgetsRow: React.FC<Props> = () => {
   // TODO
   const showRules = () => ({});
   // TODO
-  const triggerReview = () => ({});
+  const triggerReview = () => toggleBackGround();
   // TODO
   const contactUs = () => ({});
 

packages/game-app/src/temporary.css

@@ -105,22 +105,21 @@ label {
   width: 100vw;
   background-color: white;
   position: relative;
+  padding-left: 50px;
+  box-sizing: border-box;
 }
 
 .dashboard h1 {
   font-size: 70px;
   margin-top: 50px;
-  margin-left: 50px;
 }
 
 .dashboard h2 {
   font-size: 35px;
-  margin-left: 50px;
 }
 .dashboard h2 + p {
   margin-top: 50px;
   max-width: 450px;
-  margin-left: 50px;
 }
 
 .dashboard .sign-out-button {
@@ -144,14 +143,6 @@ label {
   overflow: hidden;
 }
 
-.board {
-  background-color: #eeeeee;
-  width: 200vw;
-  height: 200vh;
-  padding: 16px;
-  position: relative;
-}
-
 .react-transform-component {
   width: 100% !important;
   height: 100% !important;