feat(app-board): add zIndex db support

packages/game-app/src/gameView/apis/saveCardState.ts

@@ -7,13 +7,15 @@ export default async function saveCardState(
   payload: {
     cardId: string;
     position?: { x: number; y: number };
+    zIndex?: number;
     target: 'panel' | 'board';
   },
 ) {
   const cardState: Partial<CardState> = {
     parent: payload.target,
     lockedBy: null,
     position: payload.position ?? (null as any),
+    zIndex: payload.target === 'panel' || !payload.zIndex ? (null as any) : payload.zIndex,
   };
 
   return firebase

packages/game-app/src/gameView/sagas/listenToGameState.ts

@@ -42,11 +42,16 @@ function* listenToCardState(action: ReturnType<typeof actions.startListenToGameS
     })
     .map(c => c.id);
 
+  const maxZIndex = boardCardsIds.reduce((acc, val) => {
+    acc = acc === undefined || cardsState[val]?.zIndex > acc ? cardsState[val]?.zIndex : acc;
+    return acc;
+  }, -1000);
+
   const gameState: GameState = {
     boardCards: boardCardsIds,
     deckCards: deckCardsIds,
     cardsState: cardsState as any,
-    maxZIndex: -1000,
+    nextZIndex: maxZIndex + 1,
     review: false,
   };
   yield put(

packages/game-app/src/gameView/sagas/saveCardPosition.ts

@@ -2,10 +2,12 @@ import { call, select, takeEvery } from 'redux-saga/effects';
 import { actions, selectors } from '../slice';
 import { addRequestStatusManagement } from '@pipeline/requests-status';
 import saveCardState from '../apis/saveCardState';
+import { CardState } from '@pipeline/common';
 
 function* executeSaveCardPosition(action: ReturnType<typeof actions.updateCardPosition>) {
-  const currentGameId = yield select(selectors.getGameId);
-  yield call(saveCardState, currentGameId, action.payload);
+  const currentGameId: string = yield select(selectors.getGameId);
+  const cardState: CardState = yield select(selectors.getCardAdditionalInfo(action.payload.cardId));
+  yield call(saveCardState, currentGameId, { ...action.payload, zIndex: cardState.zIndex });
 }
 
 export default function* saveCardPositionSaga() {

packages/game-app/src/gameView/slice.ts

@@ -13,28 +13,6 @@ import { selectors as authSelectors } from '@pipeline/auth';
 import { createNetworkRequiringAction } from '@pipeline/networkStatus';
 import { Draft } from 'immer';
 
-export interface AdditionalCardData {
-  /**
-   * if it is being moving
-   */
-  lockedBy: string | null;
-  /**
-   * 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
@@ -45,16 +23,19 @@ export interface GameState {
    */
   deckCards: string[];
   /**
-   * cards infomration
+   * cards information
    */
   cardsState: {
-    [cardId: string]: AdditionalCardData;
+    [cardId: string]: CardState;
   };
   /**
-   * max z-index, the z-index of the last placed cards inside the board
+   * next z-index, the z-index of the next placed cards inside the board
    */
-  maxZIndex: number;
+  nextZIndex: number;
 
+  /**
+   * flag to indicate if review is triggered
+   */
   review: boolean;
 }
 
@@ -78,8 +59,8 @@ const extraActions = {
   lockCard: createNetworkRequiringAction<string>(`${name}/lockCard`),
   updateCardPosition: createNetworkRequiringAction<{
     cardId: string;
-    position?: { x: number; y: number };
     target: 'panel' | 'board';
+    position?: { x: number; y: number };
   }>(`${name}/updateCardPosition`),
   setEstimation: createNetworkRequiringAction<{ cardId: string; estimation: string }>(`${name}/setEstimation`),
   startListenToGameState: createAction<string>(`${name}/startListenToGameState`),
@@ -110,9 +91,14 @@ function modifyCardState(cardState: CardState, gameState: Draft<GameState>, card
     }
     gameState.cardsState[cardId] = {
       ...cardState,
-      zIndex: gameState.maxZIndex++,
+      zIndex: cardState.zIndex,
     };
   }
+  const maxZIndex = gameState.boardCards.reduce((acc, val) => {
+    acc = acc === undefined || gameState.cardsState[val]?.zIndex > acc ? gameState.cardsState[val]?.zIndex : acc;
+    return acc;
+  }, -1000);
+  gameState.nextZIndex = maxZIndex + 1;
 }
 
 const slice = createSlice({
@@ -159,6 +145,7 @@ const slice = createSlice({
           parent: target,
           position: position,
           estimation: '',
+          zIndex: gameState.nextZIndex,
         },
         gameState,
         cardId,
@@ -236,7 +223,7 @@ const getCardPosition = (cardId: string) =>
 
 const getCardAdditionalInfo = (cardId: string) =>
   createSelector(getGameState, authSelectors.getCurrentUser, (gameState, user) => {
-    const data = gameState?.cardsState?.[cardId] ?? ({} as AdditionalCardData);
+    const data = gameState?.cardsState?.[cardId] ?? ({} as CardState);
     return {
       ...data,
       heldBySomeoneElse: !!(data.lockedBy && data.lockedBy !== user?.id),