feat(app-board): add top widgets bar

packages/game-app/src/_shared/components/Box/Box.tsx

@@ -27,4 +27,6 @@ const Box = styled.div<BoxProps>(
   textAlign,
 );
 
+Box.displayName = 'Box';
+
 export default Box;

packages/game-app/src/_shared/components/IconButton/IconButton.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import styled, { css } from 'styled-components';
 import { variant } from 'styled-system';
 
-type IconButtonVariants = 'default' | 'rounded';
+type IconButtonVariants = 'default' | 'rounded' | 'clear';
 
 type Props = {
   onClick: () => void;
@@ -26,18 +26,21 @@ const StyledButton = styled.button<{ active?: boolean; variant: IconButtonVarian
     color: #00867c;
   }
 
-  &:active {
-    background: #eeeeee;
-    color: #00867c;
-  }
-
   ${props =>
     props.active &&
     css`
       background: #eeeeee;
       color: #00867c;
-    `} ${variant({
+    `}
+
+  ${variant({
     variants: {
+      default: {
+        '&:active': {
+          background: '#eeeeee',
+          color: '#00867c',
+        },
+      },
       rounded: {
         borderRadius: '50%',
         background: '#FFFFFF',

packages/game-app/src/assets/i18n/en.ts

@@ -18,6 +18,9 @@ const translations = {
     message:
       'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
   },
+  game: {
+    contactUs: 'Contact us',
+  },
   login: {
     title: 'Sign in to play',
     notYetAccount: "Haven't played yet?",

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

@@ -12,6 +12,7 @@ import useCardEventHandler from '../../hooks/useCardEventHandler';
 import DeckPanel from '../DeckPanel';
 import BottomWidgetsRow from '../BottomWidgetsRow/BottomWidgetsRow';
 import { PanelMode } from '../DeckPanel/DeckPanel';
+import TopWidgetsRow from '../TopWidgetsRow';
 
 type GameProps = {
   pan: { x: number; y: number };
@@ -40,13 +41,15 @@ const Game: React.FC<GameProps> = React.memo(({ pan, scale, gameId, fitWindow, z
       currentGameState={state}
     >
       <div className="board-wrapper">
+        <TopWidgetsRow />
         <TransformComponent>
           <Board>
             {placedCardsIds.map(id => (
               <DraggableCard key={id} id={id} />
             ))}
           </Board>
         </TransformComponent>
+
         <BottomWidgetsRow fitWindow={fitWindow} zoomIn={zoomIn} zoomOut={zoomOut} />
       </div>
       <DeckPanel panelModeRef={panelModeRef} cardsIds={deckCardsIds} />

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

@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+import { Box } from '@pipeline/components';
+
+export const TopRowContainer = styled(Box)`
+  position: absolute;
+  left: 40px;
+  top: 40px;
+  z-index: 1;
+  display: flex;
+  flex-direction: row;
+
+  & > * {
+    margin-right: 24px;
+  }
+`;
+
+export const LogoContainer = styled(Box)`
+  width: 54px;
+`;
+
+export const ButtonsBar = styled(Box)`
+  background: white;
+  box-shadow: 0px 0px 6px #d7d2cb80;
+  border-radius: 4px;
+  padding: 0 12px;
+  display: flex;
+  flex-direction: row;
+  height: 40px;
+
+  & > *:not(:last-child) {
+    margin-right: 8px;
+  }
+`;

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

@@ -0,0 +1,59 @@
+import React from 'react';
+import { ButtonsBar, LogoContainer, TopRowContainer } from './TopWidgetsRow.styled';
+import { ReactComponent as Logo } from '@assets/images/eficode-logo.svg';
+import { ReactComponent as ExitIcon } from '@assets/icons/exit.svg';
+import { ReactComponent as ShareIcon } from '@assets/icons/share.svg';
+import { ReactComponent as RulesIcon } from '@assets/icons/rules.svg';
+import { ReactComponent as TriggerReviewIcon } from '@assets/icons/review.svg';
+import { Button, IconButton } from '@pipeline/components';
+import { useHistory } from 'react-router-dom';
+import { RoutingPath } from '@pipeline/routing';
+import { useTranslate } from '@pipeline/i18n';
+
+type Props = {};
+
+const TopWidgetsRow: React.FC<Props> = () => {
+  const history = useHistory();
+
+  const t = useTranslate();
+
+  const exitGame = () => history.replace(RoutingPath.Dashboard);
+
+  // TODO
+  const share = () => ({});
+  // TODO
+  const showRules = () => ({});
+  // TODO
+  const triggerReview = () => ({});
+  // TODO
+  const contactUs = () => ({});
+
+  return (
+    <TopRowContainer>
+      <LogoContainer>
+        <Logo />
+      </LogoContainer>
+      <ButtonsBar>
+        <IconButton variant="clear" onClick={exitGame}>
+          <ExitIcon />
+        </IconButton>
+        <IconButton variant="clear" onClick={share}>
+          <ShareIcon />
+        </IconButton>
+
+        <IconButton variant="clear" onClick={showRules}>
+          <RulesIcon />
+        </IconButton>
+
+        <IconButton variant="clear" onClick={triggerReview}>
+          <TriggerReviewIcon />
+        </IconButton>
+      </ButtonsBar>
+      <Button onClick={contactUs} label={t('game.contactUs')} />
+    </TopRowContainer>
+  );
+};
+
+TopWidgetsRow.displayName = 'TopWidgetsRow';
+
+export default TopWidgetsRow;

packages/game-app/src/gameView/components/TopWidgetsRow/index.ts

@@ -0,0 +1,3 @@
+import TopWidgetsRow from './TopWidgetsRow';
+
+export default TopWidgetsRow;