Add separator to mark last turn transition

[Neicigam]

No description provided.

[KittySparkles]

I don’t think inserting an extra element alongside the columns is necessary. I think we should be able to apply an extra class to all cards that are the first in a turn. Something like:

<Image
  wrapperClassName={[
    'DryRunnerCardLog__image-wrapper',
    props.cardsThisTurn === index + 1 &&
      index !== 5 &&
      'DryRunnerCardLog__image-wrapper--turn',
  ].filter(Boolean)}
  className='DryRunnerCardLog__image'
  src={card.image}
  alt={card.name}
  onClick={() => setZoomedCard(card)}
  data-testid='card-log-image'
/>

Then on the CSS:

.DryRunnerCardLog__image-wrapper--turn::after {
  content: '';
  position: absolute;
  right: -0.5em;
  height: 80%;
  top: 50%;
  width: 1px;
  transform: translateY(-50%);
  background: linear-gradient(
    to bottom,
    transparent,
    var(--dark-beige),
    transparent
  );

[KittySparkles]

Oh, and for the pseudo element to be able to be absolutely positioned, .DryRunnerCardLog__image-wrapper needs to be position: relative.

[Neicigam]

Great it looks amazing!!

[KittySparkles]

Thank you! 👍