Next.js Discord

Discord Forum

CSS ISSUE

Unanswered
Standard Chinchilla posted this in #help-forum
Open in Discord
Standard ChinchillaOP
I am quite new to nextjs and react. but I have problrms with adding a animation to my card jack (I am making blackjack to learn the basics)

But when I try adding card animations if someone "Hit" it just isnt working

3 Replies

Standard ChinchillaOP
game.js:
card.js
// components/Card.js
const styles = require('../styles/Game.module.css');


const getCardImageFileName = (value, suit) => {
    const valueMap = {
      '2': '2',
      '3': '3',
      '4': '4',
      '5': '5',
      '6': '6',
      '7': '7',
      '8': '8',
      '9': '9',
      '10': '10',
      'J': 'jack',
      'Q': 'queen',
      'K': 'king',
      'A': 'ace'
    };
  
    const suitMap = {
      'Clubs': 'clubs',
      'Diamonds': 'diamonds',
      'Hearts': 'hearts',
      'Spades': 'spades'
    };
  
    const valueName = valueMap[value];
    const suitName = suitMap[suit];
  
    return `${valueName}_of_${suitName}.svg`.toLowerCase();
  };

  
  
  const Card = ({ card }) => {
    const { suit, value } = card;
    const imageName = getCardImageFileName(value, suit);
    const imagePath = `/cards/${imageName}`;

    return (
      <div className={`card new-card m-2 inline-block dark:bg-gray-800 bg-opacity-50 rounded-lg shadow-xl dark:shadow-blue-500/50 transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105`}>
            <img src={imagePath} alt={`${value} of ${suit}`} />
        </div>
    );
};


  
  export default Card;
css: 
.new-card {
    animation: fadeIn 2s; 
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}