Im working on a solitaire game project and now im working on gaps between cards.
I work on .ts files and using pixi.
I want to make bigger gaps (ROW_GAP) for cards that are visible, and ROW_SMALL_GAP for invisible cards (those, that were turned down) in tableau columns.
I v got this method:

updateColumnGaps(): void {
        console.log('Updating column gaps...');
    
        // Going through each column
        this.tableau.forEach((column, colIndex) => {
            let currentY = 0;
            let gap = 0;
    
            console.log(`Column ${colIndex}: X position = ${column[0]?.container?.x}`);
    
            // Count gap based on number of cards
            if (column.length > 20) {
                gap = ROW_GAP;
            }
            
            // Iterate through each card in the column
            column.forEach((card, cardIndex) => {
                // If there is < 20 cards, we set a specific gap.
                if (column.length <= 20) {
                    gap = card.visible ? ROW_GAP : ROW_SMALL_GAP;
                }
    
                // Set card position
                card.setPosition(new Point(column[0].container.x, currentY));
                currentY += gap;
    
                console.log(`Card ${card._id} Position (Y) = ${card.container.y}, Gap = ${gap}`);
            });
    
            console.log(`Column ${colIndex}: Final Y position = ${currentY}`);
        });
    }

I added this method to my onUndo() method, which adds gaps that i want when i click on undo button.
I was adding this also to dragCard() and dropCard() methods, but it was updating screen only after next move (for example at begining of game I have moved Queen to a Column with 2 aversed card and King – there should be AVERSED>ROW_SMALL_GAP>AVERSED>ROW_SMALL_GAP>KING>ROW_GAP>QUEEN but it all have ROW_SMALL_GAP until I try to make another move (then it starts to update screen)

Also when i try to move group of cards but decide to leave them where they were gaps between this column are set back to ROW_SMALL_GAP.

HERE IS MY ONUNDO() METHOD- I THINK I SHOULDNT USE * ROW_SMALL_GAP in it, but then what should i use?

onUndo() {
        const lastMove = this.moves.pop();
        if (!lastMove) return;
        if (this.moves.length === 0) this.undoButton.setDisabled(true);
        this.moveGroup = lastMove.list.map((id) => this.cards.find((c) => c._id === id)) as Card[];
        if (this.moveGroup.length === 0) return;
        const place = lastMove.from;
        const firstCard = this.moveGroup[0];
        this.moveGroupContainer.position = firstCard.place.position;
        GameEvent.emit(EventName.UNDO_MOVE, lastMove);
        if (place.cardPlace === CardPlace.STOCKPILE && place.value === -1) {
            //reverse flip cards
            this.stockpile = [];
            this.moveGroup.forEach((card, index) => {
                if (card) {
                    card.setPlace({
                        cardPlace: CardPlace.WASTE_PILE,
                        value: index,
                        zIndex: TOP_DEAL_Z_INDEX + index,
                        position: new Point(wastePilePosition.x, wastePilePosition.y),
                    });
                    card.setOrder(MOVE_Z_INDEX);
                    card.moveTo(card.place.position, 0, () => {
                        card.setVisible(true);
                        card.setOrder(card.place.zIndex);
                        this.blockMove = false;
                    });
                    this.wastePile.push(card);
                }
            });
            setTimeout(this.shrinkWastePile, 1);
            setTimeout(this.refreshWastePile, 3);
            return;
        }
        this.moveGroup.forEach((card, index) => {
            this.clearPlace(card);
            let targetPosition = new Point();
            switch (place.cardPlace) {
                case CardPlace.TABLEAU:
                    targetPosition = new Point(
                        this.getColumnPosition(place.value),
                        (this.tableau[place.value].length + index) * ROW_SMALL_GAP
                    );
                    break;
                case CardPlace.FOUNDATION:
                    targetPosition = new Point(this.getFoundationPosition(place.value), foundationPosition.y);
                    break;
                case CardPlace.WASTE_PILE:
                    targetPosition = stockPilePosition.clone();
                    break;
                case CardPlace.STOCKPILE:
                    targetPosition = stockPilePosition.clone();
                    targetPosition.x += (this.stockpile.length + index) * STOCK_PILE_GAP_X;
                    targetPosition.y += (this.stockpile.length + index) * STOCK_PILE_GAP_Y;
                    break;
            }

            card.setPlace({
                cardPlace: place.cardPlace,
                value: place.value,
                zIndex: place.zIndex + index,
                position: targetPosition,
            });
        });
        this.placeMoveGroup();
        if (lastMove.cardToActivate) {
            lastMove.cardToActivate.setActive(false);
        }
        if (lastMove.cardToHide) {
            lastMove.cardToHide.setVisible(false);
        }
        if (lastMove.cardToActivate?.place.cardPlace === CardPlace.WASTE_PILE) this.refreshWastePile();
        if (place.cardPlace === CardPlace.STOCKPILE) setTimeout(this.refreshWastePile, 300);
        
    }```