Cards main (click)

by ShaCP

HTML

<div id="card_container">
  <div class="card card_one left_side_card anim_initial" tabindex="-1">
    <div class="inner_card">
      <img class="top_card_image" src="http://localhost:3000/diamond.svg" />
      <img class="bottom_card_image" src="http://localhost:3000/diamond.svg" />
      <span class="card_heading"><span class="card_heading_char">P</span><span class="card_heading_char">a</span><span class="card_heading_char">i</span> <span class="card_heading_char">G</span><span class="card_heading_char">o</span><span class="card_heading_char">w</span></span>
    </div>
  </div>
  <div class="card card_two left_side_card anim_initial" tabindex="-1">
    <div class="inner_card">
      <img class="top_card_image" src="http://localhost:3000/club.svg" />
      <img class="bottom_card_image" src="http://localhost:3000/club.svg" />
      <span class="card_heading">Pai Gow Poker</span>
    </div>
  </div>
  <div class="card card_three left_side_card anim_initial" tabindex="-1">
    <div class="inner_card">
      <img class="top_card_image" src="http://localhost:3000/heart.svg" />
      <img class="bottom_card_image" src="http://localhost:3000/heart.svg" />
      <span class="card_heading">Three Card Poker</span>
    </div>
  </div>
  <div class="card card_four center_card anim_initial" tabindex="-1">
    <div class="inner_card">
      <img class="top_card_image" src="http://localhost:3000/spade.svg" />
      <img class="bottom_card_image" src="http://localhost:3000/spade.svg" />
      <span class="card_heading">Craps</span>
    </div>
  </div>
  <div class="card card_five right_side_card anim_initial" tabindex="-1">
    <div div class="inner_card"> <img class="top_card_image" src="http://localhost:3000/club.svg" />
      <img class="bottom_card_image" src="http://localhost:3000/club.svg" />
      <span class="card_heading">Blackjack</span>
    </div>
  </div>
  <div class="card card_six right_side_card anim_initial" tabindex="-1">
    <div div class="inner_card">
     ...

CSS

html,
body {
  height: 100vh;
}

body {
  display: flex;
  font-size: 3rem;
  justify-content: center;
  margin: 0;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

.card_one.anim_initial {
  /* background-color: green; */
  animation-name: card_1_initial_anim;
}

.card_two.anim_initial {
  /* background-color: red; */
  animation-name: card_2_initial_anim;
}

.card_three.anim_initial {
  /* background-color: blue; */
  animation-name: card_3_initial_anim;
}

.card_four.anim_initial {
  /* background-color: yellow; */
  animation-name: card_4_initial_anim;
}

.card_five.anim_initial {
  /* background-color: lightpink; */
  animation-name: card_5_initial_anim;
}

.card_six.anim_initial {
  /* background-color: lightgreen; */
  animation-name: card_6_initial_anim;
}

.card_seven.anim_initial {
  /* background-color: violet; */
  animation-name: card_7_initial_anim;
}

.card_one.initialAnimEndPosition {
  transform: translate(calc(var(--firstCardTranslateXValuePostFirstAnimation) * 3));
  transform-origin: center;
}


.card_two.initialAnimEndPosition {
  transform: translate(calc(var(--firstCardTranslateXValuePostFirstAnimation) * 2));
  transform-origin: center;
}

.card_three.initialAnimEndPosition {
  transform: translate(calc(var(--firstCardTranslateXValuePostFirstAnimation) * 1));
  transform-origin: center;
}

.card_four.initialAnimEndPosition {
  transform: none;
  transform-origin: center;
}

.card_five.initialAnimEndPosition {
  transform: translate(calc(var(--firstCardTranslateXValuePostFirstAnimation) * -1));
  transform-origin: center;
}

.card_six.initialAnimEndPosition {
  transform: translate(calc(var(--firstCardTranslateXValuePostFirstAnimation) * -2));
  transform-origin: center;
}

.card_seven.initialAnimEndPosition {
  transform: translate(calc(var(--firstCardTranslateXValuePostFirstAnimation) * -3));
  transform-origin: center;
}

/* centering animation end positioning */

.card.centerAnimEndPosition {
  transform: rotateZ(90deg)...

JavaScript

const toggleAnim = (e, name) => {
  debugger;
/*  this is to make sure I'm toggling the class on the correct element.
 the click handler is put on the cards, so if you click on any element inside
 the card, a click event will bubble up and trigger the handler. But, the animation
 listener is on the card-container, so when a card animates, it bubbles up and triggers
 that handling. So when the animation event runs, you need to toggle the class on
 the target (the card), not the currentTarget (the container), but when a
 click event runs, it needs to toggle it on the currentTarget (the card), not the
 target (any element inside the card, or the card if you happen to click on a blank spot) */
 const isMouseEvent = e[Symbol.toStringTag] === "MouseEvent"
 const target = isMouseEvent ? e.currentTarget : e.target;
 target.classList.toggle(name);
}

const toggleAnimOneEndPosition = (e) => {
  if (e.animationName.includes("center")) {
    e.target.classList.toggle("centerAnimEndPosition");
  } else if (e.animationName.includes("initial")) {
    e.target.classList.toggle("initialAnimEndPosition");
  }
}

const toggleReverseAnim = (e) => {
  e.target.classList.toggle("reverseAnim");
}

const togglePointerEvents = (e) => {
  e.currentTarget.classList.toggle("pointerEventsOff");
}

const preventDefault = (e) => {
  e.preventDefault();
}

const animationStart = (e) => {
  debugger;
  if (e.animationName.includes("center")) {
    /* togglePointerEvents() */
    e.target.removeEventListener("click", toggleAnimOne);
    togglePointerEvents(e);
  }
}

const animationEnd = (e) => {
  debugger;
  /* togglePointerEvents() */
  ;
  if(e.target.classList[0] === "card") {
  if (e.animationName.includes("center")) {
    toggleAnim(e, "anim_center");
    toggleAnimOneEndPosition(e);
    toggleReverseAnim(e);
    togglePointerEvents(e);
  } else if (e.animationName.includes("initial")) {
    toggleAnim(e, "anim_initial");
    toggleAnimOneEndPosition(e);
  }
 ...