From 2533af72e5f25269dafa729fd842a51d72a30ff7 Mon Sep 17 00:00:00 2001 From: Luca Micieli Date: Mon, 18 Jan 2021 12:26:22 +0100 Subject: [PATCH] feat(app-board): improve cards scale on panel --- .../components/AnimatedGrid/AnimatedGrid.tsx | 5 +++- .../src/_shared/components/Card/Card.tsx | 24 ++++++++++++------- packages/game-app/src/dimensions.ts | 10 ++++++++ .../CardsGameListeners/CardsGameListeners.tsx | 2 +- .../ConnectedCard/ConnectedCard.tsx | 5 ++-- .../components/DeckPanel/DeckPanel.tsx | 21 ++++++++++++---- .../DraggableCard/DraggableCard.tsx | 5 ++-- .../DroppablePanelArea/DroppablePanelArea.tsx | 8 ++++--- 8 files changed, 58 insertions(+), 22 deletions(-) create mode 100644 packages/game-app/src/dimensions.ts diff --git a/packages/game-app/src/_shared/components/AnimatedGrid/AnimatedGrid.tsx b/packages/game-app/src/_shared/components/AnimatedGrid/AnimatedGrid.tsx index aa37d922..dba97ea2 100644 --- a/packages/game-app/src/_shared/components/AnimatedGrid/AnimatedGrid.tsx +++ b/packages/game-app/src/_shared/components/AnimatedGrid/AnimatedGrid.tsx @@ -50,7 +50,10 @@ const AnimatedGrid: React.FC = ({ ); const parseChildren = useCallback(() => { - const elementsPerRow = calculateItemsPerRow(itemWidth, margin, containerWidth); + let elementsPerRow = calculateItemsPerRow(itemWidth, margin, containerWidth); + if (elementsPerRow < 1) { + elementsPerRow = 1; + } const newMargin = margin; return Children.map(children, (child, index) => { const { row, col } = calculateItemPosition(index, elementsPerRow); diff --git a/packages/game-app/src/_shared/components/Card/Card.tsx b/packages/game-app/src/_shared/components/Card/Card.tsx index 10ee9ab0..6f23629e 100644 --- a/packages/game-app/src/_shared/components/Card/Card.tsx +++ b/packages/game-app/src/_shared/components/Card/Card.tsx @@ -1,8 +1,15 @@ -import styled from 'styled-components'; +import styled, { css } from 'styled-components'; import { Card, CardTags, CardTypes } from '@pipeline/common'; import React from 'react'; - -type CardProps = Card & { headerTitle?: string; readOnly?: boolean; imgURL?: string; dragging?: boolean }; +import { PANEL_CARD_SCALE } from '../../../dimensions'; + +type CardProps = Card & { + headerTitle?: string; + readOnly?: boolean; + imgURL?: string; + dragging?: boolean; + bigger?: boolean; +}; interface CardHeaderProps { type: CardTypes; @@ -30,7 +37,7 @@ const tagObj = { }, } as { [key in CardTags]: { backgroundColor: string } }; -const CardWrapper = styled.div<{ dragging?: boolean }>` +const CardWrapper = styled.div<{ dragging?: boolean; bigger?: boolean }>` padding: 0 0 16px; width: 280px; height: 200px; @@ -38,11 +45,11 @@ const CardWrapper = styled.div<{ dragging?: boolean }>` background: #f9f9f9; box-sizing: border-box; - + ${props => (props.bigger ? `transform:scale(${PANEL_CARD_SCALE});transform-origin:0 0;` : '')} ${props => props.dragging ? ` - transform: rotate(6deg); + transform: rotate(6deg) ${props.bigger && `scale(${PANEL_CARD_SCALE})`}; box-shadow: 0px 80px 20px #10182026; ` : ` @@ -104,7 +111,7 @@ const CardBodySubTitle = styled.h3` `; const CardContent = styled.div` - font-size: 10px; + font-size: 8px; margin-top: 8px; `; @@ -117,10 +124,11 @@ const CardComponent: React.FC = ({ readOnly = true, tags, dragging, + bigger, ...other }) => { return ( - + {type} diff --git a/packages/game-app/src/dimensions.ts b/packages/game-app/src/dimensions.ts new file mode 100644 index 00000000..d3077f90 --- /dev/null +++ b/packages/game-app/src/dimensions.ts @@ -0,0 +1,10 @@ +export const DEFAULT_CARD_SIZE = { width: 280, height: 200 }; + +export const PANEL_CARD_SCALE = 1.5 / window.devicePixelRatio; +export const PANEL_CARD_SIZE = { + width: DEFAULT_CARD_SIZE.width * PANEL_CARD_SCALE, + height: DEFAULT_CARD_SIZE.height * PANEL_CARD_SCALE, +}; + +export const PANEL_TWO_COLUMNS_WIDTH = PANEL_CARD_SIZE.width * 2 + 16 + 40 * 2; +export const PANEL_ONE_COLUMNS_WIDTH = PANEL_CARD_SIZE.width + 40 * 2; diff --git a/packages/game-app/src/gameView/components/CardsGameListeners/CardsGameListeners.tsx b/packages/game-app/src/gameView/components/CardsGameListeners/CardsGameListeners.tsx index 0aaa10af..b0d89ff4 100644 --- a/packages/game-app/src/gameView/components/CardsGameListeners/CardsGameListeners.tsx +++ b/packages/game-app/src/gameView/components/CardsGameListeners/CardsGameListeners.tsx @@ -330,7 +330,7 @@ const CardsGameListeners: React.FC = ({ onEvent, children, currentGameSta {children} {createPortal( - {draggingCardId ? : null} + {draggingCardId ? : null} , document.body, )} diff --git a/packages/game-app/src/gameView/components/ConnectedCard/ConnectedCard.tsx b/packages/game-app/src/gameView/components/ConnectedCard/ConnectedCard.tsx index feb7adea..b6563cea 100644 --- a/packages/game-app/src/gameView/components/ConnectedCard/ConnectedCard.tsx +++ b/packages/game-app/src/gameView/components/ConnectedCard/ConnectedCard.tsx @@ -6,12 +6,13 @@ import { Card } from '@pipeline/components'; type Props = { id: string; dragging?: boolean; + bigger?: boolean; }; -const ConnectedCard: React.FC = ({ id, dragging }) => { +const ConnectedCard: React.FC = ({ id, dragging, bigger }) => { const cardData = useSelector(selectors.getCardById(id))!; - return ; + return ; }; ConnectedCard.displayName = 'ConnectedCard'; diff --git a/packages/game-app/src/gameView/components/DeckPanel/DeckPanel.tsx b/packages/game-app/src/gameView/components/DeckPanel/DeckPanel.tsx index dd46e1e3..e38b6a9f 100644 --- a/packages/game-app/src/gameView/components/DeckPanel/DeckPanel.tsx +++ b/packages/game-app/src/gameView/components/DeckPanel/DeckPanel.tsx @@ -1,9 +1,11 @@ import React, { useState } from 'react'; import DraggableCard from '../DraggableCard'; -import styled from 'styled-components'; +import styled, { css } from 'styled-components'; import { IconButton, AnimatedGrid } from '@pipeline/components'; import { ReactComponent as StackedIcon } from '@assets/icons/stacked-cards.svg'; import DroppablePanelArea from '../DroppablePanelArea'; +import { PANEL_CARD_SIZE, PANEL_ONE_COLUMNS_WIDTH, PANEL_TWO_COLUMNS_WIDTH } from '../../../dimensions'; +import { CardWrapper } from '../DraggableCard/DraggableCard'; export type PanelMode = 'stacked' | 'tow-columns'; @@ -15,6 +17,15 @@ const DeckPanelContent = styled.div<{ mode: PanelMode }>` ::-webkit-scrollbar { display: none; } + + ${props => + props.mode === 'stacked' + ? css` + ${CardWrapper}:hover { + transform: translate(0, -100px); + } + ` + : ''} `; const PanelButtons = styled.div` @@ -47,16 +58,16 @@ const DeckPanel: React.FC = ({ cardsIds }) => { {cardsIds.map(id => ( - + ))} diff --git a/packages/game-app/src/gameView/components/DraggableCard/DraggableCard.tsx b/packages/game-app/src/gameView/components/DraggableCard/DraggableCard.tsx index ab90dae0..3b70b2ed 100644 --- a/packages/game-app/src/gameView/components/DraggableCard/DraggableCard.tsx +++ b/packages/game-app/src/gameView/components/DraggableCard/DraggableCard.tsx @@ -7,6 +7,7 @@ import ConnectedCard from '../ConnectedCard'; type Props = { id: string; + bigger?: boolean; }; export const CardWrapper = styled.div` @@ -17,7 +18,7 @@ export const CardWrapper = styled.div` /** * A card enhanced with dragging capability */ -const DraggableCard: React.FC = ({ id }) => { +const DraggableCard: React.FC = ({ id, bigger }) => { const { attributes, listeners, setNodeRef, isDragging } = useDraggable({ id, }); @@ -41,7 +42,7 @@ const DraggableCard: React.FC = ({ id }) => { {...attributes} className={`${isDragging ? 'dragging' : ''}`} > - + ); }; diff --git a/packages/game-app/src/gameView/components/DroppablePanelArea/DroppablePanelArea.tsx b/packages/game-app/src/gameView/components/DroppablePanelArea/DroppablePanelArea.tsx index 935516bf..30dce0aa 100644 --- a/packages/game-app/src/gameView/components/DroppablePanelArea/DroppablePanelArea.tsx +++ b/packages/game-app/src/gameView/components/DroppablePanelArea/DroppablePanelArea.tsx @@ -2,6 +2,7 @@ import React, { useCallback, useState } from 'react'; import { useDroppable } from '@dnd-kit/core'; import styled from 'styled-components'; import { PanelMode } from '../DeckPanel/DeckPanel'; +import { PANEL_ONE_COLUMNS_WIDTH, PANEL_TWO_COLUMNS_WIDTH } from '../../../dimensions'; type Props = { mode: PanelMode; @@ -23,9 +24,10 @@ const FixedPanel = styled.div<{ closed: boolean; mode: PanelMode }>` transition: transform 0.5s, width 0.5s; ${props => - props.closed ? `transform: translate(${props.mode === 'stacked' ? 300 : 594}px);` : 'transform: translate(0);'} - - ${props => (props.mode === 'stacked' ? 'width: 360px;' : 'width: 656px;')} + props.closed + ? `transform: translate(${props.mode === 'stacked' ? 300 : 594}px);` + : 'transform: translate(0);'} ${props => + props.mode === 'stacked' ? `width: ${PANEL_ONE_COLUMNS_WIDTH}px;` : `width: ${PANEL_TWO_COLUMNS_WIDTH}px;`} `; const ToggleWrapper = styled.div`