Pointer is set to none when the idea is loading (getting generated) s…

…o the user will be able to click on the dino again only when the idea is generated
hackclub · Nov 20, 2024 · c044cc8 · c044cc8
1 parent 4784404
commit c044cc8
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 21 deletions.
diff --git a/src/app/marketing/page.tsx b/src/app/marketing/page.tsx
@@ -1206,7 +1206,7 @@ const PrizeData = [
 
   {
     name: 'Framework Laptop',
-    doubloons: 3075,
+    doubloons: '4980',
     image: 'https://noras-secret-cdn.hackclub.dev/shop/fw_13.png',
     sub: '16", 16GB RAM....16 16 16',
     estMin: 208,

diff --git a/src/components/idea-generator.js b/src/components/idea-generator.js
@@ -142,28 +142,38 @@ const IdeaGenerator = () => {
   ]
 
   const generateIdea = async () => {
-    if (typing) return
+    if (typing || loading) return
+
     setLoading(true)
     setMessage(sample(thinkingWords))
     sample(thinkingSounds).play()
+
     let newIdea = ''
-    await Promise.all([
-      fetchIdea().then((i) => {
-        newIdea = i.idea
-      }),
-      new Promise((resolve) => setTimeout(resolve, 2000)),
-    ])
-    setTyping(true)
-    setLoading(false)
-    setMessage('')
-    yap(newIdea, {
-      letterCallback: ({ letter }) => {
-        setMessage((prev) => prev + letter)
-      },
-      endCallback: () => {
-        setTyping(false)
-      },
-    })
+
+    try {
+      await Promise.all([
+        fetchIdea().then((i) => {
+          newIdea = i.idea
+        }),
+        new Promise((resolve) => setTimeout(resolve, 2000)),
+      ])
+
+      setTyping(true)
+      setLoading(false)
+      setMessage('')
+
+      yap(newIdea, {
+        letterCallback: ({ letter }) => {
+          setMessage((prev) => prev + letter)
+        },
+        endCallback: () => {
+          setTyping(false)
+        },
+      })
+    } catch (error) {
+      console.error('Error generating idea:', error)
+      setLoading(false)
+    }
   }
 
   const activeClass = loading ? 'thinking' : typing ? 'typing' : 'idle'
@@ -177,9 +187,12 @@ const IdeaGenerator = () => {
     <div className="idea-generator flex flex-col justify-center items-center mb-24">
       <img
         src={imgSrc}
-        className={`mb-4 ${activeClass}`}
+        className={`mb-4 ${activeClass} ${
+          loading ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
+        }`}
         alt="idea generator"
-        onClick={() => generateIdea()}
+        onClick={loading ? null : generateIdea}
+        style={{ pointerEvents: loading ? 'none' : 'auto' }}
       />
       <span className="idea-box text-white w-64">{message}</span>
     </div>