Skip to content
const CardDeck = () => {
const [isFlipped, setIsFlipped] = React.useState(false);
const [isShuffling, setIsShuffling] = React.useState(false);
const [currentPrompt, setCurrentPrompt] = React.useState('');
const [usedPrompts, setUsedPrompts] = React.useState(new Set());
const prompts = [
"What obstacle have you recently overcome?",
"What is your company's vision?",
"What need is highest priority right now?",
"What skills are your strengths? What skills do you feel you need to improve?",
"How much wood, would a woodchuck, chuck?"
];
const getRandomPrompt = () => {
const availablePrompts = prompts.filter(prompt => !usedPrompts.has(prompt));
if (availablePrompts.length === 0) {
setUsedPrompts(new Set());
return prompts[Math.floor(Math.random() * prompts.length)];
}
const randomPrompt = availablePrompts[Math.floor(Math.random() * availablePrompts.length)];
setUsedPrompts(new Set([...usedPrompts, randomPrompt]));
return randomPrompt;
};
const handleClick = () => {
if (isFlipped || isShuffling) return;
setIsShuffling(true);
setTimeout(() => {
setCurrentPrompt(getRandomPrompt());
setIsFlipped(true);
setIsShuffling(false);
}, 1000);
};
const handleReset = () => {
setIsFlipped(false);
};
const style = document.createElement('style');
style.textContent = `
@keyframes shuffle {
0%, 100% { transform: translateY(0); }
25% { transform: translateY(-10px) rotate(-2deg); }
75% { transform: translateY(10px) rotate(2deg); }
}
.animate-shuffle {
animation: shuffle 1s ease-in-out;
}
`;
document.head.appendChild(style);
return e('div', {
className: 'flex flex-col items-center justify-center min-h-screen bg-gray-100 p-4'
},
e('div', {
className: 'relative w-80 h-96'
}, [
// Back of deck
e('div', {
key: 'back',
className: `absolute w-full h-full ${isShuffling ? 'animate-shuffle' : ''}`,
onClick: handleClick,
style: { perspective: '1000px' }
},
e('div', {
className: `w-full h-full ${!isFlipped ? 'cursor-pointer' : 'hidden'}`
}, [
e('div', {
className: 'absolute w-full h-full bg-white rounded-lg shadow-lg flex items-center justify-center p-4'
},
e('div', {
className: 'relative w-full h-full border-4 border-purple-600 rounded-lg flex items-center justify-center'
}, [
e('div', {
className: 'absolute inset-0 rounded-lg',
style: {
backgroundImage: 'repeating-linear-gradient(45deg, rgba(147, 51, 234, 0.1) 0px, rgba(147, 51, 234, 0.1) 10px, transparent 10px, transparent 20px)'
}
}),
e('div', {
className: 'text-purple-600 text-center font-bold z-10'
}, 'Entrepreneurial Growth Prompts')
])
),
e('div', {
className: 'absolute top-1 left-1 w-full h-full bg-white rounded-lg border-2 border-purple-600'
}),
e('div', {
className: 'absolute top-2 left-2 w-full h-full bg-white rounded-lg border-2 border-purple-600'
})
])
),
// Flipped card with prompt
e('div', {
key: 'front',
className: `absolute w-full h-full ${isFlipped ? 'block' : 'hidden'}`,
onClick: handleReset,
style: {
transform: isFlipped ? 'rotateY(0deg)' : 'rotateY(180deg)',
transition: 'transform 0.6s'
}
},
e('div', {
className: 'w-full h-full bg-white rounded-lg shadow-lg p-6 cursor-pointer border-4 border-purple-600'
},
e('div', {
className: 'h-full flex items-center justify-center text-center text-gray-800 font-medium'
}, currentPrompt)
)
)
])
);
};
// Render the component
document.addEventListener('DOMContentLoaded', function() {
const domContainer = document.getElementById('card-deck-root');
if (domContainer) {
ReactDOM.render(e(CardDeck), domContainer);
}
});
Last edited 3 minutes ago
We use cookies to give you the best experience on our website. By using this site, you agree to our use of cookies. More information is available in our Privacy Policy. I agree No Thank You Privacy policy 
