-
Notifications
You must be signed in to change notification settings - Fork 1
/
Deck.tsx
31 lines (29 loc) · 997 Bytes
/
Deck.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import React from "react";
import { CardProps, DeckProps } from "../types/types";
import { Card } from "./Card";
export const Deck: React.FC<DeckProps> = ({ game, activeCardIndex }) => {
return (
<div className="absolute z-50 aspect-square w-1/2 rounded-full border-8 border-black bg-pink-600">
{game.newGame.cardStack.map((cardItem: CardProps, i: number) => {
return (
<Card
activeCardIndex={activeCardIndex}
key={`stage-cards-${i}`}
index={i}
color={cardItem.color}
rotate={i === activeCardIndex ? "0deg" : `${i * 5 + 10}deg`}
z={
i === activeCardIndex
? "50"
: `${game.newGame.cardStack.length - i}`
} // REVERSE OF INDEX
limbs={cardItem.limbs}
attractActive={game.newGame.attractActive}
shown={i === activeCardIndex}
game={game}
/>
);
})}
</div>
);
};