diff --git a/CHANGELOG.md b/CHANGELOG.md index 1252bda..cd8f7ac 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # Changelog +## Version 0.1.4 + +### Changed + +- new effect when redeeming wishlist + ## Version 0.1.3 ### Fixed diff --git a/components/WishlistManager.tsx b/components/WishlistManager.tsx index 976f020..2cc6268 100644 --- a/components/WishlistManager.tsx +++ b/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(null) @@ -29,8 +29,9 @@ export default function WishlistManager() { itemId: null }) - useEffect(() => { + const itemRefs = useRef>({}) + 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() { ) : ( wishlistItems.map((item) => ( - { - setEditingItem(item) - setIsModalOpen(true) - }} - onDelete={() => setDeleteConfirmation({ isOpen: true, itemId: item.id })} - onRedeem={() => handleRedeem(item)} - canRedeem={canRedeem(item.coinCost)} - /> +
{ + if (el) { + itemRefs.current[item.id] = el + } + }} + > + { + setEditingItem(item) + setIsModalOpen(true) + }} + onDelete={() => setDeleteConfirmation({ isOpen: true, itemId: item.id })} + onRedeem={() => handleRedeem(item)} + canRedeem={canRedeem(item.coinCost)} + /> +
)) )} diff --git a/hooks/useWishlist.tsx b/hooks/useWishlist.tsx index 417907c..a267222 100644 --- a/hooks/useWishlist.tsx +++ b/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({ diff --git a/package-lock.json b/package-lock.json index e2779cd..c77cf02 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index c6465f1..19daf8e 100644 --- a/package.json +++ b/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", diff --git a/utils/celebrations.ts b/utils/celebrations.ts index d9e8df3..1a20430 100644 --- a/utils/celebrations.ts +++ b/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) + } + }()) } }