new celebration effect

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## Version 0.1.4
+
+### Changed
+
+- new effect when redeeming wishlist
+
 ## Version 0.1.3
 
 ### Fixed

components/WishlistManager.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import { Plus, Gift } from 'lucide-react'
 import EmptyState from './EmptyState'
 import { Button } from '@/components/ui/button'
@@ -29,8 +29,9 @@ export default function WishlistManager() {
     itemId: null
   })
 
-  useEffect(() => {
+  const itemRefs = useRef<Record<string, HTMLDivElement | null>>({})
 
+  useEffect(() => {
     // Check URL for highlight parameter
     const params = new URLSearchParams(window.location.search)
     const highlightId = params.get('highlight')
@@ -38,7 +39,7 @@ export default function WishlistManager() {
       setHighlightedItemId(highlightId)
       // Scroll the element into view after a short delay to ensure rendering
       setTimeout(() => {
-        const element = document.getElementById(`wishlist-${highlightId}`)
+        const element = itemRefs.current[highlightId]
         if (element) {
           element.scrollIntoView({ behavior: 'smooth', block: 'center' })
         }
@@ -78,8 +79,15 @@ export default function WishlistManager() {
           </div>
         ) : (
           wishlistItems.map((item) => (
-          <WishlistItem
+            <div
               key={item.id}
+              ref={(el) => {
+                if (el) {
+                  itemRefs.current[item.id] = el
+                }
+              }}
+            >
+              <WishlistItem
                 item={item}
                 isHighlighted={item.id === highlightedItemId}
                 isRecentlyRedeemed={item.id === recentlyRedeemedId}
@@ -91,6 +99,7 @@ export default function WishlistManager() {
                 onRedeem={() => handleRedeem(item)}
                 canRedeem={canRedeem(item.coinCost)}
               />
+            </div>
           ))
         )}
       </div>

hooks/useWishlist.tsx

@@ -50,9 +50,7 @@ export function useWishlist() {
 
       // Randomly choose a celebration effect
       const celebrationEffects = [
-        celebrations.basic,
-        celebrations.fireworks,
-        celebrations.shower
+        celebrations.emojiParty
       ]
       const randomEffect = celebrationEffects[Math.floor(Math.random() * celebrationEffects.length)]
       randomEffect()

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "habittrove",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "habittrove",
-      "version": "0.1.1",
+      "version": "0.1.3",
       "dependencies": {
         "@next/font": "^14.2.15",
         "@radix-ui/react-dialog": "^1.1.4",
@@ -22,6 +22,7 @@
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "date-fns": "^3.6.0",
+        "js-confetti": "^0.12.0",
         "lucide-react": "^0.469.0",
         "next": "15.1.3",
         "react": "^19.0.0",
@@ -5021,6 +5022,11 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/js-confetti": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/js-confetti/-/js-confetti-0.12.0.tgz",
+      "integrity": "sha512-1R0Akxn3Zn82pMqW65N1V2NwKkZJ75bvBN/VAb36Ya0YHwbaSiAJZVRr/19HBxH/O8x2x01UFAbYI18VqlDN6g=="
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "habittrove",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack",
@@ -25,6 +25,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
+    "js-confetti": "^0.12.0",
     "lucide-react": "^0.469.0",
     "next": "15.1.3",
     "react": "^19.0.0",

utils/celebrations.ts

@@ -1,6 +1,24 @@
 import confetti from 'canvas-confetti'
+import JSConfetti from 'js-confetti'
+
+let jsConfetti: JSConfetti | null = null
+
+if (typeof window !== 'undefined') {
+  jsConfetti = new JSConfetti()
+}
 
 export const celebrations = {
+  emojiParty: () => {
+    if (jsConfetti) {
+      // 20% chance to use only coin emoji
+      const useCoinsOnly = Math.random() < 0.2
+      jsConfetti.addConfetti({
+        emojis: useCoinsOnly ? ['💰', '🪙'] : ['🎉', '✨', '🦄', '🌈', '⚡️', '🌸', '💫', '🌟'],
+        emojiSize: 50,
+        confettiNumber: useCoinsOnly ? 50 : 30, // More coins when it's coin-only
+      })
+    }
+  },
   basic: () => {
     confetti({
       particleCount: 200,
@@ -14,7 +32,7 @@ export const celebrations = {
     const animationEnd = Date.now() + duration
     const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 }
 
-    const interval: any = setInterval(function() {
+    const interval: any = setInterval(function () {
       const timeLeft = animationEnd - Date.now()
 
       if (timeLeft <= 0) {
@@ -34,7 +52,7 @@ export const celebrations = {
     const end = Date.now() + 2000
 
     const colors = ['#ff0000', '#00ff00', '#0000ff']
-    ;(function frame() {
+      ; (function frame() {
         confetti({
           particleCount: 2,
           angle: 60,