update: improve UX

- hide SKIP until video data loaded - use all page area on mouse position detection
holenet · Aug 6, 2024 · dd6954f · dd6954f
1 parent 523df6c
commit dd6954f
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 21 deletions.
diff --git a/src/index.tsx b/src/index.tsx
@@ -76,7 +76,7 @@ function App() {
           y: (ev.offsetY / size - 0.5) * scale * 2,
         };
       };
-      svgElement.addEventListener("mousemove", mouseMove);
+      window.addEventListener("mousemove", mouseMove);
 
       const touchMove = (ev: TouchEvent) => {
         const svgRect = svgElement.getBoundingClientRect();
@@ -87,12 +87,12 @@ function App() {
         };
       };
 
-      svgElement.addEventListener("touchmove", touchMove);
-      svgElement.addEventListener("touchstart", touchMove);
+      window.addEventListener("touchmove", touchMove);
+      window.addEventListener("touchstart", touchMove);
       return () => {
-        svgElement.removeEventListener("mousemove", mouseMove);
-        svgElement.removeEventListener("touchstart", touchMove);
-        svgElement.removeEventListener("touchmove", touchMove);
+        window.removeEventListener("mousemove", mouseMove);
+        window.removeEventListener("touchstart", touchMove);
+        window.removeEventListener("touchmove", touchMove);
       };
     }
   }, [svgRef]);
@@ -247,10 +247,10 @@ function App() {
           <IntroScene onEnded={() => (showIntro.value = false)} />
         </div>
       )}
-      <div class="text-6xl font-bold mt-12" style={{ fontFamily: "fantasy", textWrap: "balance" }}>
+      <div class="text-6xl font-bold mt-12 shrink-0" style={{ fontFamily: "fantasy", textWrap: "balance" }}>
         Game of Cat and Mouse
       </div>
-      <div class="flex flex-col gap-1">
+      <div class="flex flex-col gap-1 shrink-0">
         <div
           className={classnames("font-bold", "text-3xl", "mt-4", "mb-8", {
             "text-green-500": isMouseWin.value,

diff --git a/src/introScene.tsx b/src/introScene.tsx
@@ -6,34 +6,45 @@ const BASE_URL = import.meta.env.BASE_URL;
 export default function IntroScene({ onEnded }) {
   const videoRef = useRef<HTMLVideoElement>();
   const isMuted = useSignal(true);
+  const isLoaded = useSignal(false);
 
   useEffect(() => {
-    videoRef.current?.play();
+    const videoElement = videoRef.current;
+    if (videoElement) {
+      videoElement.play();
+      videoElement.addEventListener("loadeddata", () => (isLoaded.value = true));
+    }
   }, []);
 
   useEffect(() => {
     const onKeyPress = (ev: KeyboardEvent) => {
-      console.log("e", ev);
       if (ev.code === "Escape" || ev.code === "Enter") onEnded();
     };
     window.addEventListener("keydown", onKeyPress);
     return () => window.removeEventListener("keydown", onKeyPress);
   }, []);
 
   return (
-    <div class="relative">
-      <video ref={videoRef} class="bg-black" muted={isMuted.value} onEnded={onEnded}>
+    <div class="relative w-full h-full">
+      <video ref={videoRef} class="bg-black h-full w-full" muted={isMuted.value} onEnded={onEnded}>
         <source src={`${BASE_URL}/intro.mp4`} type="video/mp4" />
       </video>
-      <button
-        class="absolute left-1 bottom-0 p-2 text-white opacity-75 hover:opacity-100 text-lg"
-        onClick={() => (isMuted.value = !isMuted.value)}
-      >
-        {isMuted.value ? <i class="fa-solid fa-volume-xmark" /> : <i class="fa-solid fa-volume-high"></i>}
-      </button>
-      <button class="absolute right-1 bottom-0 p-2 text-white opacity-75 hover:opacity-100 text-lg" onClick={onEnded}>
-        SKIP <i class="fa-solid fa-forward"></i>
-      </button>
+      {isLoaded.value && (
+        <>
+          <button
+            class="absolute left-1 bottom-0 p-2 text-white opacity-75 hover:opacity-100 text-lg"
+            onClick={() => (isMuted.value = !isMuted.value)}
+          >
+            {isMuted.value ? <i class="fa-solid fa-volume-xmark" /> : <i class="fa-solid fa-volume-high"></i>}
+          </button>
+          <button
+            class="absolute right-1 bottom-0 p-2 text-white opacity-75 hover:opacity-100 text-lg"
+            onClick={onEnded}
+          >
+            SKIP <i class="fa-solid fa-forward"></i>
+          </button>
+        </>
+      )}
     </div>
   );
 }