In my card game project, I am dealing with an issue where cards are not aligning properly with the designated "dropZonePositions" when the screen is resized. Despite creating animations for the card movement that I'm satisfied with, the problem arises during resizing.
The "dropZonePositions" are being calculated using the CSS Grid Layout Module which adjusts to screen size changes. However, the positioning of the cards is handled by jQuery's .animate() function, which sets static values for "top" and "left". These values do not dynamically adjust as the screen size changes.
I've attempted various solutions such as appending the card-divs to the dropZonePosition-divs after animation or removing the style attributes added by .animate(), but none have provided a satisfactory fix.
My query: How can I ensure that the cards align correctly with their "dropZonePositions" even when the screen is resized?
Check out the code example here
let deck =[
// Array of card objects omitted for brevity
]
function shuffleCards(array) {
// Function logic for shuffling array elements
}
// Rest of the JavaScript code handling card animation and placement
/* CSS code styling the game elements */
#topCardContainer {
// CSS rules for styling the top card container element
}
// More CSS styles for various game elements
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="topCardContainer">
// HTML structure for card game layout, elements, and containers