feat: congratulations!

components/HeaderView.component.jsx

@@ -4,6 +4,7 @@ import config from "../config/constants";
 import { song_list } from "../config/song_list";
 import NumberTicker from "../components/NumberTicker.component";
 import BlurFade from "./ui/blur-fade";
+import confetti from "canvas-confetti";
 
 import { HiHeart } from "react-icons/hi";
 import { HiMiniPlusCircle } from "react-icons/hi2";
@@ -129,6 +130,38 @@ const HeaderView = ({ props: [EffThis] }) => {
   }, [clicks]);
   const dropdownRef = useRef(null);
   const theme_name_map = new Map(Object.entries(config.theme));
+
+  const handleClick = () => {
+    const defaults = {
+      spread: 360,
+      ticks: 50,
+      gravity: 0,
+      decay: 0.94,
+      startVelocity: 30,
+      colors: ["#FFE400", "#FFBD00", "#E89400", "#FFCA6C", "#FDFFB8"],
+    };
+
+    const shoot = () => {
+      confetti({
+        ...defaults,
+        particleCount: 40,
+        scalar: 1.2,
+        shapes: ["star"],
+      });
+
+      confetti({
+        ...defaults,
+        particleCount: 10,
+        scalar: 0.75,
+        shapes: ["circle"],
+      });
+    };
+
+    setTimeout(shoot, 0);
+    setTimeout(shoot, 100);
+    setTimeout(shoot, 200);
+  };
+
   return (
     <>
       <div>
@@ -176,12 +209,16 @@ const HeaderView = ({ props: [EffThis] }) => {
                     <div className="flex flex-row items-center space-x-3">
                       <span className="sm:text-subtitle">
                         已收录的歌曲{" "}
-                        <NumberTicker
-                          value={song_list.length}
-                          delay={0.3}
-                          className="mx-1 text-label dark:text-label"
-                        />{" "}
-                        首
+                        <button
+                          onClick={handleClick}
+                        >
+                          <NumberTicker
+                            value={song_list.length}
+                            delay={0.3}
+                            className="mx-1 text-label dark:text-label relative"
+                          />
+                        </button>
+                        {" "}首
                       </span>
                       <button
                         className="backdrop-blur-md bg-accent-bg/50

components/ui/confetti.jsx

@@ -0,0 +1,97 @@
+import React, {
+  createContext,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from "react";
+import confetti from "canvas-confetti";
+
+import { Button } from "@/components/ui/button";
+
+const ConfettiContext = createContext({});
+
+const Confetti = forwardRef((props, ref) => {
+  const {
+    options,
+    globalOptions = { resize: true, useWorker: true },
+    manualstart = false,
+    children,
+    ...rest
+  } = props;
+  const instanceRef = useRef(null); // confetti instance
+
+  const canvasRef = useCallback(// https://react.dev/reference/react-dom/components/common#ref-callback
+  // https://reactjs.org/docs/refs-and-the-dom.html#callback-refs
+  (node) => {
+    if (node !== null) {
+      // <canvas> is mounted => create the confetti instance
+      if (instanceRef.current) return; // if not already created
+      instanceRef.current = confetti.create(node, {
+        ...globalOptions,
+        resize: true,
+      });
+    } else {
+      // <canvas> is unmounted => reset and destroy instanceRef
+      if (instanceRef.current) {
+        instanceRef.current.reset();
+        instanceRef.current = null;
+      }
+    }
+  }, [globalOptions]);
+
+  // `fire` is a function that calls the instance() with `opts` merged with `options`
+  const fire = useCallback((opts = {}) => instanceRef.current?.({ ...options, ...opts }), [options]);
+
+  const api = useMemo(() => ({
+    fire,
+  }), [fire]);
+
+  useImperativeHandle(ref, () => api, [api]);
+
+  useEffect(() => {
+    if (!manualstart) {
+      fire();
+    }
+  }, [manualstart, fire]);
+
+  return (
+    (<ConfettiContext.Provider value={api}>
+      <canvas ref={canvasRef} {...rest} />
+      {children}
+    </ConfettiContext.Provider>)
+  );
+});
+
+function ConfettiButton({
+  options,
+  children,
+  ...props
+}) {
+  const handleClick = (event) => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    const x = rect.left + rect.width / 2;
+    const y = rect.top + rect.height / 2;
+    confetti({
+      ...options,
+      origin: {
+        x: x / window.innerWidth,
+        y: y / window.innerHeight,
+      },
+    });
+  };
+
+  return (
+    (<Button onClick={handleClick} {...props}>
+      {children}
+    </Button>)
+  );
+}
+
+Confetti.displayName = "Confetti";
+
+export { Confetti, ConfettiButton };
+
+export default Confetti;

package.json

@@ -14,8 +14,10 @@
     "@cloudbase/cli": "^1.12.3",
     "@headlessui/react": "^2.1.2",
     "@heroicons/react": "^2.1.5",
+    "@types/canvas-confetti": "^1.6.4",
     "autoprefixer": "^10.4.19",
     "bootstrap": "^5.1.3",
+    "canvas-confetti": "^1.9.3",
     "cnchar": "^3.2.5",
     "cnchar-poly": "^3.2.5",
     "cnchar-trad": "^3.2.5",