@devrongx/games 0.1.0 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devrongx/games",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Game UI components for sports prediction markets",
   "license": "MIT",
   "main": "./src/index.ts",

package/src/games/prematch-bets/PreMatchQuestions.tsx

@@ -13,10 +13,8 @@ interface PreMatchQuestionsProps {
     onComplete: (selections: IUserBets) => void;
 }
 
-// ── Sassy typewriter — each word has its own exponential speed curve ──
-// Words alternate between snappy bursts and dramatic slow reveals.
-// Within each word, character delays follow an exponential curve.
-const useSassyTypewriter = (text: string, delay = 0) => {
+// ── Smooth typewriter — constant speed, clean and simple ──
+const useTypewriter = (text: string, speed = 45, delay = 0) => {
     const [displayed, setDisplayed] = useState("");
     const [done, setDone] = useState(false);
 
@@ -24,74 +22,28 @@ const useSassyTypewriter = (text: string, delay = 0) => {
         setDisplayed("");
         setDone(false);
 
-        // Build per-character delay schedule
-        const words = text.split(" ");
-        const charDelays: number[] = [];
-
-        // Alternating word styles for rhythm
-        // "burst" = types fast then decelerates at end
-        // "drag" = starts slow, accelerates to finish
-        // "snap" = entire word appears almost instantly
-        const wordStyles = ["drag", "snap", "burst", "drag", "snap", "burst"];
-
-        words.forEach((word, wIdx) => {
-            const style = wordStyles[wIdx % wordStyles.length];
-            const len = word.length;
-
-            for (let c = 0; c < len; c++) {
-                const t = len > 1 ? c / (len - 1) : 0; // 0..1 progress through word
-
-                let ms: number;
-                if (style === "burst") {
-                    // Starts fast (15ms), exponentially decelerates to ~80ms
-                    ms = 15 + 65 * Math.pow(t, 2.5);
-                } else if (style === "drag") {
-                    // Starts slow (90ms), exponentially accelerates to ~12ms
-                    ms = 90 - 78 * Math.pow(t, 2.2);
-                } else {
-                    // snap — near instant, 8ms per char
-                    ms = 8;
+        const timer = setTimeout(() => {
+            let i = 0;
+            const interval = setInterval(() => {
+                i++;
+                setDisplayed(text.slice(0, i));
+                if (i >= text.length) {
+                    clearInterval(interval);
+                    setDone(true);
                 }
-                charDelays.push(Math.round(ms));
-            }
-            // Pause between words — dramatic breath
-            charDelays.push(wIdx < words.length - 1 ? 120 : 0);
-        });
+            }, speed);
+            return () => clearInterval(interval);
+        }, delay);
 
-        const timers: ReturnType<typeof setTimeout>[] = [];
-        let cumulative = delay;
-        let charIdx = 0;
-
-        // Schedule each character reveal
-        for (let i = 0; i < charDelays.length; i++) {
-            cumulative += charDelays[i];
-            const idx = charIdx;
-            // The space between words is at charDelays entries where we push 120ms pause
-            // but we need to track actual characters in text
-            if (i < charDelays.length && idx <= text.length) {
-                timers.push(setTimeout(() => {
-                    setDisplayed(text.slice(0, idx + 1));
-                    if (idx + 1 >= text.length) setDone(true);
-                }, cumulative));
-            }
-            // Only increment charIdx for actual characters (not the inter-word pauses)
-            // Words joined by spaces: after each word's chars, next char is space
-            charIdx++;
-        }
-
-        return () => timers.forEach(clearTimeout);
-    }, [text, delay]);
+        return () => clearTimeout(timer);
+    }, [text, speed, delay]);
 
     return { displayed, done };
 };
 
 // ── Start slide ──
 const StartSlide = ({ onStart }: { onStart: () => void }) => {
-    const line1 = useSassyTypewriter("Choose your answers", 300);
-    const line2 = useSassyTypewriter(
-        "Pick your predictions first. We'll set up bet amounts after.",
-        line1.done ? 0 : 1800,
-    );
+    const line1 = useTypewriter("Choose your answers", 45, 300);
 
     return (
         <div className="flex flex-col items-center justify-center h-full px-8 gap-8">
@@ -100,14 +52,10 @@ const StartSlide = ({ onStart }: { onStart: () => void }) => {
                     {line1.displayed}
                     {!line1.done && <span className="inline-block w-[2px] h-[18px] bg-[#22E3E8] ml-[2px] align-middle animate-pulse" />}
                 </p>
-                <p className="text-[14px] text-white/50 font-medium text-center leading-relaxed max-w-[260px] min-h-[44px]" style={OUTFIT}>
-                    {line2.displayed}
-                    {line1.done && !line2.done && <span className="inline-block w-[2px] h-[14px] bg-white/30 ml-[2px] align-middle animate-pulse" />}
-                </p>
             </div>
 
             {/* Let's Go — simple cyan text link with arrow */}
-            {line2.done && (
+            {line1.done && (
                 <motion.button
                     initial={{ opacity: 0 }}
                     animate={{ opacity: 1 }}