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'
@@ -11,13 +11,13 @@ import { WishlistItemType } from '@/lib/types'
 import { useWishlist } from '@/hooks/useWishlist'
 
 export default function WishlistManager() {
-  const { 
-    wishlistItems, 
-    addWishlistItem, 
-    editWishlistItem, 
-    deleteWishlistItem, 
+  const {
+    wishlistItems,
+    addWishlistItem,
+    editWishlistItem,
+    deleteWishlistItem,
     redeemWishlistItem,
-    canRedeem 
+    canRedeem
   } = useWishlist()
 
   const [highlightedItemId, setHighlightedItemId] = useState<string | null>(null)
@@ -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,19 +79,27 @@ export default function WishlistManager() {
           </div>
         ) : (
           wishlistItems.map((item) => (
-          <WishlistItem
-            key={item.id}
-            item={item}
-            isHighlighted={item.id === highlightedItemId}
-            isRecentlyRedeemed={item.id === recentlyRedeemedId}
-            onEdit={() => {
-              setEditingItem(item)
-              setIsModalOpen(true)
-            }}
-            onDelete={() => setDeleteConfirmation({ isOpen: true, itemId: item.id })}
-            onRedeem={() => handleRedeem(item)}
-            canRedeem={canRedeem(item.coinCost)}
-          />
+            <div
+              key={item.id}
+              ref={(el) => {
+                if (el) {
+                  itemRefs.current[item.id] = el
+                }
+              }}
+            >
+              <WishlistItem
+                item={item}
+                isHighlighted={item.id === highlightedItemId}
+                isRecentlyRedeemed={item.id === recentlyRedeemedId}
+                onEdit={() => {
+                  setEditingItem(item)
+                  setIsModalOpen(true)
+                }}
+                onDelete={() => setDeleteConfirmation({ isOpen: true, itemId: item.id })}
+                onRedeem={() => handleRedeem(item)}
+                canRedeem={canRedeem(item.coinCost)}
+              />
+            </div>
           ))
         )}
       </div>

hooks/useWishlist.tsx

@@ -26,7 +26,7 @@ export function useWishlist() {
   }
 
   const editWishlistItem = async (updatedItem: WishlistItemType) => {
-    const newItems = wishlistItems.map(item => 
+    const newItems = wishlistItems.map(item =>
       item.id === updatedItem.id ? updatedItem : item
     )
     setWishlistItems(newItems)
@@ -47,12 +47,10 @@ export function useWishlist() {
         'WISH_REDEMPTION',
         item.id
       )
-      
+
       // 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()
@@ -61,7 +59,7 @@ export function useWishlist() {
         title: "🎉 Reward Redeemed!",
         description: `You've redeemed "${item.name}" for ${item.coinCost} coins.`,
       })
-      
+
       return true
     } else {
       toast({

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) {
@@ -32,27 +50,27 @@ export const celebrations = {
 
   shower: () => {
     const end = Date.now() + 2000
-    
-    const colors = ['#ff0000', '#00ff00', '#0000ff']
-    ;(function frame() {
-      confetti({
-        particleCount: 2,
-        angle: 60,
-        spread: 55,
-        origin: { x: 0 },
-        colors: colors
-      })
-      confetti({
-        particleCount: 2,
-        angle: 120,
-        spread: 55,
-        origin: { x: 1 },
-        colors: colors
-      })
 
-      if (Date.now() < end) {
-        requestAnimationFrame(frame)
-      }
-    }())
+    const colors = ['#ff0000', '#00ff00', '#0000ff']
+      ; (function frame() {
+        confetti({
+          particleCount: 2,
+          angle: 60,
+          spread: 55,
+          origin: { x: 0 },
+          colors: colors
+        })
+        confetti({
+          particleCount: 2,
+          angle: 120,
+          spread: 55,
+          origin: { x: 1 },
+          colors: colors
+        })
+
+        if (Date.now() < end) {
+          requestAnimationFrame(frame)
+        }
+      }())
   }
 }