feat(app-board): add panel mode switch

eficode · Jan 18, 2021 · 697d502 · 697d502
1 parent 2787925
commit 697d502
Show file tree

Hide file tree

Showing 6 changed files with 110 additions and 24 deletions.
diff --git a/packages/game-app/src/_shared/components/Card/Card.tsx b/packages/game-app/src/_shared/components/Card/Card.tsx
@@ -42,6 +42,8 @@ const CardWrapper = styled.div`
 
 const CardHeader = styled.header<CardHeaderProps>`
   padding: 8px 16px;
+  box-sizing: border-box;
+  height: 56px;
   background: ${props => props.theme.cardsTypes[props.type]};
   border-radius: 10px 10px 0px 0px;
 `;
@@ -75,7 +77,6 @@ const CardHeading = styled.h1`
 
 const CardBody = styled.div`
   padding: 12px 16px 32px 16px;
-  height: 100%;
   border-radius: 0px 0px 10px 10px;
 `;
 

diff --git a/packages/game-app/src/_shared/components/IconButton/IconButton.tsx b/packages/game-app/src/_shared/components/IconButton/IconButton.tsx
@@ -3,22 +3,45 @@ import styled from 'styled-components';
 
 type Props = {
   onClick: () => void;
+  className?: string;
+  active?: boolean;
 };
 
-const StyledButton = styled.button`
+const StyledButton = styled.button<{ active?: boolean }>`
   background-color: transparent;
   border: none;
   padding: 8px;
+  color: #b4aea9;
+  border-radius: 10px;
+  width: 40px;
+  height: 40px;
+  box-sizing: border-box;
+
+  &:hover {
+    color: #00867c;
+  }
+
+  &:active {
+    background: #eeeeee;
+    color: #00867c;
+  }
+
+  ${props =>
+    props.active &&
+    `
+    background: #EEEEEE;
+    color: #00867C;
+  `}
 `;
 
-const IconButton: React.FC<Props> = ({ children, onClick }) => {
+const IconButton: React.FC<Props> = ({ children, onClick, className, active }) => {
   return (
-    <StyledButton type="button" onClick={onClick}>
+    <StyledButton type="button" onClick={onClick} className={className} active={active}>
       {children}
     </StyledButton>
   );
 };
 
 IconButton.displayName = 'IconButton';
 
-export default IconButton;
+export default styled(IconButton)``;
diff --git a/packages/game-app/src/assets/icons/stacked-cards.svg b/packages/game-app/src/assets/icons/stacked-cards.svg
diff --git a/packages/game-app/src/gameView/components/DeckPanel/DeckPanel.tsx b/packages/game-app/src/gameView/components/DeckPanel/DeckPanel.tsx
@@ -1,7 +1,13 @@
-import React from 'react';
+import React, { useState } from 'react';
 import DraggableCard from '../DraggableCard';
 import styled from 'styled-components';
 import { CardWrapper } from '../DraggableCard/DraggableCard';
+import Box from '../../../_shared/components/Box';
+import { IconButton } from '@pipeline/components';
+import { ReactComponent as StackedIcon } from '@assets/icons/stacked-cards.svg';
+import DroppablePanelArea from '../DroppablePanelArea';
+
+export type PanelMode = 'stacked' | 'tow-columns';
 
 function createStackedCss() {
   let cssString = '';
@@ -20,7 +26,7 @@ function createStackedCss() {
   return cssString;
 }
 
-const DeckPanelContent = styled.div`
+const DeckPanelContent = styled.div<{ mode: PanelMode }>`
   flex: 1 1 auto;
   overflow-y: scroll;
   position: relative;
@@ -29,27 +35,61 @@ const DeckPanelContent = styled.div`
     display: none;
   }
 
-  ${CardWrapper} + ${CardWrapper} {
+  ${props =>
+    props.mode === 'stacked'
+      ? `
+    ${CardWrapper} + ${CardWrapper} {
     margin-top: 8px;
   }
 
   ${createStackedCss()}
+  `
+      : `
+  
+    display: grid;
+    grid-template-columns: 280px 280px;
+    column-gap:16px;
+    row-gap:16px;
+  `}
+`;
+
+const PanelButtons = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  margin-bottom: 8px;
+
+  ${IconButton} + ${IconButton} {
+    margin-left: 8px;
+  }
 `;
 
 type Props = {
   cardsIds: string[];
 };
 
 const DeckPanel: React.FC<Props> = ({ cardsIds }) => {
+  const [panelMode, setPanelMode] = useState<PanelMode>('stacked');
+
   return (
-    <DeckPanelContent>
-      {cardsIds.map(id => (
-        <DraggableCard key={id} id={id} />
-      ))}
-    </DeckPanelContent>
+    <DroppablePanelArea mode={panelMode}>
+      <PanelButtons>
+        <IconButton active={panelMode === 'stacked'} onClick={() => setPanelMode('stacked')}>
+          <StackedIcon />
+        </IconButton>
+        <IconButton active={panelMode === 'tow-columns'} onClick={() => setPanelMode('tow-columns')}>
+          <StackedIcon />
+        </IconButton>
+      </PanelButtons>
+      <DeckPanelContent mode={panelMode}>
+        {cardsIds.map(id => (
+          <DraggableCard key={id} id={id} />
+        ))}
+      </DeckPanelContent>
+    </DroppablePanelArea>
   );
 };
 
 DeckPanel.displayName = 'Panel';
 
-export default DeckPanel;
+export default React.memo(DeckPanel);
diff --git a/packages/game-app/src/gameView/components/DroppablePanelArea/DroppablePanelArea.tsx b/packages/game-app/src/gameView/components/DroppablePanelArea/DroppablePanelArea.tsx
@@ -1,15 +1,16 @@
 import React, { useState } from 'react';
 import { useDroppable } from '@dnd-kit/core';
 import styled from 'styled-components';
-import Box from '../../../_shared/components/Box';
+import { PanelMode } from '../DeckPanel/DeckPanel';
 
-type Props = {};
+type Props = {
+  mode: PanelMode;
+};
 
-const FixedPanel = styled.div<{ closed: boolean }>`
+const FixedPanel = styled.div<{ closed: boolean; mode: PanelMode }>`
   position: fixed;
   top: 0;
   right: 0;
-  width: 360px;
   height: 100vh;
   border-radius: 40px 0px 0px 0px;
   opacity: 1;
@@ -19,9 +20,11 @@ const FixedPanel = styled.div<{ closed: boolean }>`
   background-color: rgb(170, 180, 175, 0.4);
   display: flex;
   flex-direction: column;
-  transition: transform 0.5s;
+  transition: transform 0.5s, width 0.5s;
 
   ${props => props.closed && 'transform: translate(300px)'}
+
+  ${props => (props.mode === 'stacked' ? 'width: 360px;' : 'width: 656px;')}
 `;
 
 const ToggleWrapper = styled.div`
@@ -61,15 +64,15 @@ const ToggleIndicator = styled.div`
  * and where you can find all cards that ar not placed into the board.
  * It is also a droppable are, where you can release cards moved out from the board
  */
-const DroppablePanelArea: React.FC<Props> = ({ children }) => {
+const DroppablePanelArea: React.FC<Props> = ({ children, mode }) => {
   const { setNodeRef } = useDroppable({
     id: 'panel',
   });
 
   const [closed, setClosed] = useState(false);
 
   return (
-    <FixedPanel ref={setNodeRef} closed={closed}>
+    <FixedPanel ref={setNodeRef} closed={closed} mode={mode}>
       <ToggleWrapper>
         <ToggleButton onClick={() => setClosed(state => !state)}>
           <ToggleIndicator />

diff --git a/packages/game-app/src/gameView/components/GameView/GameView.tsx b/packages/game-app/src/gameView/components/GameView/GameView.tsx
@@ -31,9 +31,7 @@ const Game: React.FC<{ pan: { x: number; y: number }; scale: number; gameId: str
             </Board>
           </TransformComponent>
         </div>
-        <DroppablePanelArea>
-          <DeckPanel cardsIds={deckCardsIds} />
-        </DroppablePanelArea>
+        <DeckPanel cardsIds={deckCardsIds} />
       </CardsGameListeners>
     );
   },