Conversation
…ithub.com/codersforcauses/game-dev into issue-47-Add_explosions_to_committee_page
…ithub.com/codersforcauses/game-dev into issue-47-Add_explosions_to_committee_page
- Add 100px black circular crater behind explosion GIF - Position crater at explosion location with z-index below GIF - Apply to both Explosion component and click handler
- Increase debris count from 6 to 8 pieces - Increase debris size from 15-25px to 50-90px - Increase flight distance from 80-120px to 120-200px - Extend animation duration from 1s to 1.5s
- Generate irregular clip-path polygons (4-6 points) for each debris piece - Each piece gets unique torn/fragmented shape - Replace rectangular shapes with irregular polygons - Final effect: debris looks like torn pieces of the page flying away
- Create DebrisBurst component skeleton - Define Debris and Props TypeScript types - Add props for physics configuration (power, gravity, bounce, etc.) - Component returns null for now (functionality to be added)
…to issue-47-Add_explosions_to_committee_page
- Sync with latest changes from main branch
- Make bomb image clickable to trigger 10 explosions across page - Remove 'Press Me!' button from landing page - Reduce explosion sound volume to 10% - Add framer-motion dependency for Footer component
- Make bomb image clickable to trigger 10 page-wide explosions - Remove 'Press Me!' button from landing page - Reduce explosion sound volume to 10% - Optimize DebrisBurst with direct DOM manipulation (no React re-renders) - Simplify debris CSS (removed expensive shadows and filters) - Add click throttling (100ms) to prevent spam - Limit max concurrent debris bursts to 5 - Reduce debris count from 26 to 8 per explosion - Shorten debris lifetimes for faster cleanup
- Add React.memo to prevent unnecessary re-renders - Improve performance when multiple explosions are active - Import React for memo functionality
- Import and use Smoke component for rising smoke effect - Increase crater size from 100 to 120 for better visibility - Remove crater-expand animation, use only crater-fade - Remove transformOrigin from crater styling - Smoke particles rise with staggered timing and drift
- Update position parameter comment to be more descriptive - Update inline comment for position usage to match original wording
- Remove crater-punch animation from all crater layers for instant appearance - Remove fissure-open animation from crack fissures - Remove shadow/depth layer from fissures that created unwanted shadow effect - Crater now appears instantly without expanding animation for more natural look
Crater changes: - Remove expanding animations (crater-punch, fissure-open) for instant appearance - Remove shadow layer from fissures for cleaner look - Crater and cracks now appear immediately without scale animation Smoke changes: - Replace basic div smoke with SVG-based turbulence system - Add feTurbulence filter for procedural fractal noise texture - Add feDisplacementMap for organic, irregular smoke edges - Add feGaussianBlur for soft, realistic smoke appearance - Three-part effect: central cloud, 8 expanding puffs, 3 rising wisps - Earthy brown/gray color palette with radial gradients
Smoke optimizations: - Share single SVG filter instead of 12 separate filters - Reduce smoke puffs from 8 to 5 - Reduce wisps from 3 to 1 - Use CSS blur for central burst (GPU accelerated) - Add willChange hints for GPU optimization - Reduce duration from 2500ms to 2000ms Crater optimizations: - Remove unused blur filter definition - Add contain: layout style for better paint performance - Reduce fissures from 3-5 to 2-4 - Simplify fissures to single polygon (remove stroke highlights) Explosion optimizations: - Reduce debris count from 8 to 6 - Reduce debris power and gravity - Reduce crater size from 120 to 110 - Reduce crater fade from 3s to 2.5s - Reduce smoke duration to 1800ms - Add willChange: opacity for GPU optimization Total DOM elements reduced from ~25+ to ~15 per explosion
…ns_to_committee_page
- Add explosion system with click-to-explode functionality - Create Explosion, DebrisBurst, Smoke, and Crater components - Add useExplosions hook for managing explosion state - Implement click explosions on landing page with bomb trigger - Add click explosions to committee/about page - Add explosion sound effects and visual assets - Update framer-motion to v12.29.0 - Add CSS animations for crater effects - Include screen shake animation for bomb explosions
|
frontend checks are failing, can you please fix them up? |
|
I think its done. Lmk if you need something else done |
|
Actually I have found some issues.
I can fix this now and lmk if there is anything else I can do to improve the code please |
SafetyInObscurity
left a comment
SafetyInObscurity
left a comment
There was a problem hiding this comment.
Having explosions whenever anything is clicked on the landing page is a bit much. We can just leave it to the bomb.
There was a problem hiding this comment.
We may need to remove this duplicate explosion gif
There was a problem hiding this comment.
Ideally we should try to keep our dependencies constant where possible. Is there a reason we needed a more recent version of framer-motion?
There was a problem hiding this comment.
Looking at it now, the explosion features only use basic framer-motion APIs (motion.div, animate, transition) that have been stable for a long time. The version bump wasn't intentional - it likely happened when I ran npm install framer-motion to fix a missing dependency error from the Footer component (which was added in a different branch).
There was a problem hiding this comment.
All good then, just revert package.json and package-lock.json back to their prior versions
…on logic - Extract ~60 lines of duplicated explosion state/handlers from pages - Handle click throttling, debris management, and container refs - Track debris timeouts for proper cleanup on unmount - Limit max concurrent debris bursts to prevent lag
- Extract duplicated explosion/debris rendering JSX from pages - Single source of truth for explosion and DebrisBurst configuration - Uses consistent @/ import paths - Reduces code duplication in index.tsx and about.tsx
- Track all setTimeout IDs in a ref - Clear pending timeouts when component unmounts - Remove timeout IDs from set after they complete - Prevents setExplosions being called on unmounted component
|
You'll also need to resolve the issues Prettier found |
- Remove unused createdAt field from ExplosionPosition type - Change containerBounds param from DOMRect to withMargin boolean - The DOMRect was only used as a truthy check, not for actual bounds - Clearer API: withMargin boolean explicitly describes intent
- Delete ExplosionContainer.tsx (never imported or used) - Delete duplicate asset explosions/explosions/samj_cartoon_explosion.gif - Remove console.warn from playExplosionSound (silently handle errors)
- Convert relative imports (../) to @/ alias in index.tsx - Convert relative imports (../) to @/ alias in about.tsx - Convert relative imports (../../) to @/ alias in members/[id].tsx - Consistent with project conventions
- Create ExplosionContext for global explosion management - Wrap app with ExplosionProvider in _app.tsx - Trigger explosions on nav link clicks in Navbar - Remove page-wide click handlers from index.tsx and about.tsx - Keep bomb icon click (triggers 10 explosions + screen shake) - Delete unused usePageExplosions.ts and ExplosionEffects.tsx Explosions now only trigger on navigation interactions, not on every page click.
- Run Prettier to fix formatting in ExplosionContext.tsx and _app.tsx - Fix import sorting in ExplosionContext.tsx, index.tsx, and members/[id].tsx - Remove unused placeholderEvents and placeholderGames imports from index.tsx
4 participants
💥 Add Interactive Explosion Effects to Landing Page
Summary
This PR adds interactive explosion effects that trigger when users click anywhere on the page or click the bomb icon. The explosions feature realistic craters, flying debris, smoke effects, and sound effects.
Features Added
🎯 Click-to-Explode Functionality
Click anywhere on the landing page to trigger an explosion at that position
Click the bomb icon for a massive multi-explosion effect with screen shake
🕳️ Crater System
SVG-based crater with depth shading using radial gradients
Irregular/jagged crater edges for realistic appearance
Tapered crack fissures extending from crater (wide at base, sharp tips)
Smooth fade-out animation
💨 Smoke Effects
SVG turbulence-based smoke with organic, irregular edges
Central expanding smoke cloud
Individual smoke puffs expanding outward radially
Rising smoke wisps
🪨 Debris System (DebrisBurst)
Physics-based debris particles with gravity, air drag, and rotation
Rock-like styling with irregular torn shapes
requestAnimationFrame loop for smooth 60fps animation
Direct DOM manipulation for optimal performance
🔊 Sound Effects
Random explosion sound selection (4 variants)
Volume control (10%)
📱 Screen Shake
Framer-motion powered shake effect on bomb click
Performance Optimizations
React.memo on all explosion components
Shared SVG filters instead of per-element filters
Direct DOM manipulation in DebrisBurst (no React re-renders per frame)
Reduced particle counts (debris: 6, smoke puffs: 5)
willChange hints for GPU acceleration
contain: layout style for better paint performance
Click throttling (100ms minimum between clicks)