Animate dynamic number of cards from a single runOnUI

[d-machine]

Context -

1. I am trying to create a multi-deck card game
2. Each player has 13 cards and in every turn they can pick and discard from the remaining cards.
3. And they can group cards, drag and change the ordering of cards at any time.
4. In my first attempt, I change their positions in a global state(zustand), and based on the changes in global state, individual cards use withTiming to animate the position change.
5. Performance issue as changing the position of multiple cards together schedule 13 different withTiming calls from JS thread.

As per my understanding(and some chatgpt), if I can call all 10 withTimings from a single runOnUI function, then the performance hit will be low as we are calling the withTiming from UI thread directly.

Based on this conjecture - I tried to use makeMutable to create sharedValue for all cards and stored that in an object outside react. But this has its own problems -

1. The object that holds sharedValue positions for all cards itself is not a sharedValue. Hence, I am not able to get its latest value in UI thread
2. If I make it a sharedValue too, I am not able to connect useAnimatedStyle of each card to their position.
3. Also, I am not able to properly update sharedValue value of corresponding to a key in sharedValue object.

Can anyone suggest what would be the optimal way to handle this case. As low end android devices are feeling very laggy?

Here is my latest try to solve this problem, but I am not making any progress as after converting currentPosition to a sharedValue object, registerSharedCard is not working properly and I am not able to link useAnimatedStyle of a card to its sharedValue properly.

import type { EPlayerNumber, IGroup, TAnimationConfigCollection, TCardNew, TCardNewCollection, TSharedCard } from "@interfaces/gameplay";
import type { PanGestureHandlerEventPayload } from "react-native-gesture-handler";
import { Easing, makeMutable, runOnUI, withDelay, withTiming, type SharedValue } from "react-native-reanimated";

export type TSharedData = {
  originalCards: { [cardId: string]: TCardNew };
  currentCards: { [cardId: string]: TCardNew };
  originalGroups: Array<IGroup>;
  currentGroups: Array<IGroup>;
  originalGroupOrder: Array<number>;
  currentGroupOrder: Array<number>;
  cardBeingDraggedId: string | null;
  otherPlayersXPositions: Partial<Record<EPlayerNumber, number>>;
  initialPosition: { x: number, y: number };
  openDeckPosition: { x: number, y: number };
  closedDeckPosition: { x: number, y: number };
  declareDeckPosition: { x: number, y: number };
  multiplicationFactor: number;
  originalTotalWidth: number;
  currentTotalWidth: number;
  originalTotalNonEmptyGroups: number;
  currentTotalNonEmptyGroups: number;
}

export type TPosition = { x: number, y: number };

export type TPositionMap = { [cardId: string]: SharedValue<TPosition> };

const defaultSharedData: TSharedData = {
  originalCards: {},
  currentCards: {},
  originalGroups: [],
  currentGroups: [],
  originalGroupOrder: [],
  currentGroupOrder: [],
  cardBeingDraggedId: null,
  otherPlayersXPositions: {},
  initialPosition: { x: 0, y: -40 },
  openDeckPosition: { x: 0, y: -51 },
  closedDeckPosition: { x: -124, y: -51 },
  declareDeckPosition: { x: 124, y: -51 },
  multiplicationFactor: 1,
  originalTotalWidth: 0,
  currentTotalWidth: 0,
  originalTotalNonEmptyGroups: 0,
  currentTotalNonEmptyGroups: 0
}



let sharedData: SharedValue<TSharedData> = makeMutable(defaultSharedData);
let currentPosition: SharedValue<TPositionMap> = makeMutable({});
let originalPosition: SharedValue<TPositionMap> = makeMutable({});
let multiplicationFactor: SharedValue<number> = makeMutable(1);

export function initializeOrResetSharedData() {
  sharedData.value = defaultSharedData;
  currentPosition.value = {};
  originalPosition.value = {};
}

export function getCardPosition(cardId: string) {
  'worklet';
  if (!sharedData) {
    return { x: 0, y: 0 };
  }
  return currentPosition.value[cardId]?.value ?? { x: 0, y: 0 };
}

export function setSharedMultiplicationFactor(mf: number) {
  'worklet';
  multiplicationFactor.value = mf;
}

export function setSharedOtherPlayersXPositions(otherPlayersXPositions: Partial<Record<EPlayerNumber, number>>) {
  runOnUI(() => {
    'worklet';
    if (!sharedData) {
      return;
    }

    sharedData.modify((data) => {
      'worklet';
      data.otherPlayersXPositions = otherPlayersXPositions;
      return data;
    });
  })();
}

export function registerSharedCard(card: TCardNew) {
  'worklet';
  if (!sharedData) {
    return;
  }

  sharedData.modify((data) => {
    'worklet';
    data.originalCards[card.feId] = card;
    data.currentCards[card.feId] = card;
    return data;
  });

  const position = calculateUserCardPosition(card, sharedData.value.currentTotalWidth, sharedData.value.otherPlayersXPositions);

  currentPosition.value[card.feId] = makeMutable(position);
  originalPosition.value[card.feId] = makeMutable(position);
}

export function deRegisterSharedCard(cardId: string) {
  'worklet';
  if (!sharedData) {
    return;
  }

  sharedData.modify((data) => {
    'worklet';
    if (data.originalCards[cardId]) {
      delete data.originalCards[cardId];
    }
    if (data.currentCards[cardId]) {
      delete data.currentCards[cardId];
    }
    return data;
  });
  delete currentPosition.value[cardId];
  delete originalPosition.value[cardId];
}

export function getTotalNonEmptyGroups(groups: Array<IGroup>) {
  'worklet';
  return groups.filter(group => group.cards.length > 0).length;
}

export function getTotalUserCards(cards: TCardNewCollection) {
  'worklet';
  return Object.values(cards).filter(
    card => card && (card.cardIndex <= 13 || (card.cardIndex >= 200 && card.cardIndex <= 212))
  ).length;
}

export function getTotalWidth(totalCards: number, totalNonEmptyGroups: number) {
  'worklet';
  if (totalNonEmptyGroups === 6) {
    return 0;
  }
  return (totalCards + totalNonEmptyGroups - (totalNonEmptyGroups === 6 ? 1 : -1)) * 28 - 24;
}

export function calculateUserCardPosition(card: TCardNew, totalWidth: number, otherPlayersXPositions: Partial<Record<EPlayerNumber, number>>) {
  'worklet';
  const mf = multiplicationFactor.value ?? 1;
  if (card.cardIndex <= 13) {
    return {
      x: ((card.cardIndex + (card.groupIndex ?? 0)) * 28 - (totalWidth / 2)) * mf,
      y: 43.5 * mf
    };
  }
  if (card.cardIndex === 100) {
    return { x: 0, y: -40 * mf };
  }
  if (card.cardIndex >= 200 && card.cardIndex <= 212) {
    return { x: (card.cardIndex - 200 - Math.floor(13 / 2)) * 28 * mf, y: 43.5 * mf };
  }
  if (card.cardIndex === 300) {
    return { x: -124 * mf, y: -51 * mf };
  }
  if (card.cardIndex === 400) {
    return { x: 0, y: -51 * mf };
  }
  if (card.cardIndex === 500) {
    return { x: 0, y: -51 * mf };
  }
  if (card.cardIndex >= 602 && card.cardIndex <= 606) {
    return {
      x: (otherPlayersXPositions[card.cardIndex - 600 as unknown as EPlayerNumber] ?? 0) * mf,
      y: (-169.5 + 37) * mf
    }
  }
  return { x: 0, y: 0 };
}

export function updateCards(
  cards: TCardNewCollection,
  groups: Array<IGroup>,
  groupOrder: Array<number>,
  animationConfig: TAnimationConfigCollection)
{
  runOnUI(() => {
    'worklet';
    if (!sharedData.value) {
      return;
    }

    console.log('currentPosition', currentPosition.value, '<><><><><><>');

    sharedData.value.originalGroupOrder = groupOrder;
    sharedData.value.currentGroupOrder = groupOrder;
    sharedData.value.originalGroups = groups;
    sharedData.value.currentGroups = groups;

    const totalNonEmptyGroups = getTotalNonEmptyGroups(groups);
    const totalWidth = getTotalWidth(getTotalUserCards(cards), totalNonEmptyGroups);
    for (const cardId of Object.keys(cards)) {
      const card = cards[cardId] as TCardNew;
      if (cardId in sharedData.value.originalCards) {
        if (originalPosition.value[cardId] === undefined || currentPosition.value[cardId] === undefined) {
          continue;
        }
        const originalCard = sharedData.value.originalCards[cardId] as TSharedCard;
        if (
          card.cardIndex !== originalCard.cardIndex ||
          card.groupId !== originalCard.groupId ||
          card.groupIndex !== originalCard.groupIndex ||
          sharedData.value.originalTotalWidth !== totalWidth
        ) {
          const position = calculateUserCardPosition(card, totalWidth, sharedData.value.otherPlayersXPositions);
          sharedData.value.originalCards[cardId] = { ...card };
          sharedData.value.currentCards[cardId] = { ...card };

          originalPosition.value[cardId].value = position;
          if (position.x !== currentPosition.value[cardId]?.value.x || position.y !== currentPosition.value[cardId]?.value.y) {
            const duration = animationConfig[cardId]?.transitionDuration ?? 0;
            const delay = animationConfig[cardId]?.transitionDelay ?? 0;
            console.log('currentPositionbefore', currentPosition.value, '<><><><><><>');
            currentPosition.value[cardId].value = withDelay(
              delay,
              withTiming(
                { x: position.x, y: position.y },
                { duration, easing: Easing.out(Easing.cubic) }
              )
            );
            console.log('currentPositionafter', currentPosition.value, '<><><><><><>');
          }
        }
      }
    }
    sharedData.value.originalTotalWidth = totalWidth;
  })();
}

export function getSharedData() {
  'worklet';
  return sharedData;
}

export function getSharedCardPosition() {
  'worklet';
  return currentPosition;
}

and here's how I am using the useAnimatedStyle -

const animatedStyle = useAnimatedStyle(() => {
    const sharedPositions = getSharedCardPosition();
    const pos = sharedPositions.value?.[cardId];
    // console.log('animatedStyle', sharedPositions.value, pos, '<><><><><><>!!!!!!!!!!!!');
    return {
      transform: [{ translateX: pos?.value.x ?? 0 }, { translateY: pos?.value.y ?? 0 }]
    }
  });