feat(app-board): add scenario panel and text logo

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

@@ -43,18 +43,24 @@ const CardWrapper = styled.div<{ dragging?: boolean; bigger?: boolean }>`
   height: 200px;
   border-radius: 10px;
   background: #f9f9f9;
-
   box-sizing: border-box;
-  ${props => (props.bigger ? `transform:scale(${PANEL_CARD_SCALE});transform-origin:0 0;` : '')}
+
+  ${props =>
+    props.bigger
+      ? css`
+          transform: scale(${PANEL_CARD_SCALE});
+          transform-origin: 0 0;
+        `
+      : ''}
   ${props =>
     props.dragging
-      ? `
+      ? css`
           transform: rotate(6deg) ${props.bigger && `scale(${PANEL_CARD_SCALE})`};
           box-shadow: 0px 80px 20px #10182026;
-          `
-      : `
+        `
+      : css`
           box-shadow: 0px 0px 6px #10182029;
-          `}
+        `}
 `;
 
 const CardHeader = styled.header<CardHeaderProps>`

packages/game-app/src/_shared/components/ExpandableTopPanel/ExpandableTopPanel.styled.tsx

@@ -0,0 +1,49 @@
+import styled, { css } from 'styled-components';
+
+export const PanelHeader = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 40px;
+  position: relative;
+`;
+
+export const PanelWrapper = styled.div`
+  width: 400px;
+  background: rgba(255, 255, 255, 0.5);
+  border-radius: 4px;
+  backdrop-filter: blur(20px);
+  cursor: pointer;
+`;
+
+export const PanelContentWrapper = styled.div<{ collapsed: boolean }>`
+  transition: all 0.5s ease-out;
+  box-sizing: border-box;
+  overflow: hidden;
+  ${({ collapsed }) =>
+    collapsed
+      ? css`
+          max-height: 0 !important;
+        `
+      : css`
+          max-height: 500px;
+          transition: max-height 0.5s ease-in;
+        `}
+`;
+
+export const PanelContent = styled.div<{ collapsed: boolean }>`
+  padding: 14px 24px 24px 24px;
+`;
+
+export const ExpandIcon = styled.div<{ collapsed: boolean }>`
+  position: absolute;
+  right: 24px;
+  transition: transform 0.3s ease-in;
+
+  ${({ collapsed }) =>
+    !collapsed &&
+    css`
+      transform: rotate(180deg);
+    `}
+`;

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

@@ -0,0 +1,38 @@
+import React, { useState } from 'react';
+import { ExpandIcon, PanelContent, PanelContentWrapper, PanelHeader, PanelWrapper } from './ExpandableTopPanel.styled';
+
+type Props = {
+  className?: string;
+  /**
+   * Label to show in the header of the collapsible panel
+   */
+  label: string;
+  /**
+   * Content placed into the space that appears when the panel in expanded
+   */
+  children: React.ReactNode;
+};
+
+/**
+ *  Animated expandable panel that shows the header always on top.
+ *  and expands itself in the top direction
+ */
+const ExpandableTopPanel: React.FC<Props> = ({ className, label, children }) => {
+  const [collapsed, setCollapsed] = useState(true);
+
+  return (
+    <PanelWrapper className={className} onClick={() => setCollapsed(c => !c)}>
+      <PanelHeader>
+        {label}
+        <ExpandIcon collapsed={collapsed}>^</ExpandIcon>
+      </PanelHeader>
+      <PanelContentWrapper collapsed={collapsed}>
+        <PanelContent collapsed={collapsed}>{children}</PanelContent>
+      </PanelContentWrapper>
+    </PanelWrapper>
+  );
+};
+
+ExpandableTopPanel.displayName = 'ExpandableTopPanel';
+
+export default ExpandableTopPanel;

packages/game-app/src/_shared/components/ExpandableTopPanel/index.ts

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

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

@@ -1,13 +1,31 @@
 import styled from 'styled-components';
-import { variant } from 'styled-system';
+import { typography, TypographyProps, variant, margin, MarginProps } from 'styled-system';
 
-const Typography = styled.div<{ variant?: 'label' }>`
+type TypographyVariants = 'label' | 'title' | 'content' | 'contentHead';
+
+const Typography = styled.div<{ variant?: TypographyVariants } & TypographyProps & MarginProps>`
+  ${typography}
+  ${margin}
   ${variant({
     variants: {
       label: {
         fontSize: '14px',
         fontFamily: 'Montserrat',
       },
+      title: {
+        fontSize: '24px',
+        fontFamily: 'Montserrat',
+        fontWeight: 'bold',
+      },
+      content: {
+        fontSize: '16px',
+        fontFamily: 'Montserrat',
+      },
+      contentHead: {
+        fontSize: '16px',
+        fontFamily: 'Montserrat',
+        whiteSpace: 'pre-line',
+      },
     },
   })}
 `;

packages/game-app/src/_shared/components/animations.ts

@@ -0,0 +1,24 @@
+import { css, keyframes } from 'styled-components';
+
+const shakeDefinition = keyframes`
+  0% {
+    transform: translate(0);
+  }
+  25%{
+    transform: translate(15px);
+  }
+  50%{
+    transform: translate(0px);
+  }
+  75%{
+    transform: translate(15px);
+  }
+  100% {
+    transform: translate(0);
+  }
+`;
+
+export const shake = () =>
+  css`
+    animation: ${shakeDefinition} linear 0.3s 2;
+  `;

packages/game-app/src/_shared/components/index.ts

@@ -8,5 +8,22 @@ import Link from './Link';
 import Card from './Card';
 import Box from './Box';
 import AnimatedGrid from './AnimatedGrid';
+import * as animations from './animations';
+import ExpandableTopPanel from './ExpandableTopPanel';
+import Typography from './Typography';
 
-export { TextInput, SelectInput, PasswordInput, TextArea, Button, Link, IconButton, Box, Card, AnimatedGrid };
+export {
+  TextInput,
+  SelectInput,
+  PasswordInput,
+  TextArea,
+  Button,
+  Link,
+  IconButton,
+  Box,
+  Card,
+  AnimatedGrid,
+  animations,
+  ExpandableTopPanel,
+  Typography,
+};

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

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+
+export const BottomWidgetsRowContainer = styled.div`
+  position: absolute;
+  left: 40px;
+  bottom: 40px;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+`;
+
+export const PoweredByContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-left: 50px;
+`;
+
+export const TextLogoWrapper = styled.div`
+  margin-left: 8px;
+  width: 50px;
+`;

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { BottomWidgetsRowContainer, PoweredByContainer, TextLogoWrapper } from './BottomWidgetsRow.styled';
+import ScenarioPanel from '../ScenarioPanel';
+import { ReactComponent as EficodeTextLogo } from '@assets/images/eficode-text-logo.svg';
+import { Typography } from '@pipeline/components';
+
+type Props = {};
+
+const BottomWidgetsRowStyled: React.FC<Props> = ({}) => {
+  return (
+    <BottomWidgetsRowContainer>
+      <ScenarioPanel />
+      <PoweredByContainer>
+        <Typography variant="label" color="#9F998F" as="span">
+          Powered By
+        </Typography>
+        <TextLogoWrapper>
+          <EficodeTextLogo />
+        </TextLogoWrapper>
+      </PoweredByContainer>
+    </BottomWidgetsRowContainer>
+  );
+};
+
+BottomWidgetsRowStyled.displayName = 'BottomWidgetsRow';
+
+export default BottomWidgetsRowStyled;

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

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

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

@@ -7,7 +7,7 @@ import { GameEvent, GameEventType } from '../../types/gameEvents';
 import { GameUIState } from '../../types/gameUIState';
 import ConnectedCard from '../ConnectedCard';
 
-const DEBUG_ENABLED = false;
+const DEBUG_ENABLED = true;
 
 const debugPrint = (...data: any[]) => DEBUG_ENABLED && console.debug('[CardsGameListeners]', ...data);