in webapp/src/components/RevealOwnHand.js [14:84]
function RevealOwnHand() {
const {
gameState: state,
state: { colors },
actions
} = React.useContext(BoardContext);
function onAppear(el, i) {
setTimeout(() => {
el.classList.add("fadeIn");
setTimeout(() => {
el.style.opacity = 1;
el.classList.remove("fadeIn");
}, 500);
}, i * 50);
}
function onExit(el, i, removeElement) {
setTimeout(() => {
el.classList.add("fadeOut");
setTimeout(removeElement, 500);
}, i * 50);
}
const player = state.partnerId;
console.log(state.hands["self"]);
return (
<div className={cx("area", { active: state.isPlayerTurn })}>
<h3>You</h3>
<div>
<Flipper
flipKey={state.hands["self"].map(card => card.id).join(",")}
className="hand"
>
{state.hands["self"]
.filter(card => !!card.card)
.map((card, idx) => {
// const [cardColor, cardNumber] = card.card.split("");
return (
<Flipped
key={card.id}
flipId={card.id}
onAppear={onAppear}
onExit={onExit}
>
<div key={idx} className={"card " + card.card.split("")[0]}>
<div className="card_desc">
{card.card}
<div
style={{
fontSize: 12,
display: "inline-block",
float: "right",
padding: 5
}}
>
{/* <CardLeftCount color={cardColor} number={cardNumber} /> */}
</div>
</div>
<ShowHints hints={card.hints} />
</div>
</Flipped>
);
})}
</Flipper>
</div>
</div>
);
}