feat(intro): skip on keypress or click (#92)

src/components/common/CinematicIntro.tsx

@@ -1,13 +1,11 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { motion, AnimatePresence } from "framer-motion";
-
 interface CinematicIntroProps {
   onComplete: () => void;
   startMusic: () => void;
 }
 
 type Phase = "black" | "white-lceteam" | "white-esrb" | "out";
-
 const TIMINGS = {
   black: 800,
   "white-lceteam": 3000,
@@ -15,31 +13,49 @@ const TIMINGS = {
   out: 800,
 };
 
-export function CinematicIntro({ onComplete, startMusic }: CinematicIntroProps) {
+export function CinematicIntro({
+  onComplete,
+  startMusic,
+}: CinematicIntroProps) {
   const [phase, setPhase] = useState<Phase>("black");
+  const skipped = useRef(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const skip = () => {
+    if (skipped.current) return;
+    skipped.current = true;
+    onComplete();
+  };
 
   useEffect(() => {
     startMusic();
-
     const run = async () => {
       await new Promise((r) => setTimeout(r, TIMINGS.black));
+      if (skipped.current) return;
       setPhase("white-lceteam");
-
       await new Promise((r) => setTimeout(r, TIMINGS["white-lceteam"]));
+      if (skipped.current) return;
       setPhase("white-esrb");
-
       await new Promise((r) => setTimeout(r, TIMINGS["white-esrb"]));
+      if (skipped.current) return;
       setPhase("out");
-
       await new Promise((r) => setTimeout(r, TIMINGS.out));
+      if (skipped.current) return;
       onComplete();
     };
 
     run();
+    const container = containerRef.current;
+    if (container) container.focus();
   }, [onComplete, startMusic]);
 
   return (
-    <div className="absolute inset-0 z-50 bg-black">
+    <div
+      ref={containerRef}
+      tabIndex={0}
+      onClick={skip}
+      onKeyDown={skip}
+      className="absolute inset-0 z-50 bg-black outline-none"
+    >
       <AnimatePresence initial={false}>
         {phase === "black" && (
           <motion.div
@@ -51,7 +67,9 @@ export function CinematicIntro({ onComplete, startMusic }: CinematicIntroProps)
           />
         )}
 
-        {(phase === "white-lceteam" || phase === "white-esrb" || phase === "out") && (
+        {(phase === "white-lceteam" ||
+          phase === "white-esrb" ||
+          phase === "out") && (
           <motion.div
             key="white-bg"
             className="absolute inset-0 bg-white flex items-center justify-center"