Как сделать «пролет» карт в карточной игре с помощью css анимации и не сойти сума?

Question

[bitwheeze]

Привет,

в качестве самообразования ковыряюсь с карточной игрой - пасьянс косынка. Клиент делаю на реакте (next.js).



Сейчас у меня каждая карта это div с background-image.

const pile_styles = [
    styles.pile_0,
    styles.pile_1,
    styles.pile_2,
    styles.pile_3,
    styles.pile_4,
    styles.pile_5,
    styles.pile_6 ,
]

function PileFrame({children, index}) {
    return <div className={pile_styles[index] + " position-absolute"} >
        {children}
    </div>
}

Позиция каждой стопки карт задается в таком виде

.pile_0 {
    left: var(--left-card-margin);
    top: var(--card-pile-top);
    position: absolute;
    margin-right: 5px;
    min-height: 320px;
    min-width: var(--card-width-space);
}

.pile_1 {
    left: calc(1 * var(--card-width-space) + var(--left-card-margin));
    top: var(--card-pile-top);
    position: absolute;
    margin-right: 5px;
    min-height: 320px;
    min-width: var(--card-width-space);
}

И каждая карта в стопке получает дополнительно margin-top в зависимости от того где она лежит в стопке

style={{marginTop:((15 * (stack.down)) + (30 * i))+"px"}}

Ну а переменные css меняются под размеры экрана.

На данном этапе карты перемешаются из стопки в стопку "телепортацией" :) Пропадают в одном месте и появляются в другом. Так как у меня вся игра проходит на бэке, то после каждого клика клиент обращается к бэкенду и получает полное состояние игры - где какая карта лежит. Клиент просто отрисовывает. новое состояние.

Я хочу добавить красоты и сделать пролет карт при перемещении. Из стопки к стопке. Вопрос как это лучше сделать структурно? Я так понимаю мне надо делать transition от одного класса .pile_0 к .pile_2 к примеру. Это вообще возможно?

Плюс как то надо учитывать сколько и какие карты выбраны, что бы учитывать смещение карт в стопке.

Как это сделать попрактичнее просто ума не приложу. У меня получается какой то кошмар и ничего толком в голову не приходит.

Может подскажете, как это сделать попроще?. Уже подумываю перейти на canvas и рисовать все самому, но не хочется. Цель проекта разобраться с css и html.

Спасибо за любые идеи.

Comments

[szQocks]

через drag and drop перемещение делать надо

Answer 1

[Сергей delphinpro]

для карт

{
  transition: all 1s ease;
}

Теперь, когда вы будете менять любое не дискретное свойство у карты, например left/top/margin и т.п. - она будет плавно менять свою позицию.
Разумеется, свойства могут меняться не напрямую, а через смену класса, как у вас и происходит, по всей видимости.