Merge pull request #83 from codersforcauses/issue-47-Add_explosions_to_committee_page

Issue 47 add explosions to committee page

Author: laurenpudz

.gitignore

@@ -293,5 +293,6 @@ dist
 
 # misc
 .DS_Store
+.cursor/
 
 opt/

client/package-lock.json

@@ -5,8 +5,11 @@ import Image from "next/image";
 import Link from "next/link";
 import { useState } from "react";
 
+import { useExplosionContext } from "@/contexts/ExplosionContext";
+
 export default function Navbar() {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const { triggerExplosionAt } = useExplosionContext();
 
   const navItems = [
     { href: "/", label: "Home" },
@@ -16,11 +19,19 @@ export default function Navbar() {
     { href: "/artwork", label: "Art Showcase" },
   ];
 
+  const handleNavClick = (e: React.MouseEvent) => {
+    triggerExplosionAt(e.clientX, e.clientY);
+  };
+
   return (
     <>
       <header className="sticky top-0 z-50 flex h-24 w-full items-center rounded-md border-b border-border/20 bg-background px-20 font-jersey10">
         <div className="flex flex-1 items-center">
-          <Link href="/" className="flex items-center gap-3 text-2xl lg:mr-5">
+          <Link
+            href="/"
+            className="flex items-center gap-3 text-2xl lg:mr-5"
+            onClick={handleNavClick}
+          >
             <Image
               src="/game_dev_club_logo.svg"
               alt="logo"
@@ -44,6 +55,7 @@ export default function Navbar() {
               <Link
                 key={item.href}
                 href={item.href}
+                onClick={handleNavClick}
                 className="whitespace-nowrap text-foreground/90 transition-colors duration-150 hover:text-primary"
               >
                 {item.label}
@@ -67,7 +79,10 @@ export default function Navbar() {
                   <Link
                     key={item.href}
                     href={item.href}
-                    onClick={() => setIsDropdownOpen(false)}
+                    onClick={(e) => {
+                      handleNavClick(e);
+                      setIsDropdownOpen(false);
+                    }}
                     className="block whitespace-nowrap px-4 py-3 text-lg transition-colors duration-150 hover:bg-accent"
                   >
                     {item.label}

client/public/explosions/samj_cartoon_explosion.gif

@@ -0,0 +1,172 @@
+import React, { useMemo } from "react";
+
+interface CraterProps {
+  size?: number;
+  intensity?: number;
+}
+
+/**
+ * Generates an irregular crater polygon
+ */
+function generateCraterShape(baseRadius: number, points: number = 10): string {
+  const coords: string[] = [];
+
+  for (let i = 0; i < points; i++) {
+    const angle = (i / points) * Math.PI * 2;
+    const radius = baseRadius * (0.75 + Math.random() * 0.3);
+    const x = 50 + Math.cos(angle) * radius;
+    const y = 50 + Math.sin(angle) * radius;
+    coords.push(`${x.toFixed(1)},${y.toFixed(1)}`);
+  }
+
+  return coords.join(" ");
+}
+
+/**
+ * Generates a crack as a polygon shape (actual gap in ground)
+ * Returns points for a wedge-shaped fissure
+ */
+function generateCrackFissure(
+  angle: number,
+  startRadius: number,
+  length: number,
+): string {
+  // Crack is a tapered wedge shape - wide at crater, sharp point at end
+  const widthAtStart = 7 + Math.random() * 5; // Bit skinnier (7-12)
+  const widthAtEnd = 0.5 + Math.random() * 1; // Sharp point at tip (0.5-1.5)
+
+  // Calculate perpendicular angle for width
+  const perpAngle = angle + Math.PI / 2;
+
+  // Points along the crack with some jaggedness
+  const segments = 3;
+  const points: Array<{ x: number; y: number }> = [];
+  const pointsBack: Array<{ x: number; y: number }> = [];
+
+  let currentAngle = angle;
+
+  for (let i = 0; i <= segments; i++) {
+    const t = i / segments;
+    // Start from inside crater and extend outward
+    const radius = startRadius + length * t;
+    const width = widthAtStart + (widthAtEnd - widthAtStart) * t;
+
+    // Add jaggedness to angle
+    if (i > 0 && i < segments) {
+      currentAngle += (Math.random() - 0.5) * 0.3;
+    }
+
+    const centerX = 50 + Math.cos(currentAngle) * radius;
+    const centerY = 50 + Math.sin(currentAngle) * radius;
+
+    // Offset perpendicular for width
+    const offsetX = (Math.cos(perpAngle) * width) / 2;
+    const offsetY = (Math.sin(perpAngle) * width) / 2;
+
+    // Add random jaggedness to edges - less at the tip for sharp point
+    const jagAmount = 4 * (1 - t * 0.8); // More jagged at start, smooth at tip
+    const jag1 = (Math.random() - 0.5) * jagAmount;
+    const jag2 = (Math.random() - 0.5) * jagAmount;
+
+    points.push({
+      x: centerX + offsetX + jag1,
+      y: centerY + offsetY + jag1,
+    });
+    pointsBack.unshift({
+      x: centerX - offsetX + jag2,
+      y: centerY - offsetY + jag2,
+    });
+  }
+
+  // Combine into polygon
+  const allPoints = [...points, ...pointsBack];
+  return allPoints.map((p) => `${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(" ");
+}
+
+/**
+ * Crater with fissure-style cracks (actual gaps, not lines)
+ */
+export const Crater = React.memo(function Crater({
+  size = 100,
+  intensity = 1,
+}: CraterProps) {
+  const uniqueId = useMemo(() => Math.random().toString(36).substr(2, 9), []);
+
+  // Crater shapes
+  const outerCrater = useMemo(() => generateCraterShape(22, 12), []);
+  const innerCrater = useMemo(() => generateCraterShape(14, 10), []);
+  const deepCrater = useMemo(() => generateCraterShape(8, 8), []);
+
+  // Generate 2-4 crack fissures (reduced for performance)
+  const fissures = useMemo(() => {
+    const count = 2 + Math.floor(Math.random() * 3);
+    const result: Array<{ points: string }> = [];
+
+    for (let i = 0; i < count; i++) {
+      const baseAngle = (i / count) * Math.PI * 2;
+      const angle = baseAngle + (Math.random() - 0.5) * 0.8;
+      const length = 20 + Math.random() * 18;
+
+      result.push({
+        points: generateCrackFissure(angle, 14, length),
+      });
+    }
+
+    return result;
+  }, []);
+
+  // Colors
+  const voidColor = `rgba(0, 0, 0, ${intensity})`;
+  const deepColor = `rgba(8, 5, 2, ${0.95 * intensity})`;
+  const craterColor = `rgba(20, 15, 8, ${0.9 * intensity})`;
+  const rimColor = `rgba(45, 35, 25, ${0.7 * intensity})`;
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 100 100"
+      style={{ overflow: "visible", contain: "layout style" }}
+    >
+      <defs>
+        <radialGradient
+          id={`crater-grad-${uniqueId}`}
+          cx="40%"
+          cy="40%"
+          r="60%"
+        >
+          <stop offset="0%" stopColor={voidColor} />
+          <stop offset="50%" stopColor={deepColor} />
+          <stop offset="80%" stopColor={craterColor} />
+          <stop offset="100%" stopColor={rimColor} />
+        </radialGradient>
+      </defs>
+
+      {/* Crack fissures - simplified to single polygon each */}
+      {fissures.map((fissure, i) => (
+        <polygon key={i} points={fissure.points} fill={voidColor} />
+      ))}
+
+      {/* Outer crater rim */}
+      <polygon points={outerCrater} fill={rimColor} />
+
+      {/* Main crater */}
+      <polygon points={outerCrater} fill={`url(#crater-grad-${uniqueId})`} />
+
+      {/* Inner crater layer */}
+      <polygon points={innerCrater} fill={deepColor} />
+
+      {/* Deepest void */}
+      <polygon points={deepCrater} fill={voidColor} />
+
+      {/* Crater rim edge */}
+      <polygon
+        points={outerCrater}
+        fill="none"
+        stroke="rgba(60, 50, 40, 0.4)"
+        strokeWidth="1.5"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+});