JSFiddle - React, Tailwind, and code Playground

by Pratik Galoria

HTML

<div class={classes(styles.coinContainerStacks, 'stacks')}>
            <div class={classes(styles.stackOne, 'stack-one')}>
              <Icon class={classes(styles.coin, styles.firstCoin)} src="icons/img-coin.svg"/>
            </div>
            <div class={classes(styles.stackTwo, 'stack-two')}>
            </div>
            <div class={classes(styles.stackThree, 'stack-three')}>
            </div>
          </div>
        </div>

JavaScript

const coins = {
  element: null,
  total: 1,
  stacks: {
    0: {
      element: null,
      count: 0,
    },
    1: {
      element: null,
      count: 0,
    },
    2: {
      element: null,
      count: 0,
    },
  }
};

const spendCreate = (callback, component) => {
  component.firstChild.firstChild.childNodes.forEach((stack, key) => {
    const coinsInStack = stack.childNodes.length;

    coins.stacks[key].element = stack;
    coins.stacks[key].count = coinsInStack;
    coins.total = coins.total + coinsInStack;
  });

  coins.element = coins.stacks[0].element.firstChild;

  callback();
};

const newCoin = (coinIndex, stackIndex) => {
  const coin = coins.stacks[stackIndex].element.appendChild(coins.element.cloneNode(true));
  coin.style.left = `${Math.floor(Math.random() * 5) + 1}px`;

  setTimeout(() => {
    coin.style.top = `${180 - (coinIndex * 6)}px`;
    coin.style.opacity = 1;
  }, 100);
};

const createInitialCoins = (count) => {
  for (let i = 0; i < count; i++) {
    const stackIndex = Math.floor(i/17);
    newCoin(i, stackIndex);
    coins.stacks[stackIndex].count += 1;
    coins.total += 1;
  }
};

const addCoins = (count) => {
  for (let i = coins.total; i < count; i++) {
    const stackIndex = Math.floor(i/17);
    newCoin(i, stackIndex);
    coins.stacks[stackIndex].count += 1;
    coins.total += 1;
  }
};

const removeCoins = (count) => {
  for (let i = coins.total - 1; i > count; i--) {
    const stackIndex = Math.floor(i/17);
    const removedCoin = coins.stacks[stackIndex].element.lastChild;

    /*
    setTimeout(() => {
      removedCoin.style.top = `-250px`;
      removedCoin.style.opacity = 0;
    }, 0);*/

    coins.stacks[stackIndex].element.removeChild(removedCoin);
    coins.stacks[stackIndex].count -= 1;
    coins.total -= 1;
  }
};

const animate = (value) => {
  const count = Math.floor(value/20000) + 1;

  if (coins.total - 1 === 0) {
    createInitialCoins(count);
  } else {
    if (coins.total < count) {
     ...