diff --git a/apps/web/components/ui/dice-button.tsx b/apps/web/components/ui/dice-button.tsx index 0231630..656cd94 100644 --- a/apps/web/components/ui/dice-button.tsx +++ b/apps/web/components/ui/dice-button.tsx @@ -1,110 +1,90 @@ -"use client"; +'use client' -import { useColorStore } from "@/store/store"; -import useStore from "@/store/useStore"; -import { Button } from "@ui/components/ui/button"; -import { - Dice1, - Dice2, - Dice3, - Dice4, - Dice5, - Dice6, - LoaderIcon, -} from "lucide-react"; -import { useState } from "react"; -import { AnimatePresence, motion } from "framer-motion"; -import { cn } from "@ui/lib/utils"; +import { useColorStore } from '@/context/color-store-provider' +import { colorHelper } from '@/lib/colorHelper' +import { generateBaseColors } from '@/lib/generateBaseColors' +import { Button } from '@ui/components/ui/button' +import { cn } from '@ui/lib/utils' +import { AnimatePresence, motion } from 'framer-motion' +import { Dice1, Dice2, Dice3, Dice4, Dice5, Dice6 } from 'lucide-react' +import dynamic from 'next/dynamic' +import { useState } from 'react' -import dynamic from "next/dynamic"; - -const MobilePrimaryMenu = dynamic( - () => import("@/components/ui/mobile-primary-menu"), - { ssr: false }, -); +const MobilePrimaryMenu = dynamic(() => import('@/components/ui/mobile-primary-menu'), { ssr: false }) export const DiceButton = () => { - const store = useStore(useColorStore, (state) => state); - const [face, setFace] = useState(0); - const [loading, setLoading] = useState(false); - const faces = [Dice1, Dice2, Dice3, Dice4, Dice5, Dice6]; - const Face = faces[face]; + const [face, setFace] = useState(0) + const [faceKey, setFaceKey] = useState(0) + const [loading, setLoading] = useState(false) + const setBaseColors = useColorStore((s) => s.setBaseColors) + const faces = [Dice1, Dice2, Dice3, Dice4, Dice5, Dice6] + const Face = faces[face] const roll = () => { - let currentFace = face; - const newFace = Math.floor(Math.random() * 6); - if (currentFace === newFace) { - roll(); - return; - } - setFace(newFace); + const newFace = Math.floor(Math.random() * 6) + setLoading(true) + setFace(newFace) + // set a randome faceKey to trigger the animation + setFaceKey(Math.round(Math.random() * 3000)) + + // remove url search params if exists + const url = window.location.href.split('?')[0] + window.history.pushState({}, document.title, url) + // find #palette-body and add a .coloring class - const paletteBody = document?.getElementById("palette-body"); + const paletteBody = document?.getElementById('palette-body') if (paletteBody) { - paletteBody.classList.add("coloring"); + paletteBody.classList.add('coloring') } - setLoading(true); - // delay 1000ms + + // delay the fetching of new colors setTimeout(() => { - store.generatePalette(); + const baseColorsRaw = generateBaseColors() + setBaseColors({ + accent: colorHelper.toHex(baseColorsRaw.accent), + primary: colorHelper.toHex(baseColorsRaw.primary), + secondary: colorHelper.toHex(baseColorsRaw.secondary), + }) + setTimeout(() => { + setLoading(false) if (paletteBody) { - paletteBody.classList.remove("coloring"); + paletteBody.classList.remove('coloring') } - setLoading(false); - }, 700); - }, 300); - }; + }, 700) + }, 320) + } return (