feat(app-board): improve cards scale on panel

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

@@ -50,7 +50,10 @@ const AnimatedGrid: React.FC<Props> = ({
   );
 
   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);

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,19 +37,19 @@ 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;
   border-radius: 10px;
   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<CardProps> = ({
   readOnly = true,
   tags,
   dragging,
+  bigger,
   ...other
 }) => {
   return (
-    <CardWrapper dragging={dragging}>
+    <CardWrapper dragging={dragging} bigger={bigger}>
       <CardHeader type={type}>
         <CardHeading>{type}</CardHeading>
         <CardHeadingTags>

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;

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

@@ -330,7 +330,7 @@ const CardsGameListeners: React.FC<Props> = ({ onEvent, children, currentGameSta
       {children}
       {createPortal(
         <DragOverlay adjustScale dropAnimation={null} modifiers={modifiers} className="transform-0">
-          {draggingCardId ? <ConnectedCard dragging={true} id={draggingCardId} /> : null}
+          {draggingCardId ? <ConnectedCard bigger dragging={true} id={draggingCardId} /> : null}
         </DragOverlay>,
         document.body,
       )}

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<Props> = ({ id, dragging }) => {
+const ConnectedCard: React.FC<Props> = ({ id, dragging, bigger }) => {
   const cardData = useSelector(selectors.getCardById(id))!;
 
-  return <Card {...cardData} dragging={dragging} />;
+  return <Card {...cardData} dragging={dragging} bigger={bigger} />;
 };
 
 ConnectedCard.displayName = 'ConnectedCard';

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<Props> = ({ cardsIds }) => {
       </PanelButtons>
       <DeckPanelContent mode={panelMode}>
         <AnimatedGrid
-          itemWidth={280}
-          itemHeight={200}
+          itemWidth={PANEL_CARD_SIZE.width}
+          itemHeight={PANEL_CARD_SIZE.height}
           margin={16}
           marginVertical={panelMode === 'tow-columns' ? 16 : -90}
-          containerWidth={panelMode === 'tow-columns' ? 576 : 360}
+          containerWidth={panelMode === 'tow-columns' ? PANEL_TWO_COLUMNS_WIDTH - 80 : PANEL_ONE_COLUMNS_WIDTH - 80}
           transitionTime="400ms"
           transitionTimingFunction="ease-in-out"
         >
           {cardsIds.map(id => (
-            <DraggableCard key={id} id={id} />
+            <DraggableCard bigger key={id} id={id} />
           ))}
         </AnimatedGrid>
       </DeckPanelContent>

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<Props> = ({ id }) => {
+const DraggableCard: React.FC<Props> = ({ id, bigger }) => {
   const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
     id,
   });
@@ -41,7 +42,7 @@ const DraggableCard: React.FC<Props> = ({ id }) => {
       {...attributes}
       className={`${isDragging ? 'dragging' : ''}`}
     >
-      <ConnectedCard id={id} />
+      <ConnectedCard bigger={bigger} id={id} />
     </CardWrapper>
   );
 };

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`