refactor: Move explosions to nav links instead of page clicks

- 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.

Author: Oliverr48

client/src/components/main/Navbar.tsx

@@ -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/src/components/ui/ExplosionEffects.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import React, { createContext, useContext, useCallback, useState, useRef } from "react";
+
+import { DebrisBurst } from "@/components/ui/DebrisBurst";
+import { Explosion } from "@/components/ui/Explosion";
+import { useExplosions, ExplosionPosition } from "@/hooks/useExplosions";
+
+// Max concurrent debris bursts to prevent lag
+const MAX_DEBRIS = 5;
+
+type ClickDebris = {
+  id: number;
+  x: number;
+  y: number;
+};
+
+type ExplosionContextType = {
+  triggerExplosionAt: (clientX: number, clientY: number) => void;
+};
+
+const ExplosionContext = createContext<ExplosionContextType | null>(null);
+
+export function useExplosionContext() {
+  const context = useContext(ExplosionContext);
+  if (!context) {
+    throw new Error("useExplosionContext must be used within ExplosionProvider");
+  }
+  return context;
+}
+
+export function ExplosionProvider({ children }: { children: React.ReactNode }) {
+  const { explosions, triggerExplosions } = useExplosions();
+  const [clickDebris, setClickDebris] = useState<ClickDebris[]>([]);
+  const lastClickTime = useRef(0);
+  const debrisTimeouts = useRef<Set<ReturnType<typeof setTimeout>>>(new Set());
+
+  const triggerExplosionAt = useCallback(
+    (clientX: number, clientY: number) => {
+      // Throttle - 100ms minimum between explosions
+      const now = Date.now();
+      if (now - lastClickTime.current < 100) return;
+      lastClickTime.current = now;
+
+      // Convert to percentage of viewport
+      const x = (clientX / window.innerWidth) * 100;
+      const y = (clientY / window.innerHeight) * 100;
+
+      // Trigger explosion
+      triggerExplosions({
+        count: 1,
+        minDelay: 0,
+        maxDelay: 0,
+        duration: 1500,
+        playSound: true,
+        position: { x, y },
+      });
+
+      // Add debris burst
+      const debrisId = now;
+      setClickDebris((prev) => {
+        const updated = [...prev, { id: debrisId, x: clientX, y: clientY }];
+        return updated.slice(-MAX_DEBRIS);
+      });
+
+      // Cleanup after animation
+      const timeout = setTimeout(() => {
+        setClickDebris((prev) => prev.filter((d) => d.id !== debrisId));
+        debrisTimeouts.current.delete(timeout);
+      }, 1500);
+      debrisTimeouts.current.add(timeout);
+    },
+    [triggerExplosions]
+  );
+
+  return (
+    <ExplosionContext.Provider value={{ triggerExplosionAt }}>
+      {children}
+      {/* Render explosions in a fixed overlay */}
+      <div
+        style={{
+          position: "fixed",
+          inset: 0,
+          pointerEvents: "none",
+          zIndex: 9999,
+        }}
+      >
+        {explosions.map((explosion: ExplosionPosition) => (
+          <Explosion key={explosion.id} explosion={explosion} />
+        ))}
+        {clickDebris.map((debris) => (
+          <DebrisBurst
+            key={debris.id}
+            x={debris.x}
+            y={debris.y}
+            count={6}
+            power={400}
+            spreadDeg={360}
+            gravity={1000}
+            bounce={0.3}
+          />
+        ))}
+      </div>
+    </ExplosionContext.Provider>
+  );
+}
+

client/src/contexts/ExplosionContext.tsx

@@ -7,6 +7,7 @@ import { Fira_Code, Inter as FontSans, Jersey_10 } from "next/font/google";
 
 import Footer from "@/components/main/Footer";
 import Navbar from "@/components/main/Navbar";
+import { ExplosionProvider } from "@/contexts/ExplosionContext";
 
 const fontSans = FontSans({
   subsets: ["latin"],
@@ -32,13 +33,15 @@ export default function App({ Component, pageProps }: AppProps) {
   return (
     <QueryClientProvider client={queryClient}>
       <ReactQueryDevtools initialIsOpen={false} />
-      <main
-        className={`font-sans ` + fonts.map((font) => font.variable).join(" ")}
-      >
-        <Navbar />
-        <Component {...pageProps} />
-        <Footer />
-      </main>
+      <ExplosionProvider>
+        <main
+          className={`font-sans ` + fonts.map((font) => font.variable).join(" ")}
+        >
+          <Navbar />
+          <Component {...pageProps} />
+          <Footer />
+        </main>
+      </ExplosionProvider>
     </QueryClientProvider>
   );
 }