diff --git a/src/App.tsx b/src/App.tsx index 01b3259..6d0a114 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -15,10 +15,18 @@ import { Button, Flex, Image, - Center + Center, + Modal, + ModalOverlay, + ModalContent, + ModalHeader, + ModalBody, + ModalFooter, + Checkbox, + useDisclosure } from '@chakra-ui/react' import theme from './theme' -import { useEffect } from 'react' +import { useEffect, useState } from 'react' import logoImg from './assets/logo.png' type BuildingId = 'mouseFarms' | 'keyboardFactories' | 'monitorDisplays' | 'officeSpace' | 'serverRooms' | 'dataCenters' | @@ -110,6 +118,9 @@ function App() { click } = useGameStore() + const [agreedToTerms, setAgreedToTerms] = useState(false) + const [hasStarted, setHasStarted] = useState(false) + const { isOpen, onClose } = useDisclosure({ defaultIsOpen: true }) const availableBuildings = getAvailableBuildings() // Set up game tick interval @@ -118,10 +129,33 @@ function App() { return () => clearInterval(interval) }, [tick]) + // Handle keyboard events + useEffect(() => { + const handleKeyPress = (e: KeyboardEvent) => { + // Only allow clicks after terms are accepted and modal is closed + if (hasStarted) { + click() + } + } + + window.addEventListener('keydown', handleKeyPress) + return () => window.removeEventListener('keydown', handleKeyPress) + }, [click, hasStarted]) + // Handle clicks anywhere in the game const handleClick = (e: React.MouseEvent) => { - // All clicks count now! - click() + // Only allow clicks after terms are accepted and modal is closed + if (hasStarted) { + click() + } + } + + // Handle starting the game + const handleStartGame = () => { + if (agreedToTerms) { + setHasStarted(true) + onClose() + } } return ( @@ -131,22 +165,12 @@ function App() { bg="gray.900" color="white" onClick={handleClick} - cursor="pointer" + cursor={hasStarted ? "pointer" : "default"} > - - - {points === 0 && ( - - Click anywhere to start - - )} - - - {/* Buildings Grid */} @@ -207,6 +231,70 @@ function App() { + + {/* Terms and Conditions Modal */} + {}} + closeOnOverlayClick={false} + isCentered + size="2xl" + > + + + + Welcome to ClickerCorp™ + + + + + + Employment Agreement + + + Welcome aboard! You have been selected by ClickerCorp™ to spearhead our mission-critical clicking initiatives. + As our new Synergy Enhancement Specialist, you will leverage cutting-edge click-through paradigms to maximize + stakeholder value in the rapidly evolving digital interaction space. Your KPIs include optimizing click-to-value + ratios while maintaining best-in-class finger ergonomics. Together, we'll disrupt the clicking industry! + + + + + + Controls & Operations + + + Click anywhere or press any key to generate points and advance your career in the digital clicking space. + + + + + + (Please note: This position is unpaid and offers exposure as compensation) + + + + setAgreedToTerms(e.target.checked)} + > + I have read and agree to the terms of employment at ClickerCorp™ + + + + + + + + )