Moved and renamed homepage

2025-03-16 23:42:00 +01:00
parent f065c31fc3
commit 0647d5f90e
2 changed files with 5 additions and 5 deletions
--- a/app/pages/home.tsx
+++ b/app/pages/home.tsx
@@ -0,0 +1,111 @@
+import { useState } from "react";
+import "../app.css";
+import { motion } from "motion/react";
+
+export function HomePage() {
+  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">
+        Welcome to Aindustries' casino
+      </h1>
+      <p className="text-center text-white">
+        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 relative">
+        <div className="flex flex-col items-center mt-10">
+          <div className="w-full overflow-hidden mt-4">
+            <motion.div
+              className="flex space-x-3"
+              animate={rolling ? { x: [15000, -15110] } : undefined}
+              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>
+
+        {showResetPopup && (
+          <div className="absolute inset-0 bg-gray-400 bg-opacity-90 flex items-center justify-center">
+            <div className="bg-white p-6 rounded-lg shadow-xl">
+              <h2 className="text-xl mb-4">Dragon Lore</h2>
+              <p className="mb-4">Would you like to reset?</p>
+              <button
+                className="px-4 py-2 bg-blue-500 text-white rounded"
+                onClick={handleReset}
+              >
+                Reset
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}