Empowering you to make wiser decisions.

Subscribe to the Blackhawke Newsletter to receive a 15% discount
on your next EVP purchase.

Blackhawke Behavior Science

(c) 2016 – 2021. All rights reserved.

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