feat(app-board): add card zindex to keep last upfront

eficode · Jan 23, 2021 · 221c045 · 221c045
1 parent a4c0db8
commit 221c045
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 1 deletion.
diff --git a/packages/game-app/src/gameView/components/Board/Board.styled.tsx b/packages/game-app/src/gameView/components/Board/Board.styled.tsx
@@ -6,6 +6,7 @@ export const BoardContainer = styled.div<{ scale: number }>`
   height: 2160px;
   padding: 16px;
   position: relative;
+  z-index: -999999;
 
   ${({ scale }) =>
     scale > 0 &&

diff --git a/packages/game-app/src/gameView/components/DraggableCard/DraggableCard.tsx b/packages/game-app/src/gameView/components/DraggableCard/DraggableCard.tsx
@@ -20,7 +20,7 @@ const DraggableCard: React.FC<Props> = ({ id, bigger }) => {
     id,
   });
 
-  const { position, estimation } = useSelector(selectors.getCardAdditionalInfo(id));
+  const { position, estimation, zIndex } = useSelector(selectors.getCardAdditionalInfo(id));
   const [estimationOpen, setEstimationOpen] = useState(false);
 
   const dispatch = useDispatch();
@@ -36,6 +36,7 @@ const DraggableCard: React.FC<Props> = ({ id, bigger }) => {
   const style =
     position?.x || position?.y
       ? {
+          zIndex,
           top: position.y,
           left: position.x,
           position: 'absolute' as const,

diff --git a/packages/game-app/src/gameView/sagas/loadGame.ts b/packages/game-app/src/gameView/sagas/loadGame.ts
@@ -15,6 +15,7 @@ function* executeLoadGame(action: ReturnType<typeof actions.loadGame>) {
     boardCards: [],
     deckCards: cards.filter(c => c.type === CardTypes.PipelineStep).map(c => c.id),
     cardsState: {},
+    maxZIndex: -1000,
   };
   yield put(
     actions.setInitialGameState({

diff --git a/packages/game-app/src/gameView/slice.ts b/packages/game-app/src/gameView/slice.ts
@@ -10,20 +10,46 @@ import { CardEntity } from '@pipeline/common';
 import { GameUIState } from './types/gameUIState';
 
 export interface AdditionalCardData {
+  /**
+   * if it is beeing moving
+   */
   held: boolean;
+  /**
+   * absolute position inside the board
+   */
   position: {
     x: number;
     y: number;
   };
+  /**
+   * time estimation placed inside the card
+   */
   estimation?: string;
+  /**
+   * Card z-index to put it in front of all the others when drag finish
+   */
+  zIndex: number;
 }
 
 export interface GameState {
+  /**
+   * list of card ids inside the board
+   */
   boardCards: string[];
+  /**
+   * list of card ids inside the panel
+   */
   deckCards: string[];
+  /**
+   * cards infomration
+   */
   cardsState: {
     [cardId: string]: AdditionalCardData;
   };
+  /**
+   * max z-index, the z-index of the last placed cards inside the board
+   */
+  maxZIndex: number;
 }
 
 export interface State {
@@ -104,6 +130,7 @@ const slice = createSlice({
           ...(gameState.cardsState[cardId] || {}),
           position: position!,
           held: false,
+          zIndex: gameState.maxZIndex++,
         };
       }
     },