Implement animated roll feature with reset popup in Welcome component

app/index.tsx

@@ -1,6 +1,35 @@
+import { useState } from "react";
 import "./app.css";
+import { motion } from "motion/react";
 
 export function Welcome() {
+  const [rolling, setRolling] = useState(false);
+  const [showResetPopup, setShowResetPopup] = useState(false);
+
+  const handleRollClick = () => {
+    if (!rolling) {
+      setRolling(true);
+    }
+  };
+
+  const handleAnimationComplete = () => {
+    setShowResetPopup(true);
+  };
+
+  const handleReset = () => {
+    setRolling(false);
+    setShowResetPopup(false);
+  };
+
+  const rollButtonVariants = {
+    initial: { scale: 1, rotateY: 0 },
+    clicked: {
+      scale: [1, 1.1, 1],
+      rotateY: [0, 20, 0],
+      transition: { duration: 0.5, ease: "easeInOut" },
+    },
+  };
+
   return (
     <div className="bg-gray-800">
       <h1 className="text-white text-3xl text-center">
@@ -10,19 +39,72 @@ export function Welcome() {
         Mind that gambling isn't that dangerous
       </p>
 
-      <div className="w-full h-100 bg-gray-500 mx-auto flex items-center justify-center mt-10">
+      <div className="w-full h-100 bg-gray-500 mx-auto flex items-center justify-center mt-10 relative">
-        <div className="w-35 h-18 bg-purple-500 rounded-lg flex items-center justify-center mt-60 mx-1.25">
+        <div className="flex flex-col items-center mt-10">
-          <h1 className="text-white text-2xl glow-text">PRICE-</h1>
+          <div className="w-full overflow-hidden mt-4">
+            <motion.div
+              className="flex space-x-3"
+              animate={rolling ? { x: [15000, -15110] } : null}
+              transition={
+                rolling
+                  ? {
+                      duration: 8,
+                      ease: [0.23, 1, 0.32, 1],
+                    }
+                  : { duration: 0 }
+              }
+              onAnimationComplete={handleAnimationComplete}
+            >
+              {Array.from({ length: 150 }).map((_, index) => (
+                <div
+                  key={index}
+                  className="w-80 h-40 bg-gray-200 shadow flex items-center justify-center text-3xl"
+                >
+                  {(() => {
+                    const chance = Math.random();
+                    let colorClass = "text-blue-500";
+                    if (chance < 0.7) {
+                      colorClass = "text-blue-500";
+                    } else if (chance < 0.9) {
+                      colorClass = "text-yellow-500";
+                    } else {
+                      colorClass = "text-red-500";
+                    }
+                    return <span className={colorClass}>{index + 1}</span>;
+                  })()}
+                </div>
+              ))}
+            </motion.div>
+          </div>
+          <motion.div
+            className="w-40 h-20 bg-green-500 rounded-lg flex items-center justify-center mt-4 mx-1.25 cursor-pointer"
+            onClick={handleRollClick}
+            variants={rollButtonVariants}
+            animate={rolling ? "clicked" : "initial"}
+          >
+            <h1 className="text-white text-4xl glow-text">ROLL</h1>
+          </motion.div>
+          <div className="flex items-center justify-center mt-2 space-x-2">
+            <span className="text-white text-xl">Cost per roll :</span>
+            <span className="text-white text-xl">6</span>
+            <span className="text-green-500 text-xl">$</span>
+          </div>
         </div>
 
-        <div className="w-40 h-20 bg-green-500 rounded-lg flex items-center justify-center mt-60 mx-1.25">
+        {showResetPopup && (
-          <h1 className="text-white text-4xl glow-text">ROLL</h1>
+          <div className="absolute inset-0 bg-gray-400 bg-opacity-90 flex items-center justify-center">
-        </div>
+            <div className="bg-white p-6 rounded-lg shadow-xl">
-
+              <h2 className="text-xl mb-4">Dragon Lore</h2>
-        <div className="w-35 h-18 bg-blue-500 rounded-lg flex items-center justify-center mt-60 mx-1.25">
+              <p className="mb-4">Would you like to reset?</p>
-          <h1 className="text-white text-2xl glow-text">CHANCE+</h1>
+              <button
-        </div>
+                className="px-4 py-2 bg-blue-500 text-white rounded"
-        <h1 className="text-white text-xl">Cost per roll :</h1>
+                onClick={handleReset}
+              >
+                Reset
+              </button>
+            </div>
+          </div>
+        )}
       </div>
     </div>
   );