feat(app-board): add over highlight to panel

eficode · Jan 19, 2021 · 6511a21 · 6511a21
1 parent 22d892d
commit 6511a21
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 46 deletions.
diff --git a/packages/game-app/src/gameView/components/CardsGameListeners/CardsGameListeners.tsx b/packages/game-app/src/gameView/components/CardsGameListeners/CardsGameListeners.tsx
@@ -95,14 +95,15 @@ const CardsGameListeners: React.FC<Props> = ({
     panPositionRef.current = panAmount;
   }, [panAmount]);
 
-  const [draggingCardId, setDraggingCardId] = useState<string | null>(null);
+  const [draggingCard, setDraggingCard] = useState<{ id: string; parent: 'panel' | 'board' } | null>(null);
 
   const handleDragStart = useCallback(
     (ev: DragStartEvent) => {
       movementStart = performance.now();
 
       const { active } = ev;
-      setDraggingCardId(active.id);
+      const parent = gameStateRef.current[active.id].placedIn;
+      setDraggingCard({ id: active.id, parent });
       onEvent({
         type: GameEventType.CardMovingStart,
         cardId: active.id,
@@ -148,7 +149,7 @@ const CardsGameListeners: React.FC<Props> = ({
         active: { id: cardId },
       } = ev;
       const newParent = over?.id;
-      setDraggingCardId(null);
+      setDraggingCard(null);
 
       if (newParent === 'panel') {
         onEvent({
@@ -217,15 +218,15 @@ const CardsGameListeners: React.FC<Props> = ({
         args => {
           const start = performance.now();
 
-          if (!draggingCardId) {
+          if (!draggingCard?.id) {
             return {
               scaleY: 1,
               scaleX: 1,
               x: args.transform.x,
               y: args.transform.y,
             };
           }
-          const currentMovingCardState = gameStateRef.current[draggingCardId!];
+          const currentMovingCardState = gameStateRef.current[draggingCard!.id];
           let newTransform: Transform;
           if (currentMovingCardState.placedIn === 'board') {
             /**
@@ -269,17 +270,17 @@ const CardsGameListeners: React.FC<Props> = ({
           return newTransform;
         },
       ] as Modifiers,
-    [draggingCardId, panelModeRef],
+    [draggingCard, panelModeRef],
   );
 
   const customCollisionDetectionStrategy = useCallback(
     (rects: RectEntry[], draggingRect: ViewRect) => {
       const start = performance.now();
-      if (!draggingCardId) {
+      if (!draggingCard) {
         return null;
       }
       const panelRect = rects.filter(([id]) => id === 'panel');
-      const currentMovingCardState = gameStateRef.current[draggingCardId!];
+      const currentMovingCardState = gameStateRef.current[draggingCard!.id];
 
       let absoluteRectWithRespectToWindow = draggingRect;
       if (currentMovingCardState.placedIn === 'board') {
@@ -288,10 +289,10 @@ const CardsGameListeners: React.FC<Props> = ({
         const absoluteRectWithRespectToBoard = {
           left:
             currentMovingCardState.position!.x +
-            (translationDeltaRef.current[draggingCardId!]?.x || 0) / panScaleRef.current,
+            (translationDeltaRef.current[draggingCard!.id]?.x || 0) / panScaleRef.current,
           top:
             currentMovingCardState.position!.y +
-            (translationDeltaRef.current[draggingCardId!]?.y || 0) / panScaleRef.current,
+            (translationDeltaRef.current[draggingCard!.id]?.y || 0) / panScaleRef.current,
           height: draggingRect.height,
           width: draggingRect.width,
           right: draggingRect.right,
@@ -346,7 +347,7 @@ const CardsGameListeners: React.FC<Props> = ({
         return 'board';
       }
     },
-    [draggingCardId],
+    [draggingCard],
   );
 
   return (
@@ -359,7 +360,9 @@ const CardsGameListeners: React.FC<Props> = ({
       {children}
       {createPortal(
         <DragOverlay adjustScale dropAnimation={null} modifiers={modifiers} className="transform-0">
-          {draggingCardId ? <ConnectedCard bigger dragging={true} id={draggingCardId} /> : null}
+          {draggingCard ? (
+            <ConnectedCard bigger={draggingCard.parent === 'panel'} dragging={true} id={draggingCard.id} />
+          ) : null}
         </DragOverlay>,
         document.body,
       )}

diff --git a/packages/game-app/src/gameView/components/DeckPanel/DeckPanel.tsx b/packages/game-app/src/gameView/components/DeckPanel/DeckPanel.tsx
@@ -1,12 +1,12 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import DraggableCard from '../DraggableCard';
 import styled, { css } from 'styled-components';
 import { IconButton, AnimatedGrid } from '@pipeline/components';
 import { ReactComponent as StackedIcon } from '@assets/icons/stacked-cards.svg';
 import { ReactComponent as TwoColumnsIcon } from '@assets/icons/2column-view.svg';
 import DroppablePanelArea from '../DroppablePanelArea';
 import { PANEL_CARD_SIZE, PANEL_ONE_COLUMNS_WIDTH, PANEL_TWO_COLUMNS_WIDTH } from '../../../dimensions';
-import { CardWrapper } from '../DraggableCard/DraggableCard';
+import { CardWrapper } from '../DraggableCard/DraggableCard.styled';
 
 export type PanelMode = 'stacked' | 'tow-columns';
 
@@ -52,6 +52,25 @@ const DeckPanel: React.FC<Props> = ({ cardsIds, panelModeRef }) => {
     panelModeRef.current = panelMode;
   }, [panelMode, panelModeRef]);
 
+  const content = useMemo(
+    () => (
+      <AnimatedGrid
+        itemWidth={PANEL_CARD_SIZE.width}
+        itemHeight={PANEL_CARD_SIZE.height}
+        margin={16}
+        marginVertical={panelMode === 'tow-columns' ? 16 : -90}
+        containerWidth={panelMode === 'tow-columns' ? PANEL_TWO_COLUMNS_WIDTH - 80 : PANEL_ONE_COLUMNS_WIDTH - 80}
+        transitionTime="400ms"
+        transitionTimingFunction="ease-in-out"
+      >
+        {cardsIds.map(id => (
+          <DraggableCard bigger key={id} id={id} />
+        ))}
+      </AnimatedGrid>
+    ),
+    [cardsIds, panelMode],
+  );
+
   return (
     <DroppablePanelArea mode={panelMode}>
       <PanelButtons>
@@ -62,21 +81,7 @@ const DeckPanel: React.FC<Props> = ({ cardsIds, panelModeRef }) => {
           <TwoColumnsIcon />
         </IconButton>
       </PanelButtons>
-      <DeckPanelContent mode={panelMode}>
-        <AnimatedGrid
-          itemWidth={PANEL_CARD_SIZE.width}
-          itemHeight={PANEL_CARD_SIZE.height}
-          margin={16}
-          marginVertical={panelMode === 'tow-columns' ? 16 : -90}
-          containerWidth={panelMode === 'tow-columns' ? PANEL_TWO_COLUMNS_WIDTH - 80 : PANEL_ONE_COLUMNS_WIDTH - 80}
-          transitionTime="400ms"
-          transitionTimingFunction="ease-in-out"
-        >
-          {cardsIds.map(id => (
-            <DraggableCard bigger key={id} id={id} />
-          ))}
-        </AnimatedGrid>
-      </DeckPanelContent>
+      <DeckPanelContent mode={panelMode}>{content}</DeckPanelContent>
     </DroppablePanelArea>
   );
 };

diff --git a/packages/game-app/src/gameView/components/DraggableCard/DraggableCard.styled.tsx b/packages/game-app/src/gameView/components/DraggableCard/DraggableCard.styled.tsx
@@ -0,0 +1,12 @@
+import styled, { css } from 'styled-components';
+
+export const CardWrapper = styled.div<{ isDragging?: boolean }>`
+  cursor: pointer;
+  transition: all 0.3s ease-out;
+
+  ${props =>
+    props.isDragging &&
+    css`
+      opacity: 0.5;
+    `}
+`;
diff --git a/packages/game-app/src/gameView/components/DraggableCard/DraggableCard.tsx b/packages/game-app/src/gameView/components/DraggableCard/DraggableCard.tsx
@@ -2,19 +2,14 @@ import React from 'react';
 import { useDraggable } from '@dnd-kit/core';
 import { useSelector } from 'react-redux';
 import { selectors } from '../../slice';
-import styled from 'styled-components';
 import ConnectedCard from '../ConnectedCard';
+import { CardWrapper } from './DraggableCard.styled';
 
 type Props = {
   id: string;
   bigger?: boolean;
 };
 
-export const CardWrapper = styled.div`
-  cursor: pointer;
-  transition: all 0.3s ease-out;
-`;
-
 /**
  * A card enhanced with dragging capability
  */
@@ -35,18 +30,12 @@ const DraggableCard: React.FC<Props> = ({ id, bigger }) => {
       : {};
 
   return (
-    <CardWrapper
-      style={style}
-      ref={setNodeRef}
-      {...listeners}
-      {...attributes}
-      className={`${isDragging ? 'dragging' : ''}`}
-    >
+    <CardWrapper style={style} ref={setNodeRef} {...listeners} {...attributes} isDragging={isDragging}>
       <ConnectedCard bigger={bigger} id={id} />
     </CardWrapper>
   );
 };
 
 DraggableCard.displayName = 'DraggableCard';
 
-export default DraggableCard;
+export default React.memo(DraggableCard);
diff --git a/packages/game-app/src/gameView/components/DroppablePanelArea/DroppablePanelArea.tsx b/packages/game-app/src/gameView/components/DroppablePanelArea/DroppablePanelArea.tsx
@@ -8,7 +8,7 @@ type Props = {
   mode: PanelMode;
 };
 
-const FixedPanel = styled.div<{ closed: boolean; mode: PanelMode }>`
+const FixedPanel = styled.div<{ closed: boolean; mode: PanelMode; isOver: boolean }>`
   position: fixed;
   top: 0;
   right: 0;
@@ -22,6 +22,8 @@ const FixedPanel = styled.div<{ closed: boolean; mode: PanelMode }>`
   display: flex;
   flex-direction: column;
   transition: transform 0.5s, width 0.5s;
+  border: 2px solid transparent;
+  ${props => props.isOver && 'border-color: #00867c;'}
 
   ${props =>
     props.closed
@@ -71,7 +73,7 @@ const ToggleIndicator = styled.div`
  * It is also a droppable area, where you can release cards moved out from the board
  */
 const DroppablePanelArea: React.FC<Props> = ({ children, mode }) => {
-  const { setNodeRef } = useDroppable({
+  const { setNodeRef, isOver } = useDroppable({
     id: 'panel',
   });
 
@@ -82,7 +84,7 @@ const DroppablePanelArea: React.FC<Props> = ({ children, mode }) => {
   }, []);
 
   return (
-    <FixedPanel ref={setNodeRef} closed={closed} mode={mode}>
+    <FixedPanel ref={setNodeRef} closed={closed} mode={mode} isOver={isOver}>
       <ToggleWrapper>
         <ToggleButton onClick={toggle}>
           <ToggleIndicator />