Willow Grove Cricket Club

\n \n Willow Grove Cricket Club\n \n \n Where every innings counts since 1950\n \n \n \n \n

\n )}\n \n );\n}\n\nfunction ClubAmenities() {\n const amenities = [\n { icon: \"mdi:stadium\", name: \"Two international standard cricket grounds\" },\n { icon: \"mdi:weight-lifter\", name: \"State-of-the-art indoor training nets\" },\n { icon: \"mdi:dumbbell\", name: \"Fully equipped gym for peak performance\" },\n { icon: \"mdi:food-fork-drink\", name: \"Pavilion with bar and restaurant\" },\n { icon: \"mdi:video\", name: \"Video analysis room for technique refinement\" }\n ];\n\n return (\n

\n \n Our Pitch Perfect Amenities\n \n

\n \n {amenity.name}\n

\n );\n}\n\nfunction Gallery() {\n const images = [\n { src: \"https://maxm-imggenurl.web.val.run/cricket-ground-with-players-in-action\", alt: \"Players in action on the cricket ground\" },\n { src: \"https://maxm-imggenurl.web.val.run/cricket-club-indoor-nets\", alt: \"Indoor training nets\" },\n { src: \"https://maxm-imggenurl.web.val.run/cricket-club-pavilion\", alt: \"Club pavilion\" },\n { src: \"https://maxm-imggenurl.web.val.run/cricket-trophy-cabinet-with-trophies\", alt: \"Trophy cabinet\" },\n { src: \"https://maxm-imggenurl.web.val.run/cricket-team-celebrating-victory\", alt: \"Team celebrating victory\" }\n ];\n\n return (\n

\n \n Snapshot of Our Innings\n \n

\n {images.map((image, index) => (\n \n {image.alt}

\n \n ))}\n

\n );\n}\n\nfunction Events() {\n const events = [\n { name: \"Annual Willow Grove Cricket Tournament\", date: \"July 15-20, 2023\", icon: \"mdi:trophy\" },\n { name: \"Junior Cricket Academy Summer Camp\", date: \"August 5-10, 2023\", icon: \"mdi:cricket\" },\n { name: \"Charity Twenty20 Match\", date: \"September 3, 2023\", icon: \"mdi:charity\" },\n { name: \"End of Season Stumps-Up Gala\", date: \"October 15, 2023\", icon: \"mdi:party-popper\" }\n ];\n\n return (\n

\n \n Upcoming Fixtures\n \n

\n {events.map((event, index) => (\n \n \n

{event.name}

{event.date}

\n \n ))}\n

\n );\n}\n\nfunction Achievements() {\n const achievements = [\n { title: \"National Cricket League Champions\", years: \"2020, 2018, 2015\", icon: \"mdi:trophy-variant\" },\n { title: \"Regional T20 Cup Winners\", years: \"2021, 2019\", icon: \"mdi:medal\" },\n { title: \"Best Cricket Academy Award\", years: \"2017, 2022\", icon: \"mdi:school\" },\n { title: \"Community Engagement Excellence Award\", years: \"2021\", icon: \"mdi:handshake\" }\n ];\n\n return (\n

\n \n Our Trophy Cabinet\n \n

\n \n

\n {achievement.title}\n ({achievement.years})\n

\n );\n}\n\nfunction FamousMembers() {\n const members = [\n { name: \"James Anderson\", achievement: \"England's all-time leading wicket-taker\", icon: \"mdi:target\" },\n { name: \"Sarah Taylor\", achievement: \"Former England wicket-keeper, ICC Women's T20I Team of the Decade\", icon: \"mdi:handball\" },\n { name: \"Moeen Ali\", achievement: \"England all-rounder, vital part of the 2019 World Cup winning team\", icon: \"mdi:cricket\" },\n { name: \"Charlotte Edwards\", achievement: \"Former England captain, led England to 3 Ashes series victories\", icon: \"mdi:crown\" }\n ];\n\n return (\n

\n \n Our Hall of Fame\n \n

\n {members.map((member, index) => (\n \n \n

{member.name}

{member.achievement}

\n \n ))}\n

\n );\n}\n\nfunction AlertModal({ isOpen, onClose }) {\n return (\n \n {isOpen && (\n \n e.stopPropagation()}\n >\n

Welcome to Willow Grove Cricket Club!

\n Our website features interactive sound effects. Each click will produce a cricket bat hitting sound. You can mute these sounds using the button to the left.\n

\n \n Got it!\n \n

\n \n \n )}\n \n );\n}\n\nfunction App() {\n const [activeSection, setActiveSection] = useState(0);\n const [isMuted, setIsMuted] = useState(() => {\n const savedMuteState = localStorage.getItem('isMuted');\n return savedMuteState ? JSON.parse(savedMuteState) : false;\n });\n const [showModal, setShowModal] = useState(true);\n const [heroAnimationComplete, setHeroAnimationComplete] = useState(false);\n const sections = [\n { title: \"Home\", component: Hero },\n { title: \"Amenities\", component: ClubAmenities },\n { title: \"Gallery\", component: Gallery },\n { title: \"Fixtures\", component: Events },\n { title: \"Achievements\", component: Achievements },\n { title: \"Hall of Fame\", component: FamousMembers },\n ];\n\n const batSounds = [\n \"https://a.uguu.se/sKtmEktR.mp3\",\n \"https://a.uguu.se/LegihaPQ.mp3\",\n \"https://a.uguu.se/MeqjQNHi.mp3\"\n ];\n\n const playRandomBatSound = () => {\n if (!isMuted) {\n const randomSound = batSounds[Math.floor(Math.random() * batSounds.length)];\n const audio = new Audio(randomSound);\n audio.play();\n }\n };\n\n useEffect(() => {\n const handleScroll = () => {\n const scrollPosition = window.scrollY;\n const windowHeight = window.innerHeight;\n const newActiveSection = Math.floor(scrollPosition / windowHeight);\n setActiveSection(newActiveSection);\n };\n\n window.addEventListener('scroll', handleScroll);\n\n // Add click event listener for ball animation and sound\n const handleClick = (e) => {\n // Ball animation\n const ball = document.createElement('div');\n ball.className = 'ball';\n ball.style.left = `${e.clientX}px`;\n ball.style.top = `${e.clientY}px`;\n document.body.appendChild(ball);\n setTimeout(() => document.body.removeChild(ball), 1000);\n\n // Play random bat hit sound\n playRandomBatSound();\n };\n document.addEventListener('click', handleClick);\n\n return () => {\n window.removeEventListener('scroll', handleScroll);\n document.removeEventListener('click', handleClick);\n };\n }, [isMuted]);\n\n useEffect(() => {\n if (showModal) {\n document.body.style.overflow = 'hidden';\n } else {\n document.body.style.overflow = 'unset';\n setHeroAnimationComplete(true);\n }\n }, [showModal]);\n\n useEffect(() => {\n localStorage.setItem('isMuted', JSON.stringify(isMuted));\n }, [isMuted]);\n\n const toggleMute = () => {\n setIsMuted(!isMuted);\n };\n\n return (\n

\n setShowModal(false)} />\n \n \n Your browser does not support the video tag.\n \n

\n \n

\n \n {section.title}\n \n

\n \n

\n {sections.map((section, index) => (\n

\n {index === 0 ? \n : \n \n }\n

\n ))}\n

\n \n

\n \n Keeping the spirit of cricket alive\n \n

\n \n \n {isMuted ? : }\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") { client(); }\n\nasync function server(request: Request): Promise {\n return new Response(`\n \n \n \n \n \n Willow Grove Cricket Club\n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}\n\nexport default server;","deleted","label",[100],"permalink","https://www.val.town/x/crif/videoBackgroundMod/code/main.tsx","extension","actionData","errors"]